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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +6 -0
- data/lib/material_design_lite/sass/version.rb +1 -1
- data/vendor/assets/javascripts/material.js +2562 -2993
- data/vendor/assets/javascripts/material/button.js +114 -112
- data/vendor/assets/javascripts/material/checkbox.js +255 -260
- data/vendor/assets/javascripts/material/data-table.js +140 -124
- data/vendor/assets/javascripts/material/icon-toggle.js +239 -243
- data/vendor/assets/javascripts/material/layout.js +392 -388
- data/vendor/assets/javascripts/material/mdlComponentHandler.js +68 -27
- data/vendor/assets/javascripts/material/menu.js +430 -414
- data/vendor/assets/javascripts/material/progress.js +110 -97
- data/vendor/assets/javascripts/material/radio.js +244 -247
- data/vendor/assets/javascripts/material/ripple.js +220 -211
- data/vendor/assets/javascripts/material/slider.js +228 -228
- data/vendor/assets/javascripts/material/spinner.js +122 -119
- data/vendor/assets/javascripts/material/switch.js +246 -250
- data/vendor/assets/javascripts/material/tabs.js +129 -127
- data/vendor/assets/javascripts/material/textfield.js +221 -222
- data/vendor/assets/javascripts/material/tooltip.js +126 -122
- data/vendor/assets/stylesheets/material/_badge.scss +1 -1
- data/vendor/assets/stylesheets/material/_button.scss +15 -8
- data/vendor/assets/stylesheets/material/_card.scss +1 -1
- data/vendor/assets/stylesheets/material/_checkbox.scss +1 -1
- data/vendor/assets/stylesheets/material/_data-table.scss +5 -3
- data/vendor/assets/stylesheets/material/_functions.scss +16 -0
- data/vendor/assets/stylesheets/material/_grid.scss +11 -20
- data/vendor/assets/stylesheets/material/_layout.scss +7 -5
- data/vendor/assets/stylesheets/material/_menu.scss +4 -1
- data/vendor/assets/stylesheets/material/_radio.scss +1 -1
- data/vendor/assets/stylesheets/material/_slider.scss +1 -0
- data/vendor/assets/stylesheets/material/_switch.scss +1 -1
- data/vendor/assets/stylesheets/material/_tabs.scss +1 -1
- data/vendor/assets/stylesheets/material/_textfield.scss +15 -5
- data/vendor/assets/stylesheets/material/_tooltip.scss +2 -2
- data/vendor/assets/stylesheets/material/_variables.scss +18 -43
- data/vendor/assets/stylesheets/material/resets/_h5bp.scss +28 -21
- 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
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
}
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
this.header_.classList.
|
130
|
-
|
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
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
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
|
-
|
242
|
-
|
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
|
-
|
246
|
-
|
247
|
-
|
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
|
-
|
275
|
-
|
276
|
-
|
277
|
-
this.
|
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
|
-
|
290
|
-
|
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
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
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
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
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
|
-
|
372
|
-
|
373
|
-
|
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
|
-
|
322
|
+
this.element_.insertBefore(drawerButton, this.content_);
|
376
323
|
}
|
377
|
-
}.bind(this);
|
378
|
-
|
379
|
-
this.tabBar_.addEventListener('scroll', tabScrollHandler);
|
380
|
-
tabScrollHandler();
|
381
324
|
|
382
|
-
|
383
|
-
|
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
|
-
//
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
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
|
-
|
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
|
-
|
401
|
-
|
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
|
-
|
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
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
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
|
-
//
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
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
|
+
})();
|