upgrade for javascript in place

brenthosie · Jul 17, 2015 · 707b6fa · 707b6fa
1 parent 33431ae
commit 707b6fa
Show file tree

Hide file tree

Showing 3 changed files with 161 additions and 117 deletions.
diff --git a/clearable-input.css b/clearable-input.css
@@ -1,16 +1,21 @@
-span.wrapper {
+:host span.wrapper {
     position: relative;
 }
-#iconWrapper {
-    position: absolute;
+:host #iconWrapper {
+    /*position: absolute;
     display: block;
     right: 5px;
-    top: 0px;                
+    top: 0px; */
+    position:relative;
     cursor: pointer;
     width: 12px;
     height: 12px;
 }
-#iconWrapper core-icon {
+:host #iconWrapper iron-icon {
+    position: absolute;
+    display: block;
+    right: 5px;
+    top: 0px; 
 	width: 12px;
 	height: 12px;
 }
diff --git a/clearable-input.html b/clearable-input.html
@@ -12,12 +12,13 @@
 <link rel="import" href="../iron-icons/iron-icons.html">
 
 <dom-module id="clearable-input">
-	<link rel="stylesheet" type="text/css" href="./clearable-input.css"/>
+	<link rel="import" type="css" href="./clearable-input.css"/>
+
 	<template>		
 		<span class="wrapper">
-            <input type="text" id="textInput" placeholder="{{placeholder}}" value="{{value}}" on-click="fireClicked" on-input="valueChanged"/>
-            <div id="iconWrapper">
-            	<iron-icon id="clearInput" icon="{{icon}}" on-click="testClearInput" hidden$="{{clearHidden}}"></iron-icon>
+            <input type="text" id="textInput" placeholder="{{placeholder}}" value="{{value::input}}" on-click="fireClicked" on-input="_valueChanged"/>
+            <div id="iconWrapper" hidden$="{{_isClearHidden}}">
+            	<iron-icon id="clearInput" icon="{{icon}}" on-click="_testClearInput"></iron-icon>
             <div>
         </span>
 	</template>
@@ -29,119 +30,58 @@
 				is: "clearable-input",
 
 				properties: {
+					/**
+		            * The placeholder of the text input
+		            *
+		            * @attribute placeholder
+		            * @access public
+		            * @type string
+		            * @default ''
+		            */
 					placeholder: {
 						type: String,
 						value: "",
 						notify: true
 					},
+					/**
+		            * The value of the text input
+		            *
+		            * @attribute value
+		            * @access public
+		            * @type string
+		            * @default ''
+		            */
 					value: {
 						type: String,
 						value: "",
-						observer: "valueChanged",
+						observer: "_valueChanged",
 						notify: true
 					},
-					readonly: {
-						type: Boolean,
-						value: false,
-						notify: true
-					},
-					isDisabled: {
-						type: Boolean,
-						value: false,
-						notify: true
-					},
-					backgroundColor: {
-						type: String,
-						value: "#FFF",
-						notify: true
-					},
-					color: {
-						type: String,
-						value: "#000",
-						notify: true
-					},
-					icon: {
-						type: String,
-						value: "clear",
-						notify: true
-					},
-					clearHidden: {
-						type: Boolean,
-						value: true,
-						notify: true
-					}
-				},
-				/**
-	            * The placeholder of the text input
-	            *
-	            * @attribute placeholder
-	            * @access public
-	            * @type string
-	            * @default ''
-	            */
-
-				/**
-	            * The value of the text input
-	            *
-	            * @attribute value
-	            * @access public
-	            * @type string
-	            * @default ''
-	            */
-
-				/**
-	            * The background color of the text input. This field supports
-	            * hexidecimal and standard html colors.
-	            *
-	            * @attribute backgroundColor
-	            * @access public
-	            * @type string
-	            * @default '#FFF'
-	            */
-
-				/**
-	            * The color of the text input's text, and text input's clear button.
-	            * This field supports hexidecimal and standard html colors.
-	            *
-	            * @attribute color
-	            * @access public
-	            * @type string
-	            * @default '#000'
-	            */
-
-				/**
-	            * Whether or not to show the clear input
-	            *
-	            * attribute clearHidden
-	            * access public
-	            * type boolean
-	            * default true
-	            */
-
-
-				/**
-				* On Polymer ready, set defaults
-				*/
-				ready: function() {
 					/**
 		            * If set on the element, makes the text input readonly. The text input is still clearable.
 		            *
-		            * @attribute readonly
+		            * @attribute isReadOnly
 		            * @access public
 		            * @type boolean
 		            * @default undefined
 		            */
-					// this.$.textInput.readOnly = (this.readonly !== void 0);
+					isReadOnly: {
+						type: Boolean,
+						value: void 0,
+					},
 					/**
 		            * If set on the element, makes the text input disabled. The text input will not be clearable.
-		            * isDisabled overrides readonly.
+		            * isDisabled overrides isReadOnly.
 		            *
 		            * @attribute isDisabled
 		            * @access public
 		            * @type boolean
 		            * @default undefined
 		            */
-					// this.$.textInput.disabled = (this.isDisabled !== void 0);
+					isDisabled: {
+						type: Boolean,
+						value: void 0,
+					},
 					/**
 		            * The iron-icon that's used for clearing the input text
 		            *
@@ -150,26 +90,39 @@
 		            * @type string
 		            * @default 'clear'
 		            */
-					// if(typeof this.icon !== 'string' || this.icon.length === 0) {
-					// 	this.icon = "clear";
-					// }
-
-					// setInterval(function() {
-					// 	this.clearHidden = this.$.textInput.value.length === 0 || this.isDisabled !== void 0;
-					// }.bind(this), 100);
-
-
+					icon: {
+						type: String,
+						value: "clear",
+						notify: true
+					},
+					/**
+		            * Whether or not to show the clear input
+		            *
+		            * attribute _isClearHidden
+		            * access public
+		            * type boolean
+		            * default true
+		            */
+					_isClearHidden: false
+				},
+
+				/**
+				* On Polymer ready, set defaults
+				*/
+				ready: function() {
+					this._resolveDisabledUI();
+					this._resolveReadOnlyUI();
 				},
 
 				/**
 				* Tests whether or not clicking on the clear button should clear the value.
 				* Returns true if the isDisabled attribute is not set, false otherwise.
 				*
-				* function testClearInput
-				* access public
+				* function _testClearInput
+				* access private
 				* returns boolean
 				*/
