third_party/ot-br-posix/repo/third_party/mdl/repo/src/button/button.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 Button MDL component.
  23    * Implements MDL component design pattern defined at:
  24    * https://github.com/jasonmayes/mdl-component-design-pattern
  25    *
  26    * @param {HTMLElement} element The element that will be upgraded.
  27    */
  28   var MaterialButton = function MaterialButton(element) {
  29     this.element_ = element;
  30
  31     // Initialize instance.
  32     this.init();
  33   };
  34   window['MaterialButton'] = MaterialButton;
  35
  36   /**
  37    * Store constants in one place so they can be updated easily.
  38    *
  39    * @enum {string | number}
  40    * @private
  41    */
  42   MaterialButton.prototype.Constant_ = {
  43     // None for now.
  44   };
  45
  46   /**
  47    * Store strings for class names defined by this component that are used in
  48    * JavaScript. This allows us to simply change it in one place should we
  49    * decide to modify at a later date.
  50    *
  51    * @enum {string}
  52    * @private
  53    */
  54   MaterialButton.prototype.CssClasses_ = {
  55     RIPPLE_EFFECT: 'mdl-js-ripple-effect',
  56     RIPPLE_CONTAINER: 'mdl-button__ripple-container',
  57     RIPPLE: 'mdl-ripple'
  58   };
  59
  60   /**
  61    * Handle blur of element.
  62    *
  63    * @param {Event} event The event that fired.
  64    * @private
  65    */
  66   MaterialButton.prototype.blurHandler_ = function(event) {
  67     if (event) {
  68       this.element_.blur();
  69     }
  70   };
  71
  72   // Public methods.
  73
  74   /**
  75    * Disable button.
  76    *
  77    * @public
  78    */
  79   MaterialButton.prototype.disable = function() {
  80     this.element_.disabled = true;
  81   };
  82   MaterialButton.prototype['disable'] = MaterialButton.prototype.disable;
  83
  84   /**
  85    * Enable button.
  86    *
  87    * @public
  88    */
  89   MaterialButton.prototype.enable = function() {
  90     this.element_.disabled = false;
  91   };
  92   MaterialButton.prototype['enable'] = MaterialButton.prototype.enable;
  93
  94   /**
  95    * Initialize element.
  96    */
  97   MaterialButton.prototype.init = function() {
  98     if (this.element_) {
  99       if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
 100         var rippleContainer = document.createElement('span');
 101         rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
 102         this.rippleElement_ = document.createElement('span');
 103         this.rippleElement_.classList.add(this.CssClasses_.RIPPLE);
 104         rippleContainer.appendChild(this.rippleElement_);
 105         this.boundRippleBlurHandler = this.blurHandler_.bind(this);
 106         this.rippleElement_.addEventListener('mouseup', this.boundRippleBlurHandler);
 107         this.element_.appendChild(rippleContainer);
 108       }
 109       this.boundButtonBlurHandler = this.blurHandler_.bind(this);
 110       this.element_.addEventListener('mouseup', this.boundButtonBlurHandler);
 111       this.element_.addEventListener('mouseleave', this.boundButtonBlurHandler);
 112     }
 113   };
 114
 115   // The component registers itself. It can assume componentHandler is available
 116   // in the global scope.
 117   componentHandler.register({
 118     constructor: MaterialButton,
 119     classAsString: 'MaterialButton',
 120     cssClass: 'mdl-js-button',
 121     widget: true
 122   });
 123 })();