@@ -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
-
+