Add support for WML <input> format attribute

Change-Id: I0a03a7144850f583a610129cb63ab7fe22d58c4c

2 files changed, 79 insertions, 0 deletions

diff --git a/assets/wml/swe_wml.js b/assets/wml/swe_wml.js
index 5e98452a..9b350232 100755
--- a/assets/wml/swe_wml.js
+++ b/assets/wml/swe_wml.js
@@ -107,6 +107,7 @@ window.onload = function()
     replaceVariablesInTextContentBySpan();
     fixTextContentInAnchorTasks();
     initializeSelectElements();
+    parseFormatAttributeInInputtElements();
     scheduleTimerTaskIfNeeded(currentActiveCard);
     handleOnNavigationIntrinsicEvent();
 };
@@ -408,6 +409,80 @@ function refreshVariablesInControlElements()
     }
 }
 
+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 f5918247..744c20ec 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>