/** * @license * Copyright 2015 Google Inc. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ (function() { 'use strict'; /** * Class constructor for Textfield MDL component. * Implements MDL component design pattern defined at: * https://github.com/jasonmayes/mdl-component-design-pattern * * @constructor * @param {HTMLElement} element The element that will be upgraded. */ var MaterialTextfield = function MaterialTextfield(element) { this.element_ = element; this.maxRows = this.Constant_.NO_MAX_ROWS; // Initialize instance. this.init(); }; window['MaterialTextfield'] = MaterialTextfield; /** * Store constants in one place so they can be updated easily. * * @enum {string | number} * @private */ MaterialTextfield.prototype.Constant_ = { NO_MAX_ROWS: -1, MAX_ROWS_ATTRIBUTE: 'maxrows' }; /** * Store strings for class names defined by this component that are used in * JavaScript. This allows us to simply change it in one place should we * decide to modify at a later date. * * @enum {string} * @private */ MaterialTextfield.prototype.CssClasses_ = { LABEL: 'mdl-textfield__label', INPUT: 'mdl-textfield__input', IS_DIRTY: 'is-dirty', IS_FOCUSED: 'is-focused', IS_DISABLED: 'is-disabled', IS_INVALID: 'is-invalid', IS_UPGRADED: 'is-upgraded', HAS_PLACEHOLDER: 'has-placeholder' }; /** * Handle input being entered. * * @param {Event} event The event that fired. * @private */ MaterialTextfield.prototype.onKeyDown_ = function(event) { var currentRowCount = event.target.value.split('\n').length; if (event.keyCode === 13) { if (currentRowCount >= this.maxRows) { event.preventDefault(); } } }; /** * Handle focus. * * @param {Event} event The event that fired. * @private */ MaterialTextfield.prototype.onFocus_ = function(event) { this.element_.classList.add(this.CssClasses_.IS_FOCUSED); }; /** * Handle lost focus. * * @param {Event} event The event that fired. * @private */ MaterialTextfield.prototype.onBlur_ = function(event) { this.element_.classList.remove(this.CssClasses_.IS_FOCUSED); }; /** * Handle reset event from out side. * * @param {Event} event The event that fired. * @private */ MaterialTextfield.prototype.onReset_ = function(event) { this.updateClasses_(); }; /** * Handle class updates. * * @private */ MaterialTextfield.prototype.updateClasses_ = function() { this.checkDisabled(); this.checkValidity(); this.checkDirty(); this.checkFocus(); }; // Public methods. /** * Check the disabled state and update field accordingly. * * @public */ MaterialTextfield.prototype.checkDisabled = function() { if (this.input_.disabled) { this.element_.classList.add(this.CssClasses_.IS_DISABLED); } else { this.element_.classList.remove(this.CssClasses_.IS_DISABLED); } }; MaterialTextfield.prototype['checkDisabled'] = MaterialTextfield.prototype.checkDisabled; /** * Check the focus state and update field accordingly. * * @public */ MaterialTextfield.prototype.checkFocus = function() { if (Boolean(this.element_.querySelector(':focus'))) { this.element_.classList.add(this.CssClasses_.IS_FOCUSED); } else { this.element_.classList.remove(this.CssClasses_.IS_FOCUSED); } }; MaterialTextfield.prototype['checkFocus'] = MaterialTextfield.prototype.checkFocus; /** * Check the validity state and update field accordingly. * * @public */ MaterialTextfield.prototype.checkValidity = function() { if (this.input_.validity) { if (this.input_.validity.valid) { this.element_.classList.remove(this.CssClasses_.IS_INVALID); } else { this.element_.classList.add(this.CssClasses_.IS_INVALID); } } }; MaterialTextfield.prototype['checkValidity'] = MaterialTextfield.prototype.checkValidity; /** * Check the dirty state and update field accordingly. * * @public */ MaterialTextfield.prototype.checkDirty = function() { if ( (this.input_.value && this.input_.value.length > 0) || (this.input_.placeholder.trim() !== '') ) { this.element_.classList.add(this.CssClasses_.IS_DIRTY); } else { this.element_.classList.remove(this.CssClasses_.IS_DIRTY); } }; MaterialTextfield.prototype['checkDirty'] = MaterialTextfield.prototype.checkDirty; /** * Disable text field. * * @public */ MaterialTextfield.prototype.disable = function() { this.input_.disabled = true; this.updateClasses_(); }; MaterialTextfield.prototype['disable'] = MaterialTextfield.prototype.disable; /** * Enable text field. * * @public */ MaterialTextfield.prototype.enable = function() { this.input_.disabled = false; this.updateClasses_(); }; MaterialTextfield.prototype['enable'] = MaterialTextfield.prototype.enable; /** * Update text field value. * * @param {string} value The value to which to set the control (optional). * @public */ MaterialTextfield.prototype.change = function(value) { this.input_.value = value || ''; this.updateClasses_(); }; MaterialTextfield.prototype['change'] = MaterialTextfield.prototype.change; /** * Initialize element. */ MaterialTextfield.prototype.init = function() { if (this.element_) { this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL); this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT); if (this.input_) { if (this.input_.hasAttribute( /** @type {string} */ (this.Constant_.MAX_ROWS_ATTRIBUTE))) { this.maxRows = parseInt(this.input_.getAttribute( /** @type {string} */ (this.Constant_.MAX_ROWS_ATTRIBUTE)), 10); if (isNaN(this.maxRows)) { this.maxRows = this.Constant_.NO_MAX_ROWS; } } if (this.input_.hasAttribute('placeholder')) { this.element_.classList.add(this.CssClasses_.HAS_PLACEHOLDER); } this.boundUpdateClassesHandler = this.updateClasses_.bind(this); this.boundFocusHandler = this.onFocus_.bind(this); this.boundBlurHandler = this.onBlur_.bind(this); this.boundResetHandler = this.onReset_.bind(this); this.input_.addEventListener('input', this.boundUpdateClassesHandler); this.input_.addEventListener('focus', this.boundFocusHandler); this.input_.addEventListener('blur', this.boundBlurHandler); this.input_.addEventListener('reset', this.boundResetHandler); if (this.maxRows !== this.Constant_.NO_MAX_ROWS) { // TODO: This should handle pasting multi line text. // Currently doesn't. this.boundKeyDownHandler = this.onKeyDown_.bind(this); this.input_.addEventListener('keydown', this.boundKeyDownHandler); } var invalid = this.element_.classList .contains(this.CssClasses_.IS_INVALID); this.updateClasses_(); this.element_.classList.add(this.CssClasses_.IS_UPGRADED); if (invalid) { this.element_.classList.add(this.CssClasses_.IS_INVALID); } if (this.input_.hasAttribute('autofocus')) { this.element_.focus(); this.checkFocus(); } } } }; // The component registers itself. It can assume componentHandler is available // in the global scope. componentHandler.register({ constructor: MaterialTextfield, classAsString: 'MaterialTextfield', cssClass: 'mdl-js-textfield', widget: true }); })();