changes in required validation iso date format minor bugs addons

biztek · Oct 15, 2016 · effa713 · effa713
1 parent 3177752
commit effa713
Show file tree

Hide file tree

Showing 6 changed files with 223 additions and 118 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,11 @@
+{
+  "extends": "eslint:recommended",
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "rules": {
+    "no-console": "off",
+    "indent": ["error", 2],
+  }
+}
diff --git a/.htmlhintrc b/.htmlhintrc
@@ -0,0 +1,32 @@
+{
+  "tagname-lowercase": true,
+  "attr-lowercase": true,
+  "attr-value-double-quotes": true,
+  "doctype-first": true,
+  "tag-pair": true,
+  "spec-char-escape": true,
+  "id-unique": true,
+  "src-not-empty": true,
+  "attr-no-duplication": true,
+  "title-require": true,
+  "doctype-first": false,
+  "jshint": {
+    "node": true,
+    "esnext": true,
+    "bitwise": true,
+    "eqeqeq": true,
+    "immed": true,
+    "latedef": "nofunc",
+    "newcap": true,
+    "noarg": true,
+    "regexp": true,
+    "undef": true,
+    "smarttabs": true,
+    "asi": true,
+    "debug": true
+  },
+  "csslint": {
+    "display-property-grouping": true,
+    "known-properties": true
+  }
+}
diff --git a/bower.json b/bower.json
@@ -1,17 +1,18 @@
 {
-    "name": "pmp-simple-date-input",
-    "main": "pmp-simple-date-input.html",
-    "dependencies": {
-        "polymer": "Polymer/polymer#^1.4.0",
-        "moment": "^2.15.1",
-        "paper-input": "PolymerElements/paper-input#^1.1.20",
-        "iron-input": "PolymerElements/iron-input#^1.0.10"
-    },
-    "devDependencies": {
-        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-        "web-component-tester": "^4.0.0",
-        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
-        "test-fixture": "PolymerElements/test-fixture#^1.1.1"
-    }
+  "name": "pmp-simple-date-input",
+  "main": "pmp-simple-date-input.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.4.0",
+    "moment": "^2.15.1",
+    "paper-input": "PolymerElements/paper-input#^1.1.20",
+    "iron-input": "PolymerElements/iron-input#^1.0.10",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.6"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.1.1"
+  }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -20,7 +20,8 @@
       <h3>Basic pmp-simple-date-input Demo</h3>
       <demo-snippet>
         <template>
-          <pmp-simple-date-input></pmp-simple-date-input>
+
+          <pmp-simple-date-input auto-validate required></pmp-simple-date-input>
         </template>
       </demo-snippet>
     </div>

diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 </head>
 
 <body>
-      <iron-component-page src="pmp-simple-date-input.html"></iron-component-page>
+      <iron-component-page></iron-component-page>
 </body>
 
 </html>
diff --git a/pmp-simple-date-input.html b/pmp-simple-date-input.html
@@ -3,6 +3,8 @@
 <link rel="import" href="../paper-input/paper-input-container.html">
 <link rel="import" href="../iron-input/iron-input.html">
 <link rel="import" href="../paper-input/paper-input-error.html">
+<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
+
 <link rel="import" href="pmp-moment.html">
 <!--
 `pmp-simple-date-input`
@@ -11,105 +13,163 @@
 @demo demo/index.html
 -->
 <dom-module id="pmp-simple-date-input">
