third_party/ot-br-posix/repo/third_party/mdl/repo/src/textfield/textfield.js

   1 /**
   2  * @license
   3  * Copyright 2015 Google Inc. All Rights Reserved.
   4  *
   5  * Licensed under the Apache License, Version 2.0 (the "License");
   6  * you may not use this file except in compliance with the License.
   7  * You may obtain a copy of the License at
   8  *
   9  *      http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  * Unless required by applicable law or agreed to in writing, software
  12  * distributed under the License is distributed on an "AS IS" BASIS,
  13  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  * See the License for the specific language governing permissions and
  15  * limitations under the License.
  16  */
  17
  18 (function() {
  19   'use strict';
  20
  21   /**
  22    * Class constructor for Textfield MDL component.
  23    * Implements MDL component design pattern defined at:
  24    * https://github.com/jasonmayes/mdl-component-design-pattern
  25    *
  26    * @constructor
  27    * @param {HTMLElement} element The element that will be upgraded.
  28    */
  29   var MaterialTextfield = function MaterialTextfield(element) {
  30     this.element_ = element;
  31     this.maxRows = this.Constant_.NO_MAX_ROWS;
  32     // Initialize instance.
  33     this.init();
  34   };
  35   window['MaterialTextfield'] = MaterialTextfield;
  36
  37   /**
  38    * Store constants in one place so they can be updated easily.
  39    *
  40    * @enum {string | number}
  41    * @private
  42    */
  43   MaterialTextfield.prototype.Constant_ = {
  44     NO_MAX_ROWS: -1,
  45     MAX_ROWS_ATTRIBUTE: 'maxrows'
  46   };
  47
  48   /**
  49    * Store strings for class names defined by this component that are used in
  50    * JavaScript. This allows us to simply change it in one place should we
  51    * decide to modify at a later date.
  52    *
  53    * @enum {string}
  54    * @private
  55    */
  56   MaterialTextfield.prototype.CssClasses_ = {
  57     LABEL: 'mdl-textfield__label',
  58     INPUT: 'mdl-textfield__input',
  59     IS_DIRTY: 'is-dirty',
  60     IS_FOCUSED: 'is-focused',
  61     IS_DISABLED: 'is-disabled',
  62     IS_INVALID: 'is-invalid',
  63     IS_UPGRADED: 'is-upgraded',
  64     HAS_PLACEHOLDER: 'has-placeholder'
  65   };
  66
  67   /**
  68    * Handle input being entered.
  69    *
  70    * @param {Event} event The event that fired.
  71    * @private
  72    */
  73   MaterialTextfield.prototype.onKeyDown_ = function(event) {
  74     var currentRowCount = event.target.value.split('\n').length;
  75     if (event.keyCode === 13) {
  76       if (currentRowCount >= this.maxRows) {
  77         event.preventDefault();
  78       }
  79     }
  80   };
  81
  82   /**
  83    * Handle focus.
  84    *
  85    * @param {Event} event The event that fired.
  86    * @private
  87    */
  88   MaterialTextfield.prototype.onFocus_ = function(event) {
  89     this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
  90   };
  91
  92   /**
  93    * Handle lost focus.
  94    *
  95    * @param {Event} event The event that fired.
  96    * @private
  97    */
  98   MaterialTextfield.prototype.onBlur_ = function(event) {
  99     this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
 100   };
 101
 102   /**
 103    * Handle reset event from out side.
 104    *
 105    * @param {Event} event The event that fired.
 106    * @private
 107    */
 108   MaterialTextfield.prototype.onReset_ = function(event) {
 109     this.updateClasses_();
 110   };
 111
 112   /**
 113    * Handle class updates.
 114    *
 115    * @private
 116    */
 117   MaterialTextfield.prototype.updateClasses_ = function() {
 118     this.checkDisabled();
 119     this.checkValidity();
 120     this.checkDirty();
 121     this.checkFocus();
 122   };
 123
 124   // Public methods.
 125
 126   /**
 127    * Check the disabled state and update field accordingly.
 128    *
 129    * @public
 130    */
 131   MaterialTextfield.prototype.checkDisabled = function() {
 132     if (this.input_.disabled) {
 133       this.element_.classList.add(this.CssClasses_.IS_DISABLED);
 134     } else {
 135       this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
 136     }
 137   };
 138   MaterialTextfield.prototype['checkDisabled'] =
 139       MaterialTextfield.prototype.checkDisabled;
 140
 141   /**
 142   * Check the focus state and update field accordingly.
 143   *
 144   * @public
 145   */
 146   MaterialTextfield.prototype.checkFocus = function() {
 147     if (Boolean(this.element_.querySelector(':focus'))) {
 148       this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
 149     } else {
 150       this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
 151     }
 152   };
 153   MaterialTextfield.prototype['checkFocus'] =
 154     MaterialTextfield.prototype.checkFocus;
 155
 156   /**
 157    * Check the validity state and update field accordingly.
 158    *
 159    * @public
 160    */
 161   MaterialTextfield.prototype.checkValidity = function() {
 162     if (this.input_.validity) {
 163       if (this.input_.validity.valid) {
 164         this.element_.classList.remove(this.CssClasses_.IS_INVALID);
 165       } else {
 166         this.element_.classList.add(this.CssClasses_.IS_INVALID);
 167       }
 168     }
 169   };
 170   MaterialTextfield.prototype['checkValidity'] =
 171       MaterialTextfield.prototype.checkValidity;
 172
 173   /**
 174    * Check the dirty state and update field accordingly.
 175    *
 176    * @public
 177    */
 178   MaterialTextfield.prototype.checkDirty = function() {
 179     if (this.input_.value && this.input_.value.length > 0) {
 180       this.element_.classList.add(this.CssClasses_.IS_DIRTY);
 181     } else {
 182       this.element_.classList.remove(this.CssClasses_.IS_DIRTY);
 183     }
 184   };
 185   MaterialTextfield.prototype['checkDirty'] =
 186       MaterialTextfield.prototype.checkDirty;
 187
 188   /**
 189    * Disable text field.
 190    *
 191    * @public
 192    */
 193   MaterialTextfield.prototype.disable = function() {
 194     this.input_.disabled = true;
 195     this.updateClasses_();
 196   };
 197   MaterialTextfield.prototype['disable'] = MaterialTextfield.prototype.disable;
 198
 199   /**
 200    * Enable text field.
 201    *
 202    * @public
 203    */
 204   MaterialTextfield.prototype.enable = function() {
 205     this.input_.disabled = false;
 206     this.updateClasses_();
 207   };
 208   MaterialTextfield.prototype['enable'] = MaterialTextfield.prototype.enable;
 209
 210   /**
 211    * Update text field value.
 212    *
 213    * @param {string} value The value to which to set the control (optional).
 214    * @public
 215    */
 216   MaterialTextfield.prototype.change = function(value) {
 217
 218     this.input_.value = value || '';
 219     this.updateClasses_();
 220   };
 221   MaterialTextfield.prototype['change'] = MaterialTextfield.prototype.change;
 222
 223   /**
 224    * Initialize element.
 225    */
 226   MaterialTextfield.prototype.init = function() {
 227
 228     if (this.element_) {
 229       this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL);
 230       this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
 231
 232       if (this.input_) {
 233         if (this.input_.hasAttribute(
 234               /** @type {string} */ (this.Constant_.MAX_ROWS_ATTRIBUTE))) {
 235           this.maxRows = parseInt(this.input_.getAttribute(
 236               /** @type {string} */ (this.Constant_.MAX_ROWS_ATTRIBUTE)), 10);
 237           if (isNaN(this.maxRows)) {
 238             this.maxRows = this.Constant_.NO_MAX_ROWS;
 239           }
 240         }
 241
 242         if (this.input_.hasAttribute('placeholder')) {
 243           this.element_.classList.add(this.CssClasses_.HAS_PLACEHOLDER);
 244         }
 245
 246         this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
 247         this.boundFocusHandler = this.onFocus_.bind(this);
 248         this.boundBlurHandler = this.onBlur_.bind(this);
 249         this.boundResetHandler = this.onReset_.bind(this);
 250         this.input_.addEventListener('input', this.boundUpdateClassesHandler);
 251         this.input_.addEventListener('focus', this.boundFocusHandler);
 252         this.input_.addEventListener('blur', this.boundBlurHandler);
 253         this.input_.addEventListener('reset', this.boundResetHandler);
 254
 255         if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
 256           // TODO: This should handle pasting multi line text.
 257           // Currently doesn't.
 258           this.boundKeyDownHandler = this.onKeyDown_.bind(this);
 259           this.input_.addEventListener('keydown', this.boundKeyDownHandler);
 260         }
 261         var invalid = this.element_.classList
 262           .contains(this.CssClasses_.IS_INVALID);
 263         this.updateClasses_();
 264         this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
 265         if (invalid) {
 266           this.element_.classList.add(this.CssClasses_.IS_INVALID);
 267         }
 268         if (this.input_.hasAttribute('autofocus')) {
 269           this.element_.focus();
 270           this.checkFocus();
 271         }
 272       }
 273     }
 274   };
 275
 276   // The component registers itself. It can assume componentHandler is available
 277   // in the global scope.
 278   componentHandler.register({
 279     constructor: MaterialTextfield,
 280     classAsString: 'MaterialTextfield',
 281     cssClass: 'mdl-js-textfield',
 282     widget: true
 283   });
 284 })();