clearable-input.html

<!--
`clearable-input` is a Polymer element that encapsulates the idea of a text input that has a clickable icon inside the element to clear the input.

<clearable-input></clearable-input>

@author Brent Hosie
@element clearable-input
@homepage http://github.com/xrapiddavex/clearable-input/
-->

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="../iron-icons/iron-icons.html">

<dom-module id="clearable-input">
	<link rel="import" type="css" href="./clearable-input.css"/>
	
	<template>		
		<span class="wrapper">
            <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>
	<script>
		(function() {
			"use strict";

			Polymer({
				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",
						notify: true
					},
					/**
		            * If set on the element, makes the text input readonly. The text input is still clearable.
		            *
		            * @attribute isReadOnly
		            * @access public
		            * @type boolean
		            * @default undefined
		            */
					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 isReadOnly.
		            *
		            * @attribute isDisabled
		            * @access public
		            * @type boolean
		            * @default undefined
		            */
					isDisabled: {
						type: Boolean,
						value: void 0,
					},
					/**
		            * The iron-icon that's used for clearing the input text
		            *
		            * @attribute icon
		            * @access public
		            * @type string
		            * @default 'clear'
		            */
					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 private
				* returns boolean
				*/
				_testClearInput: function() {
					if(this.isDisabled === void 0) {
						this.clearInput();
						return true;
					}

					return false;
				},

				/**
				* Programmatically clears the value of the text input
				*
				* @method clearInput
				* @access public
				* @returns boolean
				*/
				clearInput: function() {
					this.value='';
					/**
                    * Fires when the the value of the text input is cleared
                    *
                    * @event clear
                    */
					this.fire('clear');
					return true;
				},

				/**
				* Is called when the value of the text input changes
				*
				* method _valueChanged
				* access private
				* returns undefined
				*/
				_valueChanged: function() {
					this._resolveClearHiddenUI();

					/**
                    * Fires when the the value of the text input is changed
                    *
                    * @event change
                    */
					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
				*
				* method valueChanged
				* access public
				* returns undefined
				*/
				fireClicked: function() {
					/**
                    * Fires only when the input itself is clicked, not when the clearable button is clicked
                    *
                    * @event inputclicked
                    */
					this.fire('inputclicked');
				}
			});
		})();
	</script>
</dom-element>