-				testClearInput: function() {
+				_testClearInput: function() {
 					if(this.isDisabled === void 0) {
 						this.clearInput();
 						return true;
@@ -199,11 +152,13 @@
 				/**
 				* Is called when the value of the text input changes
 				*
-				* @method valueChanged
-				* @access public
-				* @returns undefined
+				* method _valueChanged
+				* access private
+				* returns undefined
 				*/
-				valueChanged: function() {
+				_valueChanged: function() {
+					this._resolveClearHiddenUI();
+
 					/**
                     * Fires when the the value of the text input is changed
                     *
@@ -212,6 +167,90 @@
 					this.fire('change');
 				},
 
+				/**
+				* Sets the input as is-disabled (non-clearable)
+				*
+				* @method setAsDisabled
+				* @access public
+				* @returns undefined
+				*/
+				setAsDisabled: function() {
+					this.isDisabled = true;
+					this._resolveDisabledUI();
+				},
+
+				/**
+				* Sets the input as is-read-only (clearable, non-editable)
+				*
+				* @method setAsReadOnly
+				* @access public
+				* @returns undefined
+				*/
+				setAsReadOnly: function() {
+					this.isReadOnly = true;
+					this._resolveReadOnlyUI();
+				},				
+
+				/**
+				* Fully enables the input, removing any restrictions
+				*
+				* @method enable
+				* @access public
+				* @returns undefined
+				*/
+				enable: function() {
+					this.isDisabled = void 0;
+					this.isReadOnly = void 0;
+					this._resolveDisabledUI();
+					this._resolveReadOnlyUI();
+				},
+
+				/**
+				* Adds/removes the disabled flag from the textInput based
+				* on the value of isDisabled
+				*
+				* method _resolveDisabledUI
+				* access private
+				* returns undefined
+				*/
+				_resolveDisabledUI: function() {
+					this.$.textInput.removeAttribute('disabled');
+
+					if (this.isDisabled !== void 0) {
+						this.$.textInput.setAttribute('disabled', true);
+					}
+
+					this._resolveClearHiddenUI();
+				},
+
+				/**
+				* Adds/removes the readonly flag from the textInput based
+				* on the value of isReadOnly
+				*
+				* method _resolveReadOnlyUI
+				* access private
+				* returns undefined
+				*/
+				_resolveReadOnlyUI: function() {
+					this.$.textInput.removeAttribute('readonly');
+
+					if (this.isReadOnly !== void 0) {
+						this.$.textInput.setAttribute('readonly', true);
+					}
+				},
+
+				/**
+				* Sets _isClearHidden to true if the textInput is disabled, or
+				* the textInput contains no value
+				*
+				* method _resolveClearHiddenUI
+				* access private
+				* returns undefined
+				*/
+				_resolveClearHiddenUI: function()  {
+					this._isClearHidden = this.value.length === 0 || this.isDisabled !== void 0;
+				},
+
 				/**
 				* Is called when the text input is clicked on. This will allow people to tell when the input itself is clicked,
 				* not when the clearable button is clicked

diff --git a/demo.html b/demo.html
@@ -7,12 +7,12 @@
     <link rel="import" href="clearable-input.html">
 </head>
 <style>
-	div {
+	/*div {
 		border: 1px solid black;
 		margin-bottom: 10px;
 		padding: 10px;
 		width: 25%;
-	}
+	}*/
 </style>
 
 <body unresolved>
@@ -28,12 +28,12 @@
 
 <div>
 	<p>Read Only input with a value</p>
-	<clearable-input placeholder="Hello World" value="Foo" readonly></clearable-input>
+	<clearable-input placeholder="Hello World" value="Foo" is-read-only></clearable-input>
 </div>
 
 <div>
 	<p>Disabled input</p>
-	<clearable-input placeholder="Hello World" value="Foo" isDisabled></clearable-input>
+	<clearable-input placeholder="Hello World" value="Foo" is-disabled></clearable-input>
 </div>
 
 <div>