-      <template>
-            <style>
-                   :host {
-                        display: block;
-                  }
-            </style>
-            <paper-input-container id="container" disabled$="[[disabled]]" always-float-label="true" invalid="[[invalid]]">
-                  <label>[[label]]</label>
-                  <input is="iron-input" aria-labelledby$="[[_ariaLabelledBy]]" aria-describedby$="[[_ariaDescribedBy]]" id="input" disabled$="[[disabled]]" bind-value="{{value}}" required$="[[required]]" auto-validate="[[autoValidate]]" invalid="{{invalid}}" maxlength="10"
-                      allowed-pattern="[0-9\/]" placeholder="MM/DD/YYYY" pattern="{{pattern}}">
-                  <template is="dom-if" if="[[errorMessage]]">
-                        <paper-input-error id="error">[[errorMessage]]</paper-input-error>
-                  </template>
-            </paper-input-container>
-      </template>
-
-      <script>
-            'use strict';
-            Polymer({
-                  is: 'pmp-simple-date-input',
-                  behaviors: [
-                        Polymer.PaperInputBehavior
-                  ],
-                  properties: {
-                        label: {
-                              type: String,
-                              value: 'Date of Birth'
-                        },
-                        value: {
-                              type: String,
-                              notify: true,
-                              observer: '_onValueChanged'
-                        },
-                        invalid: {
-                              type: Boolean,
-                              value: false,
-                              notify: true
-                        },
-                        autoValidate: {
-                              type: Boolean,
-                              value: false,
-                              notify: true
-                        },
-                        required: {
-                              type: Boolean,
-                              value: false,
-                              notify: true
-                        },
-                        pattern: {
-                              type: String,
-                              value: 'MM/DD/YYYY',
-                              observer: '_patternChanged'
-                        },
-                        disabled: {
-                              type: Boolean,
-                              value: false
-                        }
-                  },
-                  _onValueChanged: function(value, oldValue) {
-                        if (oldValue == undefined || value === oldValue)
-                              return;
-                        value = value ? value.toString() : '';
-                        let start = this.$.input.selectionStart;
-                        let initialSlashesBeforeCaret = value.substr(0, start).split('/').length - 1;
-                        value = value.replace(/\//g, '');
-                        let shouldFormat = value.length <= this.pattern.replace(/\//g, '').length;
-                        let formattedValue = '';
-                        let currentSlashIndex = 0;
-                        let totalSlashesAdded = 0;
-                        for (let i = 0; i < value.length; i++) {
-                              currentSlashIndex = this.pattern.indexOf('/', currentSlashIndex);
-                              if (shouldFormat && i == (currentSlashIndex - totalSlashesAdded)) {
-                                    formattedValue += '/';
-                                    currentSlashIndex++;
-                                    totalSlashesAdded++;
-                              }
-                              formattedValue += value[i];
-                        }
-                        let updatedSlashesBeforeCaret = formattedValue.substr(0, start).split('/').length - 1;
-                        let slashesDifference = updatedSlashesBeforeCaret - initialSlashesBeforeCaret;
-                        this.updateValueAndPreserveCaret(formattedValue.trim());
-                        this.$.input.selectionStart = this.$.input.selectionEnd = start + slashesDifference;
-                        if (this.autoValidate) {
-                              this.validate();
-                        }
-                  },
-                  validate: function() {
-                        if (this.value.length == 10) {
-                              this.invalid = !(moment(this.value, this._pattern, true).isValid());
-                              this.set('invalid', this.invalid);
-                        }
-                  },
-                  _patternChanged: function() {
-                        var regex = '';
-                        regex = this.pattern.replace(/\s/g, '\\s');
-                        regex = regex.replace(/X/gi, '\\d');
-                        regex = regex.replace(/\+/g, '\\+');
-                        this.$.input.pattern = regex;
-                  },
-            });
-      </script>
+    <template>
+    <style>
+      :host {
+        display: block;
+      }
+    </style>
+
+    <paper-input-container id="container"
+      disabled$="[[disabled]]"
+      always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]"
+      invalid="[[invalid]]">
+
+    <label hidden$="[[!label]]">[[label]]</label>
+
+    <input is="iron-input" id="input"
+      aria-labelledby$="[[_ariaLabelledBy]]"
+      aria-describedby$="[[_ariaDescribedBy]]"
+      disabled$="[[disabled]]"
+      bind-value="{{value}}"
+      required$="[[required]]"
+      name$="[[name]]"
+      prevent-invalid-input
+      invalid="{{invalid}}"
+      autofocus$="[[autofocus]]"
+      inputmode$="[[inputmode]]"
+      maxlength$="[[maxlength]]"
+      allowed-pattern="[0-9\/]"
+      placeholder$="[[placeholder]]">
+
+    <template is="dom-if" if="[[errorMessage]]">
+      <paper-input-error id="error">[[errorMessage]]</paper-input-error>
+    </template>
+
+    </paper-input-container>
+    </template>
+
+    <script>
+        'use strict';
+        Polymer({ // jshint ignore:line
+            is: 'pmp-simple-date-input',
+            behaviors: [
+                Polymer.PaperInputBehavior, // jshint ignore:line
+                Polymer.IronFormElementBehavior // jshint ignore:line
+            ],
+            properties: {
+                label: {
+                    type: String,
+                    value: 'Date of Birth'
+                },
+                value: {
+                    type: String,
+                    notify: true,
+                    observer: '_onValueChanged'
+                },
+                invalid: {
+                    type: Boolean,
+                    value: false,
+                    notify: true
+                },
+                autoValidate: {
+                    type: Boolean,
+                    value: false,
+                    notify: true
+                },
+                required: {
+                    type: Boolean,
+                    value: false,
+                    notify: true
+                },
+                disabled: {
+                    type: Boolean,
+                    value: false
+                },
+                datePattern: {
+                    type: String,
+                    value: 'MM/DD/YYYY',
+                    observer: '_patternChanged'
+                },
+                placeholder: {
+                    type: String,
+                    value: 'MM/DD/YYYY'
+                },
+                maxlength: {
+                    type: Number,
+                    value: 10
+                }
+            },
+
+            observers: [
+                '_onFocusedChanged(focused)'
+            ],
+
+            ready: function() {
+                if (this.value)
+                    this._handleAutoValidate();
+            },
+
+            _onValueChanged: function(value, oldValue) {
+                if (typeof oldValue === 'undefined' || value === oldValue)
+                    return;
+                value = value ? value.toString() : '';
+                let start = this.$.input.selectionStart;
+                let initialSlashesBeforeCaret = value.substr(0, start).split('/').length - 1;
+                value = value.replace(/\//g, '');
+                let shouldFormat = value.length <= this.datePattern.replace(/\//g, '').length;
+                let formattedValue = '';
+                let currentSlashIndex = 0;
+                let totalSlashesAdded = 0;
+                for (let i = 0; i < value.length; i++) {
+                    currentSlashIndex = this.datePattern.indexOf('/', currentSlashIndex);
+                    if (shouldFormat && i == (currentSlashIndex - totalSlashesAdded)) { // jshint ignore:line
+                        formattedValue += '/';
+                        currentSlashIndex++;
+                        totalSlashesAdded++;
+                    }
+                    formattedValue += value[i];
+                }
+                let updatedSlashesBeforeCaret = formattedValue.substr(0, start).split('/').length - 1;
+                let slashesDifference = updatedSlashesBeforeCaret - initialSlashesBeforeCaret;
+                this.updateValueAndPreserveCaret(formattedValue.trim());
+                this.$.input.selectionStart = this.$.input.selectionEnd = start + slashesDifference;
+                this._handleAutoValidate();
+            },
+
+            _onFocusedChanged: function(focused) {
+                if (!focused) {
+                    this._handleAutoValidate();
+                }
+            },
+
+            validate: function() {
+                var valid = this.$.input.validate();
+                if (this.value && this.value.length === 10) {
+                    this.invalid = !(moment(this.value, this.datePattern, true).isValid()); // jshint ignore:line
+                    this.$.container.invalid = this.invalid;
+                    this.set('invalid', this.invalid);
+                } else {
+                    this.$.container.invalid = !valid;
+                }
+
+                this.$.container.updateAddons({
+                    inputElement: this.$.input,
+                    value: this.value,
+                    invalid: !valid
+                });
+                return valid;
+            },
+
+            _patternChanged: function() {
+                var regex = '';
+                regex = this.datePattern.replace(/\s/g, '\\s');
+                regex = regex.replace(/M/gi, '\d');
+                regex = regex.replace(/D/gi, '\\d');
+                regex = regex.replace(/Y/gi, '\\d');
+                regex = regex.replace(/\+/g, '\\+');
+                this.$.input.pattern = regex;
+            },
+        });
+    </script>
 </dom-module>
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ @@
     </head>
     <body>
-          <iron-component-page src="pmp-simple-date-input.html"></iron-component-page>
+          <iron-component-page></iron-component-page>
     </body>
     </html>