1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | (function() {
|
19 | 'use strict';
|
20 |
|
21 | |
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 | var MaterialDataTable = function MaterialDataTable(element) {
|
30 | this.element_ = element;
|
31 |
|
32 |
|
33 | this.init();
|
34 | };
|
35 |
|
36 | window['MaterialDataTable'] = MaterialDataTable;
|
37 |
|
38 | |
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | MaterialDataTable.prototype.Constant_ = {
|
45 |
|
46 | };
|
47 |
|
48 | |
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
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 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
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 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
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 |
|
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 |
|
171 |
|
172 | componentHandler.register({
|
173 | constructor: MaterialDataTable,
|
174 | classAsString: 'MaterialDataTable',
|
175 | cssClass: 'mdl-js-data-table'
|
176 | });
|
177 | })();
|