bsw/jbe@1309: ;(function() { bsw/jbe@1309: "use strict"; bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * A component handler interface using the revealing module design pattern. bsw/jbe@1309: * More details on this design pattern here: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @author Jason Mayes. bsw/jbe@1309: */ bsw/jbe@1309: /* exported componentHandler */ bsw/jbe@1309: bsw/jbe@1309: // Pre-defining the componentHandler interface, for closure documentation and bsw/jbe@1309: // static verification. bsw/jbe@1309: var componentHandler = { bsw/jbe@1309: /** bsw/jbe@1309: * Searches existing DOM for elements of our component type and upgrades them bsw/jbe@1309: * if they have not already been upgraded. bsw/jbe@1309: * bsw/jbe@1309: * @param {string=} optJsClass the programatic name of the element class we bsw/jbe@1309: * need to create a new instance of. bsw/jbe@1309: * @param {string=} optCssClass the name of the CSS class elements of this bsw/jbe@1309: * type will have. bsw/jbe@1309: */ bsw/jbe@1309: upgradeDom: function(optJsClass, optCssClass) {}, bsw/jbe@1309: /** bsw/jbe@1309: * Upgrades a specific element rather than all in the DOM. bsw/jbe@1309: * bsw/jbe@1309: * @param {!Element} element The element we wish to upgrade. bsw/jbe@1309: * @param {string=} optJsClass Optional name of the class we want to upgrade bsw/jbe@1309: * the element to. bsw/jbe@1309: */ bsw/jbe@1309: upgradeElement: function(element, optJsClass) {}, bsw/jbe@1309: /** bsw/jbe@1309: * Upgrades a specific list of elements rather than all in the DOM. bsw/jbe@1309: * bsw/jbe@1309: * @param {!Element|!Array|!NodeList|!HTMLCollection} elements bsw/jbe@1309: * The elements we wish to upgrade. bsw/jbe@1309: */ bsw/jbe@1309: upgradeElements: function(elements) {}, bsw/jbe@1309: /** bsw/jbe@1309: * Upgrades all registered components found in the current DOM. This is bsw/jbe@1309: * automatically called on window load. bsw/jbe@1309: */ bsw/jbe@1309: upgradeAllRegistered: function() {}, bsw/jbe@1309: /** bsw/jbe@1309: * Allows user to be alerted to any upgrades that are performed for a given bsw/jbe@1309: * component type bsw/jbe@1309: * bsw/jbe@1309: * @param {string} jsClass The class name of the MDL component we wish bsw/jbe@1309: * to hook into for any upgrades performed. bsw/jbe@1309: * @param {function(!HTMLElement)} callback The function to call upon an bsw/jbe@1309: * upgrade. This function should expect 1 parameter - the HTMLElement which bsw/jbe@1309: * got upgraded. bsw/jbe@1309: */ bsw/jbe@1309: registerUpgradedCallback: function(jsClass, callback) {}, bsw/jbe@1309: /** bsw/jbe@1309: * Registers a class for future use and attempts to upgrade existing DOM. bsw/jbe@1309: * bsw/jbe@1309: * @param {componentHandler.ComponentConfigPublic} config the registration configuration bsw/jbe@1309: */ bsw/jbe@1309: register: function(config) {}, bsw/jbe@1309: /** bsw/jbe@1309: * Downgrade either a given node, an array of nodes, or a NodeList. bsw/jbe@1309: * bsw/jbe@1309: * @param {!Node|!Array|!NodeList} nodes bsw/jbe@1309: */ bsw/jbe@1309: downgradeElements: function(nodes) {} bsw/jbe@1309: }; bsw/jbe@1309: bsw/jbe@1309: componentHandler = (function() { bsw/jbe@1309: 'use strict'; bsw/jbe@1309: bsw/jbe@1309: /** @type {!Array} */ bsw/jbe@1309: var registeredComponents_ = []; bsw/jbe@1309: bsw/jbe@1309: /** @type {!Array} */ bsw/jbe@1309: var createdComponents_ = []; bsw/jbe@1309: bsw/jbe@1309: var componentConfigProperty_ = 'mdlComponentConfigInternal_'; bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Searches registered components for a class we are interested in using. bsw/jbe@1309: * Optionally replaces a match with passed object if specified. bsw/jbe@1309: * bsw/jbe@1309: * @param {string} name The name of a class we want to use. bsw/jbe@1309: * @param {componentHandler.ComponentConfig=} optReplace Optional object to replace match with. bsw/jbe@1309: * @return {!Object|boolean} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: function findRegisteredClass_(name, optReplace) { bsw/jbe@1309: for (var i = 0; i < registeredComponents_.length; i++) { bsw/jbe@1309: if (registeredComponents_[i].className === name) { bsw/jbe@1309: if (typeof optReplace !== 'undefined') { bsw/jbe@1309: registeredComponents_[i] = optReplace; bsw/jbe@1309: } bsw/jbe@1309: return registeredComponents_[i]; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: return false; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Returns an array of the classNames of the upgraded classes on the element. bsw/jbe@1309: * bsw/jbe@1309: * @param {!Element} element The element to fetch data from. bsw/jbe@1309: * @return {!Array} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: function getUpgradedListOfElement_(element) { bsw/jbe@1309: var dataUpgraded = element.getAttribute('data-upgraded'); bsw/jbe@1309: // Use `['']` as default value to conform the `,name,name...` style. bsw/jbe@1309: return dataUpgraded === null ? [''] : dataUpgraded.split(','); bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Returns true if the given element has already been upgraded for the given bsw/jbe@1309: * class. bsw/jbe@1309: * bsw/jbe@1309: * @param {!Element} element The element we want to check. bsw/jbe@1309: * @param {string} jsClass The class to check for. bsw/jbe@1309: * @returns {boolean} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: function isElementUpgraded_(element, jsClass) { bsw/jbe@1309: var upgradedList = getUpgradedListOfElement_(element); bsw/jbe@1309: return upgradedList.indexOf(jsClass) !== -1; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Searches existing DOM for elements of our component type and upgrades them bsw/jbe@1309: * if they have not already been upgraded. bsw/jbe@1309: * bsw/jbe@1309: * @param {string=} optJsClass the programatic name of the element class we bsw/jbe@1309: * need to create a new instance of. bsw/jbe@1309: * @param {string=} optCssClass the name of the CSS class elements of this bsw/jbe@1309: * type will have. bsw/jbe@1309: */ bsw/jbe@1309: function upgradeDomInternal(optJsClass, optCssClass) { bsw/jbe@1309: if (typeof optJsClass === 'undefined' && bsw/jbe@1309: typeof optCssClass === 'undefined') { bsw/jbe@1309: for (var i = 0; i < registeredComponents_.length; i++) { bsw/jbe@1309: upgradeDomInternal(registeredComponents_[i].className, bsw/jbe@1309: registeredComponents_[i].cssClass); bsw/jbe@1309: } bsw/jbe@1309: } else { bsw/jbe@1309: var jsClass = /** @type {string} */ (optJsClass); bsw/jbe@1309: if (typeof optCssClass === 'undefined') { bsw/jbe@1309: var registeredClass = findRegisteredClass_(jsClass); bsw/jbe@1309: if (registeredClass) { bsw/jbe@1309: optCssClass = registeredClass.cssClass; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: var elements = document.querySelectorAll('.' + optCssClass); bsw/jbe@1309: for (var n = 0; n < elements.length; n++) { bsw/jbe@1309: upgradeElementInternal(elements[n], jsClass); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Upgrades a specific element rather than all in the DOM. bsw/jbe@1309: * bsw/jbe@1309: * @param {!Element} element The element we wish to upgrade. bsw/jbe@1309: * @param {string=} optJsClass Optional name of the class we want to upgrade bsw/jbe@1309: * the element to. bsw/jbe@1309: */ bsw/jbe@1309: function upgradeElementInternal(element, optJsClass) { bsw/jbe@1309: // Verify argument type. bsw/jbe@1309: if (!(typeof element === 'object' && element instanceof Element)) { bsw/jbe@1309: throw new Error('Invalid argument provided to upgrade MDL element.'); bsw/jbe@1309: } bsw/jbe@1309: var upgradedList = getUpgradedListOfElement_(element); bsw/jbe@1309: var classesToUpgrade = []; bsw/jbe@1309: // If jsClass is not provided scan the registered components to find the bsw/jbe@1309: // ones matching the element's CSS classList. bsw/jbe@1309: if (!optJsClass) { bsw/jbe@1309: var classList = element.classList; bsw/jbe@1309: registeredComponents_.forEach(function(component) { bsw/jbe@1309: // Match CSS & Not to be upgraded & Not upgraded. bsw/jbe@1309: if (classList.contains(component.cssClass) && bsw/jbe@1309: classesToUpgrade.indexOf(component) === -1 && bsw/jbe@1309: !isElementUpgraded_(element, component.className)) { bsw/jbe@1309: classesToUpgrade.push(component); bsw/jbe@1309: } bsw/jbe@1309: }); bsw/jbe@1309: } else if (!isElementUpgraded_(element, optJsClass)) { bsw/jbe@1309: classesToUpgrade.push(findRegisteredClass_(optJsClass)); bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: // Upgrade the element for each classes. bsw/jbe@1309: for (var i = 0, n = classesToUpgrade.length, registeredClass; i < n; i++) { bsw/jbe@1309: registeredClass = classesToUpgrade[i]; bsw/jbe@1309: if (registeredClass) { bsw/jbe@1309: // Mark element as upgraded. bsw/jbe@1309: upgradedList.push(registeredClass.className); bsw/jbe@1309: element.setAttribute('data-upgraded', upgradedList.join(',')); bsw/jbe@1309: var instance = new registeredClass.classConstructor(element); bsw/jbe@1309: instance[componentConfigProperty_] = registeredClass; bsw/jbe@1309: createdComponents_.push(instance); bsw/jbe@1309: // Call any callbacks the user has registered with this component type. bsw/jbe@1309: for (var j = 0, m = registeredClass.callbacks.length; j < m; j++) { bsw/jbe@1309: registeredClass.callbacks[j](element); bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: if (registeredClass.widget) { bsw/jbe@1309: // Assign per element instance for control over API bsw/jbe@1309: element[registeredClass.className] = instance; bsw/jbe@1309: } bsw/jbe@1309: } else { bsw/jbe@1309: throw new Error( bsw/jbe@1309: 'Unable to find a registered component for the given class.'); bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: var ev; bsw/jbe@1309: if ('CustomEvent' in window && typeof window.CustomEvent === 'function') { bsw/jbe@1309: ev = new CustomEvent('mdl-componentupgraded', { bsw/jbe@1309: bubbles: true, cancelable: false bsw/jbe@1309: }); bsw/jbe@1309: } else { bsw/jbe@1309: ev = document.createEvent('Events'); bsw/jbe@1309: ev.initEvent('mdl-componentupgraded', true, true); bsw/jbe@1309: } bsw/jbe@1309: element.dispatchEvent(ev); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Upgrades a specific list of elements rather than all in the DOM. bsw/jbe@1309: * bsw/jbe@1309: * @param {!Element|!Array|!NodeList|!HTMLCollection} elements bsw/jbe@1309: * The elements we wish to upgrade. bsw/jbe@1309: */ bsw/jbe@1309: function upgradeElementsInternal(elements) { bsw/jbe@1309: if (!Array.isArray(elements)) { bsw/jbe@1309: if (elements instanceof Element) { bsw/jbe@1309: elements = [elements]; bsw/jbe@1309: } else { bsw/jbe@1309: elements = Array.prototype.slice.call(elements); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: for (var i = 0, n = elements.length, element; i < n; i++) { bsw/jbe@1309: element = elements[i]; bsw/jbe@1309: if (element instanceof HTMLElement) { bsw/jbe@1309: upgradeElementInternal(element); bsw/jbe@1309: if (element.children.length > 0) { bsw/jbe@1309: upgradeElementsInternal(element.children); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Registers a class for future use and attempts to upgrade existing DOM. bsw/jbe@1309: * bsw/jbe@1309: * @param {componentHandler.ComponentConfigPublic} config bsw/jbe@1309: */ bsw/jbe@1309: function registerInternal(config) { bsw/jbe@1309: // In order to support both Closure-compiled and uncompiled code accessing bsw/jbe@1309: // this method, we need to allow for both the dot and array syntax for bsw/jbe@1309: // property access. You'll therefore see the `foo.bar || foo['bar']` bsw/jbe@1309: // pattern repeated across this method. bsw/jbe@1309: var widgetMissing = (typeof config.widget === 'undefined' && bsw/jbe@1309: typeof config['widget'] === 'undefined'); bsw/jbe@1309: var widget = true; bsw/jbe@1309: bsw/jbe@1309: if (!widgetMissing) { bsw/jbe@1309: widget = config.widget || config['widget']; bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: var newConfig = /** @type {componentHandler.ComponentConfig} */ ({ bsw/jbe@1309: classConstructor: config.constructor || config['constructor'], bsw/jbe@1309: className: config.classAsString || config['classAsString'], bsw/jbe@1309: cssClass: config.cssClass || config['cssClass'], bsw/jbe@1309: widget: widget, bsw/jbe@1309: callbacks: [] bsw/jbe@1309: }); bsw/jbe@1309: bsw/jbe@1309: registeredComponents_.forEach(function(item) { bsw/jbe@1309: if (item.cssClass === newConfig.cssClass) { bsw/jbe@1309: throw new Error('The provided cssClass has already been registered: ' + item.cssClass); bsw/jbe@1309: } bsw/jbe@1309: if (item.className === newConfig.className) { bsw/jbe@1309: throw new Error('The provided className has already been registered'); bsw/jbe@1309: } bsw/jbe@1309: }); bsw/jbe@1309: bsw/jbe@1309: if (config.constructor.prototype bsw/jbe@1309: .hasOwnProperty(componentConfigProperty_)) { bsw/jbe@1309: throw new Error( bsw/jbe@1309: 'MDL component classes must not have ' + componentConfigProperty_ + bsw/jbe@1309: ' defined as a property.'); bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: var found = findRegisteredClass_(config.classAsString, newConfig); bsw/jbe@1309: bsw/jbe@1309: if (!found) { bsw/jbe@1309: registeredComponents_.push(newConfig); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Allows user to be alerted to any upgrades that are performed for a given bsw/jbe@1309: * component type bsw/jbe@1309: * bsw/jbe@1309: * @param {string} jsClass The class name of the MDL component we wish bsw/jbe@1309: * to hook into for any upgrades performed. bsw/jbe@1309: * @param {function(!HTMLElement)} callback The function to call upon an bsw/jbe@1309: * upgrade. This function should expect 1 parameter - the HTMLElement which bsw/jbe@1309: * got upgraded. bsw/jbe@1309: */ bsw/jbe@1309: function registerUpgradedCallbackInternal(jsClass, callback) { bsw/jbe@1309: var regClass = findRegisteredClass_(jsClass); bsw/jbe@1309: if (regClass) { bsw/jbe@1309: regClass.callbacks.push(callback); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Upgrades all registered components found in the current DOM. This is bsw/jbe@1309: * automatically called on window load. bsw/jbe@1309: */ bsw/jbe@1309: function upgradeAllRegisteredInternal() { bsw/jbe@1309: for (var n = 0; n < registeredComponents_.length; n++) { bsw/jbe@1309: upgradeDomInternal(registeredComponents_[n].className); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Check the component for the downgrade method. bsw/jbe@1309: * Execute if found. bsw/jbe@1309: * Remove component from createdComponents list. bsw/jbe@1309: * bsw/jbe@1309: * @param {?componentHandler.Component} component bsw/jbe@1309: */ bsw/jbe@1309: function deconstructComponentInternal(component) { bsw/jbe@1309: if (component) { bsw/jbe@1309: var componentIndex = createdComponents_.indexOf(component); bsw/jbe@1309: createdComponents_.splice(componentIndex, 1); bsw/jbe@1309: bsw/jbe@1309: var upgrades = component.element_.getAttribute('data-upgraded').split(','); bsw/jbe@1309: var componentPlace = upgrades.indexOf(component[componentConfigProperty_].classAsString); bsw/jbe@1309: upgrades.splice(componentPlace, 1); bsw/jbe@1309: component.element_.setAttribute('data-upgraded', upgrades.join(',')); bsw/jbe@1309: bsw/jbe@1309: var ev; bsw/jbe@1309: if ('CustomEvent' in window && typeof window.CustomEvent === 'function') { bsw/jbe@1309: ev = new CustomEvent('mdl-componentdowngraded', { bsw/jbe@1309: bubbles: true, cancelable: false bsw/jbe@1309: }); bsw/jbe@1309: } else { bsw/jbe@1309: ev = document.createEvent('Events'); bsw/jbe@1309: ev.initEvent('mdl-componentdowngraded', true, true); bsw/jbe@1309: } bsw/jbe@1309: component.element_.dispatchEvent(ev); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Downgrade either a given node, an array of nodes, or a NodeList. bsw/jbe@1309: * bsw/jbe@1309: * @param {!Node|!Array|!NodeList} nodes bsw/jbe@1309: */ bsw/jbe@1309: function downgradeNodesInternal(nodes) { bsw/jbe@1309: /** bsw/jbe@1309: * Auxiliary function to downgrade a single node. bsw/jbe@1309: * @param {!Node} node the node to be downgraded bsw/jbe@1309: */ bsw/jbe@1309: var downgradeNode = function(node) { bsw/jbe@1309: createdComponents_.filter(function(item) { bsw/jbe@1309: return item.element_ === node; bsw/jbe@1309: }).forEach(deconstructComponentInternal); bsw/jbe@1309: }; bsw/jbe@1309: if (nodes instanceof Array || nodes instanceof NodeList) { bsw/jbe@1309: for (var n = 0; n < nodes.length; n++) { bsw/jbe@1309: downgradeNode(nodes[n]); bsw/jbe@1309: } bsw/jbe@1309: } else if (nodes instanceof Node) { bsw/jbe@1309: downgradeNode(nodes); bsw/jbe@1309: } else { bsw/jbe@1309: throw new Error('Invalid argument provided to downgrade MDL nodes.'); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: bsw/jbe@1309: // Now return the functions that should be made public with their publicly bsw/jbe@1309: // facing names... bsw/jbe@1309: return { bsw/jbe@1309: upgradeDom: upgradeDomInternal, bsw/jbe@1309: upgradeElement: upgradeElementInternal, bsw/jbe@1309: upgradeElements: upgradeElementsInternal, bsw/jbe@1309: upgradeAllRegistered: upgradeAllRegisteredInternal, bsw/jbe@1309: registerUpgradedCallback: registerUpgradedCallbackInternal, bsw/jbe@1309: register: registerInternal, bsw/jbe@1309: downgradeElements: downgradeNodesInternal bsw/jbe@1309: }; bsw/jbe@1309: })(); bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Describes the type of a registered component type managed by bsw/jbe@1309: * componentHandler. Provided for benefit of the Closure compiler. bsw/jbe@1309: * bsw/jbe@1309: * @typedef {{ bsw/jbe@1309: * constructor: Function, bsw/jbe@1309: * classAsString: string, bsw/jbe@1309: * cssClass: string, bsw/jbe@1309: * widget: (string|boolean|undefined) bsw/jbe@1309: * }} bsw/jbe@1309: */ bsw/jbe@1309: componentHandler.ComponentConfigPublic; // jshint ignore:line bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Describes the type of a registered component type managed by bsw/jbe@1309: * componentHandler. Provided for benefit of the Closure compiler. bsw/jbe@1309: * bsw/jbe@1309: * @typedef {{ bsw/jbe@1309: * constructor: !Function, bsw/jbe@1309: * className: string, bsw/jbe@1309: * cssClass: string, bsw/jbe@1309: * widget: (string|boolean), bsw/jbe@1309: * callbacks: !Array bsw/jbe@1309: * }} bsw/jbe@1309: */ bsw/jbe@1309: componentHandler.ComponentConfig; // jshint ignore:line bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Created component (i.e., upgraded element) type as managed by bsw/jbe@1309: * componentHandler. Provided for benefit of the Closure compiler. bsw/jbe@1309: * bsw/jbe@1309: * @typedef {{ bsw/jbe@1309: * element_: !HTMLElement, bsw/jbe@1309: * className: string, bsw/jbe@1309: * classAsString: string, bsw/jbe@1309: * cssClass: string, bsw/jbe@1309: * widget: string bsw/jbe@1309: * }} bsw/jbe@1309: */ bsw/jbe@1309: componentHandler.Component; // jshint ignore:line bsw/jbe@1309: bsw/jbe@1309: // Export all symbols, for the benefit of Closure compiler. bsw/jbe@1309: // No effect on uncompiled code. bsw/jbe@1309: componentHandler['upgradeDom'] = componentHandler.upgradeDom; bsw/jbe@1309: componentHandler['upgradeElement'] = componentHandler.upgradeElement; bsw/jbe@1309: componentHandler['upgradeElements'] = componentHandler.upgradeElements; bsw/jbe@1309: componentHandler['upgradeAllRegistered'] = bsw/jbe@1309: componentHandler.upgradeAllRegistered; bsw/jbe@1309: componentHandler['registerUpgradedCallback'] = bsw/jbe@1309: componentHandler.registerUpgradedCallback; bsw/jbe@1309: componentHandler['register'] = componentHandler.register; bsw/jbe@1309: componentHandler['downgradeElements'] = componentHandler.downgradeElements; bsw/jbe@1309: window.componentHandler = componentHandler; bsw/jbe@1309: window['componentHandler'] = componentHandler; bsw/jbe@1309: bsw/jbe@1309: window.addEventListener('load', function() { bsw/jbe@1309: 'use strict'; bsw/jbe@1309: bsw/jbe@1309: /** bsw/jbe@1309: * Performs a "Cutting the mustard" test. If the browser supports the features bsw/jbe@1309: * tested, adds a mdl-js class to the element. It then upgrades all MDL bsw/jbe@1309: * components requiring JavaScript. bsw/jbe@1309: */ bsw/jbe@1309: if ('classList' in document.createElement('div') && bsw/jbe@1309: 'querySelector' in document && bsw/jbe@1309: 'addEventListener' in window && Array.prototype.forEach) { bsw/jbe@1309: document.documentElement.classList.add('mdl-js'); bsw/jbe@1309: componentHandler.upgradeAllRegistered(); bsw/jbe@1309: } else { bsw/jbe@1309: /** bsw/jbe@1309: * Dummy function to avoid JS errors. bsw/jbe@1309: */ bsw/jbe@1309: componentHandler.upgradeElement = function() {}; bsw/jbe@1309: /** bsw/jbe@1309: * Dummy function to avoid JS errors. bsw/jbe@1309: */ bsw/jbe@1309: componentHandler.register = function() {}; bsw/jbe@1309: } bsw/jbe@1309: }); bsw/jbe@1309: bsw/jbe@1309: // Source: https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js bsw/jbe@1309: // Adapted from https://gist.github.com/paulirish/1579671 which derived from bsw/jbe@1309: // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ bsw/jbe@1309: // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating bsw/jbe@1309: // requestAnimationFrame polyfill by Erik Möller. bsw/jbe@1309: // Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon bsw/jbe@1309: // MIT license bsw/jbe@1309: if (!Date.now) { bsw/jbe@1309: /** bsw/jbe@1309: * Date.now polyfill. bsw/jbe@1309: * @return {number} the current Date bsw/jbe@1309: */ bsw/jbe@1309: Date.now = function () { bsw/jbe@1309: return new Date().getTime(); bsw/jbe@1309: }; bsw/jbe@1309: Date['now'] = Date.now; bsw/jbe@1309: } bsw/jbe@1309: var vendors = [ bsw/jbe@1309: 'webkit', bsw/jbe@1309: 'moz' bsw/jbe@1309: ]; bsw/jbe@1309: for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { bsw/jbe@1309: var vp = vendors[i]; bsw/jbe@1309: window.requestAnimationFrame = window[vp + 'RequestAnimationFrame']; bsw/jbe@1309: window.cancelAnimationFrame = window[vp + 'CancelAnimationFrame'] || window[vp + 'CancelRequestAnimationFrame']; bsw/jbe@1309: window['requestAnimationFrame'] = window.requestAnimationFrame; bsw/jbe@1309: window['cancelAnimationFrame'] = window.cancelAnimationFrame; bsw/jbe@1309: } bsw/jbe@1309: if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) { bsw/jbe@1309: var lastTime = 0; bsw/jbe@1309: /** bsw/jbe@1309: * requestAnimationFrame polyfill. bsw/jbe@1309: * @param {!Function} callback the callback function. bsw/jbe@1309: */ bsw/jbe@1309: window.requestAnimationFrame = function (callback) { bsw/jbe@1309: var now = Date.now(); bsw/jbe@1309: var nextTime = Math.max(lastTime + 16, now); bsw/jbe@1309: return setTimeout(function () { bsw/jbe@1309: callback(lastTime = nextTime); bsw/jbe@1309: }, nextTime - now); bsw/jbe@1309: }; bsw/jbe@1309: window.cancelAnimationFrame = clearTimeout; bsw/jbe@1309: window['requestAnimationFrame'] = window.requestAnimationFrame; bsw/jbe@1309: window['cancelAnimationFrame'] = window.cancelAnimationFrame; bsw/jbe@1309: } bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Button MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialButton = function MaterialButton(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialButton'] = MaterialButton; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialButton.prototype.Constant_ = {}; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialButton.prototype.CssClasses_ = { bsw/jbe@1309: RIPPLE_EFFECT: 'mdl-js-ripple-effect', bsw/jbe@1309: RIPPLE_CONTAINER: 'mdl-button__ripple-container', bsw/jbe@1309: RIPPLE: 'mdl-ripple' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle blur of element. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialButton.prototype.blurHandler_ = function (event) { bsw/jbe@1309: if (event) { bsw/jbe@1309: this.element_.blur(); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // Public methods. bsw/jbe@1309: /** bsw/jbe@1309: * Disable button. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialButton.prototype.disable = function () { bsw/jbe@1309: this.element_.disabled = true; bsw/jbe@1309: }; bsw/jbe@1309: MaterialButton.prototype['disable'] = MaterialButton.prototype.disable; bsw/jbe@1309: /** bsw/jbe@1309: * Enable button. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialButton.prototype.enable = function () { bsw/jbe@1309: this.element_.disabled = false; bsw/jbe@1309: }; bsw/jbe@1309: MaterialButton.prototype['enable'] = MaterialButton.prototype.enable; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialButton.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) { bsw/jbe@1309: var rippleContainer = document.createElement('span'); bsw/jbe@1309: rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER); bsw/jbe@1309: this.rippleElement_ = document.createElement('span'); bsw/jbe@1309: this.rippleElement_.classList.add(this.CssClasses_.RIPPLE); bsw/jbe@1309: rippleContainer.appendChild(this.rippleElement_); bsw/jbe@1309: this.boundRippleBlurHandler = this.blurHandler_.bind(this); bsw/jbe@1309: this.rippleElement_.addEventListener('mouseup', this.boundRippleBlurHandler); bsw/jbe@1309: this.element_.appendChild(rippleContainer); bsw/jbe@1309: } bsw/jbe@1309: this.boundButtonBlurHandler = this.blurHandler_.bind(this); bsw/jbe@1309: this.element_.addEventListener('mouseup', this.boundButtonBlurHandler); bsw/jbe@1309: this.element_.addEventListener('mouseleave', this.boundButtonBlurHandler); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialButton, bsw/jbe@1309: classAsString: 'MaterialButton', bsw/jbe@1309: cssClass: 'mdl-js-button', bsw/jbe@1309: widget: true bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Checkbox MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialCheckbox = function MaterialCheckbox(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialCheckbox'] = MaterialCheckbox; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.Constant_ = { TINY_TIMEOUT: 0.001 }; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.CssClasses_ = { bsw/jbe@1309: INPUT: 'mdl-checkbox__input', bsw/jbe@1309: BOX_OUTLINE: 'mdl-checkbox__box-outline', bsw/jbe@1309: FOCUS_HELPER: 'mdl-checkbox__focus-helper', bsw/jbe@1309: TICK_OUTLINE: 'mdl-checkbox__tick-outline', bsw/jbe@1309: RIPPLE_EFFECT: 'mdl-js-ripple-effect', bsw/jbe@1309: RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events', bsw/jbe@1309: RIPPLE_CONTAINER: 'mdl-checkbox__ripple-container', bsw/jbe@1309: RIPPLE_CENTER: 'mdl-ripple--center', bsw/jbe@1309: RIPPLE: 'mdl-ripple', bsw/jbe@1309: IS_FOCUSED: 'is-focused', bsw/jbe@1309: IS_DISABLED: 'is-disabled', bsw/jbe@1309: IS_CHECKED: 'is-checked', bsw/jbe@1309: IS_UPGRADED: 'is-upgraded' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle change of state. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.onChange_ = function (event) { bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle focus of element. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.onFocus_ = function (event) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_FOCUSED); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle lost focus of element. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.onBlur_ = function (event) { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_FOCUSED); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle mouseup. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.onMouseUp_ = function (event) { bsw/jbe@1309: this.blur_(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle class updates. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.updateClasses_ = function () { bsw/jbe@1309: this.checkDisabled(); bsw/jbe@1309: this.checkToggleState(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Add blur. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.blur_ = function () { bsw/jbe@1309: // TODO: figure out why there's a focus event being fired after our blur, bsw/jbe@1309: // so that we can avoid this hack. bsw/jbe@1309: window.setTimeout(function () { bsw/jbe@1309: this.inputElement_.blur(); bsw/jbe@1309: }.bind(this), this.Constant_.TINY_TIMEOUT); bsw/jbe@1309: }; bsw/jbe@1309: // Public methods. bsw/jbe@1309: /** bsw/jbe@1309: * Check the inputs toggle state and update display. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.checkToggleState = function () { bsw/jbe@1309: if (this.inputElement_.checked) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_CHECKED); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_CHECKED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialCheckbox.prototype['checkToggleState'] = MaterialCheckbox.prototype.checkToggleState; bsw/jbe@1309: /** bsw/jbe@1309: * Check the inputs disabled state and update display. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.checkDisabled = function () { bsw/jbe@1309: if (this.inputElement_.disabled) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_DISABLED); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_DISABLED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialCheckbox.prototype['checkDisabled'] = MaterialCheckbox.prototype.checkDisabled; bsw/jbe@1309: /** bsw/jbe@1309: * Disable checkbox. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.disable = function () { bsw/jbe@1309: this.inputElement_.disabled = true; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialCheckbox.prototype['disable'] = MaterialCheckbox.prototype.disable; bsw/jbe@1309: /** bsw/jbe@1309: * Enable checkbox. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.enable = function () { bsw/jbe@1309: this.inputElement_.disabled = false; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialCheckbox.prototype['enable'] = MaterialCheckbox.prototype.enable; bsw/jbe@1309: /** bsw/jbe@1309: * Check checkbox. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.check = function () { bsw/jbe@1309: this.inputElement_.checked = true; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialCheckbox.prototype['check'] = MaterialCheckbox.prototype.check; bsw/jbe@1309: /** bsw/jbe@1309: * Uncheck checkbox. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.uncheck = function () { bsw/jbe@1309: this.inputElement_.checked = false; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialCheckbox.prototype['uncheck'] = MaterialCheckbox.prototype.uncheck; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialCheckbox.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT); bsw/jbe@1309: var boxOutline = document.createElement('span'); bsw/jbe@1309: boxOutline.classList.add(this.CssClasses_.BOX_OUTLINE); bsw/jbe@1309: var tickContainer = document.createElement('span'); bsw/jbe@1309: tickContainer.classList.add(this.CssClasses_.FOCUS_HELPER); bsw/jbe@1309: var tickOutline = document.createElement('span'); bsw/jbe@1309: tickOutline.classList.add(this.CssClasses_.TICK_OUTLINE); bsw/jbe@1309: boxOutline.appendChild(tickOutline); bsw/jbe@1309: this.element_.appendChild(tickContainer); bsw/jbe@1309: this.element_.appendChild(boxOutline); bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS); bsw/jbe@1309: this.rippleContainerElement_ = document.createElement('span'); bsw/jbe@1309: this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER); bsw/jbe@1309: this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT); bsw/jbe@1309: this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER); bsw/jbe@1309: this.boundRippleMouseUp = this.onMouseUp_.bind(this); bsw/jbe@1309: this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp); bsw/jbe@1309: var ripple = document.createElement('span'); bsw/jbe@1309: ripple.classList.add(this.CssClasses_.RIPPLE); bsw/jbe@1309: this.rippleContainerElement_.appendChild(ripple); bsw/jbe@1309: this.element_.appendChild(this.rippleContainerElement_); bsw/jbe@1309: } bsw/jbe@1309: this.boundInputOnChange = this.onChange_.bind(this); bsw/jbe@1309: this.boundInputOnFocus = this.onFocus_.bind(this); bsw/jbe@1309: this.boundInputOnBlur = this.onBlur_.bind(this); bsw/jbe@1309: this.boundElementMouseUp = this.onMouseUp_.bind(this); bsw/jbe@1309: this.inputElement_.addEventListener('change', this.boundInputOnChange); bsw/jbe@1309: this.inputElement_.addEventListener('focus', this.boundInputOnFocus); bsw/jbe@1309: this.inputElement_.addEventListener('blur', this.boundInputOnBlur); bsw/jbe@1309: this.element_.addEventListener('mouseup', this.boundElementMouseUp); bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_UPGRADED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialCheckbox, bsw/jbe@1309: classAsString: 'MaterialCheckbox', bsw/jbe@1309: cssClass: 'mdl-js-checkbox', bsw/jbe@1309: widget: true bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for icon toggle MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialIconToggle = function MaterialIconToggle(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialIconToggle'] = MaterialIconToggle; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.Constant_ = { TINY_TIMEOUT: 0.001 }; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.CssClasses_ = { bsw/jbe@1309: INPUT: 'mdl-icon-toggle__input', bsw/jbe@1309: JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect', bsw/jbe@1309: RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events', bsw/jbe@1309: RIPPLE_CONTAINER: 'mdl-icon-toggle__ripple-container', bsw/jbe@1309: RIPPLE_CENTER: 'mdl-ripple--center', bsw/jbe@1309: RIPPLE: 'mdl-ripple', bsw/jbe@1309: IS_FOCUSED: 'is-focused', bsw/jbe@1309: IS_DISABLED: 'is-disabled', bsw/jbe@1309: IS_CHECKED: 'is-checked' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle change of state. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.onChange_ = function (event) { bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle focus of element. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.onFocus_ = function (event) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_FOCUSED); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle lost focus of element. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.onBlur_ = function (event) { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_FOCUSED); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle mouseup. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.onMouseUp_ = function (event) { bsw/jbe@1309: this.blur_(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle class updates. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.updateClasses_ = function () { bsw/jbe@1309: this.checkDisabled(); bsw/jbe@1309: this.checkToggleState(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Add blur. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.blur_ = function () { bsw/jbe@1309: // TODO: figure out why there's a focus event being fired after our blur, bsw/jbe@1309: // so that we can avoid this hack. bsw/jbe@1309: window.setTimeout(function () { bsw/jbe@1309: this.inputElement_.blur(); bsw/jbe@1309: }.bind(this), this.Constant_.TINY_TIMEOUT); bsw/jbe@1309: }; bsw/jbe@1309: // Public methods. bsw/jbe@1309: /** bsw/jbe@1309: * Check the inputs toggle state and update display. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.checkToggleState = function () { bsw/jbe@1309: if (this.inputElement_.checked) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_CHECKED); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_CHECKED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialIconToggle.prototype['checkToggleState'] = MaterialIconToggle.prototype.checkToggleState; bsw/jbe@1309: /** bsw/jbe@1309: * Check the inputs disabled state and update display. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.checkDisabled = function () { bsw/jbe@1309: if (this.inputElement_.disabled) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_DISABLED); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_DISABLED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialIconToggle.prototype['checkDisabled'] = MaterialIconToggle.prototype.checkDisabled; bsw/jbe@1309: /** bsw/jbe@1309: * Disable icon toggle. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.disable = function () { bsw/jbe@1309: this.inputElement_.disabled = true; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialIconToggle.prototype['disable'] = MaterialIconToggle.prototype.disable; bsw/jbe@1309: /** bsw/jbe@1309: * Enable icon toggle. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.enable = function () { bsw/jbe@1309: this.inputElement_.disabled = false; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialIconToggle.prototype['enable'] = MaterialIconToggle.prototype.enable; bsw/jbe@1309: /** bsw/jbe@1309: * Check icon toggle. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.check = function () { bsw/jbe@1309: this.inputElement_.checked = true; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialIconToggle.prototype['check'] = MaterialIconToggle.prototype.check; bsw/jbe@1309: /** bsw/jbe@1309: * Uncheck icon toggle. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.uncheck = function () { bsw/jbe@1309: this.inputElement_.checked = false; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialIconToggle.prototype['uncheck'] = MaterialIconToggle.prototype.uncheck; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialIconToggle.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT); bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS); bsw/jbe@1309: this.rippleContainerElement_ = document.createElement('span'); bsw/jbe@1309: this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER); bsw/jbe@1309: this.rippleContainerElement_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT); bsw/jbe@1309: this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER); bsw/jbe@1309: this.boundRippleMouseUp = this.onMouseUp_.bind(this); bsw/jbe@1309: this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp); bsw/jbe@1309: var ripple = document.createElement('span'); bsw/jbe@1309: ripple.classList.add(this.CssClasses_.RIPPLE); bsw/jbe@1309: this.rippleContainerElement_.appendChild(ripple); bsw/jbe@1309: this.element_.appendChild(this.rippleContainerElement_); bsw/jbe@1309: } bsw/jbe@1309: this.boundInputOnChange = this.onChange_.bind(this); bsw/jbe@1309: this.boundInputOnFocus = this.onFocus_.bind(this); bsw/jbe@1309: this.boundInputOnBlur = this.onBlur_.bind(this); bsw/jbe@1309: this.boundElementOnMouseUp = this.onMouseUp_.bind(this); bsw/jbe@1309: this.inputElement_.addEventListener('change', this.boundInputOnChange); bsw/jbe@1309: this.inputElement_.addEventListener('focus', this.boundInputOnFocus); bsw/jbe@1309: this.inputElement_.addEventListener('blur', this.boundInputOnBlur); bsw/jbe@1309: this.element_.addEventListener('mouseup', this.boundElementOnMouseUp); bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: this.element_.classList.add('is-upgraded'); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialIconToggle, bsw/jbe@1309: classAsString: 'MaterialIconToggle', bsw/jbe@1309: cssClass: 'mdl-js-icon-toggle', bsw/jbe@1309: widget: true bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for dropdown MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialMenu = function MaterialMenu(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialMenu'] = MaterialMenu; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.Constant_ = { bsw/jbe@1309: // Total duration of the menu animation. bsw/jbe@1309: TRANSITION_DURATION_SECONDS: 0.3, bsw/jbe@1309: // The fraction of the total duration we want to use for menu item animations. bsw/jbe@1309: TRANSITION_DURATION_FRACTION: 0.8, bsw/jbe@1309: // How long the menu stays open after choosing an option (so the user can see bsw/jbe@1309: // the ripple). bsw/jbe@1309: CLOSE_TIMEOUT: 150 bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Keycodes, for code readability. bsw/jbe@1309: * bsw/jbe@1309: * @enum {number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.Keycodes_ = { bsw/jbe@1309: ENTER: 13, bsw/jbe@1309: ESCAPE: 27, bsw/jbe@1309: SPACE: 32, bsw/jbe@1309: UP_ARROW: 38, bsw/jbe@1309: DOWN_ARROW: 40 bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.CssClasses_ = { bsw/jbe@1309: CONTAINER: 'mdl-menu__container', bsw/jbe@1309: OUTLINE: 'mdl-menu__outline', bsw/jbe@1309: ITEM: 'mdl-menu__item', bsw/jbe@1309: ITEM_RIPPLE_CONTAINER: 'mdl-menu__item-ripple-container', bsw/jbe@1309: RIPPLE_EFFECT: 'mdl-js-ripple-effect', bsw/jbe@1309: RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events', bsw/jbe@1309: RIPPLE: 'mdl-ripple', bsw/jbe@1309: // Statuses bsw/jbe@1309: IS_UPGRADED: 'is-upgraded', bsw/jbe@1309: IS_VISIBLE: 'is-visible', bsw/jbe@1309: IS_ANIMATING: 'is-animating', bsw/jbe@1309: // Alignment options bsw/jbe@1309: BOTTOM_LEFT: 'mdl-menu--bottom-left', bsw/jbe@1309: // This is the default. bsw/jbe@1309: BOTTOM_RIGHT: 'mdl-menu--bottom-right', bsw/jbe@1309: TOP_LEFT: 'mdl-menu--top-left', bsw/jbe@1309: TOP_RIGHT: 'mdl-menu--top-right', bsw/jbe@1309: UNALIGNED: 'mdl-menu--unaligned' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: // Create container for the menu. bsw/jbe@1309: var container = document.createElement('div'); bsw/jbe@1309: container.classList.add(this.CssClasses_.CONTAINER); bsw/jbe@1309: this.element_.parentElement.insertBefore(container, this.element_); bsw/jbe@1309: this.element_.parentElement.removeChild(this.element_); bsw/jbe@1309: container.appendChild(this.element_); bsw/jbe@1309: this.container_ = container; bsw/jbe@1309: // Create outline for the menu (shadow and background). bsw/jbe@1309: var outline = document.createElement('div'); bsw/jbe@1309: outline.classList.add(this.CssClasses_.OUTLINE); bsw/jbe@1309: this.outline_ = outline; bsw/jbe@1309: container.insertBefore(outline, this.element_); bsw/jbe@1309: // Find the "for" element and bind events to it. bsw/jbe@1309: var forElId = this.element_.getAttribute('for') || this.element_.getAttribute('data-mdl-for'); bsw/jbe@1309: var forEl = null; bsw/jbe@1309: if (forElId) { bsw/jbe@1309: forEl = document.getElementById(forElId); bsw/jbe@1309: if (forEl) { bsw/jbe@1309: this.forElement_ = forEl; bsw/jbe@1309: forEl.addEventListener('click', this.handleForClick_.bind(this)); bsw/jbe@1309: forEl.addEventListener('keydown', this.handleForKeyboardEvent_.bind(this)); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM); bsw/jbe@1309: this.boundItemKeydown_ = this.handleItemKeyboardEvent_.bind(this); bsw/jbe@1309: this.boundItemClick_ = this.handleItemClick_.bind(this); bsw/jbe@1309: for (var i = 0; i < items.length; i++) { bsw/jbe@1309: // Add a listener to each menu item. bsw/jbe@1309: items[i].addEventListener('click', this.boundItemClick_); bsw/jbe@1309: // Add a tab index to each menu item. bsw/jbe@1309: items[i].tabIndex = '-1'; bsw/jbe@1309: // Add a keyboard listener to each menu item. bsw/jbe@1309: items[i].addEventListener('keydown', this.boundItemKeydown_); bsw/jbe@1309: } bsw/jbe@1309: // Add ripple classes to each item, if the user has enabled ripples. bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS); bsw/jbe@1309: for (i = 0; i < items.length; i++) { bsw/jbe@1309: var item = items[i]; bsw/jbe@1309: var rippleContainer = document.createElement('span'); bsw/jbe@1309: rippleContainer.classList.add(this.CssClasses_.ITEM_RIPPLE_CONTAINER); bsw/jbe@1309: var ripple = document.createElement('span'); bsw/jbe@1309: ripple.classList.add(this.CssClasses_.RIPPLE); bsw/jbe@1309: rippleContainer.appendChild(ripple); bsw/jbe@1309: item.appendChild(rippleContainer); bsw/jbe@1309: item.classList.add(this.CssClasses_.RIPPLE_EFFECT); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: // Copy alignment classes to the container, so the outline can use them. bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.BOTTOM_LEFT)) { bsw/jbe@1309: this.outline_.classList.add(this.CssClasses_.BOTTOM_LEFT); bsw/jbe@1309: } bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) { bsw/jbe@1309: this.outline_.classList.add(this.CssClasses_.BOTTOM_RIGHT); bsw/jbe@1309: } bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) { bsw/jbe@1309: this.outline_.classList.add(this.CssClasses_.TOP_LEFT); bsw/jbe@1309: } bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) { bsw/jbe@1309: this.outline_.classList.add(this.CssClasses_.TOP_RIGHT); bsw/jbe@1309: } bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) { bsw/jbe@1309: this.outline_.classList.add(this.CssClasses_.UNALIGNED); bsw/jbe@1309: } bsw/jbe@1309: container.classList.add(this.CssClasses_.IS_UPGRADED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handles a click on the "for" element, by positioning the menu and then bsw/jbe@1309: * toggling it. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} evt The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.handleForClick_ = function (evt) { bsw/jbe@1309: if (this.element_ && this.forElement_) { bsw/jbe@1309: var rect = this.forElement_.getBoundingClientRect(); bsw/jbe@1309: var forRect = this.forElement_.parentElement.getBoundingClientRect(); bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) { bsw/jbe@1309: } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) { bsw/jbe@1309: // Position below the "for" element, aligned to its right. bsw/jbe@1309: this.container_.style.right = forRect.right - rect.right + 'px'; bsw/jbe@1309: this.container_.style.top = this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px'; bsw/jbe@1309: } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) { bsw/jbe@1309: // Position above the "for" element, aligned to its left. bsw/jbe@1309: this.container_.style.left = this.forElement_.offsetLeft + 'px'; bsw/jbe@1309: this.container_.style.bottom = forRect.bottom - rect.top + 'px'; bsw/jbe@1309: } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) { bsw/jbe@1309: // Position above the "for" element, aligned to its right. bsw/jbe@1309: this.container_.style.right = forRect.right - rect.right + 'px'; bsw/jbe@1309: this.container_.style.bottom = forRect.bottom - rect.top + 'px'; bsw/jbe@1309: } else { bsw/jbe@1309: // Default: position below the "for" element, aligned to its left. bsw/jbe@1309: this.container_.style.left = this.forElement_.offsetLeft + 'px'; bsw/jbe@1309: this.container_.style.top = this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px'; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: this.toggle(evt); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handles a keyboard event on the "for" element. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} evt The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.handleForKeyboardEvent_ = function (evt) { bsw/jbe@1309: if (this.element_ && this.container_ && this.forElement_) { bsw/jbe@1309: var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM + ':not([disabled])'); bsw/jbe@1309: if (items && items.length > 0 && this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) { bsw/jbe@1309: if (evt.keyCode === this.Keycodes_.UP_ARROW) { bsw/jbe@1309: evt.preventDefault(); bsw/jbe@1309: items[items.length - 1].focus(); bsw/jbe@1309: } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) { bsw/jbe@1309: evt.preventDefault(); bsw/jbe@1309: items[0].focus(); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handles a keyboard event on an item. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} evt The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.handleItemKeyboardEvent_ = function (evt) { bsw/jbe@1309: if (this.element_ && this.container_) { bsw/jbe@1309: var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM + ':not([disabled])'); bsw/jbe@1309: if (items && items.length > 0 && this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) { bsw/jbe@1309: var currentIndex = Array.prototype.slice.call(items).indexOf(evt.target); bsw/jbe@1309: if (evt.keyCode === this.Keycodes_.UP_ARROW) { bsw/jbe@1309: evt.preventDefault(); bsw/jbe@1309: if (currentIndex > 0) { bsw/jbe@1309: items[currentIndex - 1].focus(); bsw/jbe@1309: } else { bsw/jbe@1309: items[items.length - 1].focus(); bsw/jbe@1309: } bsw/jbe@1309: } else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) { bsw/jbe@1309: evt.preventDefault(); bsw/jbe@1309: if (items.length > currentIndex + 1) { bsw/jbe@1309: items[currentIndex + 1].focus(); bsw/jbe@1309: } else { bsw/jbe@1309: items[0].focus(); bsw/jbe@1309: } bsw/jbe@1309: } else if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) { bsw/jbe@1309: evt.preventDefault(); bsw/jbe@1309: // Send mousedown and mouseup to trigger ripple. bsw/jbe@1309: var e = new MouseEvent('mousedown'); bsw/jbe@1309: evt.target.dispatchEvent(e); bsw/jbe@1309: e = new MouseEvent('mouseup'); bsw/jbe@1309: evt.target.dispatchEvent(e); bsw/jbe@1309: // Send click. bsw/jbe@1309: evt.target.click(); bsw/jbe@1309: } else if (evt.keyCode === this.Keycodes_.ESCAPE) { bsw/jbe@1309: evt.preventDefault(); bsw/jbe@1309: this.hide(); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handles a click event on an item. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} evt The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.handleItemClick_ = function (evt) { bsw/jbe@1309: if (evt.target.hasAttribute('disabled')) { bsw/jbe@1309: evt.stopPropagation(); bsw/jbe@1309: } else { bsw/jbe@1309: // Wait some time before closing menu, so the user can see the ripple. bsw/jbe@1309: this.closing_ = true; bsw/jbe@1309: window.setTimeout(function (evt) { bsw/jbe@1309: this.hide(); bsw/jbe@1309: this.closing_ = false; bsw/jbe@1309: }.bind(this), this.Constant_.CLOSE_TIMEOUT); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Calculates the initial clip (for opening the menu) or final clip (for closing bsw/jbe@1309: * it), and applies it. This allows us to animate from or to the correct point, bsw/jbe@1309: * that is, the point it's aligned to in the "for" element. bsw/jbe@1309: * bsw/jbe@1309: * @param {number} height Height of the clip rectangle bsw/jbe@1309: * @param {number} width Width of the clip rectangle bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.applyClip_ = function (height, width) { bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) { bsw/jbe@1309: // Do not clip. bsw/jbe@1309: this.element_.style.clip = ''; bsw/jbe@1309: } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) { bsw/jbe@1309: // Clip to the top right corner of the menu. bsw/jbe@1309: this.element_.style.clip = 'rect(0 ' + width + 'px ' + '0 ' + width + 'px)'; bsw/jbe@1309: } else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) { bsw/jbe@1309: // Clip to the bottom left corner of the menu. bsw/jbe@1309: this.element_.style.clip = 'rect(' + height + 'px 0 ' + height + 'px 0)'; bsw/jbe@1309: } else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) { bsw/jbe@1309: // Clip to the bottom right corner of the menu. bsw/jbe@1309: this.element_.style.clip = 'rect(' + height + 'px ' + width + 'px ' + height + 'px ' + width + 'px)'; bsw/jbe@1309: } else { bsw/jbe@1309: // Default: do not clip (same as clipping to the top left corner). bsw/jbe@1309: this.element_.style.clip = ''; bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Cleanup function to remove animation listeners. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} evt bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.removeAnimationEndListener_ = function (evt) { bsw/jbe@1309: evt.target.classList.remove(MaterialMenu.prototype.CssClasses_.IS_ANIMATING); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Adds an event listener to clean up after the animation ends. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.addAnimationEndListener_ = function () { bsw/jbe@1309: this.element_.addEventListener('transitionend', this.removeAnimationEndListener_); bsw/jbe@1309: this.element_.addEventListener('webkitTransitionEnd', this.removeAnimationEndListener_); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Displays the menu. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.show = function (evt) { bsw/jbe@1309: if (this.element_ && this.container_ && this.outline_) { bsw/jbe@1309: // Measure the inner element. bsw/jbe@1309: var height = this.element_.getBoundingClientRect().height; bsw/jbe@1309: var width = this.element_.getBoundingClientRect().width; bsw/jbe@1309: // Apply the inner element's size to the container and outline. bsw/jbe@1309: this.container_.style.width = width + 'px'; bsw/jbe@1309: this.container_.style.height = height + 'px'; bsw/jbe@1309: this.outline_.style.width = width + 'px'; bsw/jbe@1309: this.outline_.style.height = height + 'px'; bsw/jbe@1309: var transitionDuration = this.Constant_.TRANSITION_DURATION_SECONDS * this.Constant_.TRANSITION_DURATION_FRACTION; bsw/jbe@1309: // Calculate transition delays for individual menu items, so that they fade bsw/jbe@1309: // in one at a time. bsw/jbe@1309: var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM); bsw/jbe@1309: for (var i = 0; i < items.length; i++) { bsw/jbe@1309: var itemDelay = null; bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT) || this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) { bsw/jbe@1309: itemDelay = (height - items[i].offsetTop - items[i].offsetHeight) / height * transitionDuration + 's'; bsw/jbe@1309: } else { bsw/jbe@1309: itemDelay = items[i].offsetTop / height * transitionDuration + 's'; bsw/jbe@1309: } bsw/jbe@1309: items[i].style.transitionDelay = itemDelay; bsw/jbe@1309: } bsw/jbe@1309: // Apply the initial clip to the text before we start animating. bsw/jbe@1309: this.applyClip_(height, width); bsw/jbe@1309: // Wait for the next frame, turn on animation, and apply the final clip. bsw/jbe@1309: // Also make it visible. This triggers the transitions. bsw/jbe@1309: window.requestAnimationFrame(function () { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_ANIMATING); bsw/jbe@1309: this.element_.style.clip = 'rect(0 ' + width + 'px ' + height + 'px 0)'; bsw/jbe@1309: this.container_.classList.add(this.CssClasses_.IS_VISIBLE); bsw/jbe@1309: }.bind(this)); bsw/jbe@1309: // Clean up after the animation is complete. bsw/jbe@1309: this.addAnimationEndListener_(); bsw/jbe@1309: // Add a click listener to the document, to close the menu. bsw/jbe@1309: var callback = function (e) { bsw/jbe@1309: // Check to see if the document is processing the same event that bsw/jbe@1309: // displayed the menu in the first place. If so, do nothing. bsw/jbe@1309: // Also check to see if the menu is in the process of closing itself, and bsw/jbe@1309: // do nothing in that case. bsw/jbe@1309: // Also check if the clicked element is a menu item bsw/jbe@1309: // if so, do nothing. bsw/jbe@1309: if (e !== evt && !this.closing_ && e.target.parentNode !== this.element_) { bsw/jbe@1309: document.removeEventListener('click', callback); bsw/jbe@1309: this.hide(); bsw/jbe@1309: } bsw/jbe@1309: }.bind(this); bsw/jbe@1309: document.addEventListener('click', callback); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialMenu.prototype['show'] = MaterialMenu.prototype.show; bsw/jbe@1309: /** bsw/jbe@1309: * Hides the menu. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.hide = function () { bsw/jbe@1309: if (this.element_ && this.container_ && this.outline_) { bsw/jbe@1309: var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM); bsw/jbe@1309: // Remove all transition delays; menu items fade out concurrently. bsw/jbe@1309: for (var i = 0; i < items.length; i++) { bsw/jbe@1309: items[i].style.removeProperty('transition-delay'); bsw/jbe@1309: } bsw/jbe@1309: // Measure the inner element. bsw/jbe@1309: var rect = this.element_.getBoundingClientRect(); bsw/jbe@1309: var height = rect.height; bsw/jbe@1309: var width = rect.width; bsw/jbe@1309: // Turn on animation, and apply the final clip. Also make invisible. bsw/jbe@1309: // This triggers the transitions. bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_ANIMATING); bsw/jbe@1309: this.applyClip_(height, width); bsw/jbe@1309: this.container_.classList.remove(this.CssClasses_.IS_VISIBLE); bsw/jbe@1309: // Clean up after the animation is complete. bsw/jbe@1309: this.addAnimationEndListener_(); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialMenu.prototype['hide'] = MaterialMenu.prototype.hide; bsw/jbe@1309: /** bsw/jbe@1309: * Displays or hides the menu, depending on current state. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialMenu.prototype.toggle = function (evt) { bsw/jbe@1309: if (this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) { bsw/jbe@1309: this.hide(); bsw/jbe@1309: } else { bsw/jbe@1309: this.show(evt); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialMenu.prototype['toggle'] = MaterialMenu.prototype.toggle; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialMenu, bsw/jbe@1309: classAsString: 'MaterialMenu', bsw/jbe@1309: cssClass: 'mdl-js-menu', bsw/jbe@1309: widget: true bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Progress MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialProgress = function MaterialProgress(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialProgress'] = MaterialProgress; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialProgress.prototype.Constant_ = {}; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialProgress.prototype.CssClasses_ = { INDETERMINATE_CLASS: 'mdl-progress__indeterminate' }; bsw/jbe@1309: /** bsw/jbe@1309: * Set the current progress of the progressbar. bsw/jbe@1309: * bsw/jbe@1309: * @param {number} p Percentage of the progress (0-100) bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialProgress.prototype.setProgress = function (p) { bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.INDETERMINATE_CLASS)) { bsw/jbe@1309: return; bsw/jbe@1309: } bsw/jbe@1309: this.progressbar_.style.width = p + '%'; bsw/jbe@1309: }; bsw/jbe@1309: MaterialProgress.prototype['setProgress'] = MaterialProgress.prototype.setProgress; bsw/jbe@1309: /** bsw/jbe@1309: * Set the current progress of the buffer. bsw/jbe@1309: * bsw/jbe@1309: * @param {number} p Percentage of the buffer (0-100) bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialProgress.prototype.setBuffer = function (p) { bsw/jbe@1309: this.bufferbar_.style.width = p + '%'; bsw/jbe@1309: this.auxbar_.style.width = 100 - p + '%'; bsw/jbe@1309: }; bsw/jbe@1309: MaterialProgress.prototype['setBuffer'] = MaterialProgress.prototype.setBuffer; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialProgress.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: var el = document.createElement('div'); bsw/jbe@1309: el.className = 'progressbar bar bar1'; bsw/jbe@1309: this.element_.appendChild(el); bsw/jbe@1309: this.progressbar_ = el; bsw/jbe@1309: el = document.createElement('div'); bsw/jbe@1309: el.className = 'bufferbar bar bar2'; bsw/jbe@1309: this.element_.appendChild(el); bsw/jbe@1309: this.bufferbar_ = el; bsw/jbe@1309: el = document.createElement('div'); bsw/jbe@1309: el.className = 'auxbar bar bar3'; bsw/jbe@1309: this.element_.appendChild(el); bsw/jbe@1309: this.auxbar_ = el; bsw/jbe@1309: this.progressbar_.style.width = '0%'; bsw/jbe@1309: this.bufferbar_.style.width = '100%'; bsw/jbe@1309: this.auxbar_.style.width = '0%'; bsw/jbe@1309: this.element_.classList.add('is-upgraded'); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialProgress, bsw/jbe@1309: classAsString: 'MaterialProgress', bsw/jbe@1309: cssClass: 'mdl-js-progress', bsw/jbe@1309: widget: true bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Radio MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialRadio = function MaterialRadio(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialRadio'] = MaterialRadio; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.Constant_ = { TINY_TIMEOUT: 0.001 }; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.CssClasses_ = { bsw/jbe@1309: IS_FOCUSED: 'is-focused', bsw/jbe@1309: IS_DISABLED: 'is-disabled', bsw/jbe@1309: IS_CHECKED: 'is-checked', bsw/jbe@1309: IS_UPGRADED: 'is-upgraded', bsw/jbe@1309: JS_RADIO: 'mdl-js-radio', bsw/jbe@1309: RADIO_BTN: 'mdl-radio__button', bsw/jbe@1309: RADIO_OUTER_CIRCLE: 'mdl-radio__outer-circle', bsw/jbe@1309: RADIO_INNER_CIRCLE: 'mdl-radio__inner-circle', bsw/jbe@1309: RIPPLE_EFFECT: 'mdl-js-ripple-effect', bsw/jbe@1309: RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events', bsw/jbe@1309: RIPPLE_CONTAINER: 'mdl-radio__ripple-container', bsw/jbe@1309: RIPPLE_CENTER: 'mdl-ripple--center', bsw/jbe@1309: RIPPLE: 'mdl-ripple' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle change of state. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.onChange_ = function (event) { bsw/jbe@1309: // Since other radio buttons don't get change events, we need to look for bsw/jbe@1309: // them to update their classes. bsw/jbe@1309: var radios = document.getElementsByClassName(this.CssClasses_.JS_RADIO); bsw/jbe@1309: for (var i = 0; i < radios.length; i++) { bsw/jbe@1309: var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN); bsw/jbe@1309: // Different name == different group, so no point updating those. bsw/jbe@1309: if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) { bsw/jbe@1309: radios[i]['MaterialRadio'].updateClasses_(); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle focus. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.onFocus_ = function (event) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_FOCUSED); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle lost focus. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.onBlur_ = function (event) { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_FOCUSED); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle mouseup. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.onMouseup_ = function (event) { bsw/jbe@1309: this.blur_(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Update classes. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.updateClasses_ = function () { bsw/jbe@1309: this.checkDisabled(); bsw/jbe@1309: this.checkToggleState(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Add blur. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.blur_ = function () { bsw/jbe@1309: // TODO: figure out why there's a focus event being fired after our blur, bsw/jbe@1309: // so that we can avoid this hack. bsw/jbe@1309: window.setTimeout(function () { bsw/jbe@1309: this.btnElement_.blur(); bsw/jbe@1309: }.bind(this), this.Constant_.TINY_TIMEOUT); bsw/jbe@1309: }; bsw/jbe@1309: // Public methods. bsw/jbe@1309: /** bsw/jbe@1309: * Check the components disabled state. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.checkDisabled = function () { bsw/jbe@1309: if (this.btnElement_.disabled) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_DISABLED); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_DISABLED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialRadio.prototype['checkDisabled'] = MaterialRadio.prototype.checkDisabled; bsw/jbe@1309: /** bsw/jbe@1309: * Check the components toggled state. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.checkToggleState = function () { bsw/jbe@1309: if (this.btnElement_.checked) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_CHECKED); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_CHECKED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialRadio.prototype['checkToggleState'] = MaterialRadio.prototype.checkToggleState; bsw/jbe@1309: /** bsw/jbe@1309: * Disable radio. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.disable = function () { bsw/jbe@1309: this.btnElement_.disabled = true; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialRadio.prototype['disable'] = MaterialRadio.prototype.disable; bsw/jbe@1309: /** bsw/jbe@1309: * Enable radio. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.enable = function () { bsw/jbe@1309: this.btnElement_.disabled = false; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialRadio.prototype['enable'] = MaterialRadio.prototype.enable; bsw/jbe@1309: /** bsw/jbe@1309: * Check radio. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.check = function () { bsw/jbe@1309: this.btnElement_.checked = true; bsw/jbe@1309: this.onChange_(null); bsw/jbe@1309: }; bsw/jbe@1309: MaterialRadio.prototype['check'] = MaterialRadio.prototype.check; bsw/jbe@1309: /** bsw/jbe@1309: * Uncheck radio. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.uncheck = function () { bsw/jbe@1309: this.btnElement_.checked = false; bsw/jbe@1309: this.onChange_(null); bsw/jbe@1309: }; bsw/jbe@1309: MaterialRadio.prototype['uncheck'] = MaterialRadio.prototype.uncheck; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialRadio.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: this.btnElement_ = this.element_.querySelector('.' + this.CssClasses_.RADIO_BTN); bsw/jbe@1309: this.boundChangeHandler_ = this.onChange_.bind(this); bsw/jbe@1309: this.boundFocusHandler_ = this.onChange_.bind(this); bsw/jbe@1309: this.boundBlurHandler_ = this.onBlur_.bind(this); bsw/jbe@1309: this.boundMouseUpHandler_ = this.onMouseup_.bind(this); bsw/jbe@1309: var outerCircle = document.createElement('span'); bsw/jbe@1309: outerCircle.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE); bsw/jbe@1309: var innerCircle = document.createElement('span'); bsw/jbe@1309: innerCircle.classList.add(this.CssClasses_.RADIO_INNER_CIRCLE); bsw/jbe@1309: this.element_.appendChild(outerCircle); bsw/jbe@1309: this.element_.appendChild(innerCircle); bsw/jbe@1309: var rippleContainer; bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS); bsw/jbe@1309: rippleContainer = document.createElement('span'); bsw/jbe@1309: rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER); bsw/jbe@1309: rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT); bsw/jbe@1309: rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER); bsw/jbe@1309: rippleContainer.addEventListener('mouseup', this.boundMouseUpHandler_); bsw/jbe@1309: var ripple = document.createElement('span'); bsw/jbe@1309: ripple.classList.add(this.CssClasses_.RIPPLE); bsw/jbe@1309: rippleContainer.appendChild(ripple); bsw/jbe@1309: this.element_.appendChild(rippleContainer); bsw/jbe@1309: } bsw/jbe@1309: this.btnElement_.addEventListener('change', this.boundChangeHandler_); bsw/jbe@1309: this.btnElement_.addEventListener('focus', this.boundFocusHandler_); bsw/jbe@1309: this.btnElement_.addEventListener('blur', this.boundBlurHandler_); bsw/jbe@1309: this.element_.addEventListener('mouseup', this.boundMouseUpHandler_); bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_UPGRADED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialRadio, bsw/jbe@1309: classAsString: 'MaterialRadio', bsw/jbe@1309: cssClass: 'mdl-js-radio', bsw/jbe@1309: widget: true bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Slider MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialSlider = function MaterialSlider(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Browser feature detection. bsw/jbe@1309: this.isIE_ = window.navigator.msPointerEnabled; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialSlider'] = MaterialSlider; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSlider.prototype.Constant_ = {}; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSlider.prototype.CssClasses_ = { bsw/jbe@1309: IE_CONTAINER: 'mdl-slider__ie-container', bsw/jbe@1309: SLIDER_CONTAINER: 'mdl-slider__container', bsw/jbe@1309: BACKGROUND_FLEX: 'mdl-slider__background-flex', bsw/jbe@1309: BACKGROUND_LOWER: 'mdl-slider__background-lower', bsw/jbe@1309: BACKGROUND_UPPER: 'mdl-slider__background-upper', bsw/jbe@1309: IS_LOWEST_VALUE: 'is-lowest-value', bsw/jbe@1309: IS_UPGRADED: 'is-upgraded' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle input on element. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSlider.prototype.onInput_ = function (event) { bsw/jbe@1309: this.updateValueStyles_(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle change on element. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSlider.prototype.onChange_ = function (event) { bsw/jbe@1309: this.updateValueStyles_(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle mouseup on element. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSlider.prototype.onMouseUp_ = function (event) { bsw/jbe@1309: event.target.blur(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle mousedown on container element. bsw/jbe@1309: * This handler is purpose is to not require the use to click bsw/jbe@1309: * exactly on the 2px slider element, as FireFox seems to be very bsw/jbe@1309: * strict about this. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: * @suppress {missingProperties} bsw/jbe@1309: */ bsw/jbe@1309: MaterialSlider.prototype.onContainerMouseDown_ = function (event) { bsw/jbe@1309: // If this click is not on the parent element (but rather some child) bsw/jbe@1309: // ignore. It may still bubble up. bsw/jbe@1309: if (event.target !== this.element_.parentElement) { bsw/jbe@1309: return; bsw/jbe@1309: } bsw/jbe@1309: // Discard the original event and create a new event that bsw/jbe@1309: // is on the slider element. bsw/jbe@1309: event.preventDefault(); bsw/jbe@1309: var newEvent = new MouseEvent('mousedown', { bsw/jbe@1309: target: event.target, bsw/jbe@1309: buttons: event.buttons, bsw/jbe@1309: clientX: event.clientX, bsw/jbe@1309: clientY: this.element_.getBoundingClientRect().y bsw/jbe@1309: }); bsw/jbe@1309: this.element_.dispatchEvent(newEvent); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle updating of values. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSlider.prototype.updateValueStyles_ = function () { bsw/jbe@1309: // Calculate and apply percentages to div structure behind slider. bsw/jbe@1309: var fraction = (this.element_.value - this.element_.min) / (this.element_.max - this.element_.min); bsw/jbe@1309: if (fraction === 0) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_LOWEST_VALUE); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_LOWEST_VALUE); bsw/jbe@1309: } bsw/jbe@1309: if (!this.isIE_) { bsw/jbe@1309: this.backgroundLower_.style.flex = fraction; bsw/jbe@1309: this.backgroundLower_.style.webkitFlex = fraction; bsw/jbe@1309: this.backgroundUpper_.style.flex = 1 - fraction; bsw/jbe@1309: this.backgroundUpper_.style.webkitFlex = 1 - fraction; bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // Public methods. bsw/jbe@1309: /** bsw/jbe@1309: * Disable slider. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialSlider.prototype.disable = function () { bsw/jbe@1309: this.element_.disabled = true; bsw/jbe@1309: }; bsw/jbe@1309: MaterialSlider.prototype['disable'] = MaterialSlider.prototype.disable; bsw/jbe@1309: /** bsw/jbe@1309: * Enable slider. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialSlider.prototype.enable = function () { bsw/jbe@1309: this.element_.disabled = false; bsw/jbe@1309: }; bsw/jbe@1309: MaterialSlider.prototype['enable'] = MaterialSlider.prototype.enable; bsw/jbe@1309: /** bsw/jbe@1309: * Update slider value. bsw/jbe@1309: * bsw/jbe@1309: * @param {number} value The value to which to set the control (optional). bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialSlider.prototype.change = function (value) { bsw/jbe@1309: if (typeof value !== 'undefined') { bsw/jbe@1309: this.element_.value = value; bsw/jbe@1309: } bsw/jbe@1309: this.updateValueStyles_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialSlider.prototype['change'] = MaterialSlider.prototype.change; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialSlider.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: if (this.isIE_) { bsw/jbe@1309: // Since we need to specify a very large height in IE due to bsw/jbe@1309: // implementation limitations, we add a parent here that trims it down to bsw/jbe@1309: // a reasonable size. bsw/jbe@1309: var containerIE = document.createElement('div'); bsw/jbe@1309: containerIE.classList.add(this.CssClasses_.IE_CONTAINER); bsw/jbe@1309: this.element_.parentElement.insertBefore(containerIE, this.element_); bsw/jbe@1309: this.element_.parentElement.removeChild(this.element_); bsw/jbe@1309: containerIE.appendChild(this.element_); bsw/jbe@1309: } else { bsw/jbe@1309: // For non-IE browsers, we need a div structure that sits behind the bsw/jbe@1309: // slider and allows us to style the left and right sides of it with bsw/jbe@1309: // different colors. bsw/jbe@1309: var container = document.createElement('div'); bsw/jbe@1309: container.classList.add(this.CssClasses_.SLIDER_CONTAINER); bsw/jbe@1309: this.element_.parentElement.insertBefore(container, this.element_); bsw/jbe@1309: this.element_.parentElement.removeChild(this.element_); bsw/jbe@1309: container.appendChild(this.element_); bsw/jbe@1309: var backgroundFlex = document.createElement('div'); bsw/jbe@1309: backgroundFlex.classList.add(this.CssClasses_.BACKGROUND_FLEX); bsw/jbe@1309: container.appendChild(backgroundFlex); bsw/jbe@1309: this.backgroundLower_ = document.createElement('div'); bsw/jbe@1309: this.backgroundLower_.classList.add(this.CssClasses_.BACKGROUND_LOWER); bsw/jbe@1309: backgroundFlex.appendChild(this.backgroundLower_); bsw/jbe@1309: this.backgroundUpper_ = document.createElement('div'); bsw/jbe@1309: this.backgroundUpper_.classList.add(this.CssClasses_.BACKGROUND_UPPER); bsw/jbe@1309: backgroundFlex.appendChild(this.backgroundUpper_); bsw/jbe@1309: } bsw/jbe@1309: this.boundInputHandler = this.onInput_.bind(this); bsw/jbe@1309: this.boundChangeHandler = this.onChange_.bind(this); bsw/jbe@1309: this.boundMouseUpHandler = this.onMouseUp_.bind(this); bsw/jbe@1309: this.boundContainerMouseDownHandler = this.onContainerMouseDown_.bind(this); bsw/jbe@1309: this.element_.addEventListener('input', this.boundInputHandler); bsw/jbe@1309: this.element_.addEventListener('change', this.boundChangeHandler); bsw/jbe@1309: this.element_.addEventListener('mouseup', this.boundMouseUpHandler); bsw/jbe@1309: this.element_.parentElement.addEventListener('mousedown', this.boundContainerMouseDownHandler); bsw/jbe@1309: this.updateValueStyles_(); bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_UPGRADED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialSlider, bsw/jbe@1309: classAsString: 'MaterialSlider', bsw/jbe@1309: cssClass: 'mdl-js-slider', bsw/jbe@1309: widget: true bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Snackbar MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialSnackbar = function MaterialSnackbar(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: this.textElement_ = this.element_.querySelector('.' + this.cssClasses_.MESSAGE); bsw/jbe@1309: this.actionElement_ = this.element_.querySelector('.' + this.cssClasses_.ACTION); bsw/jbe@1309: if (!this.textElement_) { bsw/jbe@1309: throw new Error('There must be a message element for a snackbar.'); bsw/jbe@1309: } bsw/jbe@1309: if (!this.actionElement_) { bsw/jbe@1309: throw new Error('There must be an action element for a snackbar.'); bsw/jbe@1309: } bsw/jbe@1309: this.active = false; bsw/jbe@1309: this.actionHandler_ = undefined; bsw/jbe@1309: this.message_ = undefined; bsw/jbe@1309: this.actionText_ = undefined; bsw/jbe@1309: this.queuedNotifications_ = []; bsw/jbe@1309: this.setActionHidden_(true); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialSnackbar'] = MaterialSnackbar; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSnackbar.prototype.Constant_ = { bsw/jbe@1309: // The duration of the snackbar show/hide animation, in ms. bsw/jbe@1309: ANIMATION_LENGTH: 250 bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSnackbar.prototype.cssClasses_ = { bsw/jbe@1309: SNACKBAR: 'mdl-snackbar', bsw/jbe@1309: MESSAGE: 'mdl-snackbar__text', bsw/jbe@1309: ACTION: 'mdl-snackbar__action', bsw/jbe@1309: ACTIVE: 'mdl-snackbar--active' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Display the snackbar. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSnackbar.prototype.displaySnackbar_ = function () { bsw/jbe@1309: this.element_.setAttribute('aria-hidden', 'true'); bsw/jbe@1309: if (this.actionHandler_) { bsw/jbe@1309: this.actionElement_.textContent = this.actionText_; bsw/jbe@1309: this.actionElement_.addEventListener('click', this.actionHandler_); bsw/jbe@1309: this.setActionHidden_(false); bsw/jbe@1309: } bsw/jbe@1309: this.textElement_.textContent = this.message_; bsw/jbe@1309: this.element_.classList.add(this.cssClasses_.ACTIVE); bsw/jbe@1309: this.element_.setAttribute('aria-hidden', 'false'); bsw/jbe@1309: setTimeout(this.cleanup_.bind(this), this.timeout_); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Show the snackbar. bsw/jbe@1309: * bsw/jbe@1309: * @param {Object} data The data for the notification. bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialSnackbar.prototype.showSnackbar = function (data) { bsw/jbe@1309: if (data === undefined) { bsw/jbe@1309: throw new Error('Please provide a data object with at least a message to display.'); bsw/jbe@1309: } bsw/jbe@1309: if (data['message'] === undefined) { bsw/jbe@1309: throw new Error('Please provide a message to be displayed.'); bsw/jbe@1309: } bsw/jbe@1309: if (data['actionHandler'] && !data['actionText']) { bsw/jbe@1309: throw new Error('Please provide action text with the handler.'); bsw/jbe@1309: } bsw/jbe@1309: if (this.active) { bsw/jbe@1309: this.queuedNotifications_.push(data); bsw/jbe@1309: } else { bsw/jbe@1309: this.active = true; bsw/jbe@1309: this.message_ = data['message']; bsw/jbe@1309: if (data['timeout']) { bsw/jbe@1309: this.timeout_ = data['timeout']; bsw/jbe@1309: } else { bsw/jbe@1309: this.timeout_ = 2750; bsw/jbe@1309: } bsw/jbe@1309: if (data['actionHandler']) { bsw/jbe@1309: this.actionHandler_ = data['actionHandler']; bsw/jbe@1309: } bsw/jbe@1309: if (data['actionText']) { bsw/jbe@1309: this.actionText_ = data['actionText']; bsw/jbe@1309: } bsw/jbe@1309: this.displaySnackbar_(); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialSnackbar.prototype['showSnackbar'] = MaterialSnackbar.prototype.showSnackbar; bsw/jbe@1309: /** bsw/jbe@1309: * Check if the queue has items within it. bsw/jbe@1309: * If it does, display the next entry. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSnackbar.prototype.checkQueue_ = function () { bsw/jbe@1309: if (this.queuedNotifications_.length > 0) { bsw/jbe@1309: this.showSnackbar(this.queuedNotifications_.shift()); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Cleanup the snackbar event listeners and accessiblity attributes. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSnackbar.prototype.cleanup_ = function () { bsw/jbe@1309: this.element_.classList.remove(this.cssClasses_.ACTIVE); bsw/jbe@1309: setTimeout(function () { bsw/jbe@1309: this.element_.setAttribute('aria-hidden', 'true'); bsw/jbe@1309: this.textElement_.textContent = ''; bsw/jbe@1309: if (!Boolean(this.actionElement_.getAttribute('aria-hidden'))) { bsw/jbe@1309: this.setActionHidden_(true); bsw/jbe@1309: this.actionElement_.textContent = ''; bsw/jbe@1309: this.actionElement_.removeEventListener('click', this.actionHandler_); bsw/jbe@1309: } bsw/jbe@1309: this.actionHandler_ = undefined; bsw/jbe@1309: this.message_ = undefined; bsw/jbe@1309: this.actionText_ = undefined; bsw/jbe@1309: this.active = false; bsw/jbe@1309: this.checkQueue_(); bsw/jbe@1309: }.bind(this), this.Constant_.ANIMATION_LENGTH); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Set the action handler hidden state. bsw/jbe@1309: * bsw/jbe@1309: * @param {boolean} value bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSnackbar.prototype.setActionHidden_ = function (value) { bsw/jbe@1309: if (value) { bsw/jbe@1309: this.actionElement_.setAttribute('aria-hidden', 'true'); bsw/jbe@1309: } else { bsw/jbe@1309: this.actionElement_.removeAttribute('aria-hidden'); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialSnackbar, bsw/jbe@1309: classAsString: 'MaterialSnackbar', bsw/jbe@1309: cssClass: 'mdl-js-snackbar', bsw/jbe@1309: widget: true bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Spinner MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: * @constructor bsw/jbe@1309: */ bsw/jbe@1309: var MaterialSpinner = function MaterialSpinner(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialSpinner'] = MaterialSpinner; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSpinner.prototype.Constant_ = { MDL_SPINNER_LAYER_COUNT: 4 }; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSpinner.prototype.CssClasses_ = { bsw/jbe@1309: MDL_SPINNER_LAYER: 'mdl-spinner__layer', bsw/jbe@1309: MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper', bsw/jbe@1309: MDL_SPINNER_CIRCLE: 'mdl-spinner__circle', bsw/jbe@1309: MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch', bsw/jbe@1309: MDL_SPINNER_LEFT: 'mdl-spinner__left', bsw/jbe@1309: MDL_SPINNER_RIGHT: 'mdl-spinner__right' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Auxiliary method to create a spinner layer. bsw/jbe@1309: * bsw/jbe@1309: * @param {number} index Index of the layer to be created. bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialSpinner.prototype.createLayer = function (index) { bsw/jbe@1309: var layer = document.createElement('div'); bsw/jbe@1309: layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER); bsw/jbe@1309: layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index); bsw/jbe@1309: var leftClipper = document.createElement('div'); bsw/jbe@1309: leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER); bsw/jbe@1309: leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT); bsw/jbe@1309: var gapPatch = document.createElement('div'); bsw/jbe@1309: gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH); bsw/jbe@1309: var rightClipper = document.createElement('div'); bsw/jbe@1309: rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER); bsw/jbe@1309: rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT); bsw/jbe@1309: var circleOwners = [ bsw/jbe@1309: leftClipper, bsw/jbe@1309: gapPatch, bsw/jbe@1309: rightClipper bsw/jbe@1309: ]; bsw/jbe@1309: for (var i = 0; i < circleOwners.length; i++) { bsw/jbe@1309: var circle = document.createElement('div'); bsw/jbe@1309: circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE); bsw/jbe@1309: circleOwners[i].appendChild(circle); bsw/jbe@1309: } bsw/jbe@1309: layer.appendChild(leftClipper); bsw/jbe@1309: layer.appendChild(gapPatch); bsw/jbe@1309: layer.appendChild(rightClipper); bsw/jbe@1309: this.element_.appendChild(layer); bsw/jbe@1309: }; bsw/jbe@1309: MaterialSpinner.prototype['createLayer'] = MaterialSpinner.prototype.createLayer; bsw/jbe@1309: /** bsw/jbe@1309: * Stops the spinner animation. bsw/jbe@1309: * Public method for users who need to stop the spinner for any reason. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialSpinner.prototype.stop = function () { bsw/jbe@1309: this.element_.classList.remove('is-active'); bsw/jbe@1309: }; bsw/jbe@1309: MaterialSpinner.prototype['stop'] = MaterialSpinner.prototype.stop; bsw/jbe@1309: /** bsw/jbe@1309: * Starts the spinner animation. bsw/jbe@1309: * Public method for users who need to manually start the spinner for any reason bsw/jbe@1309: * (instead of just adding the 'is-active' class to their markup). bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialSpinner.prototype.start = function () { bsw/jbe@1309: this.element_.classList.add('is-active'); bsw/jbe@1309: }; bsw/jbe@1309: MaterialSpinner.prototype['start'] = MaterialSpinner.prototype.start; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialSpinner.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: for (var i = 1; i <= this.Constant_.MDL_SPINNER_LAYER_COUNT; i++) { bsw/jbe@1309: this.createLayer(i); bsw/jbe@1309: } bsw/jbe@1309: this.element_.classList.add('is-upgraded'); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialSpinner, bsw/jbe@1309: classAsString: 'MaterialSpinner', bsw/jbe@1309: cssClass: 'mdl-js-spinner', bsw/jbe@1309: widget: true bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Checkbox MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialSwitch = function MaterialSwitch(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialSwitch'] = MaterialSwitch; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.Constant_ = { TINY_TIMEOUT: 0.001 }; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.CssClasses_ = { bsw/jbe@1309: INPUT: 'mdl-switch__input', bsw/jbe@1309: TRACK: 'mdl-switch__track', bsw/jbe@1309: THUMB: 'mdl-switch__thumb', bsw/jbe@1309: FOCUS_HELPER: 'mdl-switch__focus-helper', bsw/jbe@1309: RIPPLE_EFFECT: 'mdl-js-ripple-effect', bsw/jbe@1309: RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events', bsw/jbe@1309: RIPPLE_CONTAINER: 'mdl-switch__ripple-container', bsw/jbe@1309: RIPPLE_CENTER: 'mdl-ripple--center', bsw/jbe@1309: RIPPLE: 'mdl-ripple', bsw/jbe@1309: IS_FOCUSED: 'is-focused', bsw/jbe@1309: IS_DISABLED: 'is-disabled', bsw/jbe@1309: IS_CHECKED: 'is-checked' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle change of state. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.onChange_ = function (event) { bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle focus of element. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.onFocus_ = function (event) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_FOCUSED); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle lost focus of element. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.onBlur_ = function (event) { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_FOCUSED); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle mouseup. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.onMouseUp_ = function (event) { bsw/jbe@1309: this.blur_(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle class updates. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.updateClasses_ = function () { bsw/jbe@1309: this.checkDisabled(); bsw/jbe@1309: this.checkToggleState(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Add blur. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.blur_ = function () { bsw/jbe@1309: // TODO: figure out why there's a focus event being fired after our blur, bsw/jbe@1309: // so that we can avoid this hack. bsw/jbe@1309: window.setTimeout(function () { bsw/jbe@1309: this.inputElement_.blur(); bsw/jbe@1309: }.bind(this), this.Constant_.TINY_TIMEOUT); bsw/jbe@1309: }; bsw/jbe@1309: // Public methods. bsw/jbe@1309: /** bsw/jbe@1309: * Check the components disabled state. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.checkDisabled = function () { bsw/jbe@1309: if (this.inputElement_.disabled) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_DISABLED); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_DISABLED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialSwitch.prototype['checkDisabled'] = MaterialSwitch.prototype.checkDisabled; bsw/jbe@1309: /** bsw/jbe@1309: * Check the components toggled state. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.checkToggleState = function () { bsw/jbe@1309: if (this.inputElement_.checked) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_CHECKED); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_CHECKED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialSwitch.prototype['checkToggleState'] = MaterialSwitch.prototype.checkToggleState; bsw/jbe@1309: /** bsw/jbe@1309: * Disable switch. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.disable = function () { bsw/jbe@1309: this.inputElement_.disabled = true; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialSwitch.prototype['disable'] = MaterialSwitch.prototype.disable; bsw/jbe@1309: /** bsw/jbe@1309: * Enable switch. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.enable = function () { bsw/jbe@1309: this.inputElement_.disabled = false; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialSwitch.prototype['enable'] = MaterialSwitch.prototype.enable; bsw/jbe@1309: /** bsw/jbe@1309: * Activate switch. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.on = function () { bsw/jbe@1309: this.inputElement_.checked = true; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialSwitch.prototype['on'] = MaterialSwitch.prototype.on; bsw/jbe@1309: /** bsw/jbe@1309: * Deactivate switch. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.off = function () { bsw/jbe@1309: this.inputElement_.checked = false; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialSwitch.prototype['off'] = MaterialSwitch.prototype.off; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialSwitch.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT); bsw/jbe@1309: var track = document.createElement('div'); bsw/jbe@1309: track.classList.add(this.CssClasses_.TRACK); bsw/jbe@1309: var thumb = document.createElement('div'); bsw/jbe@1309: thumb.classList.add(this.CssClasses_.THUMB); bsw/jbe@1309: var focusHelper = document.createElement('span'); bsw/jbe@1309: focusHelper.classList.add(this.CssClasses_.FOCUS_HELPER); bsw/jbe@1309: thumb.appendChild(focusHelper); bsw/jbe@1309: this.element_.appendChild(track); bsw/jbe@1309: this.element_.appendChild(thumb); bsw/jbe@1309: this.boundMouseUpHandler = this.onMouseUp_.bind(this); bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS); bsw/jbe@1309: this.rippleContainerElement_ = document.createElement('span'); bsw/jbe@1309: this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER); bsw/jbe@1309: this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT); bsw/jbe@1309: this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER); bsw/jbe@1309: this.rippleContainerElement_.addEventListener('mouseup', this.boundMouseUpHandler); bsw/jbe@1309: var ripple = document.createElement('span'); bsw/jbe@1309: ripple.classList.add(this.CssClasses_.RIPPLE); bsw/jbe@1309: this.rippleContainerElement_.appendChild(ripple); bsw/jbe@1309: this.element_.appendChild(this.rippleContainerElement_); bsw/jbe@1309: } bsw/jbe@1309: this.boundChangeHandler = this.onChange_.bind(this); bsw/jbe@1309: this.boundFocusHandler = this.onFocus_.bind(this); bsw/jbe@1309: this.boundBlurHandler = this.onBlur_.bind(this); bsw/jbe@1309: this.inputElement_.addEventListener('change', this.boundChangeHandler); bsw/jbe@1309: this.inputElement_.addEventListener('focus', this.boundFocusHandler); bsw/jbe@1309: this.inputElement_.addEventListener('blur', this.boundBlurHandler); bsw/jbe@1309: this.element_.addEventListener('mouseup', this.boundMouseUpHandler); bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: this.element_.classList.add('is-upgraded'); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialSwitch, bsw/jbe@1309: classAsString: 'MaterialSwitch', bsw/jbe@1309: cssClass: 'mdl-js-switch', bsw/jbe@1309: widget: true bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Tabs MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {Element} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialTabs = function MaterialTabs(element) { bsw/jbe@1309: // Stores the HTML element. bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialTabs'] = MaterialTabs; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTabs.prototype.Constant_ = {}; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTabs.prototype.CssClasses_ = { bsw/jbe@1309: TAB_CLASS: 'mdl-tabs__tab', bsw/jbe@1309: PANEL_CLASS: 'mdl-tabs__panel', bsw/jbe@1309: ACTIVE_CLASS: 'is-active', bsw/jbe@1309: UPGRADED_CLASS: 'is-upgraded', bsw/jbe@1309: MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect', bsw/jbe@1309: MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container', bsw/jbe@1309: MDL_RIPPLE: 'mdl-ripple', bsw/jbe@1309: MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle clicks to a tabs component bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTabs.prototype.initTabs_ = function () { bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS); bsw/jbe@1309: } bsw/jbe@1309: // Select element tabs, document panels bsw/jbe@1309: this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS); bsw/jbe@1309: this.panels_ = this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS); bsw/jbe@1309: // Create new tabs for each tab element bsw/jbe@1309: for (var i = 0; i < this.tabs_.length; i++) { bsw/jbe@1309: new MaterialTab(this.tabs_[i], this); bsw/jbe@1309: } bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Reset tab state, dropping active classes bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTabs.prototype.resetTabState_ = function () { bsw/jbe@1309: for (var k = 0; k < this.tabs_.length; k++) { bsw/jbe@1309: this.tabs_[k].classList.remove(this.CssClasses_.ACTIVE_CLASS); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Reset panel state, droping active classes bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTabs.prototype.resetPanelState_ = function () { bsw/jbe@1309: for (var j = 0; j < this.panels_.length; j++) { bsw/jbe@1309: this.panels_[j].classList.remove(this.CssClasses_.ACTIVE_CLASS); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialTabs.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: this.initTabs_(); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Constructor for an individual tab. bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {Element} tab The HTML element for the tab. bsw/jbe@1309: * @param {MaterialTabs} ctx The MaterialTabs object that owns the tab. bsw/jbe@1309: */ bsw/jbe@1309: function MaterialTab(tab, ctx) { bsw/jbe@1309: if (tab) { bsw/jbe@1309: if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) { bsw/jbe@1309: var rippleContainer = document.createElement('span'); bsw/jbe@1309: rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER); bsw/jbe@1309: rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT); bsw/jbe@1309: var ripple = document.createElement('span'); bsw/jbe@1309: ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE); bsw/jbe@1309: rippleContainer.appendChild(ripple); bsw/jbe@1309: tab.appendChild(rippleContainer); bsw/jbe@1309: } bsw/jbe@1309: tab.addEventListener('click', function (e) { bsw/jbe@1309: if (tab.getAttribute('href').charAt(0) === '#') { bsw/jbe@1309: e.preventDefault(); bsw/jbe@1309: } bsw/jbe@1309: var href = tab.href.split('#')[1]; bsw/jbe@1309: var panel = ctx.element_.querySelector('#' + href); bsw/jbe@1309: ctx.resetTabState_(); bsw/jbe@1309: ctx.resetPanelState_(); bsw/jbe@1309: tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS); bsw/jbe@1309: if (panel) { bsw/jbe@1309: panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS); bsw/jbe@1309: } bsw/jbe@1309: }); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialTabs, bsw/jbe@1309: classAsString: 'MaterialTabs', bsw/jbe@1309: cssClass: 'mdl-js-tabs' bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Textfield MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialTextfield = function MaterialTextfield(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: this.maxRows = this.Constant_.NO_MAX_ROWS; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialTextfield'] = MaterialTextfield; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.Constant_ = { bsw/jbe@1309: NO_MAX_ROWS: -1, bsw/jbe@1309: MAX_ROWS_ATTRIBUTE: 'maxrows' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.CssClasses_ = { bsw/jbe@1309: LABEL: 'mdl-textfield__label', bsw/jbe@1309: INPUT: 'mdl-textfield__input', bsw/jbe@1309: IS_DIRTY: 'is-dirty', bsw/jbe@1309: IS_FOCUSED: 'is-focused', bsw/jbe@1309: IS_DISABLED: 'is-disabled', bsw/jbe@1309: IS_INVALID: 'is-invalid', bsw/jbe@1309: IS_UPGRADED: 'is-upgraded', bsw/jbe@1309: HAS_PLACEHOLDER: 'has-placeholder' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle input being entered. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.onKeyDown_ = function (event) { bsw/jbe@1309: var currentRowCount = event.target.value.split('\n').length; bsw/jbe@1309: if (event.keyCode === 13) { bsw/jbe@1309: if (currentRowCount >= this.maxRows) { bsw/jbe@1309: event.preventDefault(); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle focus. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.onFocus_ = function (event) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_FOCUSED); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle lost focus. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.onBlur_ = function (event) { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_FOCUSED); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle reset event from out side. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.onReset_ = function (event) { bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle class updates. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.updateClasses_ = function () { bsw/jbe@1309: this.checkDisabled(); bsw/jbe@1309: this.checkValidity(); bsw/jbe@1309: this.checkDirty(); bsw/jbe@1309: this.checkFocus(); bsw/jbe@1309: }; bsw/jbe@1309: // Public methods. bsw/jbe@1309: /** bsw/jbe@1309: * Check the disabled state and update field accordingly. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.checkDisabled = function () { bsw/jbe@1309: if (this.input_.disabled) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_DISABLED); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_DISABLED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialTextfield.prototype['checkDisabled'] = MaterialTextfield.prototype.checkDisabled; bsw/jbe@1309: /** bsw/jbe@1309: * Check the focus state and update field accordingly. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.checkFocus = function () { bsw/jbe@1309: if (Boolean(this.element_.querySelector(':focus'))) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_FOCUSED); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_FOCUSED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialTextfield.prototype['checkFocus'] = MaterialTextfield.prototype.checkFocus; bsw/jbe@1309: /** bsw/jbe@1309: * Check the validity state and update field accordingly. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.checkValidity = function () { bsw/jbe@1309: if (this.input_.validity) { bsw/jbe@1309: if (this.input_.validity.valid) { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_INVALID); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_INVALID); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialTextfield.prototype['checkValidity'] = MaterialTextfield.prototype.checkValidity; bsw/jbe@1309: /** bsw/jbe@1309: * Check the dirty state and update field accordingly. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.checkDirty = function () { bsw/jbe@1309: if (this.input_.value && this.input_.value.length > 0) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_DIRTY); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_DIRTY); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialTextfield.prototype['checkDirty'] = MaterialTextfield.prototype.checkDirty; bsw/jbe@1309: /** bsw/jbe@1309: * Disable text field. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.disable = function () { bsw/jbe@1309: this.input_.disabled = true; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialTextfield.prototype['disable'] = MaterialTextfield.prototype.disable; bsw/jbe@1309: /** bsw/jbe@1309: * Enable text field. bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.enable = function () { bsw/jbe@1309: this.input_.disabled = false; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialTextfield.prototype['enable'] = MaterialTextfield.prototype.enable; bsw/jbe@1309: /** bsw/jbe@1309: * Update text field value. bsw/jbe@1309: * bsw/jbe@1309: * @param {string} value The value to which to set the control (optional). bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.change = function (value) { bsw/jbe@1309: this.input_.value = value || ''; bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: }; bsw/jbe@1309: MaterialTextfield.prototype['change'] = MaterialTextfield.prototype.change; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialTextfield.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL); bsw/jbe@1309: this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT); bsw/jbe@1309: if (this.input_) { bsw/jbe@1309: if (this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE)) { bsw/jbe@1309: this.maxRows = parseInt(this.input_.getAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE), 10); bsw/jbe@1309: if (isNaN(this.maxRows)) { bsw/jbe@1309: this.maxRows = this.Constant_.NO_MAX_ROWS; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: if (this.input_.hasAttribute('placeholder')) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.HAS_PLACEHOLDER); bsw/jbe@1309: } bsw/jbe@1309: this.boundUpdateClassesHandler = this.updateClasses_.bind(this); bsw/jbe@1309: this.boundFocusHandler = this.onFocus_.bind(this); bsw/jbe@1309: this.boundBlurHandler = this.onBlur_.bind(this); bsw/jbe@1309: this.boundResetHandler = this.onReset_.bind(this); bsw/jbe@1309: this.input_.addEventListener('input', this.boundUpdateClassesHandler); bsw/jbe@1309: this.input_.addEventListener('focus', this.boundFocusHandler); bsw/jbe@1309: this.input_.addEventListener('blur', this.boundBlurHandler); bsw/jbe@1309: this.input_.addEventListener('reset', this.boundResetHandler); bsw/jbe@1309: if (this.maxRows !== this.Constant_.NO_MAX_ROWS) { bsw/jbe@1309: // TODO: This should handle pasting multi line text. bsw/jbe@1309: // Currently doesn't. bsw/jbe@1309: this.boundKeyDownHandler = this.onKeyDown_.bind(this); bsw/jbe@1309: this.input_.addEventListener('keydown', this.boundKeyDownHandler); bsw/jbe@1309: } bsw/jbe@1309: var invalid = this.element_.classList.contains(this.CssClasses_.IS_INVALID); bsw/jbe@1309: this.updateClasses_(); bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_UPGRADED); bsw/jbe@1309: if (invalid) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_INVALID); bsw/jbe@1309: } bsw/jbe@1309: if (this.input_.hasAttribute('autofocus')) { bsw/jbe@1309: this.element_.focus(); bsw/jbe@1309: this.checkFocus(); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialTextfield, bsw/jbe@1309: classAsString: 'MaterialTextfield', bsw/jbe@1309: cssClass: 'mdl-js-textfield', bsw/jbe@1309: widget: true bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Tooltip MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialTooltip = function MaterialTooltip(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialTooltip'] = MaterialTooltip; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTooltip.prototype.Constant_ = {}; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTooltip.prototype.CssClasses_ = { bsw/jbe@1309: IS_ACTIVE: 'is-active', bsw/jbe@1309: BOTTOM: 'mdl-tooltip--bottom', bsw/jbe@1309: LEFT: 'mdl-tooltip--left', bsw/jbe@1309: RIGHT: 'mdl-tooltip--right', bsw/jbe@1309: TOP: 'mdl-tooltip--top' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle mouseenter for tooltip. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTooltip.prototype.handleMouseEnter_ = function (event) { bsw/jbe@1309: var props = event.target.getBoundingClientRect(); bsw/jbe@1309: var left = props.left + props.width / 2; bsw/jbe@1309: var top = props.top + props.height / 2; bsw/jbe@1309: var marginLeft = -1 * (this.element_.offsetWidth / 2); bsw/jbe@1309: var marginTop = -1 * (this.element_.offsetHeight / 2); bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.LEFT) || this.element_.classList.contains(this.CssClasses_.RIGHT)) { bsw/jbe@1309: left = props.width / 2; bsw/jbe@1309: if (top + marginTop < 0) { bsw/jbe@1309: this.element_.style.top = '0'; bsw/jbe@1309: this.element_.style.marginTop = '0'; bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.style.top = top + 'px'; bsw/jbe@1309: this.element_.style.marginTop = marginTop + 'px'; bsw/jbe@1309: } bsw/jbe@1309: } else { bsw/jbe@1309: if (left + marginLeft < 0) { bsw/jbe@1309: this.element_.style.left = '0'; bsw/jbe@1309: this.element_.style.marginLeft = '0'; bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.style.left = left + 'px'; bsw/jbe@1309: this.element_.style.marginLeft = marginLeft + 'px'; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.TOP)) { bsw/jbe@1309: this.element_.style.top = props.top - this.element_.offsetHeight - 10 + 'px'; bsw/jbe@1309: } else if (this.element_.classList.contains(this.CssClasses_.RIGHT)) { bsw/jbe@1309: this.element_.style.left = props.left + props.width + 10 + 'px'; bsw/jbe@1309: } else if (this.element_.classList.contains(this.CssClasses_.LEFT)) { bsw/jbe@1309: this.element_.style.left = props.left - this.element_.offsetWidth - 10 + 'px'; bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.style.top = props.top + props.height + 10 + 'px'; bsw/jbe@1309: } bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_ACTIVE); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Hide tooltip on mouseleave or scroll bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialTooltip.prototype.hideTooltip_ = function () { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_ACTIVE); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialTooltip.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: var forElId = this.element_.getAttribute('for') || this.element_.getAttribute('data-mdl-for'); bsw/jbe@1309: if (forElId) { bsw/jbe@1309: this.forElement_ = document.getElementById(forElId); bsw/jbe@1309: } bsw/jbe@1309: if (this.forElement_) { bsw/jbe@1309: // It's left here because it prevents accidental text selection on Android bsw/jbe@1309: if (!this.forElement_.hasAttribute('tabindex')) { bsw/jbe@1309: this.forElement_.setAttribute('tabindex', '0'); bsw/jbe@1309: } bsw/jbe@1309: this.boundMouseEnterHandler = this.handleMouseEnter_.bind(this); bsw/jbe@1309: this.boundMouseLeaveAndScrollHandler = this.hideTooltip_.bind(this); bsw/jbe@1309: this.forElement_.addEventListener('mouseenter', this.boundMouseEnterHandler, false); bsw/jbe@1309: this.forElement_.addEventListener('touchend', this.boundMouseEnterHandler, false); bsw/jbe@1309: this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveAndScrollHandler, false); bsw/jbe@1309: window.addEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true); bsw/jbe@1309: window.addEventListener('touchstart', this.boundMouseLeaveAndScrollHandler); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialTooltip, bsw/jbe@1309: classAsString: 'MaterialTooltip', bsw/jbe@1309: cssClass: 'mdl-tooltip' bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Layout MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialLayout = function MaterialLayout(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialLayout'] = MaterialLayout; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.Constant_ = { bsw/jbe@1309: MAX_WIDTH: '(max-width: 1024px)', bsw/jbe@1309: TAB_SCROLL_PIXELS: 100, bsw/jbe@1309: RESIZE_TIMEOUT: 100, bsw/jbe@1309: MENU_ICON: '', bsw/jbe@1309: CHEVRON_LEFT: 'chevron_left', bsw/jbe@1309: CHEVRON_RIGHT: 'chevron_right' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Keycodes, for code readability. bsw/jbe@1309: * bsw/jbe@1309: * @enum {number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.Keycodes_ = { bsw/jbe@1309: ENTER: 13, bsw/jbe@1309: ESCAPE: 27, bsw/jbe@1309: SPACE: 32 bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Modes. bsw/jbe@1309: * bsw/jbe@1309: * @enum {number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.Mode_ = { bsw/jbe@1309: STANDARD: 0, bsw/jbe@1309: SEAMED: 1, bsw/jbe@1309: WATERFALL: 2, bsw/jbe@1309: SCROLL: 3 bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.CssClasses_ = { bsw/jbe@1309: CONTAINER: 'mdl-layout__container', bsw/jbe@1309: HEADER: 'mdl-layout__header', bsw/jbe@1309: DRAWER: 'mdl-layout__drawer', bsw/jbe@1309: CONTENT: 'mdl-layout__content', bsw/jbe@1309: DRAWER_BTN: 'mdl-layout__drawer-button', bsw/jbe@1309: ICON: 'material-icons', bsw/jbe@1309: JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect', bsw/jbe@1309: RIPPLE_CONTAINER: 'mdl-layout__tab-ripple-container', bsw/jbe@1309: RIPPLE: 'mdl-ripple', bsw/jbe@1309: RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events', bsw/jbe@1309: HEADER_SEAMED: 'mdl-layout__header--seamed', bsw/jbe@1309: HEADER_WATERFALL: 'mdl-layout__header--waterfall', bsw/jbe@1309: HEADER_SCROLL: 'mdl-layout__header--scroll', bsw/jbe@1309: FIXED_HEADER: 'mdl-layout--fixed-header', bsw/jbe@1309: OBFUSCATOR: 'mdl-layout__obfuscator', bsw/jbe@1309: TAB_BAR: 'mdl-layout__tab-bar', bsw/jbe@1309: TAB_CONTAINER: 'mdl-layout__tab-bar-container', bsw/jbe@1309: TAB: 'mdl-layout__tab', bsw/jbe@1309: TAB_BAR_BUTTON: 'mdl-layout__tab-bar-button', bsw/jbe@1309: TAB_BAR_LEFT_BUTTON: 'mdl-layout__tab-bar-left-button', bsw/jbe@1309: TAB_BAR_RIGHT_BUTTON: 'mdl-layout__tab-bar-right-button', bsw/jbe@1309: PANEL: 'mdl-layout__tab-panel', bsw/jbe@1309: HAS_DRAWER: 'has-drawer', bsw/jbe@1309: HAS_TABS: 'has-tabs', bsw/jbe@1309: HAS_SCROLLING_HEADER: 'has-scrolling-header', bsw/jbe@1309: CASTING_SHADOW: 'is-casting-shadow', bsw/jbe@1309: IS_COMPACT: 'is-compact', bsw/jbe@1309: IS_SMALL_SCREEN: 'is-small-screen', bsw/jbe@1309: IS_DRAWER_OPEN: 'is-visible', bsw/jbe@1309: IS_ACTIVE: 'is-active', bsw/jbe@1309: IS_UPGRADED: 'is-upgraded', bsw/jbe@1309: IS_ANIMATING: 'is-animating', bsw/jbe@1309: ON_LARGE_SCREEN: 'mdl-layout--large-screen-only', bsw/jbe@1309: ON_SMALL_SCREEN: 'mdl-layout--small-screen-only' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handles scrolling on the content. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.contentScrollHandler_ = function () { bsw/jbe@1309: if (this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)) { bsw/jbe@1309: return; bsw/jbe@1309: } bsw/jbe@1309: var headerVisible = !this.element_.classList.contains(this.CssClasses_.IS_SMALL_SCREEN) || this.element_.classList.contains(this.CssClasses_.FIXED_HEADER); bsw/jbe@1309: if (this.content_.scrollTop > 0 && !this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) { bsw/jbe@1309: this.header_.classList.add(this.CssClasses_.CASTING_SHADOW); bsw/jbe@1309: this.header_.classList.add(this.CssClasses_.IS_COMPACT); bsw/jbe@1309: if (headerVisible) { bsw/jbe@1309: this.header_.classList.add(this.CssClasses_.IS_ANIMATING); bsw/jbe@1309: } bsw/jbe@1309: } else if (this.content_.scrollTop <= 0 && this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) { bsw/jbe@1309: this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW); bsw/jbe@1309: this.header_.classList.remove(this.CssClasses_.IS_COMPACT); bsw/jbe@1309: if (headerVisible) { bsw/jbe@1309: this.header_.classList.add(this.CssClasses_.IS_ANIMATING); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handles a keyboard event on the drawer. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} evt The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.keyboardEventHandler_ = function (evt) { bsw/jbe@1309: // Only react when the drawer is open. bsw/jbe@1309: if (evt.keyCode === this.Keycodes_.ESCAPE && this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) { bsw/jbe@1309: this.toggleDrawer(); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handles changes in screen size. bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.screenSizeHandler_ = function () { bsw/jbe@1309: if (this.screenSizeMediaQuery_.matches) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN); bsw/jbe@1309: // Collapse drawer (if any) when moving to a large screen size. bsw/jbe@1309: if (this.drawer_) { bsw/jbe@1309: this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN); bsw/jbe@1309: this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handles events of drawer button. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} evt The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.drawerToggleHandler_ = function (evt) { bsw/jbe@1309: if (evt && evt.type === 'keydown') { bsw/jbe@1309: if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) { bsw/jbe@1309: // prevent scrolling in drawer nav bsw/jbe@1309: evt.preventDefault(); bsw/jbe@1309: } else { bsw/jbe@1309: // prevent other keys bsw/jbe@1309: return; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: this.toggleDrawer(); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handles (un)setting the `is-animating` class bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.headerTransitionEndHandler_ = function () { bsw/jbe@1309: this.header_.classList.remove(this.CssClasses_.IS_ANIMATING); bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handles expanding the header on click bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.headerClickHandler_ = function () { bsw/jbe@1309: if (this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) { bsw/jbe@1309: this.header_.classList.remove(this.CssClasses_.IS_COMPACT); bsw/jbe@1309: this.header_.classList.add(this.CssClasses_.IS_ANIMATING); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Reset tab state, dropping active classes bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.resetTabState_ = function (tabBar) { bsw/jbe@1309: for (var k = 0; k < tabBar.length; k++) { bsw/jbe@1309: tabBar[k].classList.remove(this.CssClasses_.IS_ACTIVE); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Reset panel state, droping active classes bsw/jbe@1309: * bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.resetPanelState_ = function (panels) { bsw/jbe@1309: for (var j = 0; j < panels.length; j++) { bsw/jbe@1309: panels[j].classList.remove(this.CssClasses_.IS_ACTIVE); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Toggle drawer state bsw/jbe@1309: * bsw/jbe@1309: * @public bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.toggleDrawer = function () { bsw/jbe@1309: var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN); bsw/jbe@1309: this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN); bsw/jbe@1309: this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN); bsw/jbe@1309: // Set accessibility properties. bsw/jbe@1309: if (this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) { bsw/jbe@1309: this.drawer_.setAttribute('aria-hidden', 'false'); bsw/jbe@1309: drawerButton.setAttribute('aria-expanded', 'true'); bsw/jbe@1309: } else { bsw/jbe@1309: this.drawer_.setAttribute('aria-hidden', 'true'); bsw/jbe@1309: drawerButton.setAttribute('aria-expanded', 'false'); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: MaterialLayout.prototype['toggleDrawer'] = MaterialLayout.prototype.toggleDrawer; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialLayout.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: var container = document.createElement('div'); bsw/jbe@1309: container.classList.add(this.CssClasses_.CONTAINER); bsw/jbe@1309: var focusedElement = this.element_.querySelector(':focus'); bsw/jbe@1309: this.element_.parentElement.insertBefore(container, this.element_); bsw/jbe@1309: this.element_.parentElement.removeChild(this.element_); bsw/jbe@1309: container.appendChild(this.element_); bsw/jbe@1309: if (focusedElement) { bsw/jbe@1309: focusedElement.focus(); bsw/jbe@1309: } bsw/jbe@1309: var directChildren = this.element_.childNodes; bsw/jbe@1309: var numChildren = directChildren.length; bsw/jbe@1309: for (var c = 0; c < numChildren; c++) { bsw/jbe@1309: var child = directChildren[c]; bsw/jbe@1309: if (child.classList && child.classList.contains(this.CssClasses_.HEADER)) { bsw/jbe@1309: this.header_ = child; bsw/jbe@1309: } bsw/jbe@1309: if (child.classList && child.classList.contains(this.CssClasses_.DRAWER)) { bsw/jbe@1309: this.drawer_ = child; bsw/jbe@1309: } bsw/jbe@1309: if (child.classList && child.classList.contains(this.CssClasses_.CONTENT)) { bsw/jbe@1309: this.content_ = child; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: window.addEventListener('pageshow', function (e) { bsw/jbe@1309: if (e.persisted) { bsw/jbe@1309: // when page is loaded from back/forward cache bsw/jbe@1309: // trigger repaint to let layout scroll in safari bsw/jbe@1309: this.element_.style.overflowY = 'hidden'; bsw/jbe@1309: requestAnimationFrame(function () { bsw/jbe@1309: this.element_.style.overflowY = ''; bsw/jbe@1309: }.bind(this)); bsw/jbe@1309: } bsw/jbe@1309: }.bind(this), false); bsw/jbe@1309: if (this.header_) { bsw/jbe@1309: this.tabBar_ = this.header_.querySelector('.' + this.CssClasses_.TAB_BAR); bsw/jbe@1309: } bsw/jbe@1309: var mode = this.Mode_.STANDARD; bsw/jbe@1309: if (this.header_) { bsw/jbe@1309: if (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)) { bsw/jbe@1309: mode = this.Mode_.SEAMED; bsw/jbe@1309: } else if (this.header_.classList.contains(this.CssClasses_.HEADER_WATERFALL)) { bsw/jbe@1309: mode = this.Mode_.WATERFALL; bsw/jbe@1309: this.header_.addEventListener('transitionend', this.headerTransitionEndHandler_.bind(this)); bsw/jbe@1309: this.header_.addEventListener('click', this.headerClickHandler_.bind(this)); bsw/jbe@1309: } else if (this.header_.classList.contains(this.CssClasses_.HEADER_SCROLL)) { bsw/jbe@1309: mode = this.Mode_.SCROLL; bsw/jbe@1309: container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER); bsw/jbe@1309: } bsw/jbe@1309: if (mode === this.Mode_.STANDARD) { bsw/jbe@1309: this.header_.classList.add(this.CssClasses_.CASTING_SHADOW); bsw/jbe@1309: if (this.tabBar_) { bsw/jbe@1309: this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW); bsw/jbe@1309: } bsw/jbe@1309: } else if (mode === this.Mode_.SEAMED || mode === this.Mode_.SCROLL) { bsw/jbe@1309: this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW); bsw/jbe@1309: if (this.tabBar_) { bsw/jbe@1309: this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW); bsw/jbe@1309: } bsw/jbe@1309: } else if (mode === this.Mode_.WATERFALL) { bsw/jbe@1309: // Add and remove shadows depending on scroll position. bsw/jbe@1309: // Also add/remove auxiliary class for styling of the compact version of bsw/jbe@1309: // the header. bsw/jbe@1309: this.content_.addEventListener('scroll', this.contentScrollHandler_.bind(this)); bsw/jbe@1309: this.contentScrollHandler_(); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: // Add drawer toggling button to our layout, if we have an openable drawer. bsw/jbe@1309: if (this.drawer_) { bsw/jbe@1309: var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN); bsw/jbe@1309: if (!drawerButton) { bsw/jbe@1309: drawerButton = document.createElement('div'); bsw/jbe@1309: drawerButton.setAttribute('aria-expanded', 'false'); bsw/jbe@1309: drawerButton.setAttribute('role', 'button'); bsw/jbe@1309: drawerButton.setAttribute('tabindex', '0'); bsw/jbe@1309: drawerButton.classList.add(this.CssClasses_.DRAWER_BTN); bsw/jbe@1309: var drawerButtonIcon = document.createElement('i'); bsw/jbe@1309: drawerButtonIcon.classList.add(this.CssClasses_.ICON); bsw/jbe@1309: drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON; bsw/jbe@1309: drawerButton.appendChild(drawerButtonIcon); bsw/jbe@1309: } bsw/jbe@1309: if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) { bsw/jbe@1309: //If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well. bsw/jbe@1309: drawerButton.classList.add(this.CssClasses_.ON_LARGE_SCREEN); bsw/jbe@1309: } else if (this.drawer_.classList.contains(this.CssClasses_.ON_SMALL_SCREEN)) { bsw/jbe@1309: //If drawer has ON_SMALL_SCREEN class then add it to the drawer toggle button as well. bsw/jbe@1309: drawerButton.classList.add(this.CssClasses_.ON_SMALL_SCREEN); bsw/jbe@1309: } bsw/jbe@1309: drawerButton.addEventListener('click', this.drawerToggleHandler_.bind(this)); bsw/jbe@1309: drawerButton.addEventListener('keydown', this.drawerToggleHandler_.bind(this)); bsw/jbe@1309: // Add a class if the layout has a drawer, for altering the left padding. bsw/jbe@1309: // Adds the HAS_DRAWER to the elements since this.header_ may or may bsw/jbe@1309: // not be present. bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.HAS_DRAWER); bsw/jbe@1309: // If we have a fixed header, add the button to the header rather than bsw/jbe@1309: // the layout. bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)) { bsw/jbe@1309: this.header_.insertBefore(drawerButton, this.header_.firstChild); bsw/jbe@1309: } else { bsw/jbe@1309: this.element_.insertBefore(drawerButton, this.content_); bsw/jbe@1309: } bsw/jbe@1309: var obfuscator = document.createElement('div'); bsw/jbe@1309: obfuscator.classList.add(this.CssClasses_.OBFUSCATOR); bsw/jbe@1309: this.element_.appendChild(obfuscator); bsw/jbe@1309: obfuscator.addEventListener('click', this.drawerToggleHandler_.bind(this)); bsw/jbe@1309: this.obfuscator_ = obfuscator; bsw/jbe@1309: this.drawer_.addEventListener('keydown', this.keyboardEventHandler_.bind(this)); bsw/jbe@1309: this.drawer_.setAttribute('aria-hidden', 'true'); bsw/jbe@1309: } bsw/jbe@1309: // Keep an eye on screen size, and add/remove auxiliary class for styling bsw/jbe@1309: // of small screens. bsw/jbe@1309: this.screenSizeMediaQuery_ = window.matchMedia(this.Constant_.MAX_WIDTH); bsw/jbe@1309: this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this)); bsw/jbe@1309: this.screenSizeHandler_(); bsw/jbe@1309: // Initialize tabs, if any. bsw/jbe@1309: if (this.header_ && this.tabBar_) { bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.HAS_TABS); bsw/jbe@1309: var tabContainer = document.createElement('div'); bsw/jbe@1309: tabContainer.classList.add(this.CssClasses_.TAB_CONTAINER); bsw/jbe@1309: this.header_.insertBefore(tabContainer, this.tabBar_); bsw/jbe@1309: this.header_.removeChild(this.tabBar_); bsw/jbe@1309: var leftButton = document.createElement('div'); bsw/jbe@1309: leftButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON); bsw/jbe@1309: leftButton.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON); bsw/jbe@1309: var leftButtonIcon = document.createElement('i'); bsw/jbe@1309: leftButtonIcon.classList.add(this.CssClasses_.ICON); bsw/jbe@1309: leftButtonIcon.textContent = this.Constant_.CHEVRON_LEFT; bsw/jbe@1309: leftButton.appendChild(leftButtonIcon); bsw/jbe@1309: leftButton.addEventListener('click', function () { bsw/jbe@1309: this.tabBar_.scrollLeft -= this.Constant_.TAB_SCROLL_PIXELS; bsw/jbe@1309: }.bind(this)); bsw/jbe@1309: var rightButton = document.createElement('div'); bsw/jbe@1309: rightButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON); bsw/jbe@1309: rightButton.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON); bsw/jbe@1309: var rightButtonIcon = document.createElement('i'); bsw/jbe@1309: rightButtonIcon.classList.add(this.CssClasses_.ICON); bsw/jbe@1309: rightButtonIcon.textContent = this.Constant_.CHEVRON_RIGHT; bsw/jbe@1309: rightButton.appendChild(rightButtonIcon); bsw/jbe@1309: rightButton.addEventListener('click', function () { bsw/jbe@1309: this.tabBar_.scrollLeft += this.Constant_.TAB_SCROLL_PIXELS; bsw/jbe@1309: }.bind(this)); bsw/jbe@1309: tabContainer.appendChild(leftButton); bsw/jbe@1309: tabContainer.appendChild(this.tabBar_); bsw/jbe@1309: tabContainer.appendChild(rightButton); bsw/jbe@1309: // Add and remove tab buttons depending on scroll position and total bsw/jbe@1309: // window size. bsw/jbe@1309: var tabUpdateHandler = function () { bsw/jbe@1309: if (this.tabBar_.scrollLeft > 0) { bsw/jbe@1309: leftButton.classList.add(this.CssClasses_.IS_ACTIVE); bsw/jbe@1309: } else { bsw/jbe@1309: leftButton.classList.remove(this.CssClasses_.IS_ACTIVE); bsw/jbe@1309: } bsw/jbe@1309: if (this.tabBar_.scrollLeft < this.tabBar_.scrollWidth - this.tabBar_.offsetWidth) { bsw/jbe@1309: rightButton.classList.add(this.CssClasses_.IS_ACTIVE); bsw/jbe@1309: } else { bsw/jbe@1309: rightButton.classList.remove(this.CssClasses_.IS_ACTIVE); bsw/jbe@1309: } bsw/jbe@1309: }.bind(this); bsw/jbe@1309: this.tabBar_.addEventListener('scroll', tabUpdateHandler); bsw/jbe@1309: tabUpdateHandler(); bsw/jbe@1309: // Update tabs when the window resizes. bsw/jbe@1309: var windowResizeHandler = function () { bsw/jbe@1309: // Use timeouts to make sure it doesn't happen too often. bsw/jbe@1309: if (this.resizeTimeoutId_) { bsw/jbe@1309: clearTimeout(this.resizeTimeoutId_); bsw/jbe@1309: } bsw/jbe@1309: this.resizeTimeoutId_ = setTimeout(function () { bsw/jbe@1309: tabUpdateHandler(); bsw/jbe@1309: this.resizeTimeoutId_ = null; bsw/jbe@1309: }.bind(this), this.Constant_.RESIZE_TIMEOUT); bsw/jbe@1309: }.bind(this); bsw/jbe@1309: window.addEventListener('resize', windowResizeHandler); bsw/jbe@1309: if (this.tabBar_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) { bsw/jbe@1309: this.tabBar_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS); bsw/jbe@1309: } bsw/jbe@1309: // Select element tabs, document panels bsw/jbe@1309: var tabs = this.tabBar_.querySelectorAll('.' + this.CssClasses_.TAB); bsw/jbe@1309: var panels = this.content_.querySelectorAll('.' + this.CssClasses_.PANEL); bsw/jbe@1309: // Create new tabs for each tab element bsw/jbe@1309: for (var i = 0; i < tabs.length; i++) { bsw/jbe@1309: new MaterialLayoutTab(tabs[i], tabs, panels, this); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_UPGRADED); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Constructor for an individual tab. bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {HTMLElement} tab The HTML element for the tab. bsw/jbe@1309: * @param {!Array} tabs Array with HTML elements for all tabs. bsw/jbe@1309: * @param {!Array} panels Array with HTML elements for all panels. bsw/jbe@1309: * @param {MaterialLayout} layout The MaterialLayout object that owns the tab. bsw/jbe@1309: */ bsw/jbe@1309: function MaterialLayoutTab(tab, tabs, panels, layout) { bsw/jbe@1309: /** bsw/jbe@1309: * Auxiliary method to programmatically select a tab in the UI. bsw/jbe@1309: */ bsw/jbe@1309: function selectTab() { bsw/jbe@1309: var href = tab.href.split('#')[1]; bsw/jbe@1309: var panel = layout.content_.querySelector('#' + href); bsw/jbe@1309: layout.resetTabState_(tabs); bsw/jbe@1309: layout.resetPanelState_(panels); bsw/jbe@1309: tab.classList.add(layout.CssClasses_.IS_ACTIVE); bsw/jbe@1309: panel.classList.add(layout.CssClasses_.IS_ACTIVE); bsw/jbe@1309: } bsw/jbe@1309: if (layout.tabBar_.classList.contains(layout.CssClasses_.JS_RIPPLE_EFFECT)) { bsw/jbe@1309: var rippleContainer = document.createElement('span'); bsw/jbe@1309: rippleContainer.classList.add(layout.CssClasses_.RIPPLE_CONTAINER); bsw/jbe@1309: rippleContainer.classList.add(layout.CssClasses_.JS_RIPPLE_EFFECT); bsw/jbe@1309: var ripple = document.createElement('span'); bsw/jbe@1309: ripple.classList.add(layout.CssClasses_.RIPPLE); bsw/jbe@1309: rippleContainer.appendChild(ripple); bsw/jbe@1309: tab.appendChild(rippleContainer); bsw/jbe@1309: } bsw/jbe@1309: tab.addEventListener('click', function (e) { bsw/jbe@1309: if (tab.getAttribute('href').charAt(0) === '#') { bsw/jbe@1309: e.preventDefault(); bsw/jbe@1309: selectTab(); bsw/jbe@1309: } bsw/jbe@1309: }); bsw/jbe@1309: tab.show = selectTab; bsw/jbe@1309: } bsw/jbe@1309: window['MaterialLayoutTab'] = MaterialLayoutTab; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialLayout, bsw/jbe@1309: classAsString: 'MaterialLayout', bsw/jbe@1309: cssClass: 'mdl-js-layout' bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Data Table Card MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {Element} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialDataTable = function MaterialDataTable(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialDataTable'] = MaterialDataTable; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialDataTable.prototype.Constant_ = {}; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialDataTable.prototype.CssClasses_ = { bsw/jbe@1309: DATA_TABLE: 'mdl-data-table', bsw/jbe@1309: SELECTABLE: 'mdl-data-table--selectable', bsw/jbe@1309: SELECT_ELEMENT: 'mdl-data-table__select', bsw/jbe@1309: IS_SELECTED: 'is-selected', bsw/jbe@1309: IS_UPGRADED: 'is-upgraded' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Generates and returns a function that toggles the selection state of a bsw/jbe@1309: * single row (or multiple rows). bsw/jbe@1309: * bsw/jbe@1309: * @param {Element} checkbox Checkbox that toggles the selection state. bsw/jbe@1309: * @param {Element} row Row to toggle when checkbox changes. bsw/jbe@1309: * @param {(Array|NodeList)=} opt_rows Rows to toggle when checkbox changes. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialDataTable.prototype.selectRow_ = function (checkbox, row, opt_rows) { bsw/jbe@1309: if (row) { bsw/jbe@1309: return function () { bsw/jbe@1309: if (checkbox.checked) { bsw/jbe@1309: row.classList.add(this.CssClasses_.IS_SELECTED); bsw/jbe@1309: } else { bsw/jbe@1309: row.classList.remove(this.CssClasses_.IS_SELECTED); bsw/jbe@1309: } bsw/jbe@1309: }.bind(this); bsw/jbe@1309: } bsw/jbe@1309: if (opt_rows) { bsw/jbe@1309: return function () { bsw/jbe@1309: var i; bsw/jbe@1309: var el; bsw/jbe@1309: if (checkbox.checked) { bsw/jbe@1309: for (i = 0; i < opt_rows.length; i++) { bsw/jbe@1309: el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox'); bsw/jbe@1309: el['MaterialCheckbox'].check(); bsw/jbe@1309: opt_rows[i].classList.add(this.CssClasses_.IS_SELECTED); bsw/jbe@1309: } bsw/jbe@1309: } else { bsw/jbe@1309: for (i = 0; i < opt_rows.length; i++) { bsw/jbe@1309: el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox'); bsw/jbe@1309: el['MaterialCheckbox'].uncheck(); bsw/jbe@1309: opt_rows[i].classList.remove(this.CssClasses_.IS_SELECTED); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: }.bind(this); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Creates a checkbox for a single or or multiple rows and hooks up the bsw/jbe@1309: * event handling. bsw/jbe@1309: * bsw/jbe@1309: * @param {Element} row Row to toggle when checkbox changes. bsw/jbe@1309: * @param {(Array|NodeList)=} opt_rows Rows to toggle when checkbox changes. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialDataTable.prototype.createCheckbox_ = function (row, opt_rows) { bsw/jbe@1309: var label = document.createElement('label'); bsw/jbe@1309: var labelClasses = [ bsw/jbe@1309: 'mdl-checkbox', bsw/jbe@1309: 'mdl-js-checkbox', bsw/jbe@1309: 'mdl-js-ripple-effect', bsw/jbe@1309: this.CssClasses_.SELECT_ELEMENT bsw/jbe@1309: ]; bsw/jbe@1309: label.className = labelClasses.join(' '); bsw/jbe@1309: var checkbox = document.createElement('input'); bsw/jbe@1309: checkbox.type = 'checkbox'; bsw/jbe@1309: checkbox.classList.add('mdl-checkbox__input'); bsw/jbe@1309: if (row) { bsw/jbe@1309: checkbox.checked = row.classList.contains(this.CssClasses_.IS_SELECTED); bsw/jbe@1309: checkbox.addEventListener('change', this.selectRow_(checkbox, row)); bsw/jbe@1309: } else if (opt_rows) { bsw/jbe@1309: checkbox.addEventListener('change', this.selectRow_(checkbox, null, opt_rows)); bsw/jbe@1309: } bsw/jbe@1309: label.appendChild(checkbox); bsw/jbe@1309: componentHandler.upgradeElement(label, 'MaterialCheckbox'); bsw/jbe@1309: return label; bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialDataTable.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: var firstHeader = this.element_.querySelector('th'); bsw/jbe@1309: var bodyRows = Array.prototype.slice.call(this.element_.querySelectorAll('tbody tr')); bsw/jbe@1309: var footRows = Array.prototype.slice.call(this.element_.querySelectorAll('tfoot tr')); bsw/jbe@1309: var rows = bodyRows.concat(footRows); bsw/jbe@1309: if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)) { bsw/jbe@1309: var th = document.createElement('th'); bsw/jbe@1309: var headerCheckbox = this.createCheckbox_(null, rows); bsw/jbe@1309: th.appendChild(headerCheckbox); bsw/jbe@1309: firstHeader.parentElement.insertBefore(th, firstHeader); bsw/jbe@1309: for (var i = 0; i < rows.length; i++) { bsw/jbe@1309: var firstCell = rows[i].querySelector('td'); bsw/jbe@1309: if (firstCell) { bsw/jbe@1309: var td = document.createElement('td'); bsw/jbe@1309: if (rows[i].parentNode.nodeName.toUpperCase() === 'TBODY') { bsw/jbe@1309: var rowCheckbox = this.createCheckbox_(rows[i]); bsw/jbe@1309: td.appendChild(rowCheckbox); bsw/jbe@1309: } bsw/jbe@1309: rows[i].insertBefore(td, firstCell); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: this.element_.classList.add(this.CssClasses_.IS_UPGRADED); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialDataTable, bsw/jbe@1309: classAsString: 'MaterialDataTable', bsw/jbe@1309: cssClass: 'mdl-js-data-table' bsw/jbe@1309: }); bsw/jbe@1309: /** bsw/jbe@1309: * @license bsw/jbe@1309: * Copyright 2015 Google Inc. All Rights Reserved. bsw/jbe@1309: * bsw/jbe@1309: * Licensed under the Apache License, Version 2.0 (the "License"); bsw/jbe@1309: * you may not use this file except in compliance with the License. bsw/jbe@1309: * You may obtain a copy of the License at bsw/jbe@1309: * bsw/jbe@1309: * http://www.apache.org/licenses/LICENSE-2.0 bsw/jbe@1309: * bsw/jbe@1309: * Unless required by applicable law or agreed to in writing, software bsw/jbe@1309: * distributed under the License is distributed on an "AS IS" BASIS, bsw/jbe@1309: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. bsw/jbe@1309: * See the License for the specific language governing permissions and bsw/jbe@1309: * limitations under the License. bsw/jbe@1309: */ bsw/jbe@1309: /** bsw/jbe@1309: * Class constructor for Ripple MDL component. bsw/jbe@1309: * Implements MDL component design pattern defined at: bsw/jbe@1309: * https://github.com/jasonmayes/mdl-component-design-pattern bsw/jbe@1309: * bsw/jbe@1309: * @constructor bsw/jbe@1309: * @param {HTMLElement} element The element that will be upgraded. bsw/jbe@1309: */ bsw/jbe@1309: var MaterialRipple = function MaterialRipple(element) { bsw/jbe@1309: this.element_ = element; bsw/jbe@1309: // Initialize instance. bsw/jbe@1309: this.init(); bsw/jbe@1309: }; bsw/jbe@1309: window['MaterialRipple'] = MaterialRipple; bsw/jbe@1309: /** bsw/jbe@1309: * Store constants in one place so they can be updated easily. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string | number} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialRipple.prototype.Constant_ = { bsw/jbe@1309: INITIAL_SCALE: 'scale(0.0001, 0.0001)', bsw/jbe@1309: INITIAL_SIZE: '1px', bsw/jbe@1309: INITIAL_OPACITY: '0.4', bsw/jbe@1309: FINAL_OPACITY: '0', bsw/jbe@1309: FINAL_SCALE: '' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Store strings for class names defined by this component that are used in bsw/jbe@1309: * JavaScript. This allows us to simply change it in one place should we bsw/jbe@1309: * decide to modify at a later date. bsw/jbe@1309: * bsw/jbe@1309: * @enum {string} bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialRipple.prototype.CssClasses_ = { bsw/jbe@1309: RIPPLE_CENTER: 'mdl-ripple--center', bsw/jbe@1309: RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events', bsw/jbe@1309: RIPPLE: 'mdl-ripple', bsw/jbe@1309: IS_ANIMATING: 'is-animating', bsw/jbe@1309: IS_VISIBLE: 'is-visible' bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle mouse / finger down on element. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialRipple.prototype.downHandler_ = function (event) { bsw/jbe@1309: if (!this.rippleElement_.style.width && !this.rippleElement_.style.height) { bsw/jbe@1309: var rect = this.element_.getBoundingClientRect(); bsw/jbe@1309: this.boundHeight = rect.height; bsw/jbe@1309: this.boundWidth = rect.width; bsw/jbe@1309: this.rippleSize_ = Math.sqrt(rect.width * rect.width + rect.height * rect.height) * 2 + 2; bsw/jbe@1309: this.rippleElement_.style.width = this.rippleSize_ + 'px'; bsw/jbe@1309: this.rippleElement_.style.height = this.rippleSize_ + 'px'; bsw/jbe@1309: } bsw/jbe@1309: this.rippleElement_.classList.add(this.CssClasses_.IS_VISIBLE); bsw/jbe@1309: if (event.type === 'mousedown' && this.ignoringMouseDown_) { bsw/jbe@1309: this.ignoringMouseDown_ = false; bsw/jbe@1309: } else { bsw/jbe@1309: if (event.type === 'touchstart') { bsw/jbe@1309: this.ignoringMouseDown_ = true; bsw/jbe@1309: } bsw/jbe@1309: var frameCount = this.getFrameCount(); bsw/jbe@1309: if (frameCount > 0) { bsw/jbe@1309: return; bsw/jbe@1309: } bsw/jbe@1309: this.setFrameCount(1); bsw/jbe@1309: var bound = event.currentTarget.getBoundingClientRect(); bsw/jbe@1309: var x; bsw/jbe@1309: var y; bsw/jbe@1309: // Check if we are handling a keyboard click. bsw/jbe@1309: if (event.clientX === 0 && event.clientY === 0) { bsw/jbe@1309: x = Math.round(bound.width / 2); bsw/jbe@1309: y = Math.round(bound.height / 2); bsw/jbe@1309: } else { bsw/jbe@1309: var clientX = event.clientX ? event.clientX : event.touches[0].clientX; bsw/jbe@1309: var clientY = event.clientY ? event.clientY : event.touches[0].clientY; bsw/jbe@1309: x = Math.round(clientX - bound.left); bsw/jbe@1309: y = Math.round(clientY - bound.top); bsw/jbe@1309: } bsw/jbe@1309: this.setRippleXY(x, y); bsw/jbe@1309: this.setRippleStyles(true); bsw/jbe@1309: window.requestAnimationFrame(this.animFrameHandler.bind(this)); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handle mouse / finger up on element. bsw/jbe@1309: * bsw/jbe@1309: * @param {Event} event The event that fired. bsw/jbe@1309: * @private bsw/jbe@1309: */ bsw/jbe@1309: MaterialRipple.prototype.upHandler_ = function (event) { bsw/jbe@1309: // Don't fire for the artificial "mouseup" generated by a double-click. bsw/jbe@1309: if (event && event.detail !== 2) { bsw/jbe@1309: // Allow a repaint to occur before removing this class, so the animation bsw/jbe@1309: // shows for tap events, which seem to trigger a mouseup too soon after bsw/jbe@1309: // mousedown. bsw/jbe@1309: window.setTimeout(function () { bsw/jbe@1309: this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE); bsw/jbe@1309: }.bind(this), 0); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Initialize element. bsw/jbe@1309: */ bsw/jbe@1309: MaterialRipple.prototype.init = function () { bsw/jbe@1309: if (this.element_) { bsw/jbe@1309: var recentering = this.element_.classList.contains(this.CssClasses_.RIPPLE_CENTER); bsw/jbe@1309: if (!this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT_IGNORE_EVENTS)) { bsw/jbe@1309: this.rippleElement_ = this.element_.querySelector('.' + this.CssClasses_.RIPPLE); bsw/jbe@1309: this.frameCount_ = 0; bsw/jbe@1309: this.rippleSize_ = 0; bsw/jbe@1309: this.x_ = 0; bsw/jbe@1309: this.y_ = 0; bsw/jbe@1309: // Touch start produces a compat mouse down event, which would cause a bsw/jbe@1309: // second ripples. To avoid that, we use this property to ignore the first bsw/jbe@1309: // mouse down after a touch start. bsw/jbe@1309: this.ignoringMouseDown_ = false; bsw/jbe@1309: this.boundDownHandler = this.downHandler_.bind(this); bsw/jbe@1309: this.element_.addEventListener('mousedown', this.boundDownHandler); bsw/jbe@1309: this.element_.addEventListener('touchstart', this.boundDownHandler); bsw/jbe@1309: this.boundUpHandler = this.upHandler_.bind(this); bsw/jbe@1309: this.element_.addEventListener('mouseup', this.boundUpHandler); bsw/jbe@1309: this.element_.addEventListener('mouseleave', this.boundUpHandler); bsw/jbe@1309: this.element_.addEventListener('touchend', this.boundUpHandler); bsw/jbe@1309: this.element_.addEventListener('blur', this.boundUpHandler); bsw/jbe@1309: /** bsw/jbe@1309: * Getter for frameCount_. bsw/jbe@1309: * @return {number} the frame count. bsw/jbe@1309: */ bsw/jbe@1309: this.getFrameCount = function () { bsw/jbe@1309: return this.frameCount_; bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Setter for frameCount_. bsw/jbe@1309: * @param {number} fC the frame count. bsw/jbe@1309: */ bsw/jbe@1309: this.setFrameCount = function (fC) { bsw/jbe@1309: this.frameCount_ = fC; bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Getter for rippleElement_. bsw/jbe@1309: * @return {Element} the ripple element. bsw/jbe@1309: */ bsw/jbe@1309: this.getRippleElement = function () { bsw/jbe@1309: return this.rippleElement_; bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Sets the ripple X and Y coordinates. bsw/jbe@1309: * @param {number} newX the new X coordinate bsw/jbe@1309: * @param {number} newY the new Y coordinate bsw/jbe@1309: */ bsw/jbe@1309: this.setRippleXY = function (newX, newY) { bsw/jbe@1309: this.x_ = newX; bsw/jbe@1309: this.y_ = newY; bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Sets the ripple styles. bsw/jbe@1309: * @param {boolean} start whether or not this is the start frame. bsw/jbe@1309: */ bsw/jbe@1309: this.setRippleStyles = function (start) { bsw/jbe@1309: if (this.rippleElement_ !== null) { bsw/jbe@1309: var transformString; bsw/jbe@1309: var scale; bsw/jbe@1309: var size; bsw/jbe@1309: var offset = 'translate(' + this.x_ + 'px, ' + this.y_ + 'px)'; bsw/jbe@1309: if (start) { bsw/jbe@1309: scale = this.Constant_.INITIAL_SCALE; bsw/jbe@1309: size = this.Constant_.INITIAL_SIZE; bsw/jbe@1309: } else { bsw/jbe@1309: scale = this.Constant_.FINAL_SCALE; bsw/jbe@1309: size = this.rippleSize_ + 'px'; bsw/jbe@1309: if (recentering) { bsw/jbe@1309: offset = 'translate(' + this.boundWidth / 2 + 'px, ' + this.boundHeight / 2 + 'px)'; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: transformString = 'translate(-50%, -50%) ' + offset + scale; bsw/jbe@1309: this.rippleElement_.style.webkitTransform = transformString; bsw/jbe@1309: this.rippleElement_.style.msTransform = transformString; bsw/jbe@1309: this.rippleElement_.style.transform = transformString; bsw/jbe@1309: if (start) { bsw/jbe@1309: this.rippleElement_.classList.remove(this.CssClasses_.IS_ANIMATING); bsw/jbe@1309: } else { bsw/jbe@1309: this.rippleElement_.classList.add(this.CssClasses_.IS_ANIMATING); bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: /** bsw/jbe@1309: * Handles an animation frame. bsw/jbe@1309: */ bsw/jbe@1309: this.animFrameHandler = function () { bsw/jbe@1309: if (this.frameCount_-- > 0) { bsw/jbe@1309: window.requestAnimationFrame(this.animFrameHandler.bind(this)); bsw/jbe@1309: } else { bsw/jbe@1309: this.setRippleStyles(false); bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: } bsw/jbe@1309: } bsw/jbe@1309: }; bsw/jbe@1309: // The component registers itself. It can assume componentHandler is available bsw/jbe@1309: // in the global scope. bsw/jbe@1309: componentHandler.register({ bsw/jbe@1309: constructor: MaterialRipple, bsw/jbe@1309: classAsString: 'MaterialRipple', bsw/jbe@1309: cssClass: 'mdl-js-ripple-effect', bsw/jbe@1309: widget: false bsw/jbe@1309: }); bsw/jbe@1309: }());