third_party/ot-br-posix/repo/third_party/mdl/repo/src/checkbox/checkbox.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 Checkbox 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 MaterialCheckbox = function MaterialCheckbox(element) {
  30     this.element_ = element;
  31
  32     // Initialize instance.
  33     this.init();
  34   };
  35   window['MaterialCheckbox'] = MaterialCheckbox;
  36
  37   /**
  38    * Store constants in one place so they can be updated easily.
  39    *
  40    * @enum {string | number}
  41    * @private
  42    */
  43   MaterialCheckbox.prototype.Constant_ = {
  44     TINY_TIMEOUT: 0.001
  45   };
  46
  47   /**
  48    * Store strings for class names defined by this component that are used in
  49    * JavaScript. This allows us to simply change it in one place should we
  50    * decide to modify at a later date.
  51    *
  52    * @enum {string}
  53    * @private
  54    */
  55   MaterialCheckbox.prototype.CssClasses_ = {
  56     INPUT: 'mdl-checkbox__input',
  57     BOX_OUTLINE: 'mdl-checkbox__box-outline',
  58     FOCUS_HELPER: 'mdl-checkbox__focus-helper',
  59     TICK_OUTLINE: 'mdl-checkbox__tick-outline',
  60     RIPPLE_EFFECT: 'mdl-js-ripple-effect',
  61     RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
  62     RIPPLE_CONTAINER: 'mdl-checkbox__ripple-container',
  63     RIPPLE_CENTER: 'mdl-ripple--center',
  64     RIPPLE: 'mdl-ripple',
  65     IS_FOCUSED: 'is-focused',
  66     IS_DISABLED: 'is-disabled',
  67     IS_CHECKED: 'is-checked',
  68     IS_UPGRADED: 'is-upgraded'
  69   };
  70
  71   /**
  72    * Handle change of state.
  73    *
  74    * @param {Event} event The event that fired.
  75    * @private
  76    */
  77   MaterialCheckbox.prototype.onChange_ = function(event) {
  78     this.updateClasses_();
  79   };
  80
  81   /**
  82    * Handle focus of element.
  83    *
  84    * @param {Event} event The event that fired.
  85    * @private
  86    */
  87   MaterialCheckbox.prototype.onFocus_ = function(event) {
  88     this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
  89   };
  90
  91   /**
  92    * Handle lost focus of element.
  93    *
  94    * @param {Event} event The event that fired.
  95    * @private
  96    */
  97   MaterialCheckbox.prototype.onBlur_ = function(event) {
  98     this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
  99   };
 100
 101   /**
 102    * Handle mouseup.
 103    *
 104    * @param {Event} event The event that fired.
 105    * @private
 106    */
 107   MaterialCheckbox.prototype.onMouseUp_ = function(event) {
 108     this.blur_();
 109   };
 110
 111   /**
 112    * Handle class updates.
 113    *
 114    * @private
 115    */
 116   MaterialCheckbox.prototype.updateClasses_ = function() {
 117     this.checkDisabled();
 118     this.checkToggleState();
 119   };
 120
 121   /**
 122    * Add blur.
 123    *
 124    * @private
 125    */
 126   MaterialCheckbox.prototype.blur_ = function() {
 127     // TODO: figure out why there's a focus event being fired after our blur,
 128     // so that we can avoid this hack.
 129     window.setTimeout(function() {
 130       this.inputElement_.blur();
 131     }.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT));
 132   };
 133
 134   // Public methods.
 135
 136   /**
 137    * Check the inputs toggle state and update display.
 138    *
 139    * @public
 140    */
 141   MaterialCheckbox.prototype.checkToggleState = function() {
 142     if (this.inputElement_.checked) {
 143       this.element_.classList.add(this.CssClasses_.IS_CHECKED);
 144     } else {
 145       this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
 146     }
 147   };
 148   MaterialCheckbox.prototype['checkToggleState'] =
 149       MaterialCheckbox.prototype.checkToggleState;
 150
 151   /**
 152    * Check the inputs disabled state and update display.
 153    *
 154    * @public
 155    */
 156   MaterialCheckbox.prototype.checkDisabled = function() {
 157     if (this.inputElement_.disabled) {
 158       this.element_.classList.add(this.CssClasses_.IS_DISABLED);
 159     } else {
 160       this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
 161     }
 162   };
 163   MaterialCheckbox.prototype['checkDisabled'] =
 164       MaterialCheckbox.prototype.checkDisabled;
 165
 166   /**
 167    * Disable checkbox.
 168    *
 169    * @public
 170    */
 171   MaterialCheckbox.prototype.disable = function() {
 172     this.inputElement_.disabled = true;
 173     this.updateClasses_();
 174   };
 175   MaterialCheckbox.prototype['disable'] = MaterialCheckbox.prototype.disable;
 176
 177   /**
 178    * Enable checkbox.
 179    *
 180    * @public
 181    */
 182   MaterialCheckbox.prototype.enable = function() {
 183     this.inputElement_.disabled = false;
 184     this.updateClasses_();
 185   };
 186   MaterialCheckbox.prototype['enable'] = MaterialCheckbox.prototype.enable;
 187
 188   /**
 189    * Check checkbox.
 190    *
 191    * @public
 192    */
 193   MaterialCheckbox.prototype.check = function() {
 194     this.inputElement_.checked = true;
 195     this.updateClasses_();
 196   };
 197   MaterialCheckbox.prototype['check'] = MaterialCheckbox.prototype.check;
 198
 199   /**
 200    * Uncheck checkbox.
 201    *
 202    * @public
 203    */
 204   MaterialCheckbox.prototype.uncheck = function() {
 205     this.inputElement_.checked = false;
 206     this.updateClasses_();
 207   };
 208   MaterialCheckbox.prototype['uncheck'] = MaterialCheckbox.prototype.uncheck;
 209
 210   /**
 211    * Initialize element.
 212    */
 213   MaterialCheckbox.prototype.init = function() {
 214     if (this.element_) {
 215       this.inputElement_ = this.element_.querySelector('.' +
 216           this.CssClasses_.INPUT);
 217
 218       var boxOutline = document.createElement('span');
 219       boxOutline.classList.add(this.CssClasses_.BOX_OUTLINE);
 220
 221       var tickContainer = document.createElement('span');
 222       tickContainer.classList.add(this.CssClasses_.FOCUS_HELPER);
 223
 224       var tickOutline = document.createElement('span');
 225       tickOutline.classList.add(this.CssClasses_.TICK_OUTLINE);
 226
 227       boxOutline.appendChild(tickOutline);
 228
 229       this.element_.appendChild(tickContainer);
 230       this.element_.appendChild(boxOutline);
 231
 232       if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
 233         this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
 234         this.rippleContainerElement_ = document.createElement('span');
 235         this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
 236         this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
 237         this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
 238         this.boundRippleMouseUp = this.onMouseUp_.bind(this);
 239         this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
 240
 241         var ripple = document.createElement('span');
 242         ripple.classList.add(this.CssClasses_.RIPPLE);
 243
 244         this.rippleContainerElement_.appendChild(ripple);
 245         this.element_.appendChild(this.rippleContainerElement_);
 246       }
 247       this.boundInputOnChange = this.onChange_.bind(this);
 248       this.boundInputOnFocus = this.onFocus_.bind(this);
 249       this.boundInputOnBlur = this.onBlur_.bind(this);
 250       this.boundElementMouseUp = this.onMouseUp_.bind(this);
 251       this.inputElement_.addEventListener('change', this.boundInputOnChange);
 252       this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
 253       this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
 254       this.element_.addEventListener('mouseup', this.boundElementMouseUp);
 255
 256       this.updateClasses_();
 257       this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
 258     }
 259   };
 260
 261   // The component registers itself. It can assume componentHandler is available
 262   // in the global scope.
 263   componentHandler.register({
 264     constructor: MaterialCheckbox,
 265     classAsString: 'MaterialCheckbox',
 266     cssClass: 'mdl-js-checkbox',
 267     widget: true
 268   });
 269 })();