Add support for WML <input> format attribute
Change-Id: I0a03a7144850f583a610129cb63ab7fe22d58c4c
diff --git a/assets/wml/swe_wml.js b/assets/wml/swe_wml.js
index 5e98452..9b35023 100755
--- a/assets/wml/swe_wml.js
+++ b/assets/wml/swe_wml.js
@@ -107,6 +107,7 @@
replaceVariablesInTextContentBySpan();
fixTextContentInAnchorTasks();
initializeSelectElements();
+ parseFormatAttributeInInputtElements();
scheduleTimerTaskIfNeeded(currentActiveCard);
handleOnNavigationIntrinsicEvent();
};
@@ -408,6 +409,80 @@
}
}
+var validateInputValue = function(event) {
+ var input = event.target;
+ var pattern = new RegExp(input.dataset.wml_pattern, "g");
+ var value = input.value;
+ if (!pattern.test(value)) {
+ input.value = input.dataset.old_value;
+ } else {
+ input.dataset.old_value = input.value;
+ }
+}
+
+function parseFormatAttributeInInputtElements() {
+
+ var regex = /(^(([\*]{1})|([0-9]*))([NnXxAa]{1})$)/g;
+ var symbols = "\!\"\#\$\%\&\'\(\)\*\+\,\\.\/\:\;\<\=\>\?\@\\\^\_\`\{\|\}\~\\-\\\\[\\]";
+
+ var inputElements = document.getElementsByClassName('wml_input');
+ for(var i=0, l=inputElements.length; i<l; i++) {
+ var input = inputElements[i];
+ var format = input.dataset.wml_format;
+ var res = regex.test(format);
+ regex.lastIndex = 0;
+
+ if (res) {
+ var pattern = "";
+ var fl = format.length;
+ var count = format.slice(0, fl-1);
+ switch(format.charAt(fl-1)) {
+ case 'A':
+ // WML-1.3: Entry of any uppercase letter, symbol, or punctuation character. Numeric characters are excluded.
+ // RegEx: Everthing else except lowercase letters and nummeric characters.
+ pattern = "[^a-z^0-9]";
+ break;
+ case 'a':
+ // WML-1.3: Entry of any lowercase letter, symbol, or punctuation character. Numeric characters are excluded.
+ // RegEx: Everthing else except uppercase letters and nummeric characters.
+ pattern = "[^A-Z^0-9]";
+ break;
+ case 'N':
+ // WML-1.3: entry of any numeric character.
+ pattern = "[0-9]";
+ input.inputmode = "numeric";
+ break;
+ case 'n':
+ // WML-1.3: entry of any numeric, symbol, or punctuation character.
+ pattern = "[0-9" + symbols + "]";
+ break;
+ case 'X':
+ // WML-1.3: entry of any uppercase letter, numeric character, symbol, or punctuation character.
+ pattern = "[^a-z]";
+ input.inputmode = "verbatim";
+ break;
+ case 'x':
+ // WML-1.3: entry of any lowercase letter, numeric character, symbol, or punctuation character.
+ pattern = "[^A-Z]";
+ input.inputmode = "verbatim";
+ break;
+ }
+
+ if (count == "*") {
+ pattern = "^(" + pattern + "*)$";
+ } else {
+ input.maxLength = count;
+ input.pattern = ".{" + count + "}";
+ pattern = "^(" + pattern + "{0," + count + "})$";
+ }
+ input.dataset.wml_pattern = pattern;
+ input.setAttribute("required", "");
+ input.addEventListener("input", validateInputValue);
+ console.log("WML input format = " + format + ", equivalent pattern = " + pattern);
+ }
+ }
+}
+
function updateVariableInPostfields(form)
{
var postfields = currentActiveCard.getElementsByClassName('wml_postfield');
diff --git a/assets/wml/swe_wml.xsl b/assets/wml/swe_wml.xsl
index f591824..744c20e 100755
--- a/assets/wml/swe_wml.xsl
+++ b/assets/wml/swe_wml.xsl
@@ -323,6 +323,10 @@
</xsl:choose>
<xsl:choose><xsl:when test="@name"><xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute></xsl:when></xsl:choose>
<xsl:choose><xsl:when test="@value"><xsl:attribute name="value"><xsl:value-of select="@value"/></xsl:attribute></xsl:when></xsl:choose>
+ <xsl:choose><xsl:when test="@maxlength"><xsl:attribute name="maxLength"><xsl:value-of select="@maxlength"/></xsl:attribute></xsl:when></xsl:choose>
+ <xsl:choose><xsl:when test="@format"><xsl:attribute name="data-wml_format"><xsl:value-of select="@format"/></xsl:attribute></xsl:when></xsl:choose>
+ <xsl:choose><xsl:when test="@emptyok = 'false'"><xsl:attribute name="required"></xsl:attribute></xsl:when></xsl:choose>
+ <xsl:attribute name="data-old_value"></xsl:attribute>
</input>
</xsl:template>