material_design_lite-sass 1.0.2.1 → 1.0.3

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.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +6 -0
  3. data/lib/material_design_lite/sass/version.rb +1 -1
  4. data/vendor/assets/javascripts/material.js +2562 -2993
  5. data/vendor/assets/javascripts/material/button.js +114 -112
  6. data/vendor/assets/javascripts/material/checkbox.js +255 -260
  7. data/vendor/assets/javascripts/material/data-table.js +140 -124
  8. data/vendor/assets/javascripts/material/icon-toggle.js +239 -243
  9. data/vendor/assets/javascripts/material/layout.js +392 -388
  10. data/vendor/assets/javascripts/material/mdlComponentHandler.js +68 -27
  11. data/vendor/assets/javascripts/material/menu.js +430 -414
  12. data/vendor/assets/javascripts/material/progress.js +110 -97
  13. data/vendor/assets/javascripts/material/radio.js +244 -247
  14. data/vendor/assets/javascripts/material/ripple.js +220 -211
  15. data/vendor/assets/javascripts/material/slider.js +228 -228
  16. data/vendor/assets/javascripts/material/spinner.js +122 -119
  17. data/vendor/assets/javascripts/material/switch.js +246 -250
  18. data/vendor/assets/javascripts/material/tabs.js +129 -127
  19. data/vendor/assets/javascripts/material/textfield.js +221 -222
  20. data/vendor/assets/javascripts/material/tooltip.js +126 -122
  21. data/vendor/assets/stylesheets/material/_badge.scss +1 -1
  22. data/vendor/assets/stylesheets/material/_button.scss +15 -8
  23. data/vendor/assets/stylesheets/material/_card.scss +1 -1
  24. data/vendor/assets/stylesheets/material/_checkbox.scss +1 -1
  25. data/vendor/assets/stylesheets/material/_data-table.scss +5 -3
  26. data/vendor/assets/stylesheets/material/_functions.scss +16 -0
  27. data/vendor/assets/stylesheets/material/_grid.scss +11 -20
  28. data/vendor/assets/stylesheets/material/_layout.scss +7 -5
  29. data/vendor/assets/stylesheets/material/_menu.scss +4 -1
  30. data/vendor/assets/stylesheets/material/_radio.scss +1 -1
  31. data/vendor/assets/stylesheets/material/_slider.scss +1 -0
  32. data/vendor/assets/stylesheets/material/_switch.scss +1 -1
  33. data/vendor/assets/stylesheets/material/_tabs.scss +1 -1
  34. data/vendor/assets/stylesheets/material/_textfield.scss +15 -5
  35. data/vendor/assets/stylesheets/material/_tooltip.scss +2 -2
  36. data/vendor/assets/stylesheets/material/_variables.scss +18 -43
  37. data/vendor/assets/stylesheets/material/resets/_h5bp.scss +28 -21
  38. metadata +1 -1
@@ -15,420 +15,424 @@
15
15
  * limitations under the License.
16
16
  */
17
17
 
