in website/css/mdl/material.js [3365:3524]
MaterialLayout.prototype.init = function () {
if (this.element_) {
var container = document.createElement('div');
container.classList.add(this.CssClasses_.CONTAINER);
this.element_.parentElement.insertBefore(container, this.element_);
this.element_.parentElement.removeChild(this.element_);
container.appendChild(this.element_);
var directChildren = this.element_.childNodes;
for (var c = 0; c < directChildren.length; c++) {
var child = directChildren[c];
if (child.classList && child.classList.contains(this.CssClasses_.HEADER)) {
this.header_ = child;
}
if (child.classList && child.classList.contains(this.CssClasses_.DRAWER)) {
this.drawer_ = child;
}
if (child.classList && child.classList.contains(this.CssClasses_.CONTENT)) {
this.content_ = child;
}
}
if (this.header_) {
this.tabBar_ = this.header_.querySelector('.' + this.CssClasses_.TAB_BAR);
}
var mode = this.Mode_.STANDARD;
// Keep an eye on screen size, and add/remove auxiliary class for styling
// of small screens.
this.screenSizeMediaQuery_ = window.matchMedia(this.Constant_.MAX_WIDTH);
this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
this.screenSizeHandler_();
if (this.header_) {
if (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)) {
mode = this.Mode_.SEAMED;
} else if (this.header_.classList.contains(this.CssClasses_.HEADER_WATERFALL)) {
mode = this.Mode_.WATERFALL;
this.header_.addEventListener('transitionend', this.headerTransitionEndHandler_.bind(this));
this.header_.addEventListener('click', this.headerClickHandler_.bind(this));
} else if (this.header_.classList.contains(this.CssClasses_.HEADER_SCROLL)) {
mode = this.Mode_.SCROLL;
container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
}
if (mode === this.Mode_.STANDARD) {
this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
if (this.tabBar_) {
this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW);
}
} else if (mode === this.Mode_.SEAMED || mode === this.Mode_.SCROLL) {
this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
if (this.tabBar_) {
this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW);
}
} else if (mode === this.Mode_.WATERFALL) {
// Add and remove shadows depending on scroll position.
// Also add/remove auxiliary class for styling of the compact version of
// the header.
this.content_.addEventListener('scroll', this.contentScrollHandler_.bind(this));
this.contentScrollHandler_();
}
}
/**
* Prevents an event from triggering the default behaviour.
* @param {Event} ev the event to eat.
*/
var eatEvent = function (ev) {
ev.preventDefault();
};
// Add drawer toggling button to our layout, if we have an openable drawer.
if (this.drawer_) {
var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
if (typeof drawerButton === 'undefined' || drawerButton === null) {
drawerButton = document.createElement('div');
drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
var drawerButtonIcon = document.createElement('i');
drawerButtonIcon.classList.add(this.CssClasses_.ICON);
drawerButtonIcon.textContent = this.Constant_.MENU_ICON;
drawerButton.appendChild(drawerButtonIcon);
}
if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) {
//If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well.
drawerButton.classList.add(this.CssClasses_.ON_LARGE_SCREEN);
} else if (this.drawer_.classList.contains(this.CssClasses_.ON_SMALL_SCREEN)) {
//If drawer has ON_SMALL_SCREEN class then add it to the drawer toggle button as well.
drawerButton.classList.add(this.CssClasses_.ON_SMALL_SCREEN);
}
drawerButton.addEventListener('click', this.drawerToggleHandler_.bind(this));
// Add a class if the layout has a drawer, for altering the left padding.
// Adds the HAS_DRAWER to the elements since this.header_ may or may
// not be present.
this.element_.classList.add(this.CssClasses_.HAS_DRAWER);
// If we have a fixed header, add the button to the header rather than
// the layout.
if (this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)) {
this.header_.insertBefore(drawerButton, this.header_.firstChild);
} else {
this.element_.insertBefore(drawerButton, this.content_);
}
var obfuscator = document.createElement('div');
obfuscator.classList.add(this.CssClasses_.OBFUSCATOR);
this.element_.appendChild(obfuscator);
obfuscator.addEventListener('click', this.drawerToggleHandler_.bind(this));
obfuscator.addEventListener('mousewheel', eatEvent);
}
// Initialize tabs, if any.
if (this.header_ && this.tabBar_) {
this.element_.classList.add(this.CssClasses_.HAS_TABS);
var tabContainer = document.createElement('div');
tabContainer.classList.add(this.CssClasses_.TAB_CONTAINER);
this.header_.insertBefore(tabContainer, this.tabBar_);
this.header_.removeChild(this.tabBar_);
var leftButton = document.createElement('div');
leftButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
leftButton.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON);
var leftButtonIcon = document.createElement('i');
leftButtonIcon.classList.add(this.CssClasses_.ICON);
leftButtonIcon.textContent = this.Constant_.CHEVRON_LEFT;
leftButton.appendChild(leftButtonIcon);
leftButton.addEventListener('click', function () {
this.tabBar_.scrollLeft -= this.Constant_.TAB_SCROLL_PIXELS;
}.bind(this));
var rightButton = document.createElement('div');
rightButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
rightButton.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON);
var rightButtonIcon = document.createElement('i');
rightButtonIcon.classList.add(this.CssClasses_.ICON);
rightButtonIcon.textContent = this.Constant_.CHEVRON_RIGHT;
rightButton.appendChild(rightButtonIcon);
rightButton.addEventListener('click', function () {
this.tabBar_.scrollLeft += this.Constant_.TAB_SCROLL_PIXELS;
}.bind(this));
tabContainer.appendChild(leftButton);
tabContainer.appendChild(this.tabBar_);
tabContainer.appendChild(rightButton);
// Add and remove buttons depending on scroll position.
var tabScrollHandler = function () {
if (this.tabBar_.scrollLeft > 0) {
leftButton.classList.add(this.CssClasses_.IS_ACTIVE);
} else {
leftButton.classList.remove(this.CssClasses_.IS_ACTIVE);
}
if (this.tabBar_.scrollLeft < this.tabBar_.scrollWidth - this.tabBar_.offsetWidth) {
rightButton.classList.add(this.CssClasses_.IS_ACTIVE);
} else {
rightButton.classList.remove(this.CssClasses_.IS_ACTIVE);
}
}.bind(this);
this.tabBar_.addEventListener('scroll', tabScrollHandler);
tabScrollHandler();
if (this.tabBar_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
this.tabBar_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
}
// Select element tabs, document panels
var tabs = this.tabBar_.querySelectorAll('.' + this.CssClasses_.TAB);
var panels = this.content_.querySelectorAll('.' + this.CssClasses_.PANEL);
// Create new tabs for each tab element
for (var i = 0; i < tabs.length; i++) {
new MaterialLayoutTab(tabs[i], tabs, panels, this);
}
}
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
}
};