You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myriad.apache.org by me...@apache.org on 2015/12/02 12:32:32 UTC
svn commit: r1717613 [6/7] - in /incubator/myriad/site: ./ community/ css/
css/font-awesome-4.4.0/ css/font-awesome-4.4.0/css/
css/font-awesome-4.4.0/fonts/ css/mdl/ docs/ downloads/ img/ news/
news/2015/ news/2015/02/ news/2015/02/28/ news/2015/09/ ne...
Added: incubator/myriad/site/css/mdl/material.js
URL: http://svn.apache.org/viewvc/incubator/myriad/site/css/mdl/material.js?rev=1717613&view=auto
==============================================================================
--- incubator/myriad/site/css/mdl/material.js (added)
+++ incubator/myriad/site/css/mdl/material.js Wed Dec 2 11:32:31 2015
@@ -0,0 +1,3972 @@
+;(function() {
+"use strict";
+
+/**
+ * @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.
+ */
+
+/**
+ * A component handler interface using the revealing module design pattern.
+ * More details on this design pattern here:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @author Jason Mayes.
+ */
+/* exported componentHandler */
+
+// Pre-defining the componentHandler interface, for closure documentation and
+// static verification.
+var componentHandler = {
+ /**
+ * Searches existing DOM for elements of our component type and upgrades them
+ * if they have not already been upgraded.
+ *
+ * @param {string=} optJsClass the programatic name of the element class we
+ * need to create a new instance of.
+ * @param {string=} optCssClass the name of the CSS class elements of this
+ * type will have.
+ */
+ upgradeDom: function(optJsClass, optCssClass) {},
+ /**
+ * Upgrades a specific element rather than all in the DOM.
+ *
+ * @param {!Element} element The element we wish to upgrade.
+ * @param {string=} optJsClass Optional name of the class we want to upgrade
+ * the element to.
+ */
+ upgradeElement: function(element, optJsClass) {},
+ /**
+ * Upgrades a specific list of elements rather than all in the DOM.
+ *
+ * @param {!Element|!Array<!Element>|!NodeList|!HTMLCollection} elements
+ * The elements we wish to upgrade.
+ */
+ upgradeElements: function(elements) {},
+ /**
+ * Upgrades all registered components found in the current DOM. This is
+ * automatically called on window load.
+ */
+ upgradeAllRegistered: function() {},
+ /**
+ * Allows user to be alerted to any upgrades that are performed for a given
+ * component type
+ *
+ * @param {string} jsClass The class name of the MDL component we wish
+ * to hook into for any upgrades performed.
+ * @param {function(!HTMLElement)} callback The function to call upon an
+ * upgrade. This function should expect 1 parameter - the HTMLElement which
+ * got upgraded.
+ */
+ registerUpgradedCallback: function(jsClass, callback) {},
+ /**
+ * Registers a class for future use and attempts to upgrade existing DOM.
+ *
+ * @param {componentHandler.ComponentConfigPublic} config the registration configuration
+ */
+ register: function(config) {},
+ /**
+ * Downgrade either a given node, an array of nodes, or a NodeList.
+ *
+ * @param {!Node|!Array<!Node>|!NodeList} nodes
+ */
+ downgradeElements: function(nodes) {}
+};
+
+componentHandler = (function() {
+ 'use strict';
+
+ /** @type {!Array<componentHandler.ComponentConfig>} */
+ var registeredComponents_ = [];
+
+ /** @type {!Array<componentHandler.Component>} */
+ var createdComponents_ = [];
+
+ var downgradeMethod_ = 'mdlDowngrade_';
+ var componentConfigProperty_ = 'mdlComponentConfigInternal_';
+
+ /**
+ * Searches registered components for a class we are interested in using.
+ * Optionally replaces a match with passed object if specified.
+ *
+ * @param {string} name The name of a class we want to use.
+ * @param {componentHandler.ComponentConfig=} optReplace Optional object to replace match with.
+ * @return {!Object|boolean}
+ * @private
+ */
+ function findRegisteredClass_(name, optReplace) {
+ for (var i = 0; i < registeredComponents_.length; i++) {
+ if (registeredComponents_[i].className === name) {
+ if (typeof optReplace !== 'undefined') {
+ registeredComponents_[i] = optReplace;
+ }
+ return registeredComponents_[i];
+ }
+ }
+ return false;
+ }
+
+ /**
+ * Returns an array of the classNames of the upgraded classes on the element.
+ *
+ * @param {!Element} element The element to fetch data from.
+ * @return {!Array<string>}
+ * @private
+ */
+ function getUpgradedListOfElement_(element) {
+ var dataUpgraded = element.getAttribute('data-upgraded');
+ // Use `['']` as default value to conform the `,name,name...` style.
+ return dataUpgraded === null ? [''] : dataUpgraded.split(',');
+ }
+
+ /**
+ * Returns true if the given element has already been upgraded for the given
+ * class.
+ *
+ * @param {!Element} element The element we want to check.
+ * @param {string} jsClass The class to check for.
+ * @returns {boolean}
+ * @private
+ */
+ function isElementUpgraded_(element, jsClass) {
+ var upgradedList = getUpgradedListOfElement_(element);
+ return upgradedList.indexOf(jsClass) !== -1;
+ }
+
+ /**
+ * Searches existing DOM for elements of our component type and upgrades them
+ * if they have not already been upgraded.
+ *
+ * @param {string=} optJsClass the programatic name of the element class we
+ * need to create a new instance of.
+ * @param {string=} optCssClass the name of the CSS class elements of this
+ * type will have.
+ */
+ function upgradeDomInternal(optJsClass, optCssClass) {
+ if (typeof optJsClass === 'undefined' &&
+ typeof optCssClass === 'undefined') {
+ for (var i = 0; i < registeredComponents_.length; i++) {
+ upgradeDomInternal(registeredComponents_[i].className,
+ registeredComponents_[i].cssClass);
+ }
+ } else {
+ var jsClass = /** @type {string} */ (optJsClass);
+ if (typeof optCssClass === 'undefined') {
+ var registeredClass = findRegisteredClass_(jsClass);
+ if (registeredClass) {
+ optCssClass = registeredClass.cssClass;
+ }
+ }
+
+ var elements = document.querySelectorAll('.' + optCssClass);
+ for (var n = 0; n < elements.length; n++) {
+ upgradeElementInternal(elements[n], jsClass);
+ }
+ }
+ }
+
+ /**
+ * Upgrades a specific element rather than all in the DOM.
+ *
+ * @param {!Element} element The element we wish to upgrade.
+ * @param {string=} optJsClass Optional name of the class we want to upgrade
+ * the element to.
+ */
+ function upgradeElementInternal(element, optJsClass) {
+ // Verify argument type.
+ if (!(typeof element === 'object' && element instanceof Element)) {
+ throw new Error('Invalid argument provided to upgrade MDL element.');
+ }
+ var upgradedList = getUpgradedListOfElement_(element);
+ var classesToUpgrade = [];
+ // If jsClass is not provided scan the registered components to find the
+ // ones matching the element's CSS classList.
+ if (!optJsClass) {
+ var classList = element.classList;
+ registeredComponents_.forEach(function(component) {
+ // Match CSS & Not to be upgraded & Not upgraded.
+ if (classList.contains(component.cssClass) &&
+ classesToUpgrade.indexOf(component) === -1 &&
+ !isElementUpgraded_(element, component.className)) {
+ classesToUpgrade.push(component);
+ }
+ });
+ } else if (!isElementUpgraded_(element, optJsClass)) {
+ classesToUpgrade.push(findRegisteredClass_(optJsClass));
+ }
+
+ // Upgrade the element for each classes.
+ for (var i = 0, n = classesToUpgrade.length, registeredClass; i < n; i++) {
+ registeredClass = classesToUpgrade[i];
+ if (registeredClass) {
+ // Mark element as upgraded.
+ upgradedList.push(registeredClass.className);
+ element.setAttribute('data-upgraded', upgradedList.join(','));
+ var instance = new registeredClass.classConstructor(element);
+ instance[componentConfigProperty_] = registeredClass;
+ createdComponents_.push(instance);
+ // Call any callbacks the user has registered with this component type.
+ for (var j = 0, m = registeredClass.callbacks.length; j < m; j++) {
+ registeredClass.callbacks[j](element);
+ }
+
+ if (registeredClass.widget) {
+ // Assign per element instance for control over API
+ element[registeredClass.className] = instance;
+ }
+ } else {
+ throw new Error(
+ 'Unable to find a registered component for the given class.');
+ }
+
+ var ev = document.createEvent('Events');
+ ev.initEvent('mdl-componentupgraded', true, true);
+ element.dispatchEvent(ev);
+ }
+ }
+
+ /**
+ * Upgrades a specific list of elements rather than all in the DOM.
+ *
+ * @param {!Element|!Array<!Element>|!NodeList|!HTMLCollection} elements
+ * The elements we wish to upgrade.
+ */
+ function upgradeElementsInternal(elements) {
+ if (!Array.isArray(elements)) {
+ if (typeof elements.item === 'function') {
+ elements = Array.prototype.slice.call(/** @type {Array} */ (elements));
+ } else {
+ elements = [elements];
+ }
+ }
+ for (var i = 0, n = elements.length, element; i < n; i++) {
+ element = elements[i];
+ if (element instanceof HTMLElement) {
+ upgradeElementInternal(element);
+ if (element.children.length > 0) {
+ upgradeElementsInternal(element.children);
+ }
+ }
+ }
+ }
+
+ /**
+ * Registers a class for future use and attempts to upgrade existing DOM.
+ *
+ * @param {componentHandler.ComponentConfigPublic} config
+ */
+ function registerInternal(config) {
+ // In order to support both Closure-compiled and uncompiled code accessing
+ // this method, we need to allow for both the dot and array syntax for
+ // property access. You'll therefore see the `foo.bar || foo['bar']`
+ // pattern repeated across this method.
+ var widgetMissing = (typeof config.widget === 'undefined' &&
+ typeof config['widget'] === 'undefined');
+ var widget = true;
+
+ if (!widgetMissing) {
+ widget = config.widget || config['widget'];
+ }
+
+ var newConfig = /** @type {componentHandler.ComponentConfig} */ ({
+ classConstructor: config.constructor || config['constructor'],
+ className: config.classAsString || config['classAsString'],
+ cssClass: config.cssClass || config['cssClass'],
+ widget: widget,
+ callbacks: []
+ });
+
+ registeredComponents_.forEach(function(item) {
+ if (item.cssClass === newConfig.cssClass) {
+ throw new Error('The provided cssClass has already been registered: ' + item.cssClass);
+ }
+ if (item.className === newConfig.className) {
+ throw new Error('The provided className has already been registered');
+ }
+ });
+
+ if (config.constructor.prototype
+ .hasOwnProperty(componentConfigProperty_)) {
+ throw new Error(
+ 'MDL component classes must not have ' + componentConfigProperty_ +
+ ' defined as a property.');
+ }
+
+ var found = findRegisteredClass_(config.classAsString, newConfig);
+
+ if (!found) {
+ registeredComponents_.push(newConfig);
+ }
+ }
+
+ /**
+ * Allows user to be alerted to any upgrades that are performed for a given
+ * component type
+ *
+ * @param {string} jsClass The class name of the MDL component we wish
+ * to hook into for any upgrades performed.
+ * @param {function(!HTMLElement)} callback The function to call upon an
+ * upgrade. This function should expect 1 parameter - the HTMLElement which
+ * got upgraded.
+ */
+ function registerUpgradedCallbackInternal(jsClass, callback) {
+ var regClass = findRegisteredClass_(jsClass);
+ if (regClass) {
+ regClass.callbacks.push(callback);
+ }
+ }
+
+ /**
+ * Upgrades all registered components found in the current DOM. This is
+ * automatically called on window load.
+ */
+ function upgradeAllRegisteredInternal() {
+ for (var n = 0; n < registeredComponents_.length; n++) {
+ upgradeDomInternal(registeredComponents_[n].className);
+ }
+ }
+
+ /**
+ * Finds a created component by a given DOM node.
+ *
+ * @param {!Node} node
+ * @return {*}
+ */
+ function findCreatedComponentByNodeInternal(node) {
+ for (var n = 0; n < createdComponents_.length; n++) {
+ var component = createdComponents_[n];
+ if (component.element_ === node) {
+ return component;
+ }
+ }
+ }
+
+ /**
+ * Check the component for the downgrade method.
+ * Execute if found.
+ * Remove component from createdComponents list.
+ *
+ * @param {*} component
+ */
+ function deconstructComponentInternal(component) {
+ if (component &&
+ component[componentConfigProperty_]
+ .classConstructor.prototype
+ .hasOwnProperty(downgradeMethod_)) {
+ component[downgradeMethod_]();
+ var componentIndex = createdComponents_.indexOf(component);
+ createdComponents_.splice(componentIndex, 1);
+
+ var upgrades = component.element_.getAttribute('data-upgraded').split(',');
+ var componentPlace = upgrades.indexOf(
+ component[componentConfigProperty_].classAsString);
+ upgrades.splice(componentPlace, 1);
+ component.element_.setAttribute('data-upgraded', upgrades.join(','));
+
+ var ev = document.createEvent('Events');
+ ev.initEvent('mdl-componentdowngraded', true, true);
+ component.element_.dispatchEvent(ev);
+ }
+ }
+
+ /**
+ * Downgrade either a given node, an array of nodes, or a NodeList.
+ *
+ * @param {!Node|!Array<!Node>|!NodeList} nodes
+ */
+ function downgradeNodesInternal(nodes) {
+ /**
+ * Auxiliary function to downgrade a single node.
+ * @param {!Node} node the node to be downgraded
+ */
+ var downgradeNode = function(node) {
+ deconstructComponentInternal(findCreatedComponentByNodeInternal(node));
+ };
+ if (nodes instanceof Array || nodes instanceof NodeList) {
+ for (var n = 0; n < nodes.length; n++) {
+ downgradeNode(nodes[n]);
+ }
+ } else if (nodes instanceof Node) {
+ downgradeNode(nodes);
+ } else {
+ throw new Error('Invalid argument provided to downgrade MDL nodes.');
+ }
+ }
+
+ // Now return the functions that should be made public with their publicly
+ // facing names...
+ return {
+ upgradeDom: upgradeDomInternal,
+ upgradeElement: upgradeElementInternal,
+ upgradeElements: upgradeElementsInternal,
+ upgradeAllRegistered: upgradeAllRegisteredInternal,
+ registerUpgradedCallback: registerUpgradedCallbackInternal,
+ register: registerInternal,
+ downgradeElements: downgradeNodesInternal
+ };
+})();
+
+/**
+ * Describes the type of a registered component type managed by
+ * componentHandler. Provided for benefit of the Closure compiler.
+ *
+ * @typedef {{
+ * constructor: Function,
+ * classAsString: string,
+ * cssClass: string,
+ * widget: (string|boolean|undefined)
+ * }}
+ */
+componentHandler.ComponentConfigPublic; // jshint ignore:line
+
+/**
+ * Describes the type of a registered component type managed by
+ * componentHandler. Provided for benefit of the Closure compiler.
+ *
+ * @typedef {{
+ * constructor: !Function,
+ * className: string,
+ * cssClass: string,
+ * widget: (string|boolean),
+ * callbacks: !Array<function(!HTMLElement)>
+ * }}
+ */
+componentHandler.ComponentConfig; // jshint ignore:line
+
+/**
+ * Created component (i.e., upgraded element) type as managed by
+ * componentHandler. Provided for benefit of the Closure compiler.
+ *
+ * @typedef {{
+ * element_: !HTMLElement,
+ * className: string,
+ * classAsString: string,
+ * cssClass: string,
+ * widget: string
+ * }}
+ */
+componentHandler.Component; // jshint ignore:line
+
+// Export all symbols, for the benefit of Closure compiler.
+// No effect on uncompiled code.
+componentHandler['upgradeDom'] = componentHandler.upgradeDom;
+componentHandler['upgradeElement'] = componentHandler.upgradeElement;
+componentHandler['upgradeElements'] = componentHandler.upgradeElements;
+componentHandler['upgradeAllRegistered'] =
+ componentHandler.upgradeAllRegistered;
+componentHandler['registerUpgradedCallback'] =
+ componentHandler.registerUpgradedCallback;
+componentHandler['register'] = componentHandler.register;
+componentHandler['downgradeElements'] = componentHandler.downgradeElements;
+window.componentHandler = componentHandler;
+window['componentHandler'] = componentHandler;
+
+window.addEventListener('load', function() {
+ 'use strict';
+
+ /**
+ * Performs a "Cutting the mustard" test. If the browser supports the features
+ * tested, adds a mdl-js class to the <html> element. It then upgrades all MDL
+ * components requiring JavaScript.
+ */
+ if ('classList' in document.createElement('div') &&
+ 'querySelector' in document &&
+ 'addEventListener' in window && Array.prototype.forEach) {
+ document.documentElement.classList.add('mdl-js');
+ componentHandler.upgradeAllRegistered();
+ } else {
+ /**
+ * Dummy function to avoid JS errors.
+ */
+ componentHandler.upgradeElement = function() {};
+ /**
+ * Dummy function to avoid JS errors.
+ */
+ componentHandler.register = function() {};
+ }
+});
+
+// Source: https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js
+// Adapted from https://gist.github.com/paulirish/1579671 which derived from
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+// requestAnimationFrame polyfill by Erik Möller.
+// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen SlaviÄ, Darius Bacon
+// MIT license
+if (!Date.now) {
+ /**
+ * Date.now polyfill.
+ * @return {number} the current Date
+ */
+ Date.now = function () {
+ return new Date().getTime();
+ };
+ Date['now'] = Date.now;
+}
+var vendors = [
+ 'webkit',
+ 'moz'
+];
+for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
+ var vp = vendors[i];
+ window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
+ window.cancelAnimationFrame = window[vp + 'CancelAnimationFrame'] || window[vp + 'CancelRequestAnimationFrame'];
+ window['requestAnimationFrame'] = window.requestAnimationFrame;
+ window['cancelAnimationFrame'] = window.cancelAnimationFrame;
+}
+if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
+ var lastTime = 0;
+ /**
+ * requestAnimationFrame polyfill.
+ * @param {!Function} callback the callback function.
+ */
+ window.requestAnimationFrame = function (callback) {
+ var now = Date.now();
+ var nextTime = Math.max(lastTime + 16, now);
+ return setTimeout(function () {
+ callback(lastTime = nextTime);
+ }, nextTime - now);
+ };
+ window.cancelAnimationFrame = clearTimeout;
+ window['requestAnimationFrame'] = window.requestAnimationFrame;
+ window['cancelAnimationFrame'] = window.cancelAnimationFrame;
+}
+/**
+ * @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.
+ */
+/**
+ * Class constructor for Button MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+var MaterialButton = function MaterialButton(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialButton'] = MaterialButton;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialButton.prototype.Constant_ = {};
+/**
+ * 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
+ */
+MaterialButton.prototype.CssClasses_ = {
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_CONTAINER: 'mdl-button__ripple-container',
+ RIPPLE: 'mdl-ripple'
+};
+/**
+ * Handle blur of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialButton.prototype.blurHandler_ = function (event) {
+ if (event) {
+ this.element_.blur();
+ }
+};
+// Public methods.
+/**
+ * Disable button.
+ *
+ * @public
+ */
+MaterialButton.prototype.disable = function () {
+ this.element_.disabled = true;
+};
+MaterialButton.prototype['disable'] = MaterialButton.prototype.disable;
+/**
+ * Enable button.
+ *
+ * @public
+ */
+MaterialButton.prototype.enable = function () {
+ this.element_.disabled = false;
+};
+MaterialButton.prototype['enable'] = MaterialButton.prototype.enable;
+/**
+ * Initialize element.
+ */
+MaterialButton.prototype.init = function () {
+ if (this.element_) {
+ if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+ var rippleContainer = document.createElement('span');
+ rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+ this.rippleElement_ = document.createElement('span');
+ this.rippleElement_.classList.add(this.CssClasses_.RIPPLE);
+ rippleContainer.appendChild(this.rippleElement_);
+ this.boundRippleBlurHandler = this.blurHandler_.bind(this);
+ this.rippleElement_.addEventListener('mouseup', this.boundRippleBlurHandler);
+ this.element_.appendChild(rippleContainer);
+ }
+ this.boundButtonBlurHandler = this.blurHandler_.bind(this);
+ this.element_.addEventListener('mouseup', this.boundButtonBlurHandler);
+ this.element_.addEventListener('mouseleave', this.boundButtonBlurHandler);
+ }
+};
+/**
+ * Downgrade the element.
+ *
+ * @private
+ */
+MaterialButton.prototype.mdlDowngrade_ = function () {
+ if (this.rippleElement_) {
+ this.rippleElement_.removeEventListener('mouseup', this.boundRippleBlurHandler);
+ }
+ this.element_.removeEventListener('mouseup', this.boundButtonBlurHandler);
+ this.element_.removeEventListener('mouseleave', this.boundButtonBlurHandler);
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialButton,
+ classAsString: 'MaterialButton',
+ cssClass: 'mdl-js-button',
+ widget: true
+});
+/**
+ * @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.
+ */
+/**
+ * Class constructor for Checkbox 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 MaterialCheckbox = function MaterialCheckbox(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialCheckbox'] = MaterialCheckbox;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialCheckbox.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
+/**
+ * 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
+ */
+MaterialCheckbox.prototype.CssClasses_ = {
+ INPUT: 'mdl-checkbox__input',
+ BOX_OUTLINE: 'mdl-checkbox__box-outline',
+ FOCUS_HELPER: 'mdl-checkbox__focus-helper',
+ TICK_OUTLINE: 'mdl-checkbox__tick-outline',
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+ RIPPLE_CONTAINER: 'mdl-checkbox__ripple-container',
+ RIPPLE_CENTER: 'mdl-ripple--center',
+ RIPPLE: 'mdl-ripple',
+ IS_FOCUSED: 'is-focused',
+ IS_DISABLED: 'is-disabled',
+ IS_CHECKED: 'is-checked',
+ IS_UPGRADED: 'is-upgraded'
+};
+/**
+ * Handle change of state.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialCheckbox.prototype.onChange_ = function (event) {
+ this.updateClasses_();
+};
+/**
+ * Handle focus of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialCheckbox.prototype.onFocus_ = function (event) {
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle lost focus of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialCheckbox.prototype.onBlur_ = function (event) {
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle mouseup.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialCheckbox.prototype.onMouseUp_ = function (event) {
+ this.blur_();
+};
+/**
+ * Handle class updates.
+ *
+ * @private
+ */
+MaterialCheckbox.prototype.updateClasses_ = function () {
+ this.checkDisabled();
+ this.checkToggleState();
+};
+/**
+ * Add blur.
+ *
+ * @private
+ */
+MaterialCheckbox.prototype.blur_ = function () {
+ // TODO: figure out why there's a focus event being fired after our blur,
+ // so that we can avoid this hack.
+ window.setTimeout(function () {
+ this.inputElement_.blur();
+ }.bind(this), this.Constant_.TINY_TIMEOUT);
+};
+// Public methods.
+/**
+ * Check the inputs toggle state and update display.
+ *
+ * @public
+ */
+MaterialCheckbox.prototype.checkToggleState = function () {
+ if (this.inputElement_.checked) {
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+ }
+};
+MaterialCheckbox.prototype['checkToggleState'] = MaterialCheckbox.prototype.checkToggleState;
+/**
+ * Check the inputs disabled state and update display.
+ *
+ * @public
+ */
+MaterialCheckbox.prototype.checkDisabled = function () {
+ if (this.inputElement_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+};
+MaterialCheckbox.prototype['checkDisabled'] = MaterialCheckbox.prototype.checkDisabled;
+/**
+ * Disable checkbox.
+ *
+ * @public
+ */
+MaterialCheckbox.prototype.disable = function () {
+ this.inputElement_.disabled = true;
+ this.updateClasses_();
+};
+MaterialCheckbox.prototype['disable'] = MaterialCheckbox.prototype.disable;
+/**
+ * Enable checkbox.
+ *
+ * @public
+ */
+MaterialCheckbox.prototype.enable = function () {
+ this.inputElement_.disabled = false;
+ this.updateClasses_();
+};
+MaterialCheckbox.prototype['enable'] = MaterialCheckbox.prototype.enable;
+/**
+ * Check checkbox.
+ *
+ * @public
+ */
+MaterialCheckbox.prototype.check = function () {
+ this.inputElement_.checked = true;
+ this.updateClasses_();
+};
+MaterialCheckbox.prototype['check'] = MaterialCheckbox.prototype.check;
+/**
+ * Uncheck checkbox.
+ *
+ * @public
+ */
+MaterialCheckbox.prototype.uncheck = function () {
+ this.inputElement_.checked = false;
+ this.updateClasses_();
+};
+MaterialCheckbox.prototype['uncheck'] = MaterialCheckbox.prototype.uncheck;
+/**
+ * Initialize element.
+ */
+MaterialCheckbox.prototype.init = function () {
+ if (this.element_) {
+ this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+ var boxOutline = document.createElement('span');
+ boxOutline.classList.add(this.CssClasses_.BOX_OUTLINE);
+ var tickContainer = document.createElement('span');
+ tickContainer.classList.add(this.CssClasses_.FOCUS_HELPER);
+ var tickOutline = document.createElement('span');
+ tickOutline.classList.add(this.CssClasses_.TICK_OUTLINE);
+ boxOutline.appendChild(tickOutline);
+ this.element_.appendChild(tickContainer);
+ this.element_.appendChild(boxOutline);
+ if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+ this.rippleContainerElement_ = document.createElement('span');
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
+ this.boundRippleMouseUp = this.onMouseUp_.bind(this);
+ this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
+ var ripple = document.createElement('span');
+ ripple.classList.add(this.CssClasses_.RIPPLE);
+ this.rippleContainerElement_.appendChild(ripple);
+ this.element_.appendChild(this.rippleContainerElement_);
+ }
+ this.boundInputOnChange = this.onChange_.bind(this);
+ this.boundInputOnFocus = this.onFocus_.bind(this);
+ this.boundInputOnBlur = this.onBlur_.bind(this);
+ this.boundElementMouseUp = this.onMouseUp_.bind(this);
+ this.inputElement_.addEventListener('change', this.boundInputOnChange);
+ this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
+ this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
+ this.element_.addEventListener('mouseup', this.boundElementMouseUp);
+ this.updateClasses_();
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+ }
+};
+/**
+ * Downgrade the component.
+ *
+ * @private
+ */
+MaterialCheckbox.prototype.mdlDowngrade_ = function () {
+ if (this.rippleContainerElement_) {
+ this.rippleContainerElement_.removeEventListener('mouseup', this.boundRippleMouseUp);
+ }
+ this.inputElement_.removeEventListener('change', this.boundInputOnChange);
+ this.inputElement_.removeEventListener('focus', this.boundInputOnFocus);
+ this.inputElement_.removeEventListener('blur', this.boundInputOnBlur);
+ this.element_.removeEventListener('mouseup', this.boundElementMouseUp);
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialCheckbox,
+ classAsString: 'MaterialCheckbox',
+ cssClass: 'mdl-js-checkbox',
+ widget: true
+});
+/**
+ * @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.
+ */
+/**
+ * Class constructor for icon toggle 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 MaterialIconToggle = function MaterialIconToggle(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialIconToggle'] = MaterialIconToggle;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialIconToggle.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
+/**
+ * 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
+ */
+MaterialIconToggle.prototype.CssClasses_ = {
+ INPUT: 'mdl-icon-toggle__input',
+ JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+ RIPPLE_CONTAINER: 'mdl-icon-toggle__ripple-container',
+ RIPPLE_CENTER: 'mdl-ripple--center',
+ RIPPLE: 'mdl-ripple',
+ IS_FOCUSED: 'is-focused',
+ IS_DISABLED: 'is-disabled',
+ IS_CHECKED: 'is-checked'
+};
+/**
+ * Handle change of state.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialIconToggle.prototype.onChange_ = function (event) {
+ this.updateClasses_();
+};
+/**
+ * Handle focus of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialIconToggle.prototype.onFocus_ = function (event) {
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle lost focus of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialIconToggle.prototype.onBlur_ = function (event) {
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle mouseup.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialIconToggle.prototype.onMouseUp_ = function (event) {
+ this.blur_();
+};
+/**
+ * Handle class updates.
+ *
+ * @private
+ */
+MaterialIconToggle.prototype.updateClasses_ = function () {
+ this.checkDisabled();
+ this.checkToggleState();
+};
+/**
+ * Add blur.
+ *
+ * @private
+ */
+MaterialIconToggle.prototype.blur_ = function () {
+ // TODO: figure out why there's a focus event being fired after our blur,
+ // so that we can avoid this hack.
+ window.setTimeout(function () {
+ this.inputElement_.blur();
+ }.bind(this), this.Constant_.TINY_TIMEOUT);
+};
+// Public methods.
+/**
+ * Check the inputs toggle state and update display.
+ *
+ * @public
+ */
+MaterialIconToggle.prototype.checkToggleState = function () {
+ if (this.inputElement_.checked) {
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+ }
+};
+MaterialIconToggle.prototype['checkToggleState'] = MaterialIconToggle.prototype.checkToggleState;
+/**
+ * Check the inputs disabled state and update display.
+ *
+ * @public
+ */
+MaterialIconToggle.prototype.checkDisabled = function () {
+ if (this.inputElement_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+};
+MaterialIconToggle.prototype['checkDisabled'] = MaterialIconToggle.prototype.checkDisabled;
+/**
+ * Disable icon toggle.
+ *
+ * @public
+ */
+MaterialIconToggle.prototype.disable = function () {
+ this.inputElement_.disabled = true;
+ this.updateClasses_();
+};
+MaterialIconToggle.prototype['disable'] = MaterialIconToggle.prototype.disable;
+/**
+ * Enable icon toggle.
+ *
+ * @public
+ */
+MaterialIconToggle.prototype.enable = function () {
+ this.inputElement_.disabled = false;
+ this.updateClasses_();
+};
+MaterialIconToggle.prototype['enable'] = MaterialIconToggle.prototype.enable;
+/**
+ * Check icon toggle.
+ *
+ * @public
+ */
+MaterialIconToggle.prototype.check = function () {
+ this.inputElement_.checked = true;
+ this.updateClasses_();
+};
+MaterialIconToggle.prototype['check'] = MaterialIconToggle.prototype.check;
+/**
+ * Uncheck icon toggle.
+ *
+ * @public
+ */
+MaterialIconToggle.prototype.uncheck = function () {
+ this.inputElement_.checked = false;
+ this.updateClasses_();
+};
+MaterialIconToggle.prototype['uncheck'] = MaterialIconToggle.prototype.uncheck;
+/**
+ * Initialize element.
+ */
+MaterialIconToggle.prototype.init = function () {
+ if (this.element_) {
+ this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+ if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
+ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+ this.rippleContainerElement_ = document.createElement('span');
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+ this.rippleContainerElement_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT);
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
+ this.boundRippleMouseUp = this.onMouseUp_.bind(this);
+ this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
+ var ripple = document.createElement('span');
+ ripple.classList.add(this.CssClasses_.RIPPLE);
+ this.rippleContainerElement_.appendChild(ripple);
+ this.element_.appendChild(this.rippleContainerElement_);
+ }
+ this.boundInputOnChange = this.onChange_.bind(this);
+ this.boundInputOnFocus = this.onFocus_.bind(this);
+ this.boundInputOnBlur = this.onBlur_.bind(this);
+ this.boundElementOnMouseUp = this.onMouseUp_.bind(this);
+ this.inputElement_.addEventListener('change', this.boundInputOnChange);
+ this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
+ this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
+ this.element_.addEventListener('mouseup', this.boundElementOnMouseUp);
+ this.updateClasses_();
+ this.element_.classList.add('is-upgraded');
+ }
+};
+/**
+ * Downgrade the component
+ *
+ * @private
+ */
+MaterialIconToggle.prototype.mdlDowngrade_ = function () {
+ if (this.rippleContainerElement_) {
+ this.rippleContainerElement_.removeEventListener('mouseup', this.boundRippleMouseUp);
+ }
+ this.inputElement_.removeEventListener('change', this.boundInputOnChange);
+ this.inputElement_.removeEventListener('focus', this.boundInputOnFocus);
+ this.inputElement_.removeEventListener('blur', this.boundInputOnBlur);
+ this.element_.removeEventListener('mouseup', this.boundElementOnMouseUp);
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialIconToggle,
+ classAsString: 'MaterialIconToggle',
+ cssClass: 'mdl-js-icon-toggle',
+ widget: true
+});
+/**
+ * @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.
+ */
+/**
+ * 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-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)) {
+ } 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.getAttribute('disabled') !== null) {
+ 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), 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 = '';
+ }
+};
+/**
+ * Adds an event listener to clean up after the animation ends.
+ *
+ * @private
+ */
+MaterialMenu.prototype.addAnimationEndListener_ = function () {
+ var cleanup = function () {
+ this.element_.removeEventListener('transitionend', cleanup);
+ this.element_.removeEventListener('webkitTransitionEnd', cleanup);
+ this.element_.classList.remove(this.CssClasses_.IS_ANIMATING);
+ }.bind(this);
+ // Remove animation class once the transition is done.
+ this.element_.addEventListener('transitionend', cleanup);
+ this.element_.addEventListener('webkitTransitionEnd', cleanup);
+};
+/**
+ * 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.
+ if (e !== evt && !this.closing_) {
+ 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.transitionDelay = null;
+ }
+ // Measure the inner element.
+ var height = this.element_.getBoundingClientRect().height;
+ var width = this.element_.getBoundingClientRect().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;
+/**
+ * Downgrade the component.
+ *
+ * @private
+ */
+MaterialMenu.prototype.mdlDowngrade_ = function () {
+ var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
+ for (var i = 0; i < items.length; i++) {
+ items[i].removeEventListener('click', this.boundItemClick);
+ items[i].removeEventListener('keydown', this.boundItemKeydown);
+ }
+};
+// 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
+});
+/**
+ * @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.
+ */
+/**
+ * Class constructor for Progress 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 MaterialProgress = function MaterialProgress(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialProgress'] = MaterialProgress;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialProgress.prototype.Constant_ = {};
+/**
+ * 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
+ */
+MaterialProgress.prototype.CssClasses_ = { INDETERMINATE_CLASS: 'mdl-progress__indeterminate' };
+/**
+ * Set the current progress of the progressbar.
+ *
+ * @param {number} p Percentage of the progress (0-100)
+ * @public
+ */
+MaterialProgress.prototype.setProgress = function (p) {
+ if (this.element_.classList.contains(this.CssClasses_.INDETERMINATE_CLASS)) {
+ return;
+ }
+ this.progressbar_.style.width = p + '%';
+};
+MaterialProgress.prototype['setProgress'] = MaterialProgress.prototype.setProgress;
+/**
+ * Set the current progress of the buffer.
+ *
+ * @param {number} p Percentage of the buffer (0-100)
+ * @public
+ */
+MaterialProgress.prototype.setBuffer = function (p) {
+ this.bufferbar_.style.width = p + '%';
+ this.auxbar_.style.width = 100 - p + '%';
+};
+MaterialProgress.prototype['setBuffer'] = MaterialProgress.prototype.setBuffer;
+/**
+ * Initialize element.
+ */
+MaterialProgress.prototype.init = function () {
+ if (this.element_) {
+ var el = document.createElement('div');
+ el.className = 'progressbar bar bar1';
+ this.element_.appendChild(el);
+ this.progressbar_ = el;
+ el = document.createElement('div');
+ el.className = 'bufferbar bar bar2';
+ this.element_.appendChild(el);
+ this.bufferbar_ = el;
+ el = document.createElement('div');
+ el.className = 'auxbar bar bar3';
+ this.element_.appendChild(el);
+ this.auxbar_ = el;
+ this.progressbar_.style.width = '0%';
+ this.bufferbar_.style.width = '100%';
+ this.auxbar_.style.width = '0%';
+ this.element_.classList.add('is-upgraded');
+ }
+};
+/**
+ * Downgrade the component
+ *
+ * @private
+ */
+MaterialProgress.prototype.mdlDowngrade_ = function () {
+ while (this.element_.firstChild) {
+ this.element_.removeChild(this.element_.firstChild);
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialProgress,
+ classAsString: 'MaterialProgress',
+ cssClass: 'mdl-js-progress',
+ widget: true
+});
+/**
+ * @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.
+ */
+/**
+ * Class constructor for Radio 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 MaterialRadio = function MaterialRadio(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialRadio'] = MaterialRadio;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialRadio.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
+/**
+ * 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
+ */
+MaterialRadio.prototype.CssClasses_ = {
+ IS_FOCUSED: 'is-focused',
+ IS_DISABLED: 'is-disabled',
+ IS_CHECKED: 'is-checked',
+ IS_UPGRADED: 'is-upgraded',
+ JS_RADIO: 'mdl-js-radio',
+ RADIO_BTN: 'mdl-radio__button',
+ RADIO_OUTER_CIRCLE: 'mdl-radio__outer-circle',
+ RADIO_INNER_CIRCLE: 'mdl-radio__inner-circle',
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+ RIPPLE_CONTAINER: 'mdl-radio__ripple-container',
+ RIPPLE_CENTER: 'mdl-ripple--center',
+ RIPPLE: 'mdl-ripple'
+};
+/**
+ * Handle change of state.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialRadio.prototype.onChange_ = function (event) {
+ // Since other radio buttons don't get change events, we need to look for
+ // them to update their classes.
+ var radios = document.getElementsByClassName(this.CssClasses_.JS_RADIO);
+ for (var i = 0; i < radios.length; i++) {
+ var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
+ // Different name == different group, so no point updating those.
+ if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
+ radios[i]['MaterialRadio'].updateClasses_();
+ }
+ }
+};
+/**
+ * Handle focus.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialRadio.prototype.onFocus_ = function (event) {
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle lost focus.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialRadio.prototype.onBlur_ = function (event) {
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+};
+/**
+ * Handle mouseup.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialRadio.prototype.onMouseup_ = function (event) {
+ this.blur_();
+};
+/**
+ * Update classes.
+ *
+ * @private
+ */
+MaterialRadio.prototype.updateClasses_ = function () {
+ this.checkDisabled();
+ this.checkToggleState();
+};
+/**
+ * Add blur.
+ *
+ * @private
+ */
+MaterialRadio.prototype.blur_ = function () {
+ // TODO: figure out why there's a focus event being fired after our blur,
+ // so that we can avoid this hack.
+ window.setTimeout(function () {
+ this.btnElement_.blur();
+ }.bind(this), this.Constant_.TINY_TIMEOUT);
+};
+// Public methods.
+/**
+ * Check the components disabled state.
+ *
+ * @public
+ */
+MaterialRadio.prototype.checkDisabled = function () {
+ if (this.btnElement_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+};
+MaterialRadio.prototype['checkDisabled'] = MaterialRadio.prototype.checkDisabled;
+/**
+ * Check the components toggled state.
+ *
+ * @public
+ */
+MaterialRadio.prototype.checkToggleState = function () {
+ if (this.btnElement_.checked) {
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+ }
+};
+MaterialRadio.prototype['checkToggleState'] = MaterialRadio.prototype.checkToggleState;
+/**
+ * Disable radio.
+ *
+ * @public
+ */
+MaterialRadio.prototype.disable = function () {
+ this.btnElement_.disabled = true;
+ this.updateClasses_();
+};
+MaterialRadio.prototype['disable'] = MaterialRadio.prototype.disable;
+/**
+ * Enable radio.
+ *
+ * @public
+ */
+MaterialRadio.prototype.enable = function () {
+ this.btnElement_.disabled = false;
+ this.updateClasses_();
+};
+MaterialRadio.prototype['enable'] = MaterialRadio.prototype.enable;
+/**
+ * Check radio.
+ *
+ * @public
+ */
+MaterialRadio.prototype.check = function () {
+ this.btnElement_.checked = true;
+ this.updateClasses_();
+};
+MaterialRadio.prototype['check'] = MaterialRadio.prototype.check;
+/**
+ * Uncheck radio.
+ *
+ * @public
+ */
+MaterialRadio.prototype.uncheck = function () {
+ this.btnElement_.checked = false;
+ this.updateClasses_();
+};
+MaterialRadio.prototype['uncheck'] = MaterialRadio.prototype.uncheck;
+/**
+ * Initialize element.
+ */
+MaterialRadio.prototype.init = function () {
+ if (this.element_) {
+ this.btnElement_ = this.element_.querySelector('.' + this.CssClasses_.RADIO_BTN);
+ var outerCircle = document.createElement('span');
+ outerCircle.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE);
+ var innerCircle = document.createElement('span');
+ innerCircle.classList.add(this.CssClasses_.RADIO_INNER_CIRCLE);
+ this.element_.appendChild(outerCircle);
+ this.element_.appendChild(innerCircle);
+ var rippleContainer;
+ if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+ rippleContainer = document.createElement('span');
+ rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+ rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+ rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER);
+ rippleContainer.addEventListener('mouseup', this.onMouseup_.bind(this));
+ var ripple = document.createElement('span');
+ ripple.classList.add(this.CssClasses_.RIPPLE);
+ rippleContainer.appendChild(ripple);
+ this.element_.appendChild(rippleContainer);
+ }
+ this.btnElement_.addEventListener('change', this.onChange_.bind(this));
+ this.btnElement_.addEventListener('focus', this.onFocus_.bind(this));
+ this.btnElement_.addEventListener('blur', this.onBlur_.bind(this));
+ this.element_.addEventListener('mouseup', this.onMouseup_.bind(this));
+ this.updateClasses_();
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialRadio,
+ classAsString: 'MaterialRadio',
+ cssClass: 'mdl-js-radio',
+ widget: true
+});
+/**
+ * @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.
+ */
+/**
+ * Class constructor for Slider 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 MaterialSlider = function MaterialSlider(element) {
+ this.element_ = element;
+ // Browser feature detection.
+ this.isIE_ = window.navigator.msPointerEnabled;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialSlider'] = MaterialSlider;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialSlider.prototype.Constant_ = {};
+/**
+ * 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
+ */
+MaterialSlider.prototype.CssClasses_ = {
+ IE_CONTAINER: 'mdl-slider__ie-container',
+ SLIDER_CONTAINER: 'mdl-slider__container',
+ BACKGROUND_FLEX: 'mdl-slider__background-flex',
+ BACKGROUND_LOWER: 'mdl-slider__background-lower',
+ BACKGROUND_UPPER: 'mdl-slider__background-upper',
+ IS_LOWEST_VALUE: 'is-lowest-value',
+ IS_UPGRADED: 'is-upgraded'
+};
+/**
+ * Handle input on element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialSlider.prototype.onInput_ = function (event) {
+ this.updateValueStyles_();
+};
+/**
+ * Handle change on element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialSlider.prototype.onChange_ = function (event) {
+ this.updateValueStyles_();
+};
+/**
+ * Handle mouseup on element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+MaterialSlider.prototype.onMouseUp_ = function (event) {
+ event.target.blur();
+};
+/**
+ * Handle mousedown on container element.
+ * This handler is purpose is to not require the use to click
+ * exactly on the 2px slider element, as FireFox seems to be very
+ * strict about this.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ * @suppress {missingProperties}
+ */
+MaterialSlider.prototype.onContainerMouseDown_ = function (event) {
+ // If this click is not on the parent element (but rather some child)
+ // ignore. It may still bubble up.
+ if (event.target !== this.element_.parentElement) {
+ return;
+ }
+ // Discard the original event and create a new event that
+ // is on the slider element.
+ event.preventDefault();
+ var newEvent = new MouseEvent('mousedown', {
+ target: event.target,
+ buttons: event.buttons,
+ clientX: event.clientX,
+ clientY: this.element_.getBoundingClientRect().y
+ });
+ this.element_.dispatchEvent(newEvent);
+};
+/**
+ * Handle updating of values.
+ *
+ * @private
+ */
+MaterialSlider.prototype.updateValueStyles_ = function () {
+ // Calculate and apply percentages to div structure behind slider.
+ var fraction = (this.element_.value - this.element_.min) / (this.element_.max - this.element_.min);
+ if (fraction === 0) {
+ this.element_.classList.add(this.CssClasses_.IS_LOWEST_VALUE);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_LOWEST_VALUE);
+ }
+ if (!this.isIE_) {
+ this.backgroundLower_.style.flex = fraction;
+ this.backgroundLower_.style.webkitFlex = fraction;
+ this.backgroundUpper_.style.flex = 1 - fraction;
+ this.backgroundUpper_.style.webkitFlex = 1 - fraction;
+ }
+};
+// Public methods.
+/**
+ * Disable slider.
+ *
+ * @public
+ */
+MaterialSlider.prototype.disable = function () {
+ this.element_.disabled = true;
+};
+MaterialSlider.prototype['disable'] = MaterialSlider.prototype.disable;
+/**
+ * Enable slider.
+ *
+ * @public
+ */
+MaterialSlider.prototype.enable = function () {
+ this.element_.disabled = false;
+};
+MaterialSlider.prototype['enable'] = MaterialSlider.prototype.enable;
+/**
+ * Update slider value.
+ *
+ * @param {number} value The value to which to set the control (optional).
+ * @public
+ */
+MaterialSlider.prototype.change = function (value) {
+ if (typeof value !== 'undefined') {
+ this.element_.value = value;
+ }
+ this.updateValueStyles_();
+};
+MaterialSlider.prototype['change'] = MaterialSlider.prototype.change;
+/**
+ * Initialize element.
+ */
+MaterialSlider.prototype.init = function () {
+ if (this.element_) {
+ if (this.isIE_) {
+ // Since we need to specify a very large height in IE due to
+ // implementation limitations, we add a parent here that trims it down to
+ // a reasonable size.
+ var containerIE = document.createElement('div');
+ containerIE.classList.add(this.CssClasses_.IE_CONTAINER);
+ this.element_.parentElement.insertBefore(containerIE, this.element_);
+ this.element_.parentElement.removeChild(this.element_);
+ containerIE.appendChild(this.element_);
+ } else {
+ // For non-IE browsers, we need a div structure that sits behind the
+ // slider and allows us to style the left and right sides of it with
+ // different colors.
+ var container = document.createElement('div');
+ container.classList.add(this.CssClasses_.SLIDER_CONTAINER);
+ this.element_.parentElement.insertBefore(container, this.element_);
+ this.element_.parentElement.removeChild(this.element_);
+ container.appendChild(this.element_);
+ var backgroundFlex = document.createElement('div');
+ backgroundFlex.classList.add(this.CssClasses_.BACKGROUND_FLEX);
+ container.appendChild(backgroundFlex);
+ this.backgroundLower_ = document.createElement('div');
+ this.backgroundLower_.classList.add(this.CssClasses_.BACKGROUND_LOWER);
+ backgroundFlex.appendChild(this.backgroundLower_);
+ this.backgroundUpper_ = document.createElement('div');
+ this.backgroundUpper_.classList.add(this.CssClasses_.BACKGROUND_UPPER);
+ backgroundFlex.appendChild(this.backgroundUpper_);
+ }
+ this.boundInputHandler = this.onInput_.bind(this);
+ this.boundChangeHandler = this.onChange_.bind(this);
+ this.boundMouseUpHandler = this.onMouseUp_.bind(this);
+ this.boundContainerMouseDownHandler = this.onContainerMouseDown_.bind(this);
+ this.element_.addEventListener('input', this.boundInputHandler);
+ this.element_.addEventListener('change', this.boundChangeHandler);
+ this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
+ this.element_.parentElement.addEventListener('mousedown', this.boundContainerMouseDownHandler);
+ this.updateValueStyles_();
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+ }
+};
+/**
+ * Downgrade the component
+ *
+ * @private
+ */
+MaterialSlider.prototype.mdlDowngrade_ = function () {
+ this.element_.removeEventListener('input', this.boundInputHandler);
+ this.element_.removeEventListener('change', this.boundChangeHandler);
+ this.element_.removeEventListener('mouseup', this.boundMouseUpHandler);
+ this.element_.parentElement.removeEventListener('mousedown', this.boundContainerMouseDownHandler);
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialSlider,
+ classAsString: 'MaterialSlider',
+ cssClass: 'mdl-js-slider',
+ widget: true
+});
+/**
+ * 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.
+ */
+/**
+ * Class constructor for Snackbar 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 MaterialSnackbar = function MaterialSnackbar(element) {
+ this.element_ = element;
+ this.active = false;
+ this.init();
+};
+window['MaterialSnackbar'] = MaterialSnackbar;
+/**
+ * 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
+ */
+MaterialSnackbar.prototype.cssClasses_ = {
+ SNACKBAR: 'mdl-snackbar',
+ MESSAGE: 'mdl-snackbar__text',
+ ACTION: 'mdl-snackbar__action',
+ ACTIVE: 'is-active'
+};
+/**
+ * Create the internal snackbar markup.
+ *
+ * @private
+ */
+MaterialSnackbar.prototype.createSnackbar_ = function () {
+ this.snackbarElement_ = document.createElement('div');
+ this.textElement_ = document.createElement('div');
+ this.snackbarElement_.classList.add(this.cssClasses_.SNACKBAR);
+ this.textElement_.classList.add(this.cssClasses_.MESSAGE);
+ this.snackbarElement_.appendChild(this.textElement_);
+ this.snackbarElement_.setAttribute('aria-hidden', true);
+ if (this.actionHandler_) {
+ this.actionElement_ = document.createElement('button');
+ this.actionElement_.type = 'button';
+ this.actionElement_.classList.add(this.cssClasses_.ACTION);
+ this.actionElement_.textContent = this.actionText_;
+ this.snackbarElement_.appendChild(this.actionElement_);
+ this.actionElement_.addEventListener('click', this.actionHandler_);
+ }
+ this.element_.appendChild(this.snackbarElement_);
+ this.textElement_.textContent = this.message_;
+ this.snackbarElement_.classList.add(this.cssClasses_.ACTIVE);
+ this.snackbarElement_.setAttribute('aria-hidden', false);
+ setTimeout(this.cleanup_.bind(this), this.timeout_);
+};
+/**
+ * Remove the internal snackbar markup.
+ *
+ * @private
+ */
+MaterialSnackbar.prototype.removeSnackbar_ = function () {
+ if (this.actionElement_ && this.actionElement_.parentNode) {
+ this.actionElement_.parentNode.removeChild(this.actionElement_);
+ }
+ this.textElement_.parentNode.removeChild(this.textElement_);
+ this.snackbarElement_.parentNode.removeChild(this.snackbarElement_);
+};
+/**
+ * Create the internal snackbar markup.
+ *
+ * @param {Object} data The data for the notification.
+ * @public
+ */
+MaterialSnackbar.prototype.showSnackbar = function (data) {
+ if (data === undefined) {
+ throw new Error('Please provide a data object with at least a message to display.');
+ }
+ if (data['message'] === undefined) {
+ throw new Error('Please provide a message to be displayed.');
+ }
+ if (data['actionHandler'] && !data['actionText']) {
+ throw new Error('Please provide action text with the handler.');
+ }
+ if (this.active) {
+ this.queuedNotifications_.push(data);
+ } else {
+ this.active = true;
+ this.message_ = data['message'];
+ if (data['timeout']) {
+ this.timeout_ = data['timeout'];
+ } else {
+ this.timeout_ = 8000;
+ }
+ if (data['actionHandler']) {
+ this.actionHandler_ = data['actionHandler'];
+ }
+ if (data['actionText']) {
+ this.actionText_ = data['actionText'];
+ }
+ this.createSnackbar_();
+ }
+};
+MaterialSnackbar.prototype['showSnackbar'] = MaterialSnackbar.prototype.showSnackbar;
+/**
+ * Check if the queue has items within it.
+ * If it does, display the next entry.
+ *
+ * @private
+ */
+MaterialSnackbar.prototype.checkQueue_ = function () {
+ if (this.queuedNotifications_.length > 0) {
+ this.showSnackbar(this.queuedNotifications_.shift());
+ }
+};
+/**
+ * Cleanup the snackbar event listeners and accessiblity attributes.
+ *
+ * @private
+ */
+MaterialSnackbar.prototype.cleanup_ = function () {
+ this.snackbarElement_.classList.remove(this.cssClasses_.ACTIVE);
+ this.snackbarElement_.setAttribute('aria-hidden', true);
+ if (this.actionElement_) {
+ this.actionElement_.removeEventListener('click', this.actionHandler_);
+ }
+ this.setDefaults_();
+ this.active = false;
+ this.removeSnackbar_();
+ this.checkQueue_();
+};
+/**
+ * Clean properties to avoid one entry affecting another.
+ *
+ * @private
+ */
+MaterialSnackbar.prototype.setDefaults_ = function () {
+ this.actionHandler_ = undefined;
+ this.message_ = undefined;
+ this.actionText_ = undefined;
+};
+/**
+ * Initialize the object.
+ *
+ * @public
+ */
+MaterialSnackbar.prototype.init = function () {
+ this.setDefaults_();
+ this.queuedNotifications_ = [];
+};
+MaterialSnackbar.prototype['init'] = MaterialSnackbar.prototype.init;
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialSnackbar,
+ classAsString: 'MaterialSnackbar',
+ cssClass: 'mdl-js-snackbar',
+ widget: true
+});
+/**
+ * @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.
+ */
+/**
+ * Class constructor for Spinner MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @param {HTMLElement} element The element that will be upgraded.
+ * @constructor
+ */
+var MaterialSpinner = function MaterialSpinner(element) {
+ this.element_ = element;
+ // Initialize instance.
+ this.init();
+};
+window['MaterialSpinner'] = MaterialSpinner;
+/**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+MaterialSpinner.prototype.Constant_ = { MDL_SPINNER_LAYER_COUNT: 4 };
+/**
+ * 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
+ */
+MaterialSpinner.prototype.CssClasses_ = {
+ MDL_SPINNER_LAYER: 'mdl-spinner__layer',
+ MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
+ MDL_SPINNER_CIRCLE: 'mdl-spinner__circle',
+ MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
+ MDL_SPINNER_LEFT: 'mdl-spinner__left',
+ MDL_SPINNER_RIGHT: 'mdl-spinner__right'
+};
+/**
+ * Auxiliary method to create a spinner layer.
+ *
+ * @param {number} index Index of the layer to be created.
+ * @public
+ */
+MaterialSpinner.prototype.createLayer = function (index) {
+ var layer = document.createElement('div');
+ layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER);
+ layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index);
+ var leftClipper = document.createElement('div');
+ leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
+ leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);
+ var gapPatch = document.createElement('div');
+ gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);
+ var rightClipper = document.createElement('div');
+ rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
+ rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);
+ var circleOwners = [
+ leftClipper,
+ gapPatch,
+ rightClipper
+ ];
+ for (var i = 0; i < circleOwners.length; i++) {
+ var circle = document.createElement('div');
+ circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE);
+ circleOwners[i].appendChild(circle);
+ }
+ layer.appendChild(leftClipper);
+ layer.appendChild(gapPatch);
+ layer.appendChild(rightClipper);
+ this.element_.appendChild(layer);
+};
+MaterialSpinner.prototype['createLayer'] = MaterialSpinner.prototype.createLayer;
+/**
+ * Stops the spinner animation.
+ * Public method for users who need to stop the spinner for any reason.
+ *
+ * @public
+ */
+MaterialSpinner.prototype.stop = function () {
+ this.element_.classList.remove('is-active');
+};
+MaterialSpinner.prototype['stop'] = MaterialSpinner.prototype.stop;
+/**
+ * Starts the spinner animation.
+ * Public method for users who need to manually start the spinner for any reason
+ * (instead of just adding the 'is-active' class to their markup).
+ *
+ * @public
+ */
+MaterialSpinner.prototype.start = function () {
+ this.element_.classList.add('is-active');
+};
+MaterialSpinner.prototype['start'] = MaterialSpinner.prototype.start;
+/**
+ * Initialize element.
+ */
+MaterialSpinner.prototype.init = function () {
+ if (this.element_) {
+ for (var i = 1; i <= this.Constant_.MDL_SPINNER_LAYER_COUNT; i++) {
+ this.createLayer(i);
+ }
+ this.element_.classList.add('is-upgraded');
+ }
+};
+// The component registers itself. It can assume componentHandler is available
+// in the global scope.
+componentHandler.register({
+ constructor: MaterialSpinner,
+ classAsString: 'MaterialSpinner',
+ cssClass: 'mdl-js-spinner',
+ widget: true
+});
+/**
+ * @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
+ *
[... 1529 lines stripped ...]