add iron-validatable-behavior to steps

Zecat · Jan 14, 2016 · a0b038c · a0b038c
1 parent ff8a2b8
commit a0b038c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 20 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-stepper",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "authors": [
     "Zecat <[email protected]>"
   ],
@@ -30,10 +30,12 @@
     "iron-flex-layout": "PolymerElements/iron-flex-layout#~1.2.2",
     "neon-animation": "PolymerElements/neon-animation#~1.0.9",
     "paper-input": "PolymerElements/paper-input#~1.1.4",
-    "neon-advanced-animations": "Zecat/neon-advanced-animations#~1.1.0"
+    "neon-advanced-animations": "Zecat/neon-advanced-animations#~1.1.0",
+    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#~1.0.5"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "web-component-tester": "*"
+    "web-component-tester": "*",
+    "iron-form": "PolymerElements/iron-form#~1.0.13"
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -16,16 +16,19 @@
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     <link rel="import" href="../../paper-input/paper-input.html">
     <link rel="import" href="../../paper-input/paper-textarea.html">
+    <link rel="import" href="../../iron-form/iron-form.html">
     <link rel="import" href="../paper-stepper.html">
     <link rel="import" href="../paper-step.html">
   </head>
   <body unresolved>
 
   <paper-stepper linear>
-    <paper-step label="Create an account" summarize="Summarize if needed">
-      <paper-input label="E-mail"></paper-input>
-      <paper-input type="password" label="Password"></paper-input>
-      <paper-input type="password" label="Confirm password"></paper-input>
+    <paper-step id="step" label="Create an account" summarize="Summarize if needed">
+      <form is="iron-form" id="form" method="post" action="/">
+        <paper-input label="Pseudo*" required error-message="required"></paper-input>
+        <paper-input type="password" label="Password"></paper-input>
+        <paper-input type="password" label="Confirm password"></paper-input>
+      </form>
     </paper-step>
     <paper-step editable label="Enter personal informations" optional>
       <paper-input label="Name"></paper-input>
@@ -36,5 +39,14 @@
     </paper-step>
   </paper-stepper>
 
+  <script>
+    var step = document.getElementById('step');
+    var form = document.getElementById('form');
+
+    step._getValidity = function() {
+      return form.validate();
+    }
+  </script>
+
   </body>
 </html>
diff --git a/paper-step.html b/paper-step.html
@@ -13,6 +13,7 @@
 <link rel="import" href="../iron-icons/iron-icons.html">
 <link rel="import" href="../iron-icons/editor-icons.html">
 <link rel="import" href="../iron-icon/iron-icon.html">
+<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
 <link rel="import" href="../neon-advanced-animations/unroll-animation.html">
 <link rel="import" href="../neon-advanced-animations/roll-up-animation.html">
 <link rel="import" href="../neon-animation/neon-animatable.html">
@@ -62,7 +63,7 @@
         background: var(--paper-grey-600);
       }
 
-      :host[opened] .stepper-circle, :host[validated] .stepper-circle {
+      :host[opened] .stepper-circle, :host:not([invalid]) .stepper-circle {
         background: var(--default-primary-color, --google-blue-500) !important;
       }
 
@@ -120,10 +121,10 @@
 
     <div class="layout horizontal header" on-tap="selectStep">
       <div class="stepper-circle">
-        <template is="dom-if" if="[[validated]]">
+        <template is="dom-if" if="[[!invalid]]">
           <iron-icon icon="[[chooseIcon(editable)]]"></iron-icon>
         </template>
-        <template is="dom-if" if="[[!validated]]">
+        <template is="dom-if" if="[[invalid]]">
           <span>[[index]]</span>
         </template>
       </div>
@@ -209,19 +210,18 @@
 
       selectable: {
         type: Boolean,
-        computed: '_computeSelectable(linearStepper, validated, editable, opened)',
+        computed: '_computeSelectable(linearStepper, invalid, editable, opened)',
         reflectToAttribute: true
       },
 
-      validated: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true
-      },
+      invalid: {
+        value: true
+      }
     },
 
     behaviors: [
       Polymer.IronCheckedElementBehavior,
+      Polymer.IronValidatableBehavior,
       Polymer.NeonAnimationRunnerBehavior
     ],
 
@@ -238,8 +238,9 @@
     },
 
     continue: function() {
-      this.validated = true;
-      this.fire('continue');
+      if(this.validate()) {
+        this.fire('continue');
+      }
     },
 
     hide: function() {
@@ -274,9 +275,9 @@
       }
     },
 
-    _computeSelectable: function(linearStepper, validated, editable, opened) {
+    _computeSelectable: function(linearStepper, invalid, editable, opened) {
       //to factorize
-      return ! (opened || (linearStepper && !validated) || (validated && !editable) );
+      return ! (opened || (linearStepper && invalid) || !(invalid || editable) );
     }
   });