material_design_lite-sass 1.0.6.3 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.travis.yml +5 -2
- data/CHANGELOG.md +9 -0
- data/README.md +41 -32
- data/lib/material_design_lite/sass/version.rb +1 -1
- data/vendor/assets/javascripts/material.js +377 -301
- data/vendor/assets/javascripts/material/button.js +0 -24
- data/vendor/assets/javascripts/material/checkbox.js +0 -26
- data/vendor/assets/javascripts/material/data-table.js +18 -10
- data/vendor/assets/javascripts/material/icon-toggle.js +0 -26
- data/vendor/assets/javascripts/material/layout.js +104 -6
- data/vendor/assets/javascripts/material/mdlComponentHandler.js +15 -36
- data/vendor/assets/javascripts/material/menu.js +16 -36
- data/vendor/assets/javascripts/material/progress.js +0 -22
- data/vendor/assets/javascripts/material/radio.js +0 -28
- data/vendor/assets/javascripts/material/ripple.js +6 -35
- data/vendor/assets/javascripts/material/slider.js +0 -23
- data/vendor/assets/javascripts/material/snackbar.js +189 -0
- data/vendor/assets/javascripts/material/switch.js +0 -26
- data/vendor/assets/javascripts/material/tabs.js +2 -2
- data/vendor/assets/javascripts/material/textfield.js +32 -25
- data/vendor/assets/javascripts/material/tooltip.js +39 -49
- data/vendor/assets/stylesheets/_material.scss +3 -0
- data/vendor/assets/stylesheets/material/_badge.scss +6 -0
- data/vendor/assets/stylesheets/material/_button.scss +3 -3
- data/vendor/assets/stylesheets/material/_checkbox.scss +5 -0
- data/vendor/assets/stylesheets/material/_data-table.scss +17 -9
- data/vendor/assets/stylesheets/material/_dialog.scss +57 -0
- data/vendor/assets/stylesheets/material/_grid.scss +60 -0
- data/vendor/assets/stylesheets/material/_layout.scss +77 -3
- data/vendor/assets/stylesheets/material/_list.scss +103 -0
- data/vendor/assets/stylesheets/material/_mega_footer.scss +1 -1
- data/vendor/assets/stylesheets/material/_menu.scss +5 -1
- data/vendor/assets/stylesheets/material/_mixins.scss +33 -0
- data/vendor/assets/stylesheets/material/_progress.scss +5 -0
- data/vendor/assets/stylesheets/material/_radio.scss +5 -0
- data/vendor/assets/stylesheets/material/_shadow.scss +4 -0
- data/vendor/assets/stylesheets/material/_snackbar.scss +81 -0
- data/vendor/assets/stylesheets/material/_switch.scss +5 -1
- data/vendor/assets/stylesheets/material/_tabs.scss +0 -1
- data/vendor/assets/stylesheets/material/_textfield.scss +13 -3
- data/vendor/assets/stylesheets/material/_typography.scss +4 -0
- data/vendor/assets/stylesheets/material/_variables.scss +102 -81
- metadata +7 -3
@@ -112,30 +112,6 @@
|
|
112
112
|
}
|
113
113
|
};
|
114
114
|
|
115
|
-
/**
|
116
|
-
* Downgrade the element.
|
117
|
-
*
|
118
|
-
* @private
|
119
|
-
*/
|
120
|
-
MaterialButton.prototype.mdlDowngrade_ = function() {
|
121
|
-
if (this.rippleElement_) {
|
122
|
-
this.rippleElement_.removeEventListener('mouseup', this.boundRippleBlurHandler);
|
123
|
-
}
|
124
|
-
this.element_.removeEventListener('mouseup', this.boundButtonBlurHandler);
|
125
|
-
this.element_.removeEventListener('mouseleave', this.boundButtonBlurHandler);
|
126
|
-
};
|
127
|
-
|
128
|
-
/**
|
129
|
-
* Public alias for the downgrade method.
|
130
|
-
*
|
131
|
-
* @public
|
132
|
-
*/
|
133
|
-
MaterialButton.prototype.mdlDowngrade =
|
134
|
-
MaterialButton.prototype.mdlDowngrade_;
|
135
|
-
|
136
|
-
MaterialButton.prototype['mdlDowngrade'] =
|
137
|
-
MaterialButton.prototype.mdlDowngrade;
|
138
|
-
|
139
115
|
// The component registers itself. It can assume componentHandler is available
|
140
116
|
// in the global scope.
|
141
117
|
componentHandler.register({
|
@@ -258,32 +258,6 @@
|
|
258
258
|
}
|
259
259
|
};
|
260
260
|
|
261
|
-
/**
|
262
|
-
* Downgrade the component.
|
263
|
-
*
|
264
|
-
* @private
|
265
|
-
*/
|
266
|
-
MaterialCheckbox.prototype.mdlDowngrade_ = function() {
|
267
|
-
if (this.rippleContainerElement_) {
|
268
|
-
this.rippleContainerElement_.removeEventListener('mouseup', this.boundRippleMouseUp);
|
269
|
-
}
|
270
|
-
this.inputElement_.removeEventListener('change', this.boundInputOnChange);
|
271
|
-
this.inputElement_.removeEventListener('focus', this.boundInputOnFocus);
|
272
|
-
this.inputElement_.removeEventListener('blur', this.boundInputOnBlur);
|
273
|
-
this.element_.removeEventListener('mouseup', this.boundElementMouseUp);
|
274
|
-
};
|
275
|
-
|
276
|
-
/**
|
277
|
-
* Public alias for the downgrade method.
|
278
|
-
*
|
279
|
-
* @public
|
280
|
-
*/
|
281
|
-
MaterialCheckbox.prototype.mdlDowngrade =
|
282
|
-
MaterialCheckbox.prototype.mdlDowngrade_;
|
283
|
-
|
284
|
-
MaterialCheckbox.prototype['mdlDowngrade'] =
|
285
|
-
MaterialCheckbox.prototype.mdlDowngrade;
|
286
|
-
|
287
261
|
// The component registers itself. It can assume componentHandler is available
|
288
262
|
// in the global scope.
|
289
263
|
componentHandler.register({
|
@@ -24,7 +24,7 @@
|
|
24
24
|
* https://github.com/jasonmayes/mdl-component-design-pattern
|
25
25
|
*
|
26
26
|
* @constructor
|
27
|
-
* @param {
|
27
|
+
* @param {Element} element The element that will be upgraded.
|
28
28
|
*/
|
29
29
|
var MaterialDataTable = function MaterialDataTable(element) {
|
30
30
|
this.element_ = element;
|
@@ -66,7 +66,7 @@
|
|
66
66
|
* single row (or multiple rows).
|
67
67
|
*
|
68
68
|
* @param {Element} checkbox Checkbox that toggles the selection state.
|
69
|
-
* @param {
|
69
|
+
* @param {Element} row Row to toggle when checkbox changes.
|
70
70
|
* @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
|
71
71
|
* @private
|
72
72
|
*/
|
@@ -106,7 +106,7 @@
|
|
106
106
|
* Creates a checkbox for a single or or multiple rows and hooks up the
|
107
107
|
* event handling.
|
108
108
|
*
|
109
|
-
* @param {
|
109
|
+
* @param {Element} row Row to toggle when checkbox changes.
|
110
110
|
* @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
|
111
111
|
* @private
|
112
112
|
*/
|
@@ -122,8 +122,13 @@
|
|
122
122
|
var checkbox = document.createElement('input');
|
123
123
|
checkbox.type = 'checkbox';
|
124
124
|
checkbox.classList.add('mdl-checkbox__input');
|
125
|
-
|
126
|
-
|
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
|
+
}
|
127
132
|
|
128
133
|
label.appendChild(checkbox);
|
129
134
|
componentHandler.upgradeElement(label, 'MaterialCheckbox');
|
@@ -136,7 +141,9 @@
|
|
136
141
|
MaterialDataTable.prototype.init = function() {
|
137
142
|
if (this.element_) {
|
138
143
|
var firstHeader = this.element_.querySelector('th');
|
139
|
-
var
|
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);
|
140
147
|
|
141
148
|
if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)) {
|
142
149
|
var th = document.createElement('th');
|
@@ -148,14 +155,15 @@
|
|
148
155
|
var firstCell = rows[i].querySelector('td');
|
149
156
|
if (firstCell) {
|
150
157
|
var td = document.createElement('td');
|
151
|
-
|
152
|
-
|
158
|
+
if (rows[i].parentNode.nodeName.toUpperCase() === 'TBODY') {
|
159
|
+
var rowCheckbox = this.createCheckbox_(rows[i]);
|
160
|
+
td.appendChild(rowCheckbox);
|
161
|
+
}
|
153
162
|
rows[i].insertBefore(td, firstCell);
|
154
163
|
}
|
155
164
|
}
|
165
|
+
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
156
166
|
}
|
157
|
-
|
158
|
-
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
159
167
|
}
|
160
168
|
};
|
161
169
|
|
@@ -244,32 +244,6 @@
|
|
244
244
|
}
|
245
245
|
};
|
246
246
|
|
247
|
-
/**
|
248
|
-
* Downgrade the component
|
249
|
-
*
|
250
|
-
* @private
|
251
|
-
*/
|
252
|
-
MaterialIconToggle.prototype.mdlDowngrade_ = function() {
|
253
|
-
if (this.rippleContainerElement_) {
|
254
|
-
this.rippleContainerElement_.removeEventListener('mouseup', this.boundRippleMouseUp);
|
255
|
-
}
|
256
|
-
this.inputElement_.removeEventListener('change', this.boundInputOnChange);
|
257
|
-
this.inputElement_.removeEventListener('focus', this.boundInputOnFocus);
|
258
|
-
this.inputElement_.removeEventListener('blur', this.boundInputOnBlur);
|
259
|
-
this.element_.removeEventListener('mouseup', this.boundElementOnMouseUp);
|
260
|
-
};
|
261
|
-
|
262
|
-
/**
|
263
|
-
* Public alias for the downgrade method.
|
264
|
-
*
|
265
|
-
* @public
|
266
|
-
*/
|
267
|
-
MaterialIconToggle.prototype.mdlDowngrade =
|
268
|
-
MaterialIconToggle.prototype.mdlDowngrade_;
|
269
|
-
|
270
|
-
MaterialIconToggle.prototype['mdlDowngrade'] =
|
271
|
-
MaterialIconToggle.prototype.mdlDowngrade;
|
272
|
-
|
273
247
|
// The component registers itself. It can assume componentHandler is available
|
274
248
|
// in the global scope.
|
275
249
|
componentHandler.register({
|
@@ -44,11 +44,23 @@
|
|
44
44
|
MAX_WIDTH: '(max-width: 1024px)',
|
45
45
|
TAB_SCROLL_PIXELS: 100,
|
46
46
|
|
47
|
-
MENU_ICON: '
|
47
|
+
MENU_ICON: '',
|
48
48
|
CHEVRON_LEFT: 'chevron_left',
|
49
49
|
CHEVRON_RIGHT: 'chevron_right'
|
50
50
|
};
|
51
51
|
|
52
|
+
/**
|
53
|
+
* Keycodes, for code readability.
|
54
|
+
*
|
55
|
+
* @enum {number}
|
56
|
+
* @private
|
57
|
+
*/
|
58
|
+
MaterialLayout.prototype.Keycodes_ = {
|
59
|
+
ENTER: 13,
|
60
|
+
ESCAPE: 27,
|
61
|
+
SPACE: 32
|
62
|
+
};
|
63
|
+
|
52
64
|
/**
|
53
65
|
* Modes.
|
54
66
|
*
|
@@ -138,6 +150,18 @@
|
|
138
150
|
}
|
139
151
|
};
|
140
152
|
|
153
|
+
/**
|
154
|
+
* Handles a keyboard event on the drawer.
|
155
|
+
*
|
156
|
+
* @param {Event} evt The event that fired.
|
157
|
+
* @private
|
158
|
+
*/
|
159
|
+
MaterialLayout.prototype.keyboardEventHandler_ = function(evt) {
|
160
|
+
if (evt.keyCode === this.Keycodes_.ESCAPE) {
|
161
|
+
this.toggleDrawer();
|
162
|
+
}
|
163
|
+
};
|
164
|
+
|
141
165
|
/**
|
142
166
|
* Handles changes in screen size.
|
143
167
|
*
|
@@ -157,13 +181,23 @@
|
|
157
181
|
};
|
158
182
|
|
159
183
|
/**
|
160
|
-
* Handles
|
184
|
+
* Handles events of drawer button.
|
161
185
|
*
|
186
|
+
* @param {Event} evt The event that fired.
|
162
187
|
* @private
|
163
188
|
*/
|
164
|
-
MaterialLayout.prototype.drawerToggleHandler_ = function() {
|
165
|
-
|
166
|
-
|
189
|
+
MaterialLayout.prototype.drawerToggleHandler_ = function(evt) {
|
190
|
+
if (evt && (evt.type === 'keydown')) {
|
191
|
+
if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) {
|
192
|
+
// prevent scrolling in drawer nav
|
193
|
+
evt.preventDefault();
|
194
|
+
} else {
|
195
|
+
// prevent other keys
|
196
|
+
return;
|
197
|
+
}
|
198
|
+
}
|
199
|
+
|
200
|
+
this.toggleDrawer();
|
167
201
|
};
|
168
202
|
|
169
203
|
/**
|
@@ -209,6 +243,28 @@
|
|
209
243
|
}
|
210
244
|
};
|
211
245
|
|
246
|
+
/**
|
247
|
+
* Toggle drawer state
|
248
|
+
*
|
249
|
+
* @public
|
250
|
+
*/
|
251
|
+
MaterialLayout.prototype.toggleDrawer = function() {
|
252
|
+
var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
|
253
|
+
this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
|
254
|
+
this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
|
255
|
+
|
256
|
+
// Set accessibility properties.
|
257
|
+
if (this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) {
|
258
|
+
this.drawer_.setAttribute('aria-hidden', 'false');
|
259
|
+
drawerButton.setAttribute('aria-expanded', 'true');
|
260
|
+
} else {
|
261
|
+
this.drawer_.setAttribute('aria-hidden', 'true');
|
262
|
+
drawerButton.setAttribute('aria-expanded', 'false');
|
263
|
+
}
|
264
|
+
};
|
265
|
+
MaterialLayout.prototype['toggleDrawer'] =
|
266
|
+
MaterialLayout.prototype.toggleDrawer;
|
267
|
+
|
212
268
|
/**
|
213
269
|
* Initialize element.
|
214
270
|
*/
|
@@ -240,6 +296,16 @@
|
|
240
296
|
}
|
241
297
|
}
|
242
298
|
|
299
|
+
window.addEventListener('pageshow', function(e) {
|
300
|
+
if (e.persisted) { // when page is loaded from back/forward cache
|
301
|
+
// trigger repaint to let layout scroll in safari
|
302
|
+
this.element_.style.overflowY = 'hidden';
|
303
|
+
requestAnimationFrame(function() {
|
304
|
+
this.element_.style.overflowY = '';
|
305
|
+
}.bind(this));
|
306
|
+
}
|
307
|
+
}.bind(this), false);
|
308
|
+
|
243
309
|
if (this.header_) {
|
244
310
|
this.tabBar_ = this.header_.querySelector('.' + this.CssClasses_.TAB_BAR);
|
245
311
|
}
|
@@ -288,11 +354,14 @@
|
|
288
354
|
this.CssClasses_.DRAWER_BTN);
|
289
355
|
if (!drawerButton) {
|
290
356
|
drawerButton = document.createElement('div');
|
357
|
+
drawerButton.setAttribute('aria-expanded', 'false');
|
358
|
+
drawerButton.setAttribute('role', 'button');
|
359
|
+
drawerButton.setAttribute('tabindex', '0');
|
291
360
|
drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
|
292
361
|
|
293
362
|
var drawerButtonIcon = document.createElement('i');
|
294
363
|
drawerButtonIcon.classList.add(this.CssClasses_.ICON);
|
295
|
-
drawerButtonIcon.
|
364
|
+
drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON;
|
296
365
|
drawerButton.appendChild(drawerButtonIcon);
|
297
366
|
}
|
298
367
|
|
@@ -307,6 +376,9 @@
|
|
307
376
|
drawerButton.addEventListener('click',
|
308
377
|
this.drawerToggleHandler_.bind(this));
|
309
378
|
|
379
|
+
drawerButton.addEventListener('keydown',
|
380
|
+
this.drawerToggleHandler_.bind(this));
|
381
|
+
|
310
382
|
// Add a class if the layout has a drawer, for altering the left padding.
|
311
383
|
// Adds the HAS_DRAWER to the elements since this.header_ may or may
|
312
384
|
// not be present.
|
@@ -326,6 +398,9 @@
|
|
326
398
|
obfuscator.addEventListener('click',
|
327
399
|
this.drawerToggleHandler_.bind(this));
|
328
400
|
this.obfuscator_ = obfuscator;
|
401
|
+
|
402
|
+
this.drawer_.addEventListener('keydown', this.keyboardEventHandler_.bind(this));
|
403
|
+
this.drawer_.setAttribute('aria-hidden', 'true');
|
329
404
|
}
|
330
405
|
|
331
406
|
// Keep an eye on screen size, and add/remove auxiliary class for styling
|
@@ -417,6 +492,19 @@
|
|
417
492
|
* @param {MaterialLayout} layout The MaterialLayout object that owns the tab.
|
418
493
|
*/
|
419
494
|
function MaterialLayoutTab(tab, tabs, panels, layout) {
|
495
|
+
|
496
|
+
/**
|
497
|
+
* Auxiliary method to programmatically select a tab in the UI.
|
498
|
+
*/
|
499
|
+
function selectTab() {
|
500
|
+
var href = tab.href.split('#')[1];
|
501
|
+
var panel = layout.content_.querySelector('#' + href);
|
502
|
+
layout.resetTabState_(tabs);
|
503
|
+
layout.resetPanelState_(panels);
|
504
|
+
tab.classList.add(layout.CssClasses_.IS_ACTIVE);
|
505
|
+
panel.classList.add(layout.CssClasses_.IS_ACTIVE);
|
506
|
+
}
|
507
|
+
|
420
508
|
if (layout.tabBar_.classList.contains(
|
421
509
|
layout.CssClasses_.JS_RIPPLE_EFFECT)) {
|
422
510
|
var rippleContainer = document.createElement('span');
|
@@ -428,6 +516,15 @@
|
|
428
516
|
tab.appendChild(rippleContainer);
|
429
517
|
}
|
430
518
|
|
519
|
+
tab.addEventListener('click', function(e) {
|
520
|
+
if (tab.getAttribute('href').charAt(0) === '#') {
|
521
|
+
e.preventDefault();
|
522
|
+
selectTab();
|
523
|
+
}
|
524
|
+
});
|
525
|
+
|
526
|
+
tab.show = selectTab;
|
527
|
+
|
431
528
|
tab.addEventListener('click', function(e) {
|
432
529
|
e.preventDefault();
|
433
530
|
var href = tab.href.split('#')[1];
|
@@ -438,6 +535,7 @@
|
|
438
535
|
panel.classList.add(layout.CssClasses_.IS_ACTIVE);
|
439
536
|
});
|
440
537
|
}
|
538
|
+
window['MaterialLayoutTab'] = MaterialLayoutTab;
|
441
539
|
|
442
540
|
// The component registers itself. It can assume componentHandler is available
|
443
541
|
// in the global scope.
|
@@ -91,7 +91,6 @@ componentHandler = (function() {
|
|
91
91
|
/** @type {!Array<componentHandler.Component>} */
|
92
92
|
var createdComponents_ = [];
|
93
93
|
|
94
|
-
var downgradeMethod_ = 'mdlDowngrade';
|
95
94
|
var componentConfigProperty_ = 'mdlComponentConfigInternal_';
|
96
95
|
|
97
96
|
/**
|
@@ -225,7 +224,7 @@ componentHandler = (function() {
|
|
225
224
|
}
|
226
225
|
} else {
|
227
226
|
throw new Error(
|
228
|
-
|
227
|
+
'Unable to find a registered component for the given class.');
|
229
228
|
}
|
230
229
|
|
231
230
|
var ev = document.createEvent('Events');
|
@@ -335,47 +334,25 @@ componentHandler = (function() {
|
|
335
334
|
}
|
336
335
|
}
|
337
336
|
|
338
|
-
/**
|
339
|
-
* Finds a created component by a given DOM node.
|
340
|
-
*
|
341
|
-
* @param {!Node} node
|
342
|
-
* @return {*}
|
343
|
-
*/
|
344
|
-
function findCreatedComponentByNodeInternal(node) {
|
345
|
-
for (var n = 0; n < createdComponents_.length; n++) {
|
346
|
-
var component = createdComponents_[n];
|
347
|
-
if (component.element_ === node) {
|
348
|
-
return component;
|
349
|
-
}
|
350
|
-
}
|
351
|
-
}
|
352
|
-
|
353
337
|
/**
|
354
338
|
* Check the component for the downgrade method.
|
355
339
|
* Execute if found.
|
356
340
|
* Remove component from createdComponents list.
|
357
341
|
*
|
358
|
-
* @param {
|
342
|
+
* @param {?componentHandler.Component} component
|
359
343
|
*/
|
360
344
|
function deconstructComponentInternal(component) {
|
361
|
-
|
362
|
-
|
363
|
-
.classConstructor.prototype
|
364
|
-
.hasOwnProperty(downgradeMethod_)) {
|
365
|
-
component[downgradeMethod_]();
|
366
|
-
var componentIndex = createdComponents_.indexOf(component);
|
367
|
-
createdComponents_.splice(componentIndex, 1);
|
368
|
-
|
369
|
-
var upgrades = component.element_.getAttribute('data-upgraded').split(',');
|
370
|
-
var componentPlace = upgrades.indexOf(
|
371
|
-
component[componentConfigProperty_].classAsString);
|
372
|
-
upgrades.splice(componentPlace, 1);
|
373
|
-
component.element_.setAttribute('data-upgraded', upgrades.join(','));
|
345
|
+
var componentIndex = createdComponents_.indexOf(component);
|
346
|
+
createdComponents_.splice(componentIndex, 1);
|
374
347
|
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
348
|
+
var upgrades = component.element_.getAttribute('data-upgraded').split(',');
|
349
|
+
var componentPlace = upgrades.indexOf(component[componentConfigProperty_].classAsString);
|
350
|
+
upgrades.splice(componentPlace, 1);
|
351
|
+
component.element_.setAttribute('data-upgraded', upgrades.join(','));
|
352
|
+
|
353
|
+
var ev = document.createEvent('Events');
|
354
|
+
ev.initEvent('mdl-componentdowngraded', true, true);
|
355
|
+
component.element_.dispatchEvent(ev);
|
379
356
|
}
|
380
357
|
|
381
358
|
/**
|
@@ -389,7 +366,9 @@ componentHandler = (function() {
|
|
389
366
|
* @param {!Node} node the node to be downgraded
|
390
367
|
*/
|
391
368
|
var downgradeNode = function(node) {
|
392
|
-
|
369
|
+
createdComponents_.filter(function(item) {
|
370
|
+
return item.element_ === node;
|
371
|
+
}).forEach(deconstructComponentInternal);
|
393
372
|
};
|
394
373
|
if (nodes instanceof Array || nodes instanceof NodeList) {
|
395
374
|
for (var n = 0; n < nodes.length; n++) {
|
@@ -112,7 +112,8 @@
|
|
112
112
|
container.insertBefore(outline, this.element_);
|
113
113
|
|
114
114
|
// Find the "for" element and bind events to it.
|
115
|
-
var forElId = this.element_.getAttribute('for')
|
115
|
+
var forElId = this.element_.getAttribute('for') ||
|
116
|
+
this.element_.getAttribute('data-mdl-for');
|
116
117
|
var forEl = null;
|
117
118
|
if (forElId) {
|
118
119
|
forEl = document.getElementById(forElId);
|
@@ -337,21 +338,25 @@
|
|
337
338
|
}
|
338
339
|
};
|
339
340
|
|
341
|
+
/**
|
342
|
+
* Cleanup function to remove animation listeners.
|
343
|
+
*
|
344
|
+
* @param {Event} evt
|
345
|
+
* @private
|
346
|
+
*/
|
347
|
+
|
348
|
+
MaterialMenu.prototype.removeAnimationEndListener_ = function(evt) {
|
349
|
+
evt.target.classList.remove(MaterialMenu.prototype.CssClasses_.IS_ANIMATING);
|
350
|
+
};
|
351
|
+
|
340
352
|
/**
|
341
353
|
* Adds an event listener to clean up after the animation ends.
|
342
354
|
*
|
343
355
|
* @private
|
344
356
|
*/
|
345
357
|
MaterialMenu.prototype.addAnimationEndListener_ = function() {
|
346
|
-
|
347
|
-
|
348
|
-
this.element_.removeEventListener('webkitTransitionEnd', cleanup);
|
349
|
-
this.element_.classList.remove(this.CssClasses_.IS_ANIMATING);
|
350
|
-
}.bind(this);
|
351
|
-
|
352
|
-
// Remove animation class once the transition is done.
|
353
|
-
this.element_.addEventListener('transitionend', cleanup);
|
354
|
-
this.element_.addEventListener('webkitTransitionEnd', cleanup);
|
358
|
+
this.element_.addEventListener('transitionend', this.removeAnimationEndListener_);
|
359
|
+
this.element_.addEventListener('webkitTransitionEnd', this.removeAnimationEndListener_);
|
355
360
|
};
|
356
361
|
|
357
362
|
/**
|
@@ -432,7 +437,7 @@
|
|
432
437
|
|
433
438
|
// Remove all transition delays; menu items fade out concurrently.
|
434
439
|
for (var i = 0; i < items.length; i++) {
|
435
|
-
items[i].style.
|
440
|
+
items[i].style.removeProperty('transition-delay');
|
436
441
|
}
|
437
442
|
|
438
443
|
// Measure the inner element.
|
@@ -466,31 +471,6 @@
|
|
466
471
|
};
|
467
472
|
MaterialMenu.prototype['toggle'] = MaterialMenu.prototype.toggle;
|
468
473
|
|
469
|
-
/**
|
470
|
-
* Downgrade the component.
|
471
|
-
*
|
472
|
-
* @private
|
473
|
-
*/
|
474
|
-
MaterialMenu.prototype.mdlDowngrade_ = function() {
|
475
|
-
var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
|
476
|
-
|
477
|
-
for (var i = 0; i < items.length; i++) {
|
478
|
-
items[i].removeEventListener('click', this.boundItemClick_);
|
479
|
-
items[i].removeEventListener('keydown', this.boundItemKeydown_);
|
480
|
-
}
|
481
|
-
};
|
482
|
-
|
483
|
-
/**
|
484
|
-
* Public alias for the downgrade method.
|
485
|
-
*
|
486
|
-
* @public
|
487
|
-
*/
|
488
|
-
MaterialMenu.prototype.mdlDowngrade =
|
489
|
-
MaterialMenu.prototype.mdlDowngrade_;
|
490
|
-
|
491
|
-
MaterialMenu.prototype['mdlDowngrade'] =
|
492
|
-
MaterialMenu.prototype.mdlDowngrade;
|
493
|
-
|
494
474
|
// The component registers itself. It can assume componentHandler is available
|
495
475
|
// in the global scope.
|
496
476
|
componentHandler.register({
|