third_party/ot-br-posix/repo/third_party/mdl/repo/src/data-table/data-table.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 Data Table Card MDL component.
  23    * Implements MDL component design pattern defined at:
  24    * https://github.com/jasonmayes/mdl-component-design-pattern
  25    *
  26    * @constructor
  27    * @param {Element} element The element that will be upgraded.
  28    */
  29   var MaterialDataTable = function MaterialDataTable(element) {
  30     this.element_ = element;
  31
  32     // Initialize instance.
  33     this.init();
  34   };
  35
  36   window['MaterialDataTable'] = MaterialDataTable;
  37
  38   /**
  39    * Store constants in one place so they can be updated easily.
  40    *
  41    * @enum {string | number}
  42    * @private
  43    */
  44   MaterialDataTable.prototype.Constant_ = {
  45     // None at the moment.
  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   MaterialDataTable.prototype.CssClasses_ = {
  57     DATA_TABLE: 'mdl-data-table',
  58     SELECTABLE: 'mdl-data-table--selectable',
  59     SELECT_ELEMENT: 'mdl-data-table__select',
  60     IS_SELECTED: 'is-selected',
  61     IS_UPGRADED: 'is-upgraded'
  62   };
  63
  64   /**
  65    * Generates and returns a function that toggles the selection state of a
  66    * single row (or multiple rows).
  67    *
  68    * @param {Element} checkbox Checkbox that toggles the selection state.
  69    * @param {Element} row Row to toggle when checkbox changes.
  70    * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
  71    * @private
  72    */
  73   MaterialDataTable.prototype.selectRow_ = function(checkbox, row, opt_rows) {
  74     if (row) {
  75       return function() {
  76         if (checkbox.checked) {
  77           row.classList.add(this.CssClasses_.IS_SELECTED);
  78         } else {
  79           row.classList.remove(this.CssClasses_.IS_SELECTED);
  80         }
  81       }.bind(this);
  82     }
  83
  84     if (opt_rows) {
  85       return function() {
  86         var i;
  87         var el;
  88         if (checkbox.checked) {
  89           for (i = 0; i < opt_rows.length; i++) {
  90             el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
  91             el['MaterialCheckbox'].check();
  92             opt_rows[i].classList.add(this.CssClasses_.IS_SELECTED);
  93           }
  94         } else {
  95           for (i = 0; i < opt_rows.length; i++) {
  96             el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
  97             el['MaterialCheckbox'].uncheck();
  98             opt_rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
  99           }
 100         }
 101       }.bind(this);
 102     }
 103   };
 104
 105   /**
 106    * Creates a checkbox for a single or or multiple rows and hooks up the
 107    * event handling.
 108    *
 109    * @param {Element} row Row to toggle when checkbox changes.
 110    * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
 111    * @private
 112    */
 113   MaterialDataTable.prototype.createCheckbox_ = function(row, opt_rows) {
 114     var label = document.createElement('label');
 115     var labelClasses = [
 116       'mdl-checkbox',
 117       'mdl-js-checkbox',
 118       'mdl-js-ripple-effect',
 119       this.CssClasses_.SELECT_ELEMENT
 120     ];
 121     label.className = labelClasses.join(' ');
 122     var checkbox = document.createElement('input');
 123     checkbox.type = 'checkbox';
 124     checkbox.classList.add('mdl-checkbox__input');
 125
 126     if (row) {
 127       checkbox.checked = row.classList.contains(this.CssClasses_.IS_SELECTED);
 128       checkbox.addEventListener('change', this.selectRow_(checkbox, row));
 129     } else if (opt_rows) {
 130       checkbox.addEventListener('change', this.selectRow_(checkbox, null, opt_rows));
 131     }
 132
 133     label.appendChild(checkbox);
 134     componentHandler.upgradeElement(label, 'MaterialCheckbox');
 135     return label;
 136   };
 137
 138   /**
 139    * Initialize element.
 140    */
 141   MaterialDataTable.prototype.init = function() {
 142     if (this.element_) {
 143       var firstHeader = this.element_.querySelector('th');
 144       var bodyRows = Array.prototype.slice.call(this.element_.querySelectorAll('tbody tr'));
 145       var footRows = Array.prototype.slice.call(this.element_.querySelectorAll('tfoot tr'));
 146       var rows = bodyRows.concat(footRows);
 147
 148       if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)) {
 149         var th = document.createElement('th');
 150         var headerCheckbox = this.createCheckbox_(null, rows);
 151         th.appendChild(headerCheckbox);
 152         firstHeader.parentElement.insertBefore(th, firstHeader);
 153
 154         for (var i = 0; i < rows.length; i++) {
 155           var firstCell = rows[i].querySelector('td');
 156           if (firstCell) {
 157             var td = document.createElement('td');
 158             if (rows[i].parentNode.nodeName.toUpperCase() === 'TBODY') {
 159               var rowCheckbox = this.createCheckbox_(rows[i]);
 160               td.appendChild(rowCheckbox);
 161             }
 162             rows[i].insertBefore(td, firstCell);
 163           }
 164         }
 165         this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
 166       }
 167     }
 168   };
 169
 170   // The component registers itself. It can assume componentHandler is available
 171   // in the global scope.
 172   componentHandler.register({
 173     constructor: MaterialDataTable,
 174     classAsString: 'MaterialDataTable',
 175     cssClass: 'mdl-js-data-table'
 176   });
 177 })();