From 707b6fafcd3c00edf3a62308178200d9e3cd18e3 Mon Sep 17 00:00:00 2001 From: Brent Hosie Date: Thu, 16 Jul 2015 23:38:03 -0600 Subject: [PATCH] upgrade for javascript in place --- clearable-input.css | 15 ++- clearable-input.html | 255 +++++++++++++++++++++++++------------------ demo.html | 8 +- 3 files changed, 161 insertions(+), 117 deletions(-) diff --git a/clearable-input.css b/clearable-input.css index 73e3248..0565f02 100644 --- 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; } \ No newline at end of file diff --git a/clearable-input.html b/clearable-input.html index 7a42e24..9e09a98 100644 --- a/clearable-input.html +++ b/clearable-input.html @@ -12,12 +12,13 @@ - + + @@ -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 index 3017f22..c267655 100644 --- a/demo.html +++ b/demo.html @@ -7,12 +7,12 @@ @@ -28,12 +28,12 @@

Read Only input with a value

- +

Disabled input

- +