Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/menu/README.md b/node_modules/material-design-lite/src/menu/README.md
new file mode 100755
index 0000000..42b07c6
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/README.md
@@ -0,0 +1,108 @@
+## Introduction
+
+The Material Design Lite (MDL) **menu** component is a user interface element that allows users to select one of a number of options. The selection typically results in an action initiation, a setting change, or other observable effect. Menu options are always presented in sets of two or more, and options may be programmatically enabled or disabled as required. The menu appears when the user is asked to choose among a series of options, and is usually dismissed after the choice is made.
+
+Menus are an established but non-standardized feature in user interfaces, and allow users to make choices that direct the activity, progress, or characteristics of software. Their design and use is an important factor in the overall user experience. See the menu component's [Material Design specifications page](http://www.google.com/design/spec/components/menus.html) for details.
+
+### To include an MDL **menu** component:
+
+> **Note:** The menu requires a non-static positioned parent element. Positioning options may not work properly if the menu is inside of a statically positioned node.
+
+ 1. Code a `<button>` element; this is the clickable toggle that will show and hide the menu options. Include an `id` attribute whose value will match the `for` (or `data-mdl-for`) attribute of the unordered list coded in the next step. Inside the button, code a `<i>` or `<span>` element to contain an icon of your choice.
+```html
+<button id="menu1">
+ <i></i>
+</button>
+```
+ 2. Code a `<ul>` unordered list element; this is the container that holds the options. Include a `for` attribute whose value matches the `id` attribute of the button element.
+```html
+<ul for="menu1">
+</ul>
+```
+ 3. Inside the unordered list, code one `<li>` element for each option. Include any desired attributes and values, such as an id or event handler, and add a text caption as appropriate.
+```html
+<ul for="menu1">
+ <li>Continue</li>
+ <li>Stop</li>
+ <li>Pause</li>
+</ul>
+```
+ 4. Add one or more MDL classes, separated by spaces, to the button and span elements using the `class` attribute.
+```html
+<button id="menu1" class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+</button>
+```
+ 5. Add one or more MDL classes, separated by spaces, to the unordered list and the list items using the `class` attribute.
+```html
+<ul class="mdl-menu mdl-js-menu" for="menu1">
+ <li class="mdl-menu__item">Continue</li>
+ <li class="mdl-menu__item">Stop</li>
+ <li class="mdl-menu__item">Pause</li>
+</ul>
+```
+
+The menu component is ready for use.
+
+#### Examples
+
+A menu with three options.
+```html
+<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+</button>
+<ul class="mdl-menu mdl-js-menu" for="menu-speed">
+ <li class="mdl-menu__item">Fast</li>
+ <li class="mdl-menu__item">Medium</li>
+ <li class="mdl-menu__item">Slow</li>
+</ul>
+```
+A menu with three options, with ripple effect on button and option links.
+```html
+<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+</button>
+<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="menu-speed">
+ <li class="mdl-menu__item">Fast</li>
+ <li class="mdl-menu__item">Medium</li>
+ <li class="mdl-menu__item">Slow</li>
+</ul>
+```
+A menu with three options, the second of which is disabled by default.
+```html
+<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+</button>
+<ul class="mdl-menu mdl-js-menu" for="menu-speed">
+ <li class="mdl-menu__item">Fast</li>
+ <li class="mdl-menu__item" disabled>Medium</li>
+ <li class="mdl-menu__item">Slow</li>
+</ul>
+```
+
+## Configuration options
+
+The MDL CSS classes apply various predefined visual and behavioral enhancements to the menu. The table below lists the available classes and their effects.
+
+| MDL class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-button` | Defines button as an MDL component | Required on button element |
+| `mdl-js-button` | Assigns basic MDL behavior to button | Required on button element |
+| `mdl-button--icon` | Applies *icon* (small plain circular) display effect to button | Required on button element |
+| `material-icons` | Defines span as a material icon | Required on an inline element |
+| `mdl-menu` | Defines an unordered list container as an MDL component | Required on ul element |
+| `mdl-js-menu` | Assigns basic MDL behavior to menu | Required on ul element |
+| `mdl-menu__item` | Defines buttons as MDL menu options and assigns basic MDL behavior | Required on list item elements |
+| `mdl-menu__item--full-bleed-divider` | Modifies an item to have a full bleed divider between it and the next list item. | Optional on list item elements |
+| `mdl-js-ripple-effect` | Applies *ripple* click effect to option links | Optional; goes on unordered list element |
+| `mdl-menu--top-left` | Positions menu above button, aligns left edge of menu with button | Optional; goes on unordered list element |
+| (none) | Positions menu below button, aligns left edge of menu with button | Default |
+| `mdl-menu--top-right` | Positions menu above button, aligns right edge of menu with button | Optional; goes on unordered list element |
+| `mdl-menu--bottom-right` | Positions menu below button, aligns right edge of menu with button | Optional; goes on unordered list element |
+
+(1) The "more-vert" icon class is used here as an example. Other icons can be used by modifying the class name. For a list of available icons, see [this page](http://google.github.io/web-starter-kit/latest/styleguide/icons/demo.html); hover over an icon to see its class name.
+
+(2) The `i` or `span` element in "button"" element can be used interchangeably.
+
+>**Note:** Disabled versions of the menu options are provided, and are invoked with the standard HTML boolean attribute `disabled` or `data-mdl-disabled`. `<li class="mdl-menu__item" disabled>Medium</li>`
+>This attribute may be added or removed programmatically via scripting.
diff --git a/node_modules/material-design-lite/src/menu/_menu.scss b/node_modules/material-design-lite/src/menu/_menu.scss
new file mode 100644
index 0000000..bb56414
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/_menu.scss
@@ -0,0 +1,200 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../variables";
+@import "../mixins";
+
+.mdl-menu__container {
+ display: block;
+ margin: 0;
+ padding: 0;
+ border: none;
+ position: absolute;
+ overflow: visible;
+ height: 0;
+ width: 0;
+ visibility: hidden;
+ z-index: -1;
+
+ &.is-visible,
+ &.is-animating {
+ z-index: 999;
+ visibility: visible;
+ }
+}
+
+.mdl-menu__outline {
+ display: block;
+ background: $default-dropdown-bg-color;
+ margin: 0;
+ padding: 0;
+ border: none;
+ border-radius: 2px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ opacity: 0;
+ transform: scale(0);
+ transform-origin: 0 0;
+ @include shadow-2dp();
+ will-change: transform;
+ transition: transform $menu-expand-duration $animation-curve-default,
+ opacity $menu-fade-duration $animation-curve-default;
+ z-index: -1;
+
+ .mdl-menu__container.is-visible & {
+ opacity: 1;
+ transform: scale(1);
+ z-index: 999;
+ }
+
+ &.mdl-menu--bottom-right {
+ transform-origin: 100% 0;
+ }
+
+ &.mdl-menu--top-left {
+ transform-origin: 0 100%;
+ }
+
+ &.mdl-menu--top-right {
+ transform-origin: 100% 100%;
+ }
+}
+
+.mdl-menu {
+ position: absolute;
+ list-style: none;
+ top: 0;
+ left: 0;
+ height: auto;
+ width: auto;
+ min-width: 124px;
+ padding: 8px 0;
+ margin: 0;
+ opacity: 0;
+ clip: rect(0 0 0 0);
+ z-index: -1;
+
+ .mdl-menu__container.is-visible & {
+ opacity: 1;
+ z-index: 999;
+ }
+
+ &.is-animating {
+ transition: opacity $menu-fade-duration $animation-curve-default,
+ clip $menu-expand-duration $animation-curve-default;
+ }
+
+ &.mdl-menu--bottom-right {
+ left: auto;
+ right: 0;
+ }
+
+ &.mdl-menu--top-left {
+ top: auto;
+ bottom: 0;
+ }
+
+ &.mdl-menu--top-right {
+ top: auto;
+ left: auto;
+ bottom: 0;
+ right: 0;
+ }
+
+ &.mdl-menu--unaligned {
+ top: auto;
+ left: auto;
+ }
+}
+
+.mdl-menu__item {
+ display: block;
+ border: none;
+ color: $default-item-text-color;
+ background-color: transparent;
+ text-align: left;
+ margin: 0;
+ padding: 0 16px;
+ outline-color: $default-item-outline-color;
+ position: relative;
+ overflow: hidden;
+ @include typo-body-1();
+ text-decoration: none;
+ cursor: pointer;
+ height: 48px;
+ line-height: 48px;
+ white-space: nowrap;
+ opacity: 0;
+ transition: opacity $menu-fade-duration $animation-curve-default;
+ user-select: none;
+
+ .mdl-menu__container.is-visible & {
+ opacity: 1;
+ }
+
+ &::-moz-focus-inner {
+ border: 0;
+ }
+
+ &--full-bleed-divider {
+ border-bottom: 1px solid $default-item-divider-color;
+ }
+
+ &[disabled], &[data-mdl-disabled] {
+ color: $disabled-item-text-color;
+ background-color: transparent;
+ cursor: auto;
+
+ &:hover {
+ background-color: transparent;
+ }
+
+ &:focus {
+ background-color: transparent;
+ }
+
+ & .mdl-ripple {
+ background: transparent;
+ }
+ }
+
+ &:hover {
+ background-color: $default-item-hover-bg-color;
+ }
+
+ &:focus {
+ outline: none;
+ background-color: $default-item-focus-bg-color;
+ }
+
+ &:active {
+ background-color: $default-item-active-bg-color;
+ }
+}
+
+
+.mdl-menu__item--ripple-container {
+ display: block;
+ height: 100%;
+ left: 0px;
+ position: absolute;
+ top: 0px;
+ width: 100%;
+ z-index: 0;
+ overflow: hidden;
+}
diff --git a/node_modules/material-design-lite/src/menu/menu.js b/node_modules/material-design-lite/src/menu/menu.js
new file mode 100644
index 0000000..de5b3b9
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/menu.js
@@ -0,0 +1,482 @@
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function() {
+ 'use strict';
+
+ /**
+ * Class constructor for dropdown MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+ var MaterialMenu = function MaterialMenu(element) {
+ this.element_ = element;
+
+ // Initialize instance.
+ this.init();
+ };
+ window['MaterialMenu'] = MaterialMenu;
+
+ /**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+ MaterialMenu.prototype.Constant_ = {
+ // Total duration of the menu animation.
+ TRANSITION_DURATION_SECONDS: 0.3,
+ // The fraction of the total duration we want to use for menu item animations.
+ TRANSITION_DURATION_FRACTION: 0.8,
+ // How long the menu stays open after choosing an option (so the user can see
+ // the ripple).
+ CLOSE_TIMEOUT: 150
+ };
+
+ /**
+ * Keycodes, for code readability.
+ *
+ * @enum {number}
+ * @private
+ */
+ MaterialMenu.prototype.Keycodes_ = {
+ ENTER: 13,
+ ESCAPE: 27,
+ SPACE: 32,
+ UP_ARROW: 38,
+ DOWN_ARROW: 40
+ };
+
+ /**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+ MaterialMenu.prototype.CssClasses_ = {
+ CONTAINER: 'mdl-menu__container',
+ OUTLINE: 'mdl-menu__outline',
+ ITEM: 'mdl-menu__item',
+ ITEM_RIPPLE_CONTAINER: 'mdl-menu__item-ripple-container',
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+ RIPPLE: 'mdl-ripple',
+ // Statuses
+ IS_UPGRADED: 'is-upgraded',
+ IS_VISIBLE: 'is-visible',
+ IS_ANIMATING: 'is-animating',
+ // Alignment options
+ BOTTOM_LEFT: 'mdl-menu--bottom-left', // This is the default.
+ BOTTOM_RIGHT: 'mdl-menu--bottom-right',
+ TOP_LEFT: 'mdl-menu--top-left',
+ TOP_RIGHT: 'mdl-menu--top-right',
+ UNALIGNED: 'mdl-menu--unaligned'
+ };
+
+ /**
+ * Initialize element.
+ */
+ 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-mdl-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);
+ }
+ };
+
+ /**
+ * Handles a click on the "for" element, by positioning the menu and then
+ * toggling it.
+ *
+ * @param {Event} evt The event that fired.
+ * @private
+ */
+ MaterialMenu.prototype.handleForClick_ = function(evt) {
+ if (this.element_ && this.forElement_) {
+ var rect = this.forElement_.getBoundingClientRect();
+ var forRect = this.forElement_.parentElement.getBoundingClientRect();
+
+ if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+ // Do not position the menu automatically. Requires the developer to
+ // manually specify position.
+ } else if (this.element_.classList.contains(
+ this.CssClasses_.BOTTOM_RIGHT)) {
+ // Position below the "for" element, aligned to its right.
+ this.container_.style.right = (forRect.right - rect.right) + 'px';
+ this.container_.style.top =
+ this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
+ } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+ // Position above the "for" element, aligned to its left.
+ this.container_.style.left = this.forElement_.offsetLeft + 'px';
+ this.container_.style.bottom = (forRect.bottom - rect.top) + 'px';
+ } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+ // Position above the "for" element, aligned to its right.
+ this.container_.style.right = (forRect.right - rect.right) + 'px';
+ this.container_.style.bottom = (forRect.bottom - rect.top) + 'px';
+ } else {
+ // Default: position below the "for" element, aligned to its left.
+ this.container_.style.left = this.forElement_.offsetLeft + 'px';
+ this.container_.style.top =
+ this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
+ }
+ }
+
+ this.toggle(evt);
+ };
+
+ /**
+ * Handles a keyboard event on the "for" element.
+ *
+ * @param {Event} evt The event that fired.
+ * @private
+ */
+ MaterialMenu.prototype.handleForKeyboardEvent_ = function(evt) {
+ if (this.element_ && this.container_ && this.forElement_) {
+ var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM +
+ ':not([disabled])');
+
+ if (items && items.length > 0 &&
+ this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+ if (evt.keyCode === this.Keycodes_.UP_ARROW) {
+ evt.preventDefault();
+ items[items.length - 1].focus();
+ } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
+ evt.preventDefault();
+ items[0].focus();
+ }
+ }
+ }
+ };
+
+ /**
+ * Handles a keyboard event on an item.
+ *
+ * @param {Event} evt The event that fired.
+ * @private
+ */
+ MaterialMenu.prototype.handleItemKeyboardEvent_ = function(evt) {
+ if (this.element_ && this.container_) {
+ var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM +
+ ':not([disabled])');
+
+ if (items && items.length > 0 &&
+ this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+ var currentIndex = Array.prototype.slice.call(items).indexOf(evt.target);
+
+ if (evt.keyCode === this.Keycodes_.UP_ARROW) {
+ evt.preventDefault();
+ if (currentIndex > 0) {
+ items[currentIndex - 1].focus();
+ } else {
+ items[items.length - 1].focus();
+ }
+ } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
+ evt.preventDefault();
+ if (items.length > currentIndex + 1) {
+ items[currentIndex + 1].focus();
+ } else {
+ items[0].focus();
+ }
+ } else if (evt.keyCode === this.Keycodes_.SPACE ||
+ evt.keyCode === this.Keycodes_.ENTER) {
+ evt.preventDefault();
+ // Send mousedown and mouseup to trigger ripple.
+ var e = new MouseEvent('mousedown');
+ evt.target.dispatchEvent(e);
+ e = new MouseEvent('mouseup');
+ evt.target.dispatchEvent(e);
+ // Send click.
+ evt.target.click();
+ } else if (evt.keyCode === this.Keycodes_.ESCAPE) {
+ evt.preventDefault();
+ this.hide();
+ }
+ }
+ }
+ };
+
+ /**
+ * Handles a click event on an item.
+ *
+ * @param {Event} evt The event that fired.
+ * @private
+ */
+ MaterialMenu.prototype.handleItemClick_ = function(evt) {
+ if (evt.target.hasAttribute('disabled')) {
+ evt.stopPropagation();
+ } else {
+ // Wait some time before closing menu, so the user can see the ripple.
+ this.closing_ = true;
+ window.setTimeout(function(evt) {
+ this.hide();
+ this.closing_ = false;
+ }.bind(this), /** @type {number} */ (this.Constant_.CLOSE_TIMEOUT));
+ }
+ };
+
+ /**
+ * Calculates the initial clip (for opening the menu) or final clip (for closing
+ * it), and applies it. This allows us to animate from or to the correct point,
+ * that is, the point it's aligned to in the "for" element.
+ *
+ * @param {number} height Height of the clip rectangle
+ * @param {number} width Width of the clip rectangle
+ * @private
+ */
+ MaterialMenu.prototype.applyClip_ = function(height, width) {
+ if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
+ // Do not clip.
+ this.element_.style.clip = '';
+ } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
+ // Clip to the top right corner of the menu.
+ this.element_.style.clip =
+ 'rect(0 ' + width + 'px ' + '0 ' + width + 'px)';
+ } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
+ // Clip to the bottom left corner of the menu.
+ this.element_.style.clip =
+ 'rect(' + height + 'px 0 ' + height + 'px 0)';
+ } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+ // Clip to the bottom right corner of the menu.
+ this.element_.style.clip = 'rect(' + height + 'px ' + width + 'px ' +
+ height + 'px ' + width + 'px)';
+ } else {
+ // Default: do not clip (same as clipping to the top left corner).
+ this.element_.style.clip = '';
+ }
+ };
+
+ /**
+ * Cleanup function to remove animation listeners.
+ *
+ * @param {Event} evt
+ * @private
+ */
+
+ MaterialMenu.prototype.removeAnimationEndListener_ = function(evt) {
+ evt.target.classList.remove(MaterialMenu.prototype.CssClasses_.IS_ANIMATING);
+ };
+
+ /**
+ * Adds an event listener to clean up after the animation ends.
+ *
+ * @private
+ */
+ MaterialMenu.prototype.addAnimationEndListener_ = function() {
+ this.element_.addEventListener('transitionend', this.removeAnimationEndListener_);
+ this.element_.addEventListener('webkitTransitionEnd', this.removeAnimationEndListener_);
+ };
+
+ /**
+ * Displays the menu.
+ *
+ * @public
+ */
+ MaterialMenu.prototype.show = function(evt) {
+ if (this.element_ && this.container_ && this.outline_) {
+ // Measure the inner element.
+ var height = this.element_.getBoundingClientRect().height;
+ var width = this.element_.getBoundingClientRect().width;
+
+ // Apply the inner element's size to the container and outline.
+ this.container_.style.width = width + 'px';
+ this.container_.style.height = height + 'px';
+ this.outline_.style.width = width + 'px';
+ this.outline_.style.height = height + 'px';
+
+ var transitionDuration = this.Constant_.TRANSITION_DURATION_SECONDS *
+ this.Constant_.TRANSITION_DURATION_FRACTION;
+
+ // Calculate transition delays for individual menu items, so that they fade
+ // in one at a time.
+ var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+ for (var i = 0; i < items.length; i++) {
+ var itemDelay = null;
+ if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT) ||
+ this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
+ itemDelay = ((height - items[i].offsetTop - items[i].offsetHeight) /
+ height * transitionDuration) + 's';
+ } else {
+ itemDelay = (items[i].offsetTop / height * transitionDuration) + 's';
+ }
+ items[i].style.transitionDelay = itemDelay;
+ }
+
+ // Apply the initial clip to the text before we start animating.
+ this.applyClip_(height, width);
+
+ // Wait for the next frame, turn on animation, and apply the final clip.
+ // Also make it visible. This triggers the transitions.
+ window.requestAnimationFrame(function() {
+ this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
+ this.element_.style.clip = 'rect(0 ' + width + 'px ' + height + 'px 0)';
+ this.container_.classList.add(this.CssClasses_.IS_VISIBLE);
+ }.bind(this));
+
+ // Clean up after the animation is complete.
+ this.addAnimationEndListener_();
+
+ // Add a click listener to the document, to close the menu.
+ var callback = function(e) {
+ // Check to see if the document is processing the same event that
+ // displayed the menu in the first place. If so, do nothing.
+ // Also check to see if the menu is in the process of closing itself, and
+ // do nothing in that case.
+ // Also check if the clicked element is a menu item
+ // if so, do nothing.
+ if (e !== evt && !this.closing_ && e.target.parentNode !== this.element_) {
+ document.removeEventListener('click', callback);
+ this.hide();
+ }
+ }.bind(this);
+ document.addEventListener('click', callback);
+ }
+ };
+ MaterialMenu.prototype['show'] = MaterialMenu.prototype.show;
+
+ /**
+ * Hides the menu.
+ *
+ * @public
+ */
+ MaterialMenu.prototype.hide = function() {
+ if (this.element_ && this.container_ && this.outline_) {
+ var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+
+ // Remove all transition delays; menu items fade out concurrently.
+ for (var i = 0; i < items.length; i++) {
+ items[i].style.removeProperty('transition-delay');
+ }
+
+ // Measure the inner element.
+ var rect = this.element_.getBoundingClientRect();
+ var height = rect.height;
+ var width = rect.width;
+
+ // Turn on animation, and apply the final clip. Also make invisible.
+ // This triggers the transitions.
+ this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
+ this.applyClip_(height, width);
+ this.container_.classList.remove(this.CssClasses_.IS_VISIBLE);
+
+ // Clean up after the animation is complete.
+ this.addAnimationEndListener_();
+ }
+ };
+ MaterialMenu.prototype['hide'] = MaterialMenu.prototype.hide;
+
+ /**
+ * Displays or hides the menu, depending on current state.
+ *
+ * @public
+ */
+ MaterialMenu.prototype.toggle = function(evt) {
+ if (this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
+ this.hide();
+ } else {
+ this.show(evt);
+ }
+ };
+ MaterialMenu.prototype['toggle'] = MaterialMenu.prototype.toggle;
+
+ // The component registers itself. It can assume componentHandler is available
+ // in the global scope.
+ componentHandler.register({
+ constructor: MaterialMenu,
+ classAsString: 'MaterialMenu',
+ cssClass: 'mdl-js-menu',
+ widget: true
+ });
+})();
diff --git a/node_modules/material-design-lite/src/menu/snippets/codepen-lower-buttons.css b/node_modules/material-design-lite/src/menu/snippets/codepen-lower-buttons.css
new file mode 100644
index 0000000..ce22b7c
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/codepen-lower-buttons.css
@@ -0,0 +1,3 @@
+#demo-menu-lower-left {
+ margin-left: 40%;
+}
diff --git a/node_modules/material-design-lite/src/menu/snippets/codepen-top-buttons.css b/node_modules/material-design-lite/src/menu/snippets/codepen-top-buttons.css
new file mode 100644
index 0000000..9cd7e66
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/codepen-top-buttons.css
@@ -0,0 +1,8 @@
+#demo-menu-top-left {
+ margin-left: 40%;
+}
+
+#demo-menu-top-left,
+#demo-menu-top-right {
+ margin-top: 250px;
+}
diff --git a/node_modules/material-design-lite/src/menu/snippets/lower-left-demo.html b/node_modules/material-design-lite/src/menu/snippets/lower-left-demo.html
new file mode 100644
index 0000000..ee3b3fc
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/lower-left-demo.html
@@ -0,0 +1,25 @@
+<style>
+ .demo-menu.demo-menu__lower-left .container {
+ position: relative;
+ width: 200px;
+ }
+ .demo-menu.demo-menu__lower-left .background {
+ background: white;
+ height: 148px;
+ width: 100%;
+ }
+ .demo-menu.demo-menu__lower-left .bar {
+ box-sizing: border-box;
+ background: #3F51B5;
+ color: white;
+ width: 100%;
+ padding: 16px;
+ }
+</style>
+
+<div class="container mdl-shadow--2dp">
+ <div class="bar">
+ {% include "lower-left.html" %}
+ </div>
+ <div class="background"></div>
+</div>
diff --git a/node_modules/material-design-lite/src/menu/snippets/lower-left.html b/node_modules/material-design-lite/src/menu/snippets/lower-left.html
new file mode 100644
index 0000000..71bc922
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/lower-left.html
@@ -0,0 +1,13 @@
+<!-- Left aligned menu below button -->
+<button id="demo-menu-lower-left"
+ class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+</button>
+
+<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
+ for="demo-menu-lower-left">
+ <li class="mdl-menu__item">Some Action</li>
+ <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
+ <li disabled class="mdl-menu__item">Disabled Action</li>
+ <li class="mdl-menu__item">Yet Another Action</li>
+</ul>
diff --git a/node_modules/material-design-lite/src/menu/snippets/lower-right-demo.html b/node_modules/material-design-lite/src/menu/snippets/lower-right-demo.html
new file mode 100644
index 0000000..d8ad651
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/lower-right-demo.html
@@ -0,0 +1,34 @@
+<style>
+ .demo-menu.demo-menu__lower-right .container {
+ position: relative;
+ width: 200px;
+ }
+ .demo-menu.demo-menu__lower-right .background {
+ background: white;
+ height: 148px;
+ width: 100%;
+ }
+ .demo-menu.demo-menu__lower-right .bar {
+ box-sizing: border-box;
+ position: relative;
+ background: #3F51B5;
+ color: white;
+ height: 64px;
+ width: 100%;
+ padding: 16px;
+ }
+ .demo-menu.demo-menu__lower-right .wrapper {
+ box-sizing: border-box;
+ position: absolute;
+ right: 16px;
+ }
+</style>
+
+<div class="container mdl-shadow--2dp">
+ <div class="bar">
+ <div class="wrapper">
+ {% include "lower-right.html" %}
+ </div>
+ </div>
+ <div class="background"></div>
+</div>
diff --git a/node_modules/material-design-lite/src/menu/snippets/lower-right.html b/node_modules/material-design-lite/src/menu/snippets/lower-right.html
new file mode 100644
index 0000000..1ce8f9c
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/lower-right.html
@@ -0,0 +1,13 @@
+<!-- Right aligned menu below button -->
+<button id="demo-menu-lower-right"
+ class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+</button>
+
+<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+ for="demo-menu-lower-right">
+ <li class="mdl-menu__item">Some Action</li>
+ <li class="mdl-menu__item">Another Action</li>
+ <li disabled class="mdl-menu__item">Disabled Action</li>
+ <li class="mdl-menu__item">Yet Another Action</li>
+</ul>
diff --git a/node_modules/material-design-lite/src/menu/snippets/top-left-demo.html b/node_modules/material-design-lite/src/menu/snippets/top-left-demo.html
new file mode 100644
index 0000000..3ad0e33
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/top-left-demo.html
@@ -0,0 +1,25 @@
+<style>
+ .demo-menu.demo-menu__top-left .container {
+ position: relative;
+ width: 200px;
+ }
+ .demo-menu.demo-menu__top-left .background {
+ background: white;
+ height: 148px;
+ width: 100%;
+ }
+ .demo-menu.demo-menu__top-left .bar {
+ box-sizing: border-box;
+ background: #3F51B5;
+ color: white;
+ width: 100%;
+ padding: 16px;
+ }
+</style>
+
+<div class="container mdl-shadow--2dp">
+ <div class="background"></div>
+ <div class="bar">
+ {% include "top-left.html" %}
+ </div>
+</div>
diff --git a/node_modules/material-design-lite/src/menu/snippets/top-left.html b/node_modules/material-design-lite/src/menu/snippets/top-left.html
new file mode 100644
index 0000000..19a38aa
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/top-left.html
@@ -0,0 +1,13 @@
+<!-- Left aligned menu on top of button -->
+<button id="demo-menu-top-left"
+ class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+</button>
+
+<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
+ data-mdl-for="demo-menu-top-left">
+ <li class="mdl-menu__item">Some Action</li>
+ <li class="mdl-menu__item">Another Action</li>
+ <li disabled class="mdl-menu__item">Disabled Action</li>
+ <li class="mdl-menu__item">Yet Another Action</li>
+</ul>
diff --git a/node_modules/material-design-lite/src/menu/snippets/top-right-demo.html b/node_modules/material-design-lite/src/menu/snippets/top-right-demo.html
new file mode 100644
index 0000000..6087bff
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/top-right-demo.html
@@ -0,0 +1,34 @@
+<style>
+ .demo-menu.demo-menu__top-right .container {
+ position: relative;
+ width: 200px;
+ }
+ .demo-menu.demo-menu__top-right .background {
+ background: white;
+ height: 148px;
+ width: 100%;
+ }
+ .demo-menu.demo-menu__top-right .bar {
+ box-sizing: border-box;
+ position: relative;
+ background: #3F51B5;
+ color: white;
+ height: 64px;
+ width: 100%;
+ padding: 16px;
+ }
+ .demo-menu.demo-menu__top-right .wrapper {
+ box-sizing: border-box;
+ position: absolute;
+ right: 16px;
+ }
+</style>
+
+<div class="container mdl-shadow--2dp">
+ <div class="background"></div>
+ <div class="bar">
+ <div class="wrapper">
+ {% include "top-right.html" %}
+ </div>
+ </div>
+</div>
diff --git a/node_modules/material-design-lite/src/menu/snippets/top-right.html b/node_modules/material-design-lite/src/menu/snippets/top-right.html
new file mode 100644
index 0000000..803668e
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/top-right.html
@@ -0,0 +1,13 @@
+<!-- Right aligned menu on top of button -->
+<button id="demo-menu-top-right"
+ class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+</button>
+
+<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
+ data-mdl-for="demo-menu-top-right">
+ <li class="mdl-menu__item">Some Action</li>
+ <li class="mdl-menu__item">Another Action</li>
+ <li disabled class="mdl-menu__item">Disabled Action</li>
+ <li class="mdl-menu__item">Yet Another Action</li>
+</ul>