18
- /**
19
- * Class constructor for Layout MDL component.
20
- * Implements MDL component design pattern defined at:
21
- * https://github.com/jasonmayes/mdl-component-design-pattern
22
- * @param {HTMLElement} element The element that will be upgraded.
23
- */
24
- function MaterialLayout(element) {
18
+ (function() {
25
19
  'use strict';
26
20
 
27
- this.element_ = element;
28
-
29
- // Initialize instance.
30
- this.init();
31
- }
32
-
33
- /**
34
- * Store constants in one place so they can be updated easily.
35
- * @enum {string | number}
36
- * @private
37
- */
38
- MaterialLayout.prototype.Constant_ = {
39
- MAX_WIDTH: '(max-width: 1024px)',
40
- TAB_SCROLL_PIXELS: 100,
41
-
42
- MENU_ICON: 'menu',
43
- CHEVRON_LEFT: 'chevron_left',
44
- CHEVRON_RIGHT: 'chevron_right'
45
- };
46
-
47
- /**
48
- * Modes.
49
- * @enum {number}
50
- * @private
51
- */
52
- MaterialLayout.prototype.Mode_ = {
53
- STANDARD: 0,
54
- SEAMED: 1,
55
- WATERFALL: 2,
56
- SCROLL: 3
57
- };
58
-
59
- /**
60
- * Store strings for class names defined by this component that are used in
61
- * JavaScript. This allows us to simply change it in one place should we
62
- * decide to modify at a later date.
63
- * @enum {string}
64
- * @private
65
- */
66
- MaterialLayout.prototype.CssClasses_ = {
67
- CONTAINER: 'mdl-layout__container',
68
- HEADER: 'mdl-layout__header',
69
- DRAWER: 'mdl-layout__drawer',
70
- CONTENT: 'mdl-layout__content',
71
- DRAWER_BTN: 'mdl-layout__drawer-button',
72
-
73
- ICON: 'material-icons',
74
-
75
- JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
76
- RIPPLE_CONTAINER: 'mdl-layout__tab-ripple-container',
77
- RIPPLE: 'mdl-ripple',
78
- RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
79
-
80
- HEADER_SEAMED: 'mdl-layout__header--seamed',
81
- HEADER_WATERFALL: 'mdl-layout__header--waterfall',
82
- HEADER_SCROLL: 'mdl-layout__header--scroll',
83
-
84
- FIXED_HEADER: 'mdl-layout--fixed-header',
85
- OBFUSCATOR: 'mdl-layout__obfuscator',
86
-
87
- TAB_BAR: 'mdl-layout__tab-bar',
88
- TAB_CONTAINER: 'mdl-layout__tab-bar-container',
89
- TAB: 'mdl-layout__tab',
90
- TAB_BAR_BUTTON: 'mdl-layout__tab-bar-button',
91
- TAB_BAR_LEFT_BUTTON: 'mdl-layout__tab-bar-left-button',
92
- TAB_BAR_RIGHT_BUTTON: 'mdl-layout__tab-bar-right-button',
93
- PANEL: 'mdl-layout__tab-panel',
94
-
95
- HAS_DRAWER: 'has-drawer',
96
- HAS_TABS: 'has-tabs',
97
- HAS_SCROLLING_HEADER: 'has-scrolling-header',
98
- CASTING_SHADOW: 'is-casting-shadow',
99
- IS_COMPACT: 'is-compact',
100
- IS_SMALL_SCREEN: 'is-small-screen',
101
- IS_DRAWER_OPEN: 'is-visible',
102
- IS_ACTIVE: 'is-active',
103
- IS_UPGRADED: 'is-upgraded',
104
- IS_ANIMATING: 'is-animating',
105
-
106
- ON_LARGE_SCREEN : 'mdl-layout--large-screen-only',
107
- ON_SMALL_SCREEN : 'mdl-layout--small-screen-only'
108
-
109
- };
110
-
111
- /**
112
- * Handles scrolling on the content.
113
- * @private
114
- */
115
- MaterialLayout.prototype.contentScrollHandler_ = function() {
116
- 'use strict';
117
-
118
- if (this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)) {
119
- return;
120
- }
121
-
122
- if (this.content_.scrollTop > 0 &&
123
- !this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
124
- this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
125
- this.header_.classList.add(this.CssClasses_.IS_COMPACT);
126
- this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
127
- } else if (this.content_.scrollTop <= 0 &&
128
- this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
129
- this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
130
- this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
131
- this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
132
- }
133
- };
134
-
135
- /**
136
- * Handles changes in screen size.
137
- * @private
138
- */
139
- MaterialLayout.prototype.screenSizeHandler_ = function() {
140
- 'use strict';
141
-
142
- if (this.screenSizeMediaQuery_.matches) {
143
- this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
144
- } else {
145
- this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
146
- // Collapse drawer (if any) when moving to a large screen size.
147
- if (this.drawer_) {
148
- this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
21
+ /**
22
+ * Class constructor for Layout 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 MaterialLayout = function MaterialLayout(element) {
29
+ this.element_ = element;
30
+
31
+ // Initialize instance.
32
+ this.init();
33
+ };
34
+ window.MaterialLayout = MaterialLayout;
35
+
36
+ /**
37
+ * Store constants in one place so they can be updated easily.
38
+ *
39
+ * @enum {String | Number}
40
+ * @private
41
+ */
42
+ MaterialLayout.prototype.Constant_ = {
43
+ MAX_WIDTH: '(max-width: 1024px)',
44
+ TAB_SCROLL_PIXELS: 100,
45
+
46
+ MENU_ICON: 'menu',
47
+ CHEVRON_LEFT: 'chevron_left',
48
+ CHEVRON_RIGHT: 'chevron_right'
49
+ };
50
+
51
+ /**
52
+ * Modes.
53
+ *
54
+ * @enum {Number}
55
+ * @private
56
+ */
57
+ MaterialLayout.prototype.Mode_ = {
58
+ STANDARD: 0,
59
+ SEAMED: 1,
60
+ WATERFALL: 2,
61
+ SCROLL: 3
62
+ };
63
+
64
+ /**
65
+ * Store strings for class names defined by this component that are used in
66
+ * JavaScript. This allows us to simply change it in one place should we
67
+ * decide to modify at a later date.
68
+ *
69
+ * @enum {String}
70
+ * @private
71
+ */
72
+ MaterialLayout.prototype.CssClasses_ = {
73
+ CONTAINER: 'mdl-layout__container',
74
+ HEADER: 'mdl-layout__header',
75
+ DRAWER: 'mdl-layout__drawer',
76
+ CONTENT: 'mdl-layout__content',
77
+ DRAWER_BTN: 'mdl-layout__drawer-button',
78
+
79
+ ICON: 'material-icons',
80
+
81
+ JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
82
+ RIPPLE_CONTAINER: 'mdl-layout__tab-ripple-container',
83
+ RIPPLE: 'mdl-ripple',
84
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
85
+
86
+ HEADER_SEAMED: 'mdl-layout__header--seamed',
87
+ HEADER_WATERFALL: 'mdl-layout__header--waterfall',
88
+ HEADER_SCROLL: 'mdl-layout__header--scroll',
89
+
90
+ FIXED_HEADER: 'mdl-layout--fixed-header',
91
+ OBFUSCATOR: 'mdl-layout__obfuscator',
92
+
93
+ TAB_BAR: 'mdl-layout__tab-bar',
94
+ TAB_CONTAINER: 'mdl-layout__tab-bar-container',
95
+ TAB: 'mdl-layout__tab',
96
+ TAB_BAR_BUTTON: 'mdl-layout__tab-bar-button',
97
+ TAB_BAR_LEFT_BUTTON: 'mdl-layout__tab-bar-left-button',
98
+ TAB_BAR_RIGHT_BUTTON: 'mdl-layout__tab-bar-right-button',
99
+ PANEL: 'mdl-layout__tab-panel',
100
+
101
+ HAS_DRAWER: 'has-drawer',
102
+ HAS_TABS: 'has-tabs',
103
+ HAS_SCROLLING_HEADER: 'has-scrolling-header',
104
+ CASTING_SHADOW: 'is-casting-shadow',
105
+ IS_COMPACT: 'is-compact',
106
+ IS_SMALL_SCREEN: 'is-small-screen',
107
+ IS_DRAWER_OPEN: 'is-visible',
108
+ IS_ACTIVE: 'is-active',
109
+ IS_UPGRADED: 'is-upgraded',
110
+ IS_ANIMATING: 'is-animating',
111
+
112
+ ON_LARGE_SCREEN: 'mdl-layout--large-screen-only',
113
+ ON_SMALL_SCREEN: 'mdl-layout--small-screen-only'
114
+
115
+ };
116
+
117
+ /**
118
+ * Handles scrolling on the content.
119
+ *
120
+ * @private
121
+ */
122
+ MaterialLayout.prototype.contentScrollHandler_ = function() {
123
+ if (this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)) {
124
+ return;
149
125
  }
150
- }
151
- };
152
-
153
- /**
154
- * Handles toggling of the drawer.
155
- * @param {Element} drawer The drawer container element.
156
- * @private
157
- */
158
- MaterialLayout.prototype.drawerToggleHandler_ = function() {
159
- 'use strict';
160
-
161
- this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
162
- };
163
-
164
- /**
165
- * Handles (un)setting the `is-animating` class
166
- */
167
- MaterialLayout.prototype.headerTransitionEndHandler = function() {
168
- 'use strict';
169
-
170
- this.header_.classList.remove(this.CssClasses_.IS_ANIMATING);
171
- };
172
-
173
- /**
174
- * Handles expanding the header on click
175
- */
176
- MaterialLayout.prototype.headerClickHandler = function() {
177
- 'use strict';
178
-
179
- if (this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
180
- this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
181
- this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
182
- }
183
- };
184
-
185
- /**
186
- * Reset tab state, dropping active classes
187
- * @private
188
- */
189
- MaterialLayout.prototype.resetTabState_ = function(tabBar) {
190
- 'use strict';
191
-
192
- for (var k = 0; k < tabBar.length; k++) {
193
- tabBar[k].classList.remove(this.CssClasses_.IS_ACTIVE);
194
- }
195
- };
196
-
197
- /**
198
- * Reset panel state, droping active classes
199
- * @private
200
- */
201
- MaterialLayout.prototype.resetPanelState_ = function(panels) {
202
- 'use strict';
203
-
204
- for (var j = 0; j < panels.length; j++) {
205
- panels[j].classList.remove(this.CssClasses_.IS_ACTIVE);
206
- }
207
- };
208
126
 
209
- /**
210
- * Initialize element.
211
- */
212
- MaterialLayout.prototype.init = function() {
213
- 'use strict';
214
-
215
- if (this.element_) {
216
- var container = document.createElement('div');
217
- container.classList.add(this.CssClasses_.CONTAINER);
218
- this.element_.parentElement.insertBefore(container, this.element_);
219
- this.element_.parentElement.removeChild(this.element_);
220
- container.appendChild(this.element_);
221
-
222
- var directChildren = this.element_.childNodes;
223
- for (var c = 0; c < directChildren.length; c++) {
224
- var child = directChildren[c];
225
- if (child.classList &&
226
- child.classList.contains(this.CssClasses_.HEADER)) {
227
- this.header_ = child;
228
- }
229
-
230
- if (child.classList &&
231
- child.classList.contains(this.CssClasses_.DRAWER)) {
232
- this.drawer_ = child;
233
- }
234
-
235
- if (child.classList &&
236
- child.classList.contains(this.CssClasses_.CONTENT)) {
237
- this.content_ = child;
127
+ if (this.content_.scrollTop > 0 &&
128
+ !this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
129
+ this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
130
+ this.header_.classList.add(this.CssClasses_.IS_COMPACT);
131
+ this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
132
+ } else if (this.content_.scrollTop <= 0 &&
133
+ this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
134
+ this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
135
+ this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
136
+ this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
137
+ }
138
+ };
139
+
140
+ /**
141
+ * Handles changes in screen size.
142
+ *
143
+ * @private
144
+ */
145
+ MaterialLayout.prototype.screenSizeHandler_ = function() {
146
+ if (this.screenSizeMediaQuery_.matches) {
147
+ this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
148
+ } else {
149
+ this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
150
+ // Collapse drawer (if any) when moving to a large screen size.
151
+ if (this.drawer_) {
152
+ this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
238
153
  }
239
154
  }
240
-
241
- if (this.header_) {
242
- this.tabBar_ = this.header_.querySelector('.' + this.CssClasses_.TAB_BAR);
155
+ };
156
+
157
+ /**
158
+ * Handles toggling of the drawer.
159
+ *
160
+ * @private
161
+ */
162
+ MaterialLayout.prototype.drawerToggleHandler_ = function() {
163
+ this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
164
+ };
165
+
166
+ /**
167
+ * Handles (un)setting the `is-animating` class
168
+ *
169
+ * @private
170
+ */
171
+ MaterialLayout.prototype.headerTransitionEndHandler_ = function() {
172
+ this.header_.classList.remove(this.CssClasses_.IS_ANIMATING);
173
+ };
174
+
175
+ /**
176
+ * Handles expanding the header on click
177
+ *
178
+ * @private
179
+ */
180
+ MaterialLayout.prototype.headerClickHandler_ = function() {
181
+ if (this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
182
+ this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
183
+ this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
243
184
  }
185
+ };
186
+
187
+ /**
188
+ * Reset tab state, dropping active classes
189
+ *
190
+ * @private
191
+ */
192
+ MaterialLayout.prototype.resetTabState_ = function(tabBar) {
193
+ for (var k = 0; k < tabBar.length; k++) {
194
+ tabBar[k].classList.remove(this.CssClasses_.IS_ACTIVE);
195
+ }
196
+ };
197
+
198
+ /**
199
+ * Reset panel state, droping active classes
200
+ *
201
+ * @private
202
+ */
203
+ MaterialLayout.prototype.resetPanelState_ = function(panels) {
204
+ for (var j = 0; j < panels.length; j++) {
205
+ panels[j].classList.remove(this.CssClasses_.IS_ACTIVE);
206
+ }
207
+ };
208
+
209
+ /**
210
+ * Initialize element.
211
+ */
212
+ MaterialLayout.prototype.init = function() {
213
+ if (this.element_) {
214
+ var container = document.createElement('div');
215
+ container.classList.add(this.CssClasses_.CONTAINER);
216
+ this.element_.parentElement.insertBefore(container, this.element_);
217
+ this.element_.parentElement.removeChild(this.element_);
218
+ container.appendChild(this.element_);
219
+
220
+ var directChildren = this.element_.childNodes;
221
+ for (var c = 0; c < directChildren.length; c++) {
222
+ var child = directChildren[c];
223
+ if (child.classList &&
224
+ child.classList.contains(this.CssClasses_.HEADER)) {
225
+ this.header_ = child;
226
+ }
244
227
 
245
- var mode = this.Mode_.STANDARD;
246
-
247
- // Keep an eye on screen size, and add/remove auxiliary class for styling
248
- // of small screens.
249
- this.screenSizeMediaQuery_ = window.matchMedia(this.Constant_.MAX_WIDTH);
250
- this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
251
- this.screenSizeHandler_();
252
-
253
- if (this.header_) {
254
- if (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)) {
255
- mode = this.Mode_.SEAMED;
256
- } else if (this.header_.classList.contains(
257
- this.CssClasses_.HEADER_WATERFALL)) {
258
- mode = this.Mode_.WATERFALL;
259
- this.header_.addEventListener('transitionend',
260
- this.headerTransitionEndHandler.bind(this));
261
- this.header_.addEventListener('click',
262
- this.headerClickHandler.bind(this));
263
- } else if (this.header_.classList.contains(
264
- this.CssClasses_.HEADER_SCROLL)) {
265
- mode = this.Mode_.SCROLL;
266
- container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
267
- }
268
-
269
- if (mode === this.Mode_.STANDARD) {
270
- this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
271
- if (this.tabBar_) {
272
- this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW);
228
+ if (child.classList &&
229
+ child.classList.contains(this.CssClasses_.DRAWER)) {
230
+ this.drawer_ = child;
273
231
  }
274
- } else if (mode === this.Mode_.SEAMED || mode === this.Mode_.SCROLL) {
275
- this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
276
- if (this.tabBar_) {
277
- this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW);
232
+
233
+ if (child.classList &&
234
+ child.classList.contains(this.CssClasses_.CONTENT)) {
235
+ this.content_ = child;
278
236
  }
279
- } else if (mode === this.Mode_.WATERFALL) {
280
- // Add and remove shadows depending on scroll position.
281
- // Also add/remove auxiliary class for styling of the compact version of
282
- // the header.
283
- this.content_.addEventListener('scroll',
284
- this.contentScrollHandler_.bind(this));
285
- this.contentScrollHandler_();
286
237
  }
287
- }
288
238
 
289
- // Add drawer toggling button to our layout, if we have an openable drawer.
290
- if (this.drawer_) {
291
- var drawerButton = document.createElement('div');
292
- drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
293
-
294
- if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) {
295
- //If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well.
296
- drawerButton.classList.add(this.CssClasses_.ON_LARGE_SCREEN);
297
- } else if (this.drawer_.classList.contains(this.CssClasses_.ON_SMALL_SCREEN)) {
298
- //If drawer has ON_SMALL_SCREEN class then add it to the drawer toggle button as well.
299
- drawerButton.classList.add(this.CssClasses_.ON_SMALL_SCREEN);
300
- }
301
- var drawerButtonIcon = document.createElement('i');
302
- drawerButtonIcon.classList.add(this.CssClasses_.ICON);
303
- drawerButtonIcon.textContent = this.Constant_.MENU_ICON;
304
- drawerButton.appendChild(drawerButtonIcon);
305
- drawerButton.addEventListener('click',
306
- this.drawerToggleHandler_.bind(this));
307
-
308
- // Add a class if the layout has a drawer, for altering the left padding.
309
- // Adds the HAS_DRAWER to the elements since this.header_ may or may
310
- // not be present.
311
- this.element_.classList.add(this.CssClasses_.HAS_DRAWER);
312
-
313
- // If we have a fixed header, add the button to the header rather than
314
- // the layout.
315
- if (this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)) {
316
- this.header_.insertBefore(drawerButton, this.header_.firstChild);
317
- } else {
318
- this.element_.insertBefore(drawerButton, this.content_);
239
+ if (this.header_) {
240
+ this.tabBar_ = this.header_.querySelector('.' + this.CssClasses_.TAB_BAR);
319
241
  }
320
242
 
321
- var obfuscator = document.createElement('div');
322
- obfuscator.classList.add(this.CssClasses_.OBFUSCATOR);
323
- this.element_.appendChild(obfuscator);
324
- obfuscator.addEventListener('click',
325
- this.drawerToggleHandler_.bind(this));
326
- }
243
+ var mode = this.Mode_.STANDARD;
244
+
245
+ // Keep an eye on screen size, and add/remove auxiliary class for styling
246
+ // of small screens.
247
+ this.screenSizeMediaQuery_ = window.matchMedia(this.Constant_.MAX_WIDTH);
248
+ this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
249
+ this.screenSizeHandler_();
250
+
251
+ if (this.header_) {
252
+ if (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)) {
253
+ mode = this.Mode_.SEAMED;
254
+ } else if (this.header_.classList.contains(
255
+ this.CssClasses_.HEADER_WATERFALL)) {
256
+ mode = this.Mode_.WATERFALL;
257
+ this.header_.addEventListener('transitionend',
258
+ this.headerTransitionEndHandler_.bind(this));
259
+ this.header_.addEventListener('click',
260
+ this.headerClickHandler_.bind(this));
261
+ } else if (this.header_.classList.contains(
262
+ this.CssClasses_.HEADER_SCROLL)) {
263
+ mode = this.Mode_.SCROLL;
264
+ container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
265
+ }
327
266
 
328
- // Initialize tabs, if any.
329
- if (this.header_ && this.tabBar_) {
330
- this.element_.classList.add(this.CssClasses_.HAS_TABS);
331
-
332
- var tabContainer = document.createElement('div');
333
- tabContainer.classList.add(this.CssClasses_.TAB_CONTAINER);
334
- this.header_.insertBefore(tabContainer, this.tabBar_);
335
- this.header_.removeChild(this.tabBar_);
336
-
337
- var leftButton = document.createElement('div');
338
- leftButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
339
- leftButton.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON);
340
- var leftButtonIcon = document.createElement('i');
341
- leftButtonIcon.classList.add(this.CssClasses_.ICON);
342
- leftButtonIcon.textContent = this.Constant_.CHEVRON_LEFT;
343
- leftButton.appendChild(leftButtonIcon);
344
- leftButton.addEventListener('click', function() {
345
- this.tabBar_.scrollLeft -= this.Constant_.TAB_SCROLL_PIXELS;
346
- }.bind(this));
347
-
348
- var rightButton = document.createElement('div');
349
- rightButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
350
- rightButton.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON);
351
- var rightButtonIcon = document.createElement('i');
352
- rightButtonIcon.classList.add(this.CssClasses_.ICON);
353
- rightButtonIcon.textContent = this.Constant_.CHEVRON_RIGHT;
354
- rightButton.appendChild(rightButtonIcon);
355
- rightButton.addEventListener('click', function() {
356
- this.tabBar_.scrollLeft += this.Constant_.TAB_SCROLL_PIXELS;
357
- }.bind(this));
358
-
359
- tabContainer.appendChild(leftButton);
360
- tabContainer.appendChild(this.tabBar_);
361
- tabContainer.appendChild(rightButton);
362
-
363
- // Add and remove buttons depending on scroll position.
364
- var tabScrollHandler = function() {
365
- if (this.tabBar_.scrollLeft > 0) {
366
- leftButton.classList.add(this.CssClasses_.IS_ACTIVE);
367
- } else {
368
- leftButton.classList.remove(this.CssClasses_.IS_ACTIVE);
267
+ if (mode === this.Mode_.STANDARD) {
268
+ this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
269
+ if (this.tabBar_) {
270
+ this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW);
271
+ }
272
+ } else if (mode === this.Mode_.SEAMED || mode === this.Mode_.SCROLL) {
273
+ this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
274
+ if (this.tabBar_) {
275
+ this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW);
276
+ }
277
+ } else if (mode === this.Mode_.WATERFALL) {
278
+ // Add and remove shadows depending on scroll position.
279
+ // Also add/remove auxiliary class for styling of the compact version of
280
+ // the header.
281
+ this.content_.addEventListener('scroll',
282
+ this.contentScrollHandler_.bind(this));
283
+ this.contentScrollHandler_();
369
284
  }
285
+ }
370
286
 
371
- if (this.tabBar_.scrollLeft <
372
- this.tabBar_.scrollWidth - this.tabBar_.offsetWidth) {
373
- rightButton.classList.add(this.CssClasses_.IS_ACTIVE);
287
+ var eatEvent = function(ev) {
288
+ ev.preventDefault();
289
+ };
290
+
291
+ // Add drawer toggling button to our layout, if we have an openable drawer.
292
+ if (this.drawer_) {
293
+ var drawerButton = document.createElement('div');
294
+ drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
295
+
296
+ if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) {
297
+ //If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well.
298
+ drawerButton.classList.add(this.CssClasses_.ON_LARGE_SCREEN);
299
+ } else if (this.drawer_.classList.contains(this.CssClasses_.ON_SMALL_SCREEN)) {
300
+ //If drawer has ON_SMALL_SCREEN class then add it to the drawer toggle button as well.
301
+ drawerButton.classList.add(this.CssClasses_.ON_SMALL_SCREEN);
302
+ }
303
+ var drawerButtonIcon = document.createElement('i');
304
+ drawerButtonIcon.classList.add(this.CssClasses_.ICON);
305
+ drawerButtonIcon.textContent = this.Constant_.MENU_ICON;
306
+ drawerButton.appendChild(drawerButtonIcon);
307
+ drawerButton.addEventListener('click',
308
+ this.drawerToggleHandler_.bind(this));
309
+
310
+ // Add a class if the layout has a drawer, for altering the left padding.
311
+ // Adds the HAS_DRAWER to the elements since this.header_ may or may
312
+ // not be present.
313
+ this.element_.classList.add(this.CssClasses_.HAS_DRAWER);
314
+
315
+ this.drawer_.addEventListener('mousewheel', eatEvent);
316
+
317
+ // If we have a fixed header, add the button to the header rather than
318
+ // the layout.
319
+ if (this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)) {
320
+ this.header_.insertBefore(drawerButton, this.header_.firstChild);
374
321
  } else {
375
- rightButton.classList.remove(this.CssClasses_.IS_ACTIVE);
322
+ this.element_.insertBefore(drawerButton, this.content_);
376
323
  }
377
- }.bind(this);
378
-
379
- this.tabBar_.addEventListener('scroll', tabScrollHandler);
380
- tabScrollHandler();
381
324
 
382
- if (this.tabBar_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
383
- this.tabBar_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
325
+ var obfuscator = document.createElement('div');
326
+ obfuscator.classList.add(this.CssClasses_.OBFUSCATOR);
327
+ this.element_.appendChild(obfuscator);
328
+ obfuscator.addEventListener('click',
329
+ this.drawerToggleHandler_.bind(this));
330
+ obfuscator.addEventListener('mousewheel', eatEvent);
384
331
  }
385
332
 
386
- // Select element tabs, document panels
387
- var tabs = this.tabBar_.querySelectorAll('.' + this.CssClasses_.TAB);
388
- var panels = this.content_.querySelectorAll('.' + this.CssClasses_.PANEL);
389
-
390
- // Create new tabs for each tab element
391
- for (var i = 0; i < tabs.length; i++) {
392
- new MaterialLayoutTab(tabs[i], tabs, panels, this);
393
- }
394
- }
333
+ // Initialize tabs, if any.
334
+ if (this.header_ && this.tabBar_) {
335
+ this.element_.classList.add(this.CssClasses_.HAS_TABS);
336
+
337
+ var tabContainer = document.createElement('div');
338
+ tabContainer.classList.add(this.CssClasses_.TAB_CONTAINER);
339
+ this.header_.insertBefore(tabContainer, this.tabBar_);
340
+ this.header_.removeChild(this.tabBar_);
341
+
342
+ var leftButton = document.createElement('div');
343
+ leftButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
344
+ leftButton.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON);
345
+ var leftButtonIcon = document.createElement('i');
346
+ leftButtonIcon.classList.add(this.CssClasses_.ICON);
347
+ leftButtonIcon.textContent = this.Constant_.CHEVRON_LEFT;
348
+ leftButton.appendChild(leftButtonIcon);
349
+ leftButton.addEventListener('click', function() {
350
+ this.tabBar_.scrollLeft -= this.Constant_.TAB_SCROLL_PIXELS;
351
+ }.bind(this));
352
+
353
+ var rightButton = document.createElement('div');
354
+ rightButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
355
+ rightButton.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON);
356
+ var rightButtonIcon = document.createElement('i');
357
+ rightButtonIcon.classList.add(this.CssClasses_.ICON);
358
+ rightButtonIcon.textContent = this.Constant_.CHEVRON_RIGHT;
359
+ rightButton.appendChild(rightButtonIcon);
360
+ rightButton.addEventListener('click', function() {
361
+ this.tabBar_.scrollLeft += this.Constant_.TAB_SCROLL_PIXELS;
362
+ }.bind(this));
363
+
364
+ tabContainer.appendChild(leftButton);
365
+ tabContainer.appendChild(this.tabBar_);
366
+ tabContainer.appendChild(rightButton);
367
+
368
+ // Add and remove buttons depending on scroll position.
369
+ var tabScrollHandler = function() {
370
+ if (this.tabBar_.scrollLeft > 0) {
371
+ leftButton.classList.add(this.CssClasses_.IS_ACTIVE);
372
+ } else {
373
+ leftButton.classList.remove(this.CssClasses_.IS_ACTIVE);
374
+ }
375
+
376
+ if (this.tabBar_.scrollLeft <
377
+ this.tabBar_.scrollWidth - this.tabBar_.offsetWidth) {
378
+ rightButton.classList.add(this.CssClasses_.IS_ACTIVE);
379
+ } else {
380
+ rightButton.classList.remove(this.CssClasses_.IS_ACTIVE);
381
+ }
382
+ }.bind(this);
383
+
384
+ this.tabBar_.addEventListener('scroll', tabScrollHandler);
385
+ tabScrollHandler();
386
+
387
+ if (this.tabBar_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
388
+ this.tabBar_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
389
+ }
395
390
 
396
- this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
397
- }
398
- };
391
+ // Select element tabs, document panels
392
+ var tabs = this.tabBar_.querySelectorAll('.' + this.CssClasses_.TAB);
393
+ var panels = this.content_.querySelectorAll('.' + this.CssClasses_.PANEL);
399
394
 
400
- function MaterialLayoutTab(tab, tabs, panels, layout) {
401
- 'use strict';
395
+ // Create new tabs for each tab element
396
+ for (var i = 0; i < tabs.length; i++) {
397
+ new MaterialLayoutTab(tabs[i], tabs, panels, this);
398
+ }
399
+ }
402
400
 
403
- if (tab) {
404
- if (layout.tabBar_.classList.contains(
405
- layout.CssClasses_.JS_RIPPLE_EFFECT)) {
406
- var rippleContainer = document.createElement('span');
407
- rippleContainer.classList.add(layout.CssClasses_.RIPPLE_CONTAINER);
408
- rippleContainer.classList.add(layout.CssClasses_.JS_RIPPLE_EFFECT);
409
- var ripple = document.createElement('span');
410
- ripple.classList.add(layout.CssClasses_.RIPPLE);
411
- rippleContainer.appendChild(ripple);
412
- tab.appendChild(rippleContainer);
401
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
413
402
  }
403
+ };
404
+
405
+ function MaterialLayoutTab(tab, tabs, panels, layout) {
406
+ if (tab) {
407
+ if (layout.tabBar_.classList.contains(
408
+ layout.CssClasses_.JS_RIPPLE_EFFECT)) {
409
+ var rippleContainer = document.createElement('span');
410
+ rippleContainer.classList.add(layout.CssClasses_.RIPPLE_CONTAINER);
411
+ rippleContainer.classList.add(layout.CssClasses_.JS_RIPPLE_EFFECT);
412
+ var ripple = document.createElement('span');
413
+ ripple.classList.add(layout.CssClasses_.RIPPLE);
414
+ rippleContainer.appendChild(ripple);
415
+ tab.appendChild(rippleContainer);
416
+ }
414
417
 
415
- tab.addEventListener('click', function(e) {
416
- e.preventDefault();
417
- var href = tab.href.split('#')[1];
418
- var panel = layout.content_.querySelector('#' + href);
419
- layout.resetTabState_(tabs);
420
- layout.resetPanelState_(panels);
421
- tab.classList.add(layout.CssClasses_.IS_ACTIVE);
422
- panel.classList.add(layout.CssClasses_.IS_ACTIVE);
423
- });
418
+ tab.addEventListener('click', function(e) {
419
+ e.preventDefault();
420
+ var href = tab.href.split('#')[1];
421
+ var panel = layout.content_.querySelector('#' + href);
422
+ layout.resetTabState_(tabs);
423
+ layout.resetPanelState_(panels);
424
+ tab.classList.add(layout.CssClasses_.IS_ACTIVE);
425
+ panel.classList.add(layout.CssClasses_.IS_ACTIVE);
426
+ });
424
427
 
428
+ }
425
429
  }
426
- }
427
-
428
- // The component registers itself. It can assume componentHandler is available
429
- // in the global scope.
430
- componentHandler.register({
431
- constructor: MaterialLayout,
432
- classAsString: 'MaterialLayout',
433
- cssClass: 'mdl-js-layout'
434
- });
430
+
431
+ // The component registers itself. It can assume componentHandler is available
432
+ // in the global scope.
433
+ componentHandler.register({
434
+ constructor: MaterialLayout,
435
+ classAsString: 'MaterialLayout',
436
+ cssClass: 'mdl-js-layout'
437
+ });
438
+ })();