in website/css/mdl/material.js [1233:1301]
MaterialMenu.prototype.init = function () {
if (this.element_) {
// Create container for the menu.
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_);
this.container_ = container;
// Create outline for the menu (shadow and background).
var outline = document.createElement('div');
outline.classList.add(this.CssClasses_.OUTLINE);
this.outline_ = outline;
container.insertBefore(outline, this.element_);
// Find the "for" element and bind events to it.
var forElId = this.element_.getAttribute('for') || this.element_.getAttribute('data-for');
var forEl = null;
if (forElId) {
forEl = document.getElementById(forElId);
if (forEl) {
this.forElement_ = forEl;
forEl.addEventListener('click', this.handleForClick_.bind(this));
forEl.addEventListener('keydown', this.handleForKeyboardEvent_.bind(this));
}
}
var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
this.boundItemKeydown = this.handleItemKeyboardEvent_.bind(this);
this.boundItemClick = this.handleItemClick_.bind(this);
for (var i = 0; i < items.length; i++) {
// Add a listener to each menu item.
items[i].addEventListener('click', this.boundItemClick);
// Add a tab index to each menu item.
items[i].tabIndex = '-1';
// Add a keyboard listener to each menu item.
items[i].addEventListener('keydown', this.boundItemKeydown);
}
// Add ripple classes to each item, if the user has enabled ripples.
if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
for (i = 0; i < items.length; i++) {
var item = items[i];
var rippleContainer = document.createElement('span');
rippleContainer.classList.add(this.CssClasses_.ITEM_RIPPLE_CONTAINER);
var ripple = document.createElement('span');
ripple.classList.add(this.CssClasses_.RIPPLE);
rippleContainer.appendChild(ripple);
item.appendChild(rippleContainer);
item.classList.add(this.CssClasses_.RIPPLE_EFFECT);
}
}
// Copy alignment classes to the container, so the outline can use them.
if (this.element_.classList.contains(this.CssClasses_.BOTTOM_LEFT)) {
this.outline_.classList.add(this.CssClasses_.BOTTOM_LEFT);
}
if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
this.outline_.classList.add(this.CssClasses_.BOTTOM_RIGHT);
}
if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
this.outline_.classList.add(this.CssClasses_.TOP_LEFT);
}
if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
this.outline_.classList.add(this.CssClasses_.TOP_RIGHT);
}
if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
this.outline_.classList.add(this.CssClasses_.UNALIGNED);
}
container.classList.add(this.CssClasses_.IS_UPGRADED);
}
};