update to use html5 constraints api (from core-input update)

googlearchive · Jul 24, 2014 · 6c744e7 · 6c744e7
1 parent 90de2d4
commit 6c744e7
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 14 deletions.
diff --git a/demo.html b/demo.html
@@ -35,7 +35,7 @@
 
     <br>
 
-    <paper-input label="Type only numbers..." validate="^[0-9]*$" error="Input is not a number!"></paper-input>
+    <paper-input label="Type only numbers..." type="number" error="Input is not a number!"></paper-input>
 
     <br>
 
@@ -51,7 +51,7 @@
 
     <br>
 
-    <paper-input floatingLabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"></paper-input>
+    <paper-input floatingLabel label="Type only numbers... (floating)" type="number" error="Input is not a number!"></paper-input>
 
     <br>
 

diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 </head>
 <body unresolved>
 
-  <core-component-page></core-component-page>
+  <core-component-page sources='["paper-input.html","../core-input/core-input.html"]'></core-component-page>
 
 </body>
 </html>
diff --git a/paper-input.html b/paper-input.html
@@ -96,7 +96,7 @@
     </div>
 
     <div id="errorContainer">
-      <div id="error" role="alert" aria-hidden="{{!invalid}}">{{error}}</div>
+      <div id="error" role="alert" aria-hidden="{{!invalid}}">{{error || validationMessage}}</div>
       <div id="errorIcon"></div>
     </div>
 
@@ -144,6 +144,16 @@
        */
       maxRows: 0,
 
+      /**
+       * The message to display if the input value fails validation. If this
+       * is unset or the empty string, a default message is displayed depending
+       * on the type of validation error.
+       *
+       * @attribute error
+       * @type string
+       */
+      error: '',
+
       focused: false,
       pressed: false,
 
@@ -177,6 +187,19 @@
         }
       },
 
+      toggleLabel: function(force) {
+        var v = force !== undefined ? force : this.inputValue;
+
+        if (!this.floatingLabel) {
+          this.$.label.classList.toggle('hidden', v);
+        }
+
+        if (this.floatingLabel && !this.focused) {
+          this.$.label.classList.toggle('hidden', v);
+          this.$.floatedLabel.classList.toggle('hidden', !v);
+        }
+      },
+
       rowsChanged: function() {
         if (this.multiline && !isNaN(parseInt(this.rows))) {
           this.$.minInputHeight.innerHTML = '';
@@ -209,14 +232,7 @@
           this.resizeInput();
         }
 
-        if (!this.floatingLabel) {
-          this.$.label.classList.toggle('hidden', this.inputValue);
-        }
-
-        if (this.floatingLabel && !this.focused) {
-          this.$.label.classList.toggle('hidden', this.inputValue);
-          this.$.floatedLabel.classList.toggle('hidden', !this.inputValue);
-        }
+        this.toggleLabel();
       },
 
       labelChanged: function() {
@@ -249,26 +265,36 @@
         this.focused = true;
       },
 
+      shouldFloatLabel: function() {
+        // if type = number, the input value is the empty string until a valid number
+        // is entered so we must do some hacks here
+        return this.inputValue || (this.type === 'number' && !this.validity.valid);
+      },
+
       inputBlurAction: function() {
         this.super(arguments);
 
         this.$.underlineHighlight.classList.remove('focused');
         this.$.caret.classList.remove('focused');
+
         if (this.floatingLabel) {
           this.$.floatedLabel.classList.remove('focused');
           this.$.floatedLabel.classList.remove('focusedColor');
-          if (!this.inputValue) {
+          if (!this.shouldFloatLabel()) {
             this.$.floatedLabel.classList.add('hidden');
           }
         }
-        if (!this.inputValue) {
+
+        // type = number hack. see core-input for more info
+        if (!this.shouldFloatLabel()) {
           this.$.label.classList.remove('hidden');
           this.$.label.classList.add('animating');
           this.async(function() {
             this.$.label.style.webkitTransform = 'none';
             this.$.label.style.transform = 'none';
           });
         }
+
         this.focused = false;
       },
 
@@ -351,6 +377,19 @@
         }
       },
 
+      keydownAction: function() {
+        this.super();
+
+        // more type = number hacks. see core-input for more info
+        if (this.type === 'number') {
+          this.async(function() {
+            if (!this.inputValue) {
+              this.toggleLabel(!this.validity.valid);
+            }
+          });
+        }
+      },
+
       keypressAction: function() {
         if (this.animating) {
           this.transitionEndAction();