refactor and implement behaviors

jorgecasar · Sep 5, 2015 · 68e58cb · 68e58cb
1 parent ead7c17
commit 68e58cb
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 81 deletions.
diff --git a/bower.json b/bower.json
@@ -23,9 +23,17 @@
     "tests"
   ],
   "dependencies": {
+    "iron-behaviors": "PolymerElements/iron-behaviors#~1.0.8",
     "iron-component-page": "PolymerElements/iron-component-page#~1.0.5",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#~1.0.4",
+    "iron-input": "PolymerElements/iron-input#~1.0.6",
     "paper-badge": "PolymerElements/paper-badge#~1.0.3",
+    "paper-input": "PolymerElements/paper-input#~1.0.13",
     "polymer": "Polymer/polymer#^1.0.0",
     "prism": "~1.0.1"
+  },
+  "devDependencies": {
+    "test-fixture": "PolymerElements/test-fixture#~1.0.0",
+    "web-component-tester": "~3.3.21"
   }
 }
diff --git a/input-password.html b/input-password.html
@@ -6,12 +6,47 @@
 
 <!-- Import Polymer -->
 <link rel="import" href="../polymer/polymer.html">
-
+<link rel="import" href="../iron-input/iron-input.html">
+<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
+<link rel="import" href="../paper-input/paper-input-behavior.html">
 <!-- Define your custom element -->
 <dom-module id="input-password">
 	<link rel="import" type="css" href="input-password.css">
+	<style>
+		:host{
+			position: relative;
+			display: block;
+		}
+	</style>
 	<template>
-		<input type="password" id="input" name="{{name}}" value="{{value}}" placeholder="{{placeholder}}" disabled?="{{disabled}}" required?="{{required}}" readonly?="{{readonly}}" aria-label="{{label || placeholder}}"><button id="visibilityButton">{{toggleText}}</button>
+		<input is="iron-input" id="input"
+        aria-labelledby$="[[_ariaLabelledBy]]"
+        aria-describedby$="[[_ariaDescribedBy]]"
+        disabled$="[[disabled]]"
+        bind-value="{{value}}"
+        invalid="{{invalid}}"
+        prevent-invalid-input="[[preventInvalidInput]]"
+        allowed-pattern="[[allowedPattern]]"
+        validator="[[validator]]"
+        type="password"
+        pattern$="[[pattern]]"
+        required$="[[required]]"
+        autocomplete$="[[autocomplete]]"
+        autofocus$="[[autofocus]]"
+        inputmode$="[[inputmode]]"
+        minlength$="[[minlength]]"
+        maxlength$="[[maxlength]]"
+        min$="[[min]]"
+        max$="[[max]]"
+        step$="[[step]]"
+        name$="[[name]]"
+        placeholder$="[[placeholder]]"
+        readonly$="[[readonly]]"
+        list$="[[list]]"
+        size$="[[size]]"
+        autocapitalize$="[[autocapitalize]]"
+        autocorrect$="[[autocorrect]]">
+      <button id="visibilityButton">{{toggleText}}</button>
 	</template>
 	<script src="input-password.js"></script>
 </dom-module>
diff --git a/input-password.js b/input-password.js
@@ -13,6 +13,12 @@
 	Polymer({
 		is: 'input-password',
 
+		behaviors: [
+			Polymer.IronFormElementBehavior,
+			Polymer.PaperInputBehavior,
+			Polymer.IronControlState
+		],
+
 		/**
 		 * Fired when the value of is shown.
 		 * @event showValue
@@ -24,71 +30,6 @@
 		 */
 
 		properties: {
-
-			/**
-			 * Placeholder text that hints to the user
-			 * what can be entered in the input.
-			 *
-			 * @attribute placeholder
-			 * @type string
-			 * @default ''
-			 */
-			placeholder: {
-				type: String,
-				value: ''
-			},
-
-			/**
-			 * If true, this input cannot be focused
-			 * and the user cannot change its value.
-			 *
-			 * @attribute disabled
-			 * @type boolean
-			 * @default false
-			 */
-			disabled: {
-				type: Boolean,
-				value: false
-			},
-
-			/**
-			 * If true, the user cannot modify
-			 * the value of the input.
-			 *
-			 * @attribute readonly
-			 * @type boolean
-			 * @default false
-			 */
-			readonly: {
-				type: Boolean,
-				value: false
-			},
-
-			/**
-			 * If true, the input is invalid until
-			 * the value becomes non-null.
-			 *
-			 * @attribute required
-			 * @type boolean
-			 * @default false
-			 */
-			required: {
-				type: Boolean,
-				value: false
-			},
-
-			/**
-			 * The value of the input.
-			 *
-			 * @attribute value
-			 * @type string
-			 * @default ''
-			 */
-			value: {
-				type: String,
-				value: ''
-			},
-
 			/**
 			 * If true, the user can show the password.
 			 *
@@ -128,59 +69,72 @@
 		},
 
 		observers: [
-			'_visibleChanged(visible)'
+			'_visibleChanged(visible)',
+			'_toggleTextChanged(toggleText)'
 		],
 
 		listeners: {
 			'visibilityButton.tap': 'toggle'
 		},
 
 		attached: function() {
-			this.showText = this.getShowText();
-			this.hideText = this.getHideText();
+			this._toggleTextChanged();
 			this._visibleChanged();
 		},
 
 		/**
 		 * Observer for visible property
 		 */
 		_visibleChanged: function() {
-			this[this.visible ? 'showValue' : 'hideValue']();
+			this[this.visible ? '_showValue' : '_hideValue']();
+		},
+
+		/**
+		 * Observer for toggle-text property
+		 */
+		_toggleTextChanged: function() {
+			this._showText = this.showText;
+			this._hideText = this.hideText;
 		},
 
 		/**
 		 * Get the text of the button for show action
 		 */
-		getShowText: function() {
+		get showText() {
 			return this.toggleText.split('/')[0];
 		},
 
 		/**
 		 * Get the text of the button for hide action
 		 */
-		getHideText: function() {
-			return this.toggleText.split('/')[1] || this.showText;
+		get hideText() {
+			return this.toggleText.split('/')[1] || this._showText;
 		},
 
 		/**
 		 * Action to show the input value
 		 */
-		showValue: function() {
+		_showValue: function() {
+			if( this.visible ) this.visible = true;
 			this.visible = true;
 			this.$.input.type = 'text';
-			this.classList.add(this.visibleClass);
-			this.$.visibilityButton.innerHTML = this.hideText;
+			if(this.visibleClass) {
+				this.toggleClass(this.visibleClass, this.visible);
+			}
+			this.$.visibilityButton.innerHTML = this._hideText;
 			this.fire('showValue');
 		},
 
 		/**
 		 * Action to hide the input value
 		 */
-		hideValue: function() {
-			this.visible = false;
+		_hideValue: function() {
+			if( !this.visible ) this.visible = false;
 			this.$.input.type = 'password';
-			this.classList.remove(this.visibleClass);
-			this.$.visibilityButton.innerHTML = this.showText;
+			if(this.visibleClass) {
+				this.toggleClass(this.visibleClass, this.visible);
+			}
+			this.$.visibilityButton.innerHTML = this._showText;
 			this.fire('hideValue');
 		},