Repository: andyforever/sequelizer
Branch: master
Commit: a16186461090
Files: 12
Total size: 169.4 KB
Directory structure:
gitextract_bb9tkf59/
├── .gitignore
├── LICENSE.md
├── README.md
├── package.json
└── src/
├── index.html
├── main.js
├── mdl/
│ ├── LICENSE
│ ├── bower.json
│ ├── material.js
│ └── package.json
├── preload.js
└── renderer.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
build/
# vim
*.swo
*.swp
================================================
FILE: LICENSE.md
================================================
# Do whatever you want!
================================================
FILE: README.md
================================================
# Sequelizer
### A desktop application to export [sequelize](https://sequelize.org/) models automatically and visually.
```bash
# Clone this repository
git clone https://github.com/andyforever/sequelizer.git
# Go into the repository
cd sequelizer
# Install dependencies
npm install
# Run the app
npm start
```
Or do the same by executing one line
```bash
git clone https://github.com/andyforever/sequelizer.git && cd sequelizer && npm install && npm start
```
Specially Thanks the great projects.
[sequelize](https://github.com/sequelize/sequelize)
[squelize-auto](https://github.com/sequelize/sequelize-auto)
================================================
FILE: package.json
================================================
{
"name": "sequelizer",
"version": "2.0.0",
"description": "A minimal Electron application",
"main": "./src/main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/andyforever/sequelizer.git",
"keywords": [
"sequelize",
"sequelize-auto",
"desktop",
"gui",
"app"
],
"author": "云数",
"license": "MIT",
"devDependencies": {
"electron": "^31.4.0",
"tedious": "^2.3.1"
},
"dependencies": {
"electron": "latest",
"mysql": "^2.18.1",
"mysql2": "^2.3.3",
"pg": "^6.1.2",
"sequelize": "^6.21.4",
"sequelize-auto": "latest"
}
}
================================================
FILE: src/index.html
================================================
Sequelizer
================================================
FILE: src/main.js
================================================
const { app, Menu, BrowserWindow, dialog, ipcMain } = require('electron/main')
const path = require('node:path')
const isMac = process.platform === 'darwin'
const template = [...(isMac ? [{
label: app.name,
submenu: [{
label: `About ${app.name}`,
role: 'about'
}]
}, {
label: 'File',
submenu: [
{ role: 'close' }
]
}, {
label: "Edit",
submenu: [
{ role: 'undo' },
{ role: 'redo' },
{ type: 'separator' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' },
{ role: 'pasteAndMatchStyle' },
{ role: 'delete' },
{ role: 'selectAll' },
{ type: 'separator' },
{
label: 'Speech',
submenu: [
{ role: 'startSpeaking' },
{ role: 'stopSpeaking' }
]
}
]
}] : [
{
label: 'File',
submenu: [
{ role: 'quit' }
]
}
])];
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
function createWindow() {
const win = new BrowserWindow({
width: 860,
height: 650,
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname, 'preload.js')
},
icon: path.join(__dirname, 'images/icon.png')
})
win.loadFile(path.join(__dirname, 'index.html'));
// win.webContents.openDevTools();
}
app.whenReady().then(() => {
ipcMain.handle('dialog:open', async (event, args) => {
const result = await dialog.showOpenDialog({ properties: ['openDirectory', 'createDirectory'] });
return result.filePaths;
})
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
================================================
FILE: src/mdl/LICENSE
================================================
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright 2015 Google Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
All code in any directories or sub-directories that end with *.html or
*.css is licensed under the Creative Commons Attribution International
4.0 License, which full text can be found here:
https://creativecommons.org/licenses/by/4.0/legalcode.
As an exception to this license, all html or css that is generated by
the software at the direction of the user is copyright the user. The
user has full ownership and control over such content, including
whether and how they wish to license it.
================================================
FILE: src/mdl/bower.json
================================================
{
"name": "material-design-lite",
"version": "1.3.0",
"homepage": "https://github.com/google/material-design-lite",
"authors": [
"Material Design Lite team"
],
"description": "Material Design Components in CSS, JS and HTML",
"main": [
"material.min.css",
"material.min.js"
],
"keywords": [
"material",
"design",
"styleguide",
"style",
"guide"
],
"license": "Apache-2",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"./lib/.bower_components",
"test",
"tests"
]
}
================================================
FILE: src/mdl/material.js
================================================
;(function() {
"use strict";
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* A component handler interface using the revealing module design pattern.
* More details on this design pattern here:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @author Jason Mayes.
*/
/* exported componentHandler */
// Pre-defining the componentHandler interface, for closure documentation and
// static verification.
var componentHandler = {
/**
* Searches existing DOM for elements of our component type and upgrades them
* if they have not already been upgraded.
*
* @param {string=} optJsClass the programatic name of the element class we
* need to create a new instance of.
* @param {string=} optCssClass the name of the CSS class elements of this
* type will have.
*/
upgradeDom: function(optJsClass, optCssClass) {},
/**
* Upgrades a specific element rather than all in the DOM.
*
* @param {!Element} element The element we wish to upgrade.
* @param {string=} optJsClass Optional name of the class we want to upgrade
* the element to.
*/
upgradeElement: function(element, optJsClass) {},
/**
* Upgrades a specific list of elements rather than all in the DOM.
*
* @param {!Element|!Array|!NodeList|!HTMLCollection} elements
* The elements we wish to upgrade.
*/
upgradeElements: function(elements) {},
/**
* Upgrades all registered components found in the current DOM. This is
* automatically called on window load.
*/
upgradeAllRegistered: function() {},
/**
* Allows user to be alerted to any upgrades that are performed for a given
* component type
*
* @param {string} jsClass The class name of the MDL component we wish
* to hook into for any upgrades performed.
* @param {function(!HTMLElement)} callback The function to call upon an
* upgrade. This function should expect 1 parameter - the HTMLElement which
* got upgraded.
*/
registerUpgradedCallback: function(jsClass, callback) {},
/**
* Registers a class for future use and attempts to upgrade existing DOM.
*
* @param {componentHandler.ComponentConfigPublic} config the registration configuration
*/
register: function(config) {},
/**
* Downgrade either a given node, an array of nodes, or a NodeList.
*
* @param {!Node|!Array|!NodeList} nodes
*/
downgradeElements: function(nodes) {}
};
componentHandler = (function() {
'use strict';
/** @type {!Array} */
var registeredComponents_ = [];
/** @type {!Array} */
var createdComponents_ = [];
var componentConfigProperty_ = 'mdlComponentConfigInternal_';
/**
* Searches registered components for a class we are interested in using.
* Optionally replaces a match with passed object if specified.
*
* @param {string} name The name of a class we want to use.
* @param {componentHandler.ComponentConfig=} optReplace Optional object to replace match with.
* @return {!Object|boolean}
* @private
*/
function findRegisteredClass_(name, optReplace) {
for (var i = 0; i < registeredComponents_.length; i++) {
if (registeredComponents_[i].className === name) {
if (typeof optReplace !== 'undefined') {
registeredComponents_[i] = optReplace;
}
return registeredComponents_[i];
}
}
return false;
}
/**
* Returns an array of the classNames of the upgraded classes on the element.
*
* @param {!Element} element The element to fetch data from.
* @return {!Array}
* @private
*/
function getUpgradedListOfElement_(element) {
var dataUpgraded = element.getAttribute('data-upgraded');
// Use `['']` as default value to conform the `,name,name...` style.
return dataUpgraded === null ? [''] : dataUpgraded.split(',');
}
/**
* Returns true if the given element has already been upgraded for the given
* class.
*
* @param {!Element} element The element we want to check.
* @param {string} jsClass The class to check for.
* @returns {boolean}
* @private
*/
function isElementUpgraded_(element, jsClass) {
var upgradedList = getUpgradedListOfElement_(element);
return upgradedList.indexOf(jsClass) !== -1;
}
/**
* Create an event object.
*
* @param {string} eventType The type name of the event.
* @param {boolean} bubbles Whether the event should bubble up the DOM.
* @param {boolean} cancelable Whether the event can be canceled.
* @returns {!Event}
*/
function createEvent_(eventType, bubbles, cancelable) {
if ('CustomEvent' in window && typeof window.CustomEvent === 'function') {
return new CustomEvent(eventType, {
bubbles: bubbles,
cancelable: cancelable
});
} else {
var ev = document.createEvent('Events');
ev.initEvent(eventType, bubbles, cancelable);
return ev;
}
}
/**
* Searches existing DOM for elements of our component type and upgrades them
* if they have not already been upgraded.
*
* @param {string=} optJsClass the programatic name of the element class we
* need to create a new instance of.
* @param {string=} optCssClass the name of the CSS class elements of this
* type will have.
*/
function upgradeDomInternal(optJsClass, optCssClass) {
if (typeof optJsClass === 'undefined' &&
typeof optCssClass === 'undefined') {
for (var i = 0; i < registeredComponents_.length; i++) {
upgradeDomInternal(registeredComponents_[i].className,
registeredComponents_[i].cssClass);
}
} else {
var jsClass = /** @type {string} */ (optJsClass);
if (typeof optCssClass === 'undefined') {
var registeredClass = findRegisteredClass_(jsClass);
if (registeredClass) {
optCssClass = registeredClass.cssClass;
}
}
var elements = document.querySelectorAll('.' + optCssClass);
for (var n = 0; n < elements.length; n++) {
upgradeElementInternal(elements[n], jsClass);
}
}
}
/**
* Upgrades a specific element rather than all in the DOM.
*
* @param {!Element} element The element we wish to upgrade.
* @param {string=} optJsClass Optional name of the class we want to upgrade
* the element to.
*/
function upgradeElementInternal(element, optJsClass) {
// Verify argument type.
if (!(typeof element === 'object' && element instanceof Element)) {
throw new Error('Invalid argument provided to upgrade MDL element.');
}
// Allow upgrade to be canceled by canceling emitted event.
var upgradingEv = createEvent_('mdl-componentupgrading', true, true);
element.dispatchEvent(upgradingEv);
if (upgradingEv.defaultPrevented) {
return;
}
var upgradedList = getUpgradedListOfElement_(element);
var classesToUpgrade = [];
// If jsClass is not provided scan the registered components to find the
// ones matching the element's CSS classList.
if (!optJsClass) {
var classList = element.classList;
registeredComponents_.forEach(function(component) {
// Match CSS & Not to be upgraded & Not upgraded.
if (classList.contains(component.cssClass) &&
classesToUpgrade.indexOf(component) === -1 &&
!isElementUpgraded_(element, component.className)) {
classesToUpgrade.push(component);
}
});
} else if (!isElementUpgraded_(element, optJsClass)) {
classesToUpgrade.push(findRegisteredClass_(optJsClass));
}
// Upgrade the element for each classes.
for (var i = 0, n = classesToUpgrade.length, registeredClass; i < n; i++) {
registeredClass = classesToUpgrade[i];
if (registeredClass) {
// Mark element as upgraded.
upgradedList.push(registeredClass.className);
element.setAttribute('data-upgraded', upgradedList.join(','));
var instance = new registeredClass.classConstructor(element);
instance[componentConfigProperty_] = registeredClass;
createdComponents_.push(instance);
// Call any callbacks the user has registered with this component type.
for (var j = 0, m = registeredClass.callbacks.length; j < m; j++) {
registeredClass.callbacks[j](element);
}
if (registeredClass.widget) {
// Assign per element instance for control over API
element[registeredClass.className] = instance;
}
} else {
throw new Error(
'Unable to find a registered component for the given class.');
}
var upgradedEv = createEvent_('mdl-componentupgraded', true, false);
element.dispatchEvent(upgradedEv);
}
}
/**
* Upgrades a specific list of elements rather than all in the DOM.
*
* @param {!Element|!Array|!NodeList|!HTMLCollection} elements
* The elements we wish to upgrade.
*/
function upgradeElementsInternal(elements) {
if (!Array.isArray(elements)) {
if (elements instanceof Element) {
elements = [elements];
} else {
elements = Array.prototype.slice.call(elements);
}
}
for (var i = 0, n = elements.length, element; i < n; i++) {
element = elements[i];
if (element instanceof HTMLElement) {
upgradeElementInternal(element);
if (element.children.length > 0) {
upgradeElementsInternal(element.children);
}
}
}
}
/**
* Registers a class for future use and attempts to upgrade existing DOM.
*
* @param {componentHandler.ComponentConfigPublic} config
*/
function registerInternal(config) {
// In order to support both Closure-compiled and uncompiled code accessing
// this method, we need to allow for both the dot and array syntax for
// property access. You'll therefore see the `foo.bar || foo['bar']`
// pattern repeated across this method.
var widgetMissing = (typeof config.widget === 'undefined' &&
typeof config['widget'] === 'undefined');
var widget = true;
if (!widgetMissing) {
widget = config.widget || config['widget'];
}
var newConfig = /** @type {componentHandler.ComponentConfig} */ ({
classConstructor: config.constructor || config['constructor'],
className: config.classAsString || config['classAsString'],
cssClass: config.cssClass || config['cssClass'],
widget: widget,
callbacks: []
});
registeredComponents_.forEach(function(item) {
if (item.cssClass === newConfig.cssClass) {
throw new Error('The provided cssClass has already been registered: ' + item.cssClass);
}
if (item.className === newConfig.className) {
throw new Error('The provided className has already been registered');
}
});
if (config.constructor.prototype
.hasOwnProperty(componentConfigProperty_)) {
throw new Error(
'MDL component classes must not have ' + componentConfigProperty_ +
' defined as a property.');
}
var found = findRegisteredClass_(config.classAsString, newConfig);
if (!found) {
registeredComponents_.push(newConfig);
}
}
/**
* Allows user to be alerted to any upgrades that are performed for a given
* component type
*
* @param {string} jsClass The class name of the MDL component we wish
* to hook into for any upgrades performed.
* @param {function(!HTMLElement)} callback The function to call upon an
* upgrade. This function should expect 1 parameter - the HTMLElement which
* got upgraded.
*/
function registerUpgradedCallbackInternal(jsClass, callback) {
var regClass = findRegisteredClass_(jsClass);
if (regClass) {
regClass.callbacks.push(callback);
}
}
/**
* Upgrades all registered components found in the current DOM. This is
* automatically called on window load.
*/
function upgradeAllRegisteredInternal() {
for (var n = 0; n < registeredComponents_.length; n++) {
upgradeDomInternal(registeredComponents_[n].className);
}
}
/**
* Check the component for the downgrade method.
* Execute if found.
* Remove component from createdComponents list.
*
* @param {?componentHandler.Component} component
*/
function deconstructComponentInternal(component) {
if (component) {
var componentIndex = createdComponents_.indexOf(component);
createdComponents_.splice(componentIndex, 1);
var upgrades = component.element_.getAttribute('data-upgraded').split(',');
var componentPlace = upgrades.indexOf(component[componentConfigProperty_].classAsString);
upgrades.splice(componentPlace, 1);
component.element_.setAttribute('data-upgraded', upgrades.join(','));
var ev = createEvent_('mdl-componentdowngraded', true, false);
component.element_.dispatchEvent(ev);
}
}
/**
* Downgrade either a given node, an array of nodes, or a NodeList.
*
* @param {!Node|!Array|!NodeList} nodes
*/
function downgradeNodesInternal(nodes) {
/**
* Auxiliary function to downgrade a single node.
* @param {!Node} node the node to be downgraded
*/
var downgradeNode = function(node) {
createdComponents_.filter(function(item) {
return item.element_ === node;
}).forEach(deconstructComponentInternal);
};
if (nodes instanceof Array || nodes instanceof NodeList) {
for (var n = 0; n < nodes.length; n++) {
downgradeNode(nodes[n]);
}
} else if (nodes instanceof Node) {
downgradeNode(nodes);
} else {
throw new Error('Invalid argument provided to downgrade MDL nodes.');
}
}
// Now return the functions that should be made public with their publicly
// facing names...
return {
upgradeDom: upgradeDomInternal,
upgradeElement: upgradeElementInternal,
upgradeElements: upgradeElementsInternal,
upgradeAllRegistered: upgradeAllRegisteredInternal,
registerUpgradedCallback: registerUpgradedCallbackInternal,
register: registerInternal,
downgradeElements: downgradeNodesInternal
};
})();
/**
* Describes the type of a registered component type managed by
* componentHandler. Provided for benefit of the Closure compiler.
*
* @typedef {{
* constructor: Function,
* classAsString: string,
* cssClass: string,
* widget: (string|boolean|undefined)
* }}
*/
componentHandler.ComponentConfigPublic; // jshint ignore:line
/**
* Describes the type of a registered component type managed by
* componentHandler. Provided for benefit of the Closure compiler.
*
* @typedef {{
* constructor: !Function,
* className: string,
* cssClass: string,
* widget: (string|boolean),
* callbacks: !Array
* }}
*/
componentHandler.ComponentConfig; // jshint ignore:line
/**
* Created component (i.e., upgraded element) type as managed by
* componentHandler. Provided for benefit of the Closure compiler.
*
* @typedef {{
* element_: !HTMLElement,
* className: string,
* classAsString: string,
* cssClass: string,
* widget: string
* }}
*/
componentHandler.Component; // jshint ignore:line
// Export all symbols, for the benefit of Closure compiler.
// No effect on uncompiled code.
componentHandler['upgradeDom'] = componentHandler.upgradeDom;
componentHandler['upgradeElement'] = componentHandler.upgradeElement;
componentHandler['upgradeElements'] = componentHandler.upgradeElements;
componentHandler['upgradeAllRegistered'] =
componentHandler.upgradeAllRegistered;
componentHandler['registerUpgradedCallback'] =
componentHandler.registerUpgradedCallback;
componentHandler['register'] = componentHandler.register;
componentHandler['downgradeElements'] = componentHandler.downgradeElements;
window.componentHandler = componentHandler;
window['componentHandler'] = componentHandler;
window.addEventListener('load', function() {
'use strict';
/**
* Performs a "Cutting the mustard" test. If the browser supports the features
* tested, adds a mdl-js class to the element. It then upgrades all MDL
* components requiring JavaScript.
*/
if ('classList' in document.createElement('div') &&
'querySelector' in document &&
'addEventListener' in window && Array.prototype.forEach) {
document.documentElement.classList.add('mdl-js');
componentHandler.upgradeAllRegistered();
} else {
/**
* Dummy function to avoid JS errors.
*/
componentHandler.upgradeElement = function() {};
/**
* Dummy function to avoid JS errors.
*/
componentHandler.register = function() {};
}
});
// Source: https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js
// Adapted from https://gist.github.com/paulirish/1579671 which derived from
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller.
// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
// MIT license
if (!Date.now) {
/**
* Date.now polyfill.
* @return {number} the current Date
*/
Date.now = function () {
return new Date().getTime();
};
Date['now'] = Date.now;
}
var vendors = [
'webkit',
'moz'
];
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
var vp = vendors[i];
window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vp + 'CancelAnimationFrame'] || window[vp + 'CancelRequestAnimationFrame'];
window['requestAnimationFrame'] = window.requestAnimationFrame;
window['cancelAnimationFrame'] = window.cancelAnimationFrame;
}
if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
var lastTime = 0;
/**
* requestAnimationFrame polyfill.
* @param {!Function} callback the callback function.
*/
window.requestAnimationFrame = function (callback) {
var now = Date.now();
var nextTime = Math.max(lastTime + 16, now);
return setTimeout(function () {
callback(lastTime = nextTime);
}, nextTime - now);
};
window.cancelAnimationFrame = clearTimeout;
window['requestAnimationFrame'] = window.requestAnimationFrame;
window['cancelAnimationFrame'] = window.cancelAnimationFrame;
}
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Button MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @param {HTMLElement} element The element that will be upgraded.
*/
var MaterialButton = function MaterialButton(element) {
this.element_ = element;
// Initialize instance.
this.init();
};
window['MaterialButton'] = MaterialButton;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialButton.prototype.Constant_ = {};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialButton.prototype.CssClasses_ = {
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
RIPPLE_CONTAINER: 'mdl-button__ripple-container',
RIPPLE: 'mdl-ripple'
};
/**
* Handle blur of element.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialButton.prototype.blurHandler_ = function (event) {
if (event) {
this.element_.blur();
}
};
// Public methods.
/**
* Disable button.
*
* @public
*/
MaterialButton.prototype.disable = function () {
this.element_.disabled = true;
};
MaterialButton.prototype['disable'] = MaterialButton.prototype.disable;
/**
* Enable button.
*
* @public
*/
MaterialButton.prototype.enable = function () {
this.element_.disabled = false;
};
MaterialButton.prototype['enable'] = MaterialButton.prototype.enable;
/**
* Initialize element.
*/
MaterialButton.prototype.init = function () {
if (this.element_) {
if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
var rippleContainer = document.createElement('span');
rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
this.rippleElement_ = document.createElement('span');
this.rippleElement_.classList.add(this.CssClasses_.RIPPLE);
rippleContainer.appendChild(this.rippleElement_);
this.boundRippleBlurHandler = this.blurHandler_.bind(this);
this.rippleElement_.addEventListener('mouseup', this.boundRippleBlurHandler);
this.element_.appendChild(rippleContainer);
}
this.boundButtonBlurHandler = this.blurHandler_.bind(this);
this.element_.addEventListener('mouseup', this.boundButtonBlurHandler);
this.element_.addEventListener('mouseleave', this.boundButtonBlurHandler);
}
};
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialButton,
classAsString: 'MaterialButton',
cssClass: 'mdl-js-button',
widget: true
});
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Checkbox MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @constructor
* @param {HTMLElement} element The element that will be upgraded.
*/
var MaterialCheckbox = function MaterialCheckbox(element) {
this.element_ = element;
// Initialize instance.
this.init();
};
window['MaterialCheckbox'] = MaterialCheckbox;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialCheckbox.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialCheckbox.prototype.CssClasses_ = {
INPUT: 'mdl-checkbox__input',
BOX_OUTLINE: 'mdl-checkbox__box-outline',
FOCUS_HELPER: 'mdl-checkbox__focus-helper',
TICK_OUTLINE: 'mdl-checkbox__tick-outline',
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
RIPPLE_CONTAINER: 'mdl-checkbox__ripple-container',
RIPPLE_CENTER: 'mdl-ripple--center',
RIPPLE: 'mdl-ripple',
IS_FOCUSED: 'is-focused',
IS_DISABLED: 'is-disabled',
IS_CHECKED: 'is-checked',
IS_UPGRADED: 'is-upgraded'
};
/**
* Handle change of state.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialCheckbox.prototype.onChange_ = function (event) {
this.updateClasses_();
};
/**
* Handle focus of element.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialCheckbox.prototype.onFocus_ = function (event) {
this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
};
/**
* Handle lost focus of element.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialCheckbox.prototype.onBlur_ = function (event) {
this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
};
/**
* Handle mouseup.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialCheckbox.prototype.onMouseUp_ = function (event) {
this.blur_();
};
/**
* Handle class updates.
*
* @private
*/
MaterialCheckbox.prototype.updateClasses_ = function () {
this.checkDisabled();
this.checkToggleState();
};
/**
* Add blur.
*
* @private
*/
MaterialCheckbox.prototype.blur_ = function () {
// TODO: figure out why there's a focus event being fired after our blur,
// so that we can avoid this hack.
window.setTimeout(function () {
this.inputElement_.blur();
}.bind(this), this.Constant_.TINY_TIMEOUT);
};
// Public methods.
/**
* Check the inputs toggle state and update display.
*
* @public
*/
MaterialCheckbox.prototype.checkToggleState = function () {
if (this.inputElement_.checked) {
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
} else {
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
}
};
MaterialCheckbox.prototype['checkToggleState'] = MaterialCheckbox.prototype.checkToggleState;
/**
* Check the inputs disabled state and update display.
*
* @public
*/
MaterialCheckbox.prototype.checkDisabled = function () {
if (this.inputElement_.disabled) {
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
} else {
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
}
};
MaterialCheckbox.prototype['checkDisabled'] = MaterialCheckbox.prototype.checkDisabled;
/**
* Disable checkbox.
*
* @public
*/
MaterialCheckbox.prototype.disable = function () {
this.inputElement_.disabled = true;
this.updateClasses_();
};
MaterialCheckbox.prototype['disable'] = MaterialCheckbox.prototype.disable;
/**
* Enable checkbox.
*
* @public
*/
MaterialCheckbox.prototype.enable = function () {
this.inputElement_.disabled = false;
this.updateClasses_();
};
MaterialCheckbox.prototype['enable'] = MaterialCheckbox.prototype.enable;
/**
* Check checkbox.
*
* @public
*/
MaterialCheckbox.prototype.check = function () {
this.inputElement_.checked = true;
this.updateClasses_();
};
MaterialCheckbox.prototype['check'] = MaterialCheckbox.prototype.check;
/**
* Uncheck checkbox.
*
* @public
*/
MaterialCheckbox.prototype.uncheck = function () {
this.inputElement_.checked = false;
this.updateClasses_();
};
MaterialCheckbox.prototype['uncheck'] = MaterialCheckbox.prototype.uncheck;
/**
* Initialize element.
*/
MaterialCheckbox.prototype.init = function () {
if (this.element_) {
this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
var boxOutline = document.createElement('span');
boxOutline.classList.add(this.CssClasses_.BOX_OUTLINE);
var tickContainer = document.createElement('span');
tickContainer.classList.add(this.CssClasses_.FOCUS_HELPER);
var tickOutline = document.createElement('span');
tickOutline.classList.add(this.CssClasses_.TICK_OUTLINE);
boxOutline.appendChild(tickOutline);
this.element_.appendChild(tickContainer);
this.element_.appendChild(boxOutline);
if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
this.rippleContainerElement_ = document.createElement('span');
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
this.boundRippleMouseUp = this.onMouseUp_.bind(this);
this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
var ripple = document.createElement('span');
ripple.classList.add(this.CssClasses_.RIPPLE);
this.rippleContainerElement_.appendChild(ripple);
this.element_.appendChild(this.rippleContainerElement_);
}
this.boundInputOnChange = this.onChange_.bind(this);
this.boundInputOnFocus = this.onFocus_.bind(this);
this.boundInputOnBlur = this.onBlur_.bind(this);
this.boundElementMouseUp = this.onMouseUp_.bind(this);
this.inputElement_.addEventListener('change', this.boundInputOnChange);
this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
this.element_.addEventListener('mouseup', this.boundElementMouseUp);
this.updateClasses_();
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
}
};
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialCheckbox,
classAsString: 'MaterialCheckbox',
cssClass: 'mdl-js-checkbox',
widget: true
});
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for icon toggle MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @constructor
* @param {HTMLElement} element The element that will be upgraded.
*/
var MaterialIconToggle = function MaterialIconToggle(element) {
this.element_ = element;
// Initialize instance.
this.init();
};
window['MaterialIconToggle'] = MaterialIconToggle;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialIconToggle.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialIconToggle.prototype.CssClasses_ = {
INPUT: 'mdl-icon-toggle__input',
JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
RIPPLE_CONTAINER: 'mdl-icon-toggle__ripple-container',
RIPPLE_CENTER: 'mdl-ripple--center',
RIPPLE: 'mdl-ripple',
IS_FOCUSED: 'is-focused',
IS_DISABLED: 'is-disabled',
IS_CHECKED: 'is-checked'
};
/**
* Handle change of state.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialIconToggle.prototype.onChange_ = function (event) {
this.updateClasses_();
};
/**
* Handle focus of element.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialIconToggle.prototype.onFocus_ = function (event) {
this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
};
/**
* Handle lost focus of element.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialIconToggle.prototype.onBlur_ = function (event) {
this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
};
/**
* Handle mouseup.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialIconToggle.prototype.onMouseUp_ = function (event) {
this.blur_();
};
/**
* Handle class updates.
*
* @private
*/
MaterialIconToggle.prototype.updateClasses_ = function () {
this.checkDisabled();
this.checkToggleState();
};
/**
* Add blur.
*
* @private
*/
MaterialIconToggle.prototype.blur_ = function () {
// TODO: figure out why there's a focus event being fired after our blur,
// so that we can avoid this hack.
window.setTimeout(function () {
this.inputElement_.blur();
}.bind(this), this.Constant_.TINY_TIMEOUT);
};
// Public methods.
/**
* Check the inputs toggle state and update display.
*
* @public
*/
MaterialIconToggle.prototype.checkToggleState = function () {
if (this.inputElement_.checked) {
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
} else {
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
}
};
MaterialIconToggle.prototype['checkToggleState'] = MaterialIconToggle.prototype.checkToggleState;
/**
* Check the inputs disabled state and update display.
*
* @public
*/
MaterialIconToggle.prototype.checkDisabled = function () {
if (this.inputElement_.disabled) {
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
} else {
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
}
};
MaterialIconToggle.prototype['checkDisabled'] = MaterialIconToggle.prototype.checkDisabled;
/**
* Disable icon toggle.
*
* @public
*/
MaterialIconToggle.prototype.disable = function () {
this.inputElement_.disabled = true;
this.updateClasses_();
};
MaterialIconToggle.prototype['disable'] = MaterialIconToggle.prototype.disable;
/**
* Enable icon toggle.
*
* @public
*/
MaterialIconToggle.prototype.enable = function () {
this.inputElement_.disabled = false;
this.updateClasses_();
};
MaterialIconToggle.prototype['enable'] = MaterialIconToggle.prototype.enable;
/**
* Check icon toggle.
*
* @public
*/
MaterialIconToggle.prototype.check = function () {
this.inputElement_.checked = true;
this.updateClasses_();
};
MaterialIconToggle.prototype['check'] = MaterialIconToggle.prototype.check;
/**
* Uncheck icon toggle.
*
* @public
*/
MaterialIconToggle.prototype.uncheck = function () {
this.inputElement_.checked = false;
this.updateClasses_();
};
MaterialIconToggle.prototype['uncheck'] = MaterialIconToggle.prototype.uncheck;
/**
* Initialize element.
*/
MaterialIconToggle.prototype.init = function () {
if (this.element_) {
this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
this.rippleContainerElement_ = document.createElement('span');
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
this.rippleContainerElement_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT);
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
this.boundRippleMouseUp = this.onMouseUp_.bind(this);
this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
var ripple = document.createElement('span');
ripple.classList.add(this.CssClasses_.RIPPLE);
this.rippleContainerElement_.appendChild(ripple);
this.element_.appendChild(this.rippleContainerElement_);
}
this.boundInputOnChange = this.onChange_.bind(this);
this.boundInputOnFocus = this.onFocus_.bind(this);
this.boundInputOnBlur = this.onBlur_.bind(this);
this.boundElementOnMouseUp = this.onMouseUp_.bind(this);
this.inputElement_.addEventListener('change', this.boundInputOnChange);
this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
this.element_.addEventListener('mouseup', this.boundElementOnMouseUp);
this.updateClasses_();
this.element_.classList.add('is-upgraded');
}
};
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialIconToggle,
classAsString: 'MaterialIconToggle',
cssClass: 'mdl-js-icon-toggle',
widget: true
});
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for dropdown MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @constructor
* @param {HTMLElement} element The element that will be upgraded.
*/
var MaterialMenu = function MaterialMenu(element) {
this.element_ = element;
// Initialize instance.
this.init();
};
window['MaterialMenu'] = MaterialMenu;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialMenu.prototype.Constant_ = {
// Total duration of the menu animation.
TRANSITION_DURATION_SECONDS: 0.3,
// The fraction of the total duration we want to use for menu item animations.
TRANSITION_DURATION_FRACTION: 0.8,
// How long the menu stays open after choosing an option (so the user can see
// the ripple).
CLOSE_TIMEOUT: 150
};
/**
* Keycodes, for code readability.
*
* @enum {number}
* @private
*/
MaterialMenu.prototype.Keycodes_ = {
ENTER: 13,
ESCAPE: 27,
SPACE: 32,
UP_ARROW: 38,
DOWN_ARROW: 40
};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialMenu.prototype.CssClasses_ = {
CONTAINER: 'mdl-menu__container',
OUTLINE: 'mdl-menu__outline',
ITEM: 'mdl-menu__item',
ITEM_RIPPLE_CONTAINER: 'mdl-menu__item-ripple-container',
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
RIPPLE: 'mdl-ripple',
// Statuses
IS_UPGRADED: 'is-upgraded',
IS_VISIBLE: 'is-visible',
IS_ANIMATING: 'is-animating',
// Alignment options
BOTTOM_LEFT: 'mdl-menu--bottom-left',
// This is the default.
BOTTOM_RIGHT: 'mdl-menu--bottom-right',
TOP_LEFT: 'mdl-menu--top-left',
TOP_RIGHT: 'mdl-menu--top-right',
UNALIGNED: 'mdl-menu--unaligned'
};
/**
* Initialize element.
*/
MaterialMenu.prototype.init = function () {
if (this.element_) {
// Create container for the menu.
var container = document.createElement('div');
container.classList.add(this.CssClasses_.CONTAINER);
this.element_.parentElement.insertBefore(container, this.element_);
this.element_.parentElement.removeChild(this.element_);
container.appendChild(this.element_);
this.container_ = container;
// Create outline for the menu (shadow and background).
var outline = document.createElement('div');
outline.classList.add(this.CssClasses_.OUTLINE);
this.outline_ = outline;
container.insertBefore(outline, this.element_);
// Find the "for" element and bind events to it.
var forElId = this.element_.getAttribute('for') || this.element_.getAttribute('data-mdl-for');
var forEl = null;
if (forElId) {
forEl = document.getElementById(forElId);
if (forEl) {
this.forElement_ = forEl;
forEl.addEventListener('click', this.handleForClick_.bind(this));
forEl.addEventListener('keydown', this.handleForKeyboardEvent_.bind(this));
}
}
var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
this.boundItemKeydown_ = this.handleItemKeyboardEvent_.bind(this);
this.boundItemClick_ = this.handleItemClick_.bind(this);
for (var i = 0; i < items.length; i++) {
// Add a listener to each menu item.
items[i].addEventListener('click', this.boundItemClick_);
// Add a tab index to each menu item.
items[i].tabIndex = '-1';
// Add a keyboard listener to each menu item.
items[i].addEventListener('keydown', this.boundItemKeydown_);
}
// Add ripple classes to each item, if the user has enabled ripples.
if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
for (i = 0; i < items.length; i++) {
var item = items[i];
var rippleContainer = document.createElement('span');
rippleContainer.classList.add(this.CssClasses_.ITEM_RIPPLE_CONTAINER);
var ripple = document.createElement('span');
ripple.classList.add(this.CssClasses_.RIPPLE);
rippleContainer.appendChild(ripple);
item.appendChild(rippleContainer);
item.classList.add(this.CssClasses_.RIPPLE_EFFECT);
}
}
// Copy alignment classes to the container, so the outline can use them.
if (this.element_.classList.contains(this.CssClasses_.BOTTOM_LEFT)) {
this.outline_.classList.add(this.CssClasses_.BOTTOM_LEFT);
}
if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
this.outline_.classList.add(this.CssClasses_.BOTTOM_RIGHT);
}
if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
this.outline_.classList.add(this.CssClasses_.TOP_LEFT);
}
if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
this.outline_.classList.add(this.CssClasses_.TOP_RIGHT);
}
if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
this.outline_.classList.add(this.CssClasses_.UNALIGNED);
}
container.classList.add(this.CssClasses_.IS_UPGRADED);
}
};
/**
* Handles a click on the "for" element, by positioning the menu and then
* toggling it.
*
* @param {Event} evt The event that fired.
* @private
*/
MaterialMenu.prototype.handleForClick_ = function (evt) {
if (this.element_ && this.forElement_) {
var rect = this.forElement_.getBoundingClientRect();
var forRect = this.forElement_.parentElement.getBoundingClientRect();
if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
} else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
// Position below the "for" element, aligned to its right.
this.container_.style.right = forRect.right - rect.right + 'px';
this.container_.style.top = this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
} else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
// Position above the "for" element, aligned to its left.
this.container_.style.left = this.forElement_.offsetLeft + 'px';
this.container_.style.bottom = forRect.bottom - rect.top + 'px';
} else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
// Position above the "for" element, aligned to its right.
this.container_.style.right = forRect.right - rect.right + 'px';
this.container_.style.bottom = forRect.bottom - rect.top + 'px';
} else {
// Default: position below the "for" element, aligned to its left.
this.container_.style.left = this.forElement_.offsetLeft + 'px';
this.container_.style.top = this.forElement_.offsetTop + this.forElement_.offsetHeight + 'px';
}
}
this.toggle(evt);
};
/**
* Handles a keyboard event on the "for" element.
*
* @param {Event} evt The event that fired.
* @private
*/
MaterialMenu.prototype.handleForKeyboardEvent_ = function (evt) {
if (this.element_ && this.container_ && this.forElement_) {
var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM + ':not([disabled])');
if (items && items.length > 0 && this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
if (evt.keyCode === this.Keycodes_.UP_ARROW) {
evt.preventDefault();
items[items.length - 1].focus();
} else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
evt.preventDefault();
items[0].focus();
}
}
}
};
/**
* Handles a keyboard event on an item.
*
* @param {Event} evt The event that fired.
* @private
*/
MaterialMenu.prototype.handleItemKeyboardEvent_ = function (evt) {
if (this.element_ && this.container_) {
var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM + ':not([disabled])');
if (items && items.length > 0 && this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
var currentIndex = Array.prototype.slice.call(items).indexOf(evt.target);
if (evt.keyCode === this.Keycodes_.UP_ARROW) {
evt.preventDefault();
if (currentIndex > 0) {
items[currentIndex - 1].focus();
} else {
items[items.length - 1].focus();
}
} else if (evt.keyCode === this.Keycodes_.DOWN_ARROW) {
evt.preventDefault();
if (items.length > currentIndex + 1) {
items[currentIndex + 1].focus();
} else {
items[0].focus();
}
} else if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) {
evt.preventDefault();
// Send mousedown and mouseup to trigger ripple.
var e = new MouseEvent('mousedown');
evt.target.dispatchEvent(e);
e = new MouseEvent('mouseup');
evt.target.dispatchEvent(e);
// Send click.
evt.target.click();
} else if (evt.keyCode === this.Keycodes_.ESCAPE) {
evt.preventDefault();
this.hide();
}
}
}
};
/**
* Handles a click event on an item.
*
* @param {Event} evt The event that fired.
* @private
*/
MaterialMenu.prototype.handleItemClick_ = function (evt) {
if (evt.target.hasAttribute('disabled')) {
evt.stopPropagation();
} else {
// Wait some time before closing menu, so the user can see the ripple.
this.closing_ = true;
window.setTimeout(function (evt) {
this.hide();
this.closing_ = false;
}.bind(this), this.Constant_.CLOSE_TIMEOUT);
}
};
/**
* Calculates the initial clip (for opening the menu) or final clip (for closing
* it), and applies it. This allows us to animate from or to the correct point,
* that is, the point it's aligned to in the "for" element.
*
* @param {number} height Height of the clip rectangle
* @param {number} width Width of the clip rectangle
* @private
*/
MaterialMenu.prototype.applyClip_ = function (height, width) {
if (this.element_.classList.contains(this.CssClasses_.UNALIGNED)) {
// Do not clip.
this.element_.style.clip = '';
} else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) {
// Clip to the top right corner of the menu.
this.element_.style.clip = 'rect(0 ' + width + 'px ' + '0 ' + width + 'px)';
} else if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT)) {
// Clip to the bottom left corner of the menu.
this.element_.style.clip = 'rect(' + height + 'px 0 ' + height + 'px 0)';
} else if (this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
// Clip to the bottom right corner of the menu.
this.element_.style.clip = 'rect(' + height + 'px ' + width + 'px ' + height + 'px ' + width + 'px)';
} else {
// Default: do not clip (same as clipping to the top left corner).
this.element_.style.clip = '';
}
};
/**
* Cleanup function to remove animation listeners.
*
* @param {Event} evt
* @private
*/
MaterialMenu.prototype.removeAnimationEndListener_ = function (evt) {
evt.target.classList.remove(MaterialMenu.prototype.CssClasses_.IS_ANIMATING);
};
/**
* Adds an event listener to clean up after the animation ends.
*
* @private
*/
MaterialMenu.prototype.addAnimationEndListener_ = function () {
this.element_.addEventListener('transitionend', this.removeAnimationEndListener_);
this.element_.addEventListener('webkitTransitionEnd', this.removeAnimationEndListener_);
};
/**
* Displays the menu.
*
* @public
*/
MaterialMenu.prototype.show = function (evt) {
if (this.element_ && this.container_ && this.outline_) {
// Measure the inner element.
var height = this.element_.getBoundingClientRect().height;
var width = this.element_.getBoundingClientRect().width;
// Apply the inner element's size to the container and outline.
this.container_.style.width = width + 'px';
this.container_.style.height = height + 'px';
this.outline_.style.width = width + 'px';
this.outline_.style.height = height + 'px';
var transitionDuration = this.Constant_.TRANSITION_DURATION_SECONDS * this.Constant_.TRANSITION_DURATION_FRACTION;
// Calculate transition delays for individual menu items, so that they fade
// in one at a time.
var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
for (var i = 0; i < items.length; i++) {
var itemDelay = null;
if (this.element_.classList.contains(this.CssClasses_.TOP_LEFT) || this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)) {
itemDelay = (height - items[i].offsetTop - items[i].offsetHeight) / height * transitionDuration + 's';
} else {
itemDelay = items[i].offsetTop / height * transitionDuration + 's';
}
items[i].style.transitionDelay = itemDelay;
}
// Apply the initial clip to the text before we start animating.
this.applyClip_(height, width);
// Wait for the next frame, turn on animation, and apply the final clip.
// Also make it visible. This triggers the transitions.
window.requestAnimationFrame(function () {
this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
this.element_.style.clip = 'rect(0 ' + width + 'px ' + height + 'px 0)';
this.container_.classList.add(this.CssClasses_.IS_VISIBLE);
}.bind(this));
// Clean up after the animation is complete.
this.addAnimationEndListener_();
// Add a click listener to the document, to close the menu.
var callback = function (e) {
// Check to see if the document is processing the same event that
// displayed the menu in the first place. If so, do nothing.
// Also check to see if the menu is in the process of closing itself, and
// do nothing in that case.
// Also check if the clicked element is a menu item
// if so, do nothing.
if (e !== evt && !this.closing_ && e.target.parentNode !== this.element_) {
document.removeEventListener('click', callback);
this.hide();
}
}.bind(this);
document.addEventListener('click', callback);
}
};
MaterialMenu.prototype['show'] = MaterialMenu.prototype.show;
/**
* Hides the menu.
*
* @public
*/
MaterialMenu.prototype.hide = function () {
if (this.element_ && this.container_ && this.outline_) {
var items = this.element_.querySelectorAll('.' + this.CssClasses_.ITEM);
// Remove all transition delays; menu items fade out concurrently.
for (var i = 0; i < items.length; i++) {
items[i].style.removeProperty('transition-delay');
}
// Measure the inner element.
var rect = this.element_.getBoundingClientRect();
var height = rect.height;
var width = rect.width;
// Turn on animation, and apply the final clip. Also make invisible.
// This triggers the transitions.
this.element_.classList.add(this.CssClasses_.IS_ANIMATING);
this.applyClip_(height, width);
this.container_.classList.remove(this.CssClasses_.IS_VISIBLE);
// Clean up after the animation is complete.
this.addAnimationEndListener_();
}
};
MaterialMenu.prototype['hide'] = MaterialMenu.prototype.hide;
/**
* Displays or hides the menu, depending on current state.
*
* @public
*/
MaterialMenu.prototype.toggle = function (evt) {
if (this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)) {
this.hide();
} else {
this.show(evt);
}
};
MaterialMenu.prototype['toggle'] = MaterialMenu.prototype.toggle;
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialMenu,
classAsString: 'MaterialMenu',
cssClass: 'mdl-js-menu',
widget: true
});
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Progress MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @constructor
* @param {HTMLElement} element The element that will be upgraded.
*/
var MaterialProgress = function MaterialProgress(element) {
this.element_ = element;
// Initialize instance.
this.init();
};
window['MaterialProgress'] = MaterialProgress;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialProgress.prototype.Constant_ = {};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialProgress.prototype.CssClasses_ = { INDETERMINATE_CLASS: 'mdl-progress__indeterminate' };
/**
* Set the current progress of the progressbar.
*
* @param {number} p Percentage of the progress (0-100)
* @public
*/
MaterialProgress.prototype.setProgress = function (p) {
if (this.element_.classList.contains(this.CssClasses_.INDETERMINATE_CLASS)) {
return;
}
this.progressbar_.style.width = p + '%';
};
MaterialProgress.prototype['setProgress'] = MaterialProgress.prototype.setProgress;
/**
* Set the current progress of the buffer.
*
* @param {number} p Percentage of the buffer (0-100)
* @public
*/
MaterialProgress.prototype.setBuffer = function (p) {
this.bufferbar_.style.width = p + '%';
this.auxbar_.style.width = 100 - p + '%';
};
MaterialProgress.prototype['setBuffer'] = MaterialProgress.prototype.setBuffer;
/**
* Initialize element.
*/
MaterialProgress.prototype.init = function () {
if (this.element_) {
var el = document.createElement('div');
el.className = 'progressbar bar bar1';
this.element_.appendChild(el);
this.progressbar_ = el;
el = document.createElement('div');
el.className = 'bufferbar bar bar2';
this.element_.appendChild(el);
this.bufferbar_ = el;
el = document.createElement('div');
el.className = 'auxbar bar bar3';
this.element_.appendChild(el);
this.auxbar_ = el;
this.progressbar_.style.width = '0%';
this.bufferbar_.style.width = '100%';
this.auxbar_.style.width = '0%';
this.element_.classList.add('is-upgraded');
}
};
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialProgress,
classAsString: 'MaterialProgress',
cssClass: 'mdl-js-progress',
widget: true
});
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Radio MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @constructor
* @param {HTMLElement} element The element that will be upgraded.
*/
var MaterialRadio = function MaterialRadio(element) {
this.element_ = element;
// Initialize instance.
this.init();
};
window['MaterialRadio'] = MaterialRadio;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialRadio.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialRadio.prototype.CssClasses_ = {
IS_FOCUSED: 'is-focused',
IS_DISABLED: 'is-disabled',
IS_CHECKED: 'is-checked',
IS_UPGRADED: 'is-upgraded',
JS_RADIO: 'mdl-js-radio',
RADIO_BTN: 'mdl-radio__button',
RADIO_OUTER_CIRCLE: 'mdl-radio__outer-circle',
RADIO_INNER_CIRCLE: 'mdl-radio__inner-circle',
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
RIPPLE_CONTAINER: 'mdl-radio__ripple-container',
RIPPLE_CENTER: 'mdl-ripple--center',
RIPPLE: 'mdl-ripple'
};
/**
* Handle change of state.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialRadio.prototype.onChange_ = function (event) {
// Since other radio buttons don't get change events, we need to look for
// them to update their classes.
var radios = document.getElementsByClassName(this.CssClasses_.JS_RADIO);
for (var i = 0; i < radios.length; i++) {
var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
// Different name == different group, so no point updating those.
if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
if (typeof radios[i]['MaterialRadio'] !== 'undefined') {
radios[i]['MaterialRadio'].updateClasses_();
}
}
}
};
/**
* Handle focus.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialRadio.prototype.onFocus_ = function (event) {
this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
};
/**
* Handle lost focus.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialRadio.prototype.onBlur_ = function (event) {
this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
};
/**
* Handle mouseup.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialRadio.prototype.onMouseup_ = function (event) {
this.blur_();
};
/**
* Update classes.
*
* @private
*/
MaterialRadio.prototype.updateClasses_ = function () {
this.checkDisabled();
this.checkToggleState();
};
/**
* Add blur.
*
* @private
*/
MaterialRadio.prototype.blur_ = function () {
// TODO: figure out why there's a focus event being fired after our blur,
// so that we can avoid this hack.
window.setTimeout(function () {
this.btnElement_.blur();
}.bind(this), this.Constant_.TINY_TIMEOUT);
};
// Public methods.
/**
* Check the components disabled state.
*
* @public
*/
MaterialRadio.prototype.checkDisabled = function () {
if (this.btnElement_.disabled) {
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
} else {
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
}
};
MaterialRadio.prototype['checkDisabled'] = MaterialRadio.prototype.checkDisabled;
/**
* Check the components toggled state.
*
* @public
*/
MaterialRadio.prototype.checkToggleState = function () {
if (this.btnElement_.checked) {
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
} else {
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
}
};
MaterialRadio.prototype['checkToggleState'] = MaterialRadio.prototype.checkToggleState;
/**
* Disable radio.
*
* @public
*/
MaterialRadio.prototype.disable = function () {
this.btnElement_.disabled = true;
this.updateClasses_();
};
MaterialRadio.prototype['disable'] = MaterialRadio.prototype.disable;
/**
* Enable radio.
*
* @public
*/
MaterialRadio.prototype.enable = function () {
this.btnElement_.disabled = false;
this.updateClasses_();
};
MaterialRadio.prototype['enable'] = MaterialRadio.prototype.enable;
/**
* Check radio.
*
* @public
*/
MaterialRadio.prototype.check = function () {
this.btnElement_.checked = true;
this.onChange_(null);
};
MaterialRadio.prototype['check'] = MaterialRadio.prototype.check;
/**
* Uncheck radio.
*
* @public
*/
MaterialRadio.prototype.uncheck = function () {
this.btnElement_.checked = false;
this.onChange_(null);
};
MaterialRadio.prototype['uncheck'] = MaterialRadio.prototype.uncheck;
/**
* Initialize element.
*/
MaterialRadio.prototype.init = function () {
if (this.element_) {
this.btnElement_ = this.element_.querySelector('.' + this.CssClasses_.RADIO_BTN);
this.boundChangeHandler_ = this.onChange_.bind(this);
this.boundFocusHandler_ = this.onChange_.bind(this);
this.boundBlurHandler_ = this.onBlur_.bind(this);
this.boundMouseUpHandler_ = this.onMouseup_.bind(this);
var outerCircle = document.createElement('span');
outerCircle.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE);
var innerCircle = document.createElement('span');
innerCircle.classList.add(this.CssClasses_.RADIO_INNER_CIRCLE);
this.element_.appendChild(outerCircle);
this.element_.appendChild(innerCircle);
var rippleContainer;
if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
rippleContainer = document.createElement('span');
rippleContainer.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT);
rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER);
rippleContainer.addEventListener('mouseup', this.boundMouseUpHandler_);
var ripple = document.createElement('span');
ripple.classList.add(this.CssClasses_.RIPPLE);
rippleContainer.appendChild(ripple);
this.element_.appendChild(rippleContainer);
}
this.btnElement_.addEventListener('change', this.boundChangeHandler_);
this.btnElement_.addEventListener('focus', this.boundFocusHandler_);
this.btnElement_.addEventListener('blur', this.boundBlurHandler_);
this.element_.addEventListener('mouseup', this.boundMouseUpHandler_);
this.updateClasses_();
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
}
};
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialRadio,
classAsString: 'MaterialRadio',
cssClass: 'mdl-js-radio',
widget: true
});
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Slider MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @constructor
* @param {HTMLElement} element The element that will be upgraded.
*/
var MaterialSlider = function MaterialSlider(element) {
this.element_ = element;
// Browser feature detection.
this.isIE_ = window.navigator.msPointerEnabled;
// Initialize instance.
this.init();
};
window['MaterialSlider'] = MaterialSlider;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialSlider.prototype.Constant_ = {};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialSlider.prototype.CssClasses_ = {
IE_CONTAINER: 'mdl-slider__ie-container',
SLIDER_CONTAINER: 'mdl-slider__container',
BACKGROUND_FLEX: 'mdl-slider__background-flex',
BACKGROUND_LOWER: 'mdl-slider__background-lower',
BACKGROUND_UPPER: 'mdl-slider__background-upper',
IS_LOWEST_VALUE: 'is-lowest-value',
IS_UPGRADED: 'is-upgraded'
};
/**
* Handle input on element.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialSlider.prototype.onInput_ = function (event) {
this.updateValueStyles_();
};
/**
* Handle change on element.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialSlider.prototype.onChange_ = function (event) {
this.updateValueStyles_();
};
/**
* Handle mouseup on element.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialSlider.prototype.onMouseUp_ = function (event) {
event.target.blur();
};
/**
* Handle mousedown on container element.
* This handler is purpose is to not require the use to click
* exactly on the 2px slider element, as FireFox seems to be very
* strict about this.
*
* @param {Event} event The event that fired.
* @private
* @suppress {missingProperties}
*/
MaterialSlider.prototype.onContainerMouseDown_ = function (event) {
// If this click is not on the parent element (but rather some child)
// ignore. It may still bubble up.
if (event.target !== this.element_.parentElement) {
return;
}
// Discard the original event and create a new event that
// is on the slider element.
event.preventDefault();
var newEvent = new MouseEvent('mousedown', {
target: event.target,
buttons: event.buttons,
clientX: event.clientX,
clientY: this.element_.getBoundingClientRect().y
});
this.element_.dispatchEvent(newEvent);
};
/**
* Handle updating of values.
*
* @private
*/
MaterialSlider.prototype.updateValueStyles_ = function () {
// Calculate and apply percentages to div structure behind slider.
var fraction = (this.element_.value - this.element_.min) / (this.element_.max - this.element_.min);
if (fraction === 0) {
this.element_.classList.add(this.CssClasses_.IS_LOWEST_VALUE);
} else {
this.element_.classList.remove(this.CssClasses_.IS_LOWEST_VALUE);
}
if (!this.isIE_) {
this.backgroundLower_.style.flex = fraction;
this.backgroundLower_.style.webkitFlex = fraction;
this.backgroundUpper_.style.flex = 1 - fraction;
this.backgroundUpper_.style.webkitFlex = 1 - fraction;
}
};
// Public methods.
/**
* Disable slider.
*
* @public
*/
MaterialSlider.prototype.disable = function () {
this.element_.disabled = true;
};
MaterialSlider.prototype['disable'] = MaterialSlider.prototype.disable;
/**
* Enable slider.
*
* @public
*/
MaterialSlider.prototype.enable = function () {
this.element_.disabled = false;
};
MaterialSlider.prototype['enable'] = MaterialSlider.prototype.enable;
/**
* Update slider value.
*
* @param {number} value The value to which to set the control (optional).
* @public
*/
MaterialSlider.prototype.change = function (value) {
if (typeof value !== 'undefined') {
this.element_.value = value;
}
this.updateValueStyles_();
};
MaterialSlider.prototype['change'] = MaterialSlider.prototype.change;
/**
* Initialize element.
*/
MaterialSlider.prototype.init = function () {
if (this.element_) {
if (this.isIE_) {
// Since we need to specify a very large height in IE due to
// implementation limitations, we add a parent here that trims it down to
// a reasonable size.
var containerIE = document.createElement('div');
containerIE.classList.add(this.CssClasses_.IE_CONTAINER);
this.element_.parentElement.insertBefore(containerIE, this.element_);
this.element_.parentElement.removeChild(this.element_);
containerIE.appendChild(this.element_);
} else {
// For non-IE browsers, we need a div structure that sits behind the
// slider and allows us to style the left and right sides of it with
// different colors.
var container = document.createElement('div');
container.classList.add(this.CssClasses_.SLIDER_CONTAINER);
this.element_.parentElement.insertBefore(container, this.element_);
this.element_.parentElement.removeChild(this.element_);
container.appendChild(this.element_);
var backgroundFlex = document.createElement('div');
backgroundFlex.classList.add(this.CssClasses_.BACKGROUND_FLEX);
container.appendChild(backgroundFlex);
this.backgroundLower_ = document.createElement('div');
this.backgroundLower_.classList.add(this.CssClasses_.BACKGROUND_LOWER);
backgroundFlex.appendChild(this.backgroundLower_);
this.backgroundUpper_ = document.createElement('div');
this.backgroundUpper_.classList.add(this.CssClasses_.BACKGROUND_UPPER);
backgroundFlex.appendChild(this.backgroundUpper_);
}
this.boundInputHandler = this.onInput_.bind(this);
this.boundChangeHandler = this.onChange_.bind(this);
this.boundMouseUpHandler = this.onMouseUp_.bind(this);
this.boundContainerMouseDownHandler = this.onContainerMouseDown_.bind(this);
this.element_.addEventListener('input', this.boundInputHandler);
this.element_.addEventListener('change', this.boundChangeHandler);
this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
this.element_.parentElement.addEventListener('mousedown', this.boundContainerMouseDownHandler);
this.updateValueStyles_();
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
}
};
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialSlider,
classAsString: 'MaterialSlider',
cssClass: 'mdl-js-slider',
widget: true
});
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Snackbar MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @constructor
* @param {HTMLElement} element The element that will be upgraded.
*/
var MaterialSnackbar = function MaterialSnackbar(element) {
this.element_ = element;
this.textElement_ = this.element_.querySelector('.' + this.cssClasses_.MESSAGE);
this.actionElement_ = this.element_.querySelector('.' + this.cssClasses_.ACTION);
if (!this.textElement_) {
throw new Error('There must be a message element for a snackbar.');
}
if (!this.actionElement_) {
throw new Error('There must be an action element for a snackbar.');
}
this.active = false;
this.actionHandler_ = undefined;
this.message_ = undefined;
this.actionText_ = undefined;
this.queuedNotifications_ = [];
this.setActionHidden_(true);
};
window['MaterialSnackbar'] = MaterialSnackbar;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialSnackbar.prototype.Constant_ = {
// The duration of the snackbar show/hide animation, in ms.
ANIMATION_LENGTH: 250
};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialSnackbar.prototype.cssClasses_ = {
SNACKBAR: 'mdl-snackbar',
MESSAGE: 'mdl-snackbar__text',
ACTION: 'mdl-snackbar__action',
ACTIVE: 'mdl-snackbar--active'
};
/**
* Display the snackbar.
*
* @private
*/
MaterialSnackbar.prototype.displaySnackbar_ = function () {
this.element_.setAttribute('aria-hidden', 'true');
if (this.actionHandler_) {
this.actionElement_.textContent = this.actionText_;
this.actionElement_.addEventListener('click', this.actionHandler_);
this.setActionHidden_(false);
}
this.textElement_.textContent = this.message_;
this.element_.classList.add(this.cssClasses_.ACTIVE);
this.element_.setAttribute('aria-hidden', 'false');
setTimeout(this.cleanup_.bind(this), this.timeout_);
};
/**
* Show the snackbar.
*
* @param {Object} data The data for the notification.
* @public
*/
MaterialSnackbar.prototype.showSnackbar = function (data) {
if (data === undefined) {
throw new Error('Please provide a data object with at least a message to display.');
}
if (data['message'] === undefined) {
throw new Error('Please provide a message to be displayed.');
}
if (data['actionHandler'] && !data['actionText']) {
throw new Error('Please provide action text with the handler.');
}
if (this.active) {
this.queuedNotifications_.push(data);
} else {
this.active = true;
this.message_ = data['message'];
if (data['timeout']) {
this.timeout_ = data['timeout'];
} else {
this.timeout_ = 2750;
}
if (data['actionHandler']) {
this.actionHandler_ = data['actionHandler'];
}
if (data['actionText']) {
this.actionText_ = data['actionText'];
}
this.displaySnackbar_();
}
};
MaterialSnackbar.prototype['showSnackbar'] = MaterialSnackbar.prototype.showSnackbar;
/**
* Check if the queue has items within it.
* If it does, display the next entry.
*
* @private
*/
MaterialSnackbar.prototype.checkQueue_ = function () {
if (this.queuedNotifications_.length > 0) {
this.showSnackbar(this.queuedNotifications_.shift());
}
};
/**
* Cleanup the snackbar event listeners and accessiblity attributes.
*
* @private
*/
MaterialSnackbar.prototype.cleanup_ = function () {
this.element_.classList.remove(this.cssClasses_.ACTIVE);
setTimeout(function () {
this.element_.setAttribute('aria-hidden', 'true');
this.textElement_.textContent = '';
if (!Boolean(this.actionElement_.getAttribute('aria-hidden'))) {
this.setActionHidden_(true);
this.actionElement_.textContent = '';
this.actionElement_.removeEventListener('click', this.actionHandler_);
}
this.actionHandler_ = undefined;
this.message_ = undefined;
this.actionText_ = undefined;
this.active = false;
this.checkQueue_();
}.bind(this), this.Constant_.ANIMATION_LENGTH);
};
/**
* Set the action handler hidden state.
*
* @param {boolean} value
* @private
*/
MaterialSnackbar.prototype.setActionHidden_ = function (value) {
if (value) {
this.actionElement_.setAttribute('aria-hidden', 'true');
} else {
this.actionElement_.removeAttribute('aria-hidden');
}
};
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialSnackbar,
classAsString: 'MaterialSnackbar',
cssClass: 'mdl-js-snackbar',
widget: true
});
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Spinner MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @param {HTMLElement} element The element that will be upgraded.
* @constructor
*/
var MaterialSpinner = function MaterialSpinner(element) {
this.element_ = element;
// Initialize instance.
this.init();
};
window['MaterialSpinner'] = MaterialSpinner;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialSpinner.prototype.Constant_ = { MDL_SPINNER_LAYER_COUNT: 4 };
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialSpinner.prototype.CssClasses_ = {
MDL_SPINNER_LAYER: 'mdl-spinner__layer',
MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
MDL_SPINNER_CIRCLE: 'mdl-spinner__circle',
MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
MDL_SPINNER_LEFT: 'mdl-spinner__left',
MDL_SPINNER_RIGHT: 'mdl-spinner__right'
};
/**
* Auxiliary method to create a spinner layer.
*
* @param {number} index Index of the layer to be created.
* @public
*/
MaterialSpinner.prototype.createLayer = function (index) {
var layer = document.createElement('div');
layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER);
layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index);
var leftClipper = document.createElement('div');
leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);
var gapPatch = document.createElement('div');
gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);
var rightClipper = document.createElement('div');
rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);
var circleOwners = [
leftClipper,
gapPatch,
rightClipper
];
for (var i = 0; i < circleOwners.length; i++) {
var circle = document.createElement('div');
circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE);
circleOwners[i].appendChild(circle);
}
layer.appendChild(leftClipper);
layer.appendChild(gapPatch);
layer.appendChild(rightClipper);
this.element_.appendChild(layer);
};
MaterialSpinner.prototype['createLayer'] = MaterialSpinner.prototype.createLayer;
/**
* Stops the spinner animation.
* Public method for users who need to stop the spinner for any reason.
*
* @public
*/
MaterialSpinner.prototype.stop = function () {
this.element_.classList.remove('is-active');
};
MaterialSpinner.prototype['stop'] = MaterialSpinner.prototype.stop;
/**
* Starts the spinner animation.
* Public method for users who need to manually start the spinner for any reason
* (instead of just adding the 'is-active' class to their markup).
*
* @public
*/
MaterialSpinner.prototype.start = function () {
this.element_.classList.add('is-active');
};
MaterialSpinner.prototype['start'] = MaterialSpinner.prototype.start;
/**
* Initialize element.
*/
MaterialSpinner.prototype.init = function () {
if (this.element_) {
for (var i = 1; i <= this.Constant_.MDL_SPINNER_LAYER_COUNT; i++) {
this.createLayer(i);
}
this.element_.classList.add('is-upgraded');
}
};
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialSpinner,
classAsString: 'MaterialSpinner',
cssClass: 'mdl-js-spinner',
widget: true
});
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Checkbox MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @constructor
* @param {HTMLElement} element The element that will be upgraded.
*/
var MaterialSwitch = function MaterialSwitch(element) {
this.element_ = element;
// Initialize instance.
this.init();
};
window['MaterialSwitch'] = MaterialSwitch;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialSwitch.prototype.Constant_ = { TINY_TIMEOUT: 0.001 };
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialSwitch.prototype.CssClasses_ = {
INPUT: 'mdl-switch__input',
TRACK: 'mdl-switch__track',
THUMB: 'mdl-switch__thumb',
FOCUS_HELPER: 'mdl-switch__focus-helper',
RIPPLE_EFFECT: 'mdl-js-ripple-effect',
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
RIPPLE_CONTAINER: 'mdl-switch__ripple-container',
RIPPLE_CENTER: 'mdl-ripple--center',
RIPPLE: 'mdl-ripple',
IS_FOCUSED: 'is-focused',
IS_DISABLED: 'is-disabled',
IS_CHECKED: 'is-checked'
};
/**
* Handle change of state.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialSwitch.prototype.onChange_ = function (event) {
this.updateClasses_();
};
/**
* Handle focus of element.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialSwitch.prototype.onFocus_ = function (event) {
this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
};
/**
* Handle lost focus of element.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialSwitch.prototype.onBlur_ = function (event) {
this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
};
/**
* Handle mouseup.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialSwitch.prototype.onMouseUp_ = function (event) {
this.blur_();
};
/**
* Handle class updates.
*
* @private
*/
MaterialSwitch.prototype.updateClasses_ = function () {
this.checkDisabled();
this.checkToggleState();
};
/**
* Add blur.
*
* @private
*/
MaterialSwitch.prototype.blur_ = function () {
// TODO: figure out why there's a focus event being fired after our blur,
// so that we can avoid this hack.
window.setTimeout(function () {
this.inputElement_.blur();
}.bind(this), this.Constant_.TINY_TIMEOUT);
};
// Public methods.
/**
* Check the components disabled state.
*
* @public
*/
MaterialSwitch.prototype.checkDisabled = function () {
if (this.inputElement_.disabled) {
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
} else {
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
}
};
MaterialSwitch.prototype['checkDisabled'] = MaterialSwitch.prototype.checkDisabled;
/**
* Check the components toggled state.
*
* @public
*/
MaterialSwitch.prototype.checkToggleState = function () {
if (this.inputElement_.checked) {
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
} else {
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
}
};
MaterialSwitch.prototype['checkToggleState'] = MaterialSwitch.prototype.checkToggleState;
/**
* Disable switch.
*
* @public
*/
MaterialSwitch.prototype.disable = function () {
this.inputElement_.disabled = true;
this.updateClasses_();
};
MaterialSwitch.prototype['disable'] = MaterialSwitch.prototype.disable;
/**
* Enable switch.
*
* @public
*/
MaterialSwitch.prototype.enable = function () {
this.inputElement_.disabled = false;
this.updateClasses_();
};
MaterialSwitch.prototype['enable'] = MaterialSwitch.prototype.enable;
/**
* Activate switch.
*
* @public
*/
MaterialSwitch.prototype.on = function () {
this.inputElement_.checked = true;
this.updateClasses_();
};
MaterialSwitch.prototype['on'] = MaterialSwitch.prototype.on;
/**
* Deactivate switch.
*
* @public
*/
MaterialSwitch.prototype.off = function () {
this.inputElement_.checked = false;
this.updateClasses_();
};
MaterialSwitch.prototype['off'] = MaterialSwitch.prototype.off;
/**
* Initialize element.
*/
MaterialSwitch.prototype.init = function () {
if (this.element_) {
this.inputElement_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
var track = document.createElement('div');
track.classList.add(this.CssClasses_.TRACK);
var thumb = document.createElement('div');
thumb.classList.add(this.CssClasses_.THUMB);
var focusHelper = document.createElement('span');
focusHelper.classList.add(this.CssClasses_.FOCUS_HELPER);
thumb.appendChild(focusHelper);
this.element_.appendChild(track);
this.element_.appendChild(thumb);
this.boundMouseUpHandler = this.onMouseUp_.bind(this);
if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
this.rippleContainerElement_ = document.createElement('span');
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
this.rippleContainerElement_.addEventListener('mouseup', this.boundMouseUpHandler);
var ripple = document.createElement('span');
ripple.classList.add(this.CssClasses_.RIPPLE);
this.rippleContainerElement_.appendChild(ripple);
this.element_.appendChild(this.rippleContainerElement_);
}
this.boundChangeHandler = this.onChange_.bind(this);
this.boundFocusHandler = this.onFocus_.bind(this);
this.boundBlurHandler = this.onBlur_.bind(this);
this.inputElement_.addEventListener('change', this.boundChangeHandler);
this.inputElement_.addEventListener('focus', this.boundFocusHandler);
this.inputElement_.addEventListener('blur', this.boundBlurHandler);
this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
this.updateClasses_();
this.element_.classList.add('is-upgraded');
}
};
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialSwitch,
classAsString: 'MaterialSwitch',
cssClass: 'mdl-js-switch',
widget: true
});
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Tabs MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @constructor
* @param {Element} element The element that will be upgraded.
*/
var MaterialTabs = function MaterialTabs(element) {
// Stores the HTML element.
this.element_ = element;
// Initialize instance.
this.init();
};
window['MaterialTabs'] = MaterialTabs;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string}
* @private
*/
MaterialTabs.prototype.Constant_ = {};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialTabs.prototype.CssClasses_ = {
TAB_CLASS: 'mdl-tabs__tab',
PANEL_CLASS: 'mdl-tabs__panel',
ACTIVE_CLASS: 'is-active',
UPGRADED_CLASS: 'is-upgraded',
MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
MDL_RIPPLE: 'mdl-ripple',
MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
};
/**
* Handle clicks to a tabs component
*
* @private
*/
MaterialTabs.prototype.initTabs_ = function () {
if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
this.element_.classList.add(this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
}
// Select element tabs, document panels
this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS);
this.panels_ = this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS);
// Create new tabs for each tab element
for (var i = 0; i < this.tabs_.length; i++) {
new MaterialTab(this.tabs_[i], this);
}
this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
};
/**
* Reset tab state, dropping active classes
*
* @private
*/
MaterialTabs.prototype.resetTabState_ = function () {
for (var k = 0; k < this.tabs_.length; k++) {
this.tabs_[k].classList.remove(this.CssClasses_.ACTIVE_CLASS);
}
};
/**
* Reset panel state, droping active classes
*
* @private
*/
MaterialTabs.prototype.resetPanelState_ = function () {
for (var j = 0; j < this.panels_.length; j++) {
this.panels_[j].classList.remove(this.CssClasses_.ACTIVE_CLASS);
}
};
/**
* Initialize element.
*/
MaterialTabs.prototype.init = function () {
if (this.element_) {
this.initTabs_();
}
};
/**
* Constructor for an individual tab.
*
* @constructor
* @param {Element} tab The HTML element for the tab.
* @param {MaterialTabs} ctx The MaterialTabs object that owns the tab.
*/
function MaterialTab(tab, ctx) {
if (tab) {
if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
var rippleContainer = document.createElement('span');
rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
var ripple = document.createElement('span');
ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
rippleContainer.appendChild(ripple);
tab.appendChild(rippleContainer);
}
tab.addEventListener('click', function (e) {
if (tab.getAttribute('href').charAt(0) === '#') {
e.preventDefault();
var href = tab.href.split('#')[1];
var panel = ctx.element_.querySelector('#' + href);
ctx.resetTabState_();
ctx.resetPanelState_();
tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
}
});
}
}
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialTabs,
classAsString: 'MaterialTabs',
cssClass: 'mdl-js-tabs'
});
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Textfield MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @constructor
* @param {HTMLElement} element The element that will be upgraded.
*/
var MaterialTextfield = function MaterialTextfield(element) {
this.element_ = element;
this.maxRows = this.Constant_.NO_MAX_ROWS;
// Initialize instance.
this.init();
};
window['MaterialTextfield'] = MaterialTextfield;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialTextfield.prototype.Constant_ = {
NO_MAX_ROWS: -1,
MAX_ROWS_ATTRIBUTE: 'maxrows'
};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialTextfield.prototype.CssClasses_ = {
LABEL: 'mdl-textfield__label',
INPUT: 'mdl-textfield__input',
IS_DIRTY: 'is-dirty',
IS_FOCUSED: 'is-focused',
IS_DISABLED: 'is-disabled',
IS_INVALID: 'is-invalid',
IS_UPGRADED: 'is-upgraded',
HAS_PLACEHOLDER: 'has-placeholder'
};
/**
* Handle input being entered.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialTextfield.prototype.onKeyDown_ = function (event) {
var currentRowCount = event.target.value.split('\n').length;
if (event.keyCode === 13) {
if (currentRowCount >= this.maxRows) {
event.preventDefault();
}
}
};
/**
* Handle focus.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialTextfield.prototype.onFocus_ = function (event) {
this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
};
/**
* Handle lost focus.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialTextfield.prototype.onBlur_ = function (event) {
this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
};
/**
* Handle reset event from out side.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialTextfield.prototype.onReset_ = function (event) {
this.updateClasses_();
};
/**
* Handle class updates.
*
* @private
*/
MaterialTextfield.prototype.updateClasses_ = function () {
this.checkDisabled();
this.checkValidity();
this.checkDirty();
this.checkFocus();
};
// Public methods.
/**
* Check the disabled state and update field accordingly.
*
* @public
*/
MaterialTextfield.prototype.checkDisabled = function () {
if (this.input_.disabled) {
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
} else {
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
}
};
MaterialTextfield.prototype['checkDisabled'] = MaterialTextfield.prototype.checkDisabled;
/**
* Check the focus state and update field accordingly.
*
* @public
*/
MaterialTextfield.prototype.checkFocus = function () {
if (Boolean(this.element_.querySelector(':focus'))) {
this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
} else {
this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
}
};
MaterialTextfield.prototype['checkFocus'] = MaterialTextfield.prototype.checkFocus;
/**
* Check the validity state and update field accordingly.
*
* @public
*/
MaterialTextfield.prototype.checkValidity = function () {
if (this.input_.validity) {
if (this.input_.validity.valid) {
this.element_.classList.remove(this.CssClasses_.IS_INVALID);
} else {
this.element_.classList.add(this.CssClasses_.IS_INVALID);
}
}
};
MaterialTextfield.prototype['checkValidity'] = MaterialTextfield.prototype.checkValidity;
/**
* Check the dirty state and update field accordingly.
*
* @public
*/
MaterialTextfield.prototype.checkDirty = function () {
if (this.input_.value && this.input_.value.length > 0) {
this.element_.classList.add(this.CssClasses_.IS_DIRTY);
} else {
this.element_.classList.remove(this.CssClasses_.IS_DIRTY);
}
};
MaterialTextfield.prototype['checkDirty'] = MaterialTextfield.prototype.checkDirty;
/**
* Disable text field.
*
* @public
*/
MaterialTextfield.prototype.disable = function () {
this.input_.disabled = true;
this.updateClasses_();
};
MaterialTextfield.prototype['disable'] = MaterialTextfield.prototype.disable;
/**
* Enable text field.
*
* @public
*/
MaterialTextfield.prototype.enable = function () {
this.input_.disabled = false;
this.updateClasses_();
};
MaterialTextfield.prototype['enable'] = MaterialTextfield.prototype.enable;
/**
* Update text field value.
*
* @param {string} value The value to which to set the control (optional).
* @public
*/
MaterialTextfield.prototype.change = function (value) {
this.input_.value = value || '';
this.updateClasses_();
};
MaterialTextfield.prototype['change'] = MaterialTextfield.prototype.change;
/**
* Initialize element.
*/
MaterialTextfield.prototype.init = function () {
if (this.element_) {
this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL);
this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
if (this.input_) {
if (this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE)) {
this.maxRows = parseInt(this.input_.getAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE), 10);
if (isNaN(this.maxRows)) {
this.maxRows = this.Constant_.NO_MAX_ROWS;
}
}
if (this.input_.hasAttribute('placeholder')) {
this.element_.classList.add(this.CssClasses_.HAS_PLACEHOLDER);
}
this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
this.boundFocusHandler = this.onFocus_.bind(this);
this.boundBlurHandler = this.onBlur_.bind(this);
this.boundResetHandler = this.onReset_.bind(this);
this.input_.addEventListener('input', this.boundUpdateClassesHandler);
this.input_.addEventListener('focus', this.boundFocusHandler);
this.input_.addEventListener('blur', this.boundBlurHandler);
this.input_.addEventListener('reset', this.boundResetHandler);
if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
// TODO: This should handle pasting multi line text.
// Currently doesn't.
this.boundKeyDownHandler = this.onKeyDown_.bind(this);
this.input_.addEventListener('keydown', this.boundKeyDownHandler);
}
var invalid = this.element_.classList.contains(this.CssClasses_.IS_INVALID);
this.updateClasses_();
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
if (invalid) {
this.element_.classList.add(this.CssClasses_.IS_INVALID);
}
if (this.input_.hasAttribute('autofocus')) {
this.element_.focus();
this.checkFocus();
}
}
}
};
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialTextfield,
classAsString: 'MaterialTextfield',
cssClass: 'mdl-js-textfield',
widget: true
});
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Tooltip MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @constructor
* @param {HTMLElement} element The element that will be upgraded.
*/
var MaterialTooltip = function MaterialTooltip(element) {
this.element_ = element;
// Initialize instance.
this.init();
};
window['MaterialTooltip'] = MaterialTooltip;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialTooltip.prototype.Constant_ = {};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialTooltip.prototype.CssClasses_ = {
IS_ACTIVE: 'is-active',
BOTTOM: 'mdl-tooltip--bottom',
LEFT: 'mdl-tooltip--left',
RIGHT: 'mdl-tooltip--right',
TOP: 'mdl-tooltip--top'
};
/**
* Handle mouseenter for tooltip.
*
* @param {Event} event The event that fired.
* @private
*/
MaterialTooltip.prototype.handleMouseEnter_ = function (event) {
var props = event.target.getBoundingClientRect();
var left = props.left + props.width / 2;
var top = props.top + props.height / 2;
var marginLeft = -1 * (this.element_.offsetWidth / 2);
var marginTop = -1 * (this.element_.offsetHeight / 2);
if (this.element_.classList.contains(this.CssClasses_.LEFT) || this.element_.classList.contains(this.CssClasses_.RIGHT)) {
left = props.width / 2;
if (top + marginTop < 0) {
this.element_.style.top = '0';
this.element_.style.marginTop = '0';
} else {
this.element_.style.top = top + 'px';
this.element_.style.marginTop = marginTop + 'px';
}
} else {
if (left + marginLeft < 0) {
this.element_.style.left = '0';
this.element_.style.marginLeft = '0';
} else {
this.element_.style.left = left + 'px';
this.element_.style.marginLeft = marginLeft + 'px';
}
}
if (this.element_.classList.contains(this.CssClasses_.TOP)) {
this.element_.style.top = props.top - this.element_.offsetHeight - 10 + 'px';
} else if (this.element_.classList.contains(this.CssClasses_.RIGHT)) {
this.element_.style.left = props.left + props.width + 10 + 'px';
} else if (this.element_.classList.contains(this.CssClasses_.LEFT)) {
this.element_.style.left = props.left - this.element_.offsetWidth - 10 + 'px';
} else {
this.element_.style.top = props.top + props.height + 10 + 'px';
}
this.element_.classList.add(this.CssClasses_.IS_ACTIVE);
};
/**
* Hide tooltip on mouseleave or scroll
*
* @private
*/
MaterialTooltip.prototype.hideTooltip_ = function () {
this.element_.classList.remove(this.CssClasses_.IS_ACTIVE);
};
/**
* Initialize element.
*/
MaterialTooltip.prototype.init = function () {
if (this.element_) {
var forElId = this.element_.getAttribute('for') || this.element_.getAttribute('data-mdl-for');
if (forElId) {
this.forElement_ = document.getElementById(forElId);
}
if (this.forElement_) {
// It's left here because it prevents accidental text selection on Android
if (!this.forElement_.hasAttribute('tabindex')) {
this.forElement_.setAttribute('tabindex', '0');
}
this.boundMouseEnterHandler = this.handleMouseEnter_.bind(this);
this.boundMouseLeaveAndScrollHandler = this.hideTooltip_.bind(this);
this.forElement_.addEventListener('mouseenter', this.boundMouseEnterHandler, false);
this.forElement_.addEventListener('touchend', this.boundMouseEnterHandler, false);
this.forElement_.addEventListener('mouseleave', this.boundMouseLeaveAndScrollHandler, false);
window.addEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);
window.addEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);
}
}
};
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialTooltip,
classAsString: 'MaterialTooltip',
cssClass: 'mdl-tooltip'
});
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Layout MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @constructor
* @param {HTMLElement} element The element that will be upgraded.
*/
var MaterialLayout = function MaterialLayout(element) {
this.element_ = element;
// Initialize instance.
this.init();
};
window['MaterialLayout'] = MaterialLayout;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialLayout.prototype.Constant_ = {
MAX_WIDTH: '(max-width: 1024px)',
TAB_SCROLL_PIXELS: 100,
RESIZE_TIMEOUT: 100,
MENU_ICON: '',
CHEVRON_LEFT: 'chevron_left',
CHEVRON_RIGHT: 'chevron_right'
};
/**
* Keycodes, for code readability.
*
* @enum {number}
* @private
*/
MaterialLayout.prototype.Keycodes_ = {
ENTER: 13,
ESCAPE: 27,
SPACE: 32
};
/**
* Modes.
*
* @enum {number}
* @private
*/
MaterialLayout.prototype.Mode_ = {
STANDARD: 0,
SEAMED: 1,
WATERFALL: 2,
SCROLL: 3
};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialLayout.prototype.CssClasses_ = {
CONTAINER: 'mdl-layout__container',
HEADER: 'mdl-layout__header',
DRAWER: 'mdl-layout__drawer',
CONTENT: 'mdl-layout__content',
DRAWER_BTN: 'mdl-layout__drawer-button',
ICON: 'material-icons',
JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
RIPPLE_CONTAINER: 'mdl-layout__tab-ripple-container',
RIPPLE: 'mdl-ripple',
RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
HEADER_SEAMED: 'mdl-layout__header--seamed',
HEADER_WATERFALL: 'mdl-layout__header--waterfall',
HEADER_SCROLL: 'mdl-layout__header--scroll',
FIXED_HEADER: 'mdl-layout--fixed-header',
OBFUSCATOR: 'mdl-layout__obfuscator',
TAB_BAR: 'mdl-layout__tab-bar',
TAB_CONTAINER: 'mdl-layout__tab-bar-container',
TAB: 'mdl-layout__tab',
TAB_BAR_BUTTON: 'mdl-layout__tab-bar-button',
TAB_BAR_LEFT_BUTTON: 'mdl-layout__tab-bar-left-button',
TAB_BAR_RIGHT_BUTTON: 'mdl-layout__tab-bar-right-button',
TAB_MANUAL_SWITCH: 'mdl-layout__tab-manual-switch',
PANEL: 'mdl-layout__tab-panel',
HAS_DRAWER: 'has-drawer',
HAS_TABS: 'has-tabs',
HAS_SCROLLING_HEADER: 'has-scrolling-header',
CASTING_SHADOW: 'is-casting-shadow',
IS_COMPACT: 'is-compact',
IS_SMALL_SCREEN: 'is-small-screen',
IS_DRAWER_OPEN: 'is-visible',
IS_ACTIVE: 'is-active',
IS_UPGRADED: 'is-upgraded',
IS_ANIMATING: 'is-animating',
ON_LARGE_SCREEN: 'mdl-layout--large-screen-only',
ON_SMALL_SCREEN: 'mdl-layout--small-screen-only'
};
/**
* Handles scrolling on the content.
*
* @private
*/
MaterialLayout.prototype.contentScrollHandler_ = function () {
if (this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)) {
return;
}
var headerVisible = !this.element_.classList.contains(this.CssClasses_.IS_SMALL_SCREEN) || this.element_.classList.contains(this.CssClasses_.FIXED_HEADER);
if (this.content_.scrollTop > 0 && !this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
this.header_.classList.add(this.CssClasses_.IS_COMPACT);
if (headerVisible) {
this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
}
} else if (this.content_.scrollTop <= 0 && this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
if (headerVisible) {
this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
}
}
};
/**
* Handles a keyboard event on the drawer.
*
* @param {Event} evt The event that fired.
* @private
*/
MaterialLayout.prototype.keyboardEventHandler_ = function (evt) {
// Only react when the drawer is open.
if (evt.keyCode === this.Keycodes_.ESCAPE && this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) {
this.toggleDrawer();
}
};
/**
* Handles changes in screen size.
*
* @private
*/
MaterialLayout.prototype.screenSizeHandler_ = function () {
if (this.screenSizeMediaQuery_.matches) {
this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
} else {
this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
// Collapse drawer (if any) when moving to a large screen size.
if (this.drawer_) {
this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
}
}
};
/**
* Handles events of drawer button.
*
* @param {Event} evt The event that fired.
* @private
*/
MaterialLayout.prototype.drawerToggleHandler_ = function (evt) {
if (evt && evt.type === 'keydown') {
if (evt.keyCode === this.Keycodes_.SPACE || evt.keyCode === this.Keycodes_.ENTER) {
// prevent scrolling in drawer nav
evt.preventDefault();
} else {
// prevent other keys
return;
}
}
this.toggleDrawer();
};
/**
* Handles (un)setting the `is-animating` class
*
* @private
*/
MaterialLayout.prototype.headerTransitionEndHandler_ = function () {
this.header_.classList.remove(this.CssClasses_.IS_ANIMATING);
};
/**
* Handles expanding the header on click
*
* @private
*/
MaterialLayout.prototype.headerClickHandler_ = function () {
if (this.header_.classList.contains(this.CssClasses_.IS_COMPACT)) {
this.header_.classList.remove(this.CssClasses_.IS_COMPACT);
this.header_.classList.add(this.CssClasses_.IS_ANIMATING);
}
};
/**
* Reset tab state, dropping active classes
*
* @private
*/
MaterialLayout.prototype.resetTabState_ = function (tabBar) {
for (var k = 0; k < tabBar.length; k++) {
tabBar[k].classList.remove(this.CssClasses_.IS_ACTIVE);
}
};
/**
* Reset panel state, droping active classes
*
* @private
*/
MaterialLayout.prototype.resetPanelState_ = function (panels) {
for (var j = 0; j < panels.length; j++) {
panels[j].classList.remove(this.CssClasses_.IS_ACTIVE);
}
};
/**
* Toggle drawer state
*
* @public
*/
MaterialLayout.prototype.toggleDrawer = function () {
var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
this.obfuscator_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);
// Set accessibility properties.
if (this.drawer_.classList.contains(this.CssClasses_.IS_DRAWER_OPEN)) {
this.drawer_.setAttribute('aria-hidden', 'false');
drawerButton.setAttribute('aria-expanded', 'true');
} else {
this.drawer_.setAttribute('aria-hidden', 'true');
drawerButton.setAttribute('aria-expanded', 'false');
}
};
MaterialLayout.prototype['toggleDrawer'] = MaterialLayout.prototype.toggleDrawer;
/**
* Initialize element.
*/
MaterialLayout.prototype.init = function () {
if (this.element_) {
var container = document.createElement('div');
container.classList.add(this.CssClasses_.CONTAINER);
var focusedElement = this.element_.querySelector(':focus');
this.element_.parentElement.insertBefore(container, this.element_);
this.element_.parentElement.removeChild(this.element_);
container.appendChild(this.element_);
if (focusedElement) {
focusedElement.focus();
}
var directChildren = this.element_.childNodes;
var numChildren = directChildren.length;
for (var c = 0; c < numChildren; c++) {
var child = directChildren[c];
if (child.classList && child.classList.contains(this.CssClasses_.HEADER)) {
this.header_ = child;
}
if (child.classList && child.classList.contains(this.CssClasses_.DRAWER)) {
this.drawer_ = child;
}
if (child.classList && child.classList.contains(this.CssClasses_.CONTENT)) {
this.content_ = child;
}
}
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
// when page is loaded from back/forward cache
// trigger repaint to let layout scroll in safari
this.element_.style.overflowY = 'hidden';
requestAnimationFrame(function () {
this.element_.style.overflowY = '';
}.bind(this));
}
}.bind(this), false);
if (this.header_) {
this.tabBar_ = this.header_.querySelector('.' + this.CssClasses_.TAB_BAR);
}
var mode = this.Mode_.STANDARD;
if (this.header_) {
if (this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)) {
mode = this.Mode_.SEAMED;
} else if (this.header_.classList.contains(this.CssClasses_.HEADER_WATERFALL)) {
mode = this.Mode_.WATERFALL;
this.header_.addEventListener('transitionend', this.headerTransitionEndHandler_.bind(this));
this.header_.addEventListener('click', this.headerClickHandler_.bind(this));
} else if (this.header_.classList.contains(this.CssClasses_.HEADER_SCROLL)) {
mode = this.Mode_.SCROLL;
container.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER);
}
if (mode === this.Mode_.STANDARD) {
this.header_.classList.add(this.CssClasses_.CASTING_SHADOW);
if (this.tabBar_) {
this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW);
}
} else if (mode === this.Mode_.SEAMED || mode === this.Mode_.SCROLL) {
this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW);
if (this.tabBar_) {
this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW);
}
} else if (mode === this.Mode_.WATERFALL) {
// Add and remove shadows depending on scroll position.
// Also add/remove auxiliary class for styling of the compact version of
// the header.
this.content_.addEventListener('scroll', this.contentScrollHandler_.bind(this));
this.contentScrollHandler_();
}
}
// Add drawer toggling button to our layout, if we have an openable drawer.
if (this.drawer_) {
var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN);
if (!drawerButton) {
drawerButton = document.createElement('div');
drawerButton.setAttribute('aria-expanded', 'false');
drawerButton.setAttribute('role', 'button');
drawerButton.setAttribute('tabindex', '0');
drawerButton.classList.add(this.CssClasses_.DRAWER_BTN);
var drawerButtonIcon = document.createElement('i');
drawerButtonIcon.classList.add(this.CssClasses_.ICON);
drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON;
drawerButton.appendChild(drawerButtonIcon);
}
if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) {
//If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well.
drawerButton.classList.add(this.CssClasses_.ON_LARGE_SCREEN);
} else if (this.drawer_.classList.contains(this.CssClasses_.ON_SMALL_SCREEN)) {
//If drawer has ON_SMALL_SCREEN class then add it to the drawer toggle button as well.
drawerButton.classList.add(this.CssClasses_.ON_SMALL_SCREEN);
}
drawerButton.addEventListener('click', this.drawerToggleHandler_.bind(this));
drawerButton.addEventListener('keydown', this.drawerToggleHandler_.bind(this));
// Add a class if the layout has a drawer, for altering the left padding.
// Adds the HAS_DRAWER to the elements since this.header_ may or may
// not be present.
this.element_.classList.add(this.CssClasses_.HAS_DRAWER);
// If we have a fixed header, add the button to the header rather than
// the layout.
if (this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)) {
this.header_.insertBefore(drawerButton, this.header_.firstChild);
} else {
this.element_.insertBefore(drawerButton, this.content_);
}
var obfuscator = document.createElement('div');
obfuscator.classList.add(this.CssClasses_.OBFUSCATOR);
this.element_.appendChild(obfuscator);
obfuscator.addEventListener('click', this.drawerToggleHandler_.bind(this));
this.obfuscator_ = obfuscator;
this.drawer_.addEventListener('keydown', this.keyboardEventHandler_.bind(this));
this.drawer_.setAttribute('aria-hidden', 'true');
}
// Keep an eye on screen size, and add/remove auxiliary class for styling
// of small screens.
this.screenSizeMediaQuery_ = window.matchMedia(this.Constant_.MAX_WIDTH);
this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this));
this.screenSizeHandler_();
// Initialize tabs, if any.
if (this.header_ && this.tabBar_) {
this.element_.classList.add(this.CssClasses_.HAS_TABS);
var tabContainer = document.createElement('div');
tabContainer.classList.add(this.CssClasses_.TAB_CONTAINER);
this.header_.insertBefore(tabContainer, this.tabBar_);
this.header_.removeChild(this.tabBar_);
var leftButton = document.createElement('div');
leftButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
leftButton.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON);
var leftButtonIcon = document.createElement('i');
leftButtonIcon.classList.add(this.CssClasses_.ICON);
leftButtonIcon.textContent = this.Constant_.CHEVRON_LEFT;
leftButton.appendChild(leftButtonIcon);
leftButton.addEventListener('click', function () {
this.tabBar_.scrollLeft -= this.Constant_.TAB_SCROLL_PIXELS;
}.bind(this));
var rightButton = document.createElement('div');
rightButton.classList.add(this.CssClasses_.TAB_BAR_BUTTON);
rightButton.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON);
var rightButtonIcon = document.createElement('i');
rightButtonIcon.classList.add(this.CssClasses_.ICON);
rightButtonIcon.textContent = this.Constant_.CHEVRON_RIGHT;
rightButton.appendChild(rightButtonIcon);
rightButton.addEventListener('click', function () {
this.tabBar_.scrollLeft += this.Constant_.TAB_SCROLL_PIXELS;
}.bind(this));
tabContainer.appendChild(leftButton);
tabContainer.appendChild(this.tabBar_);
tabContainer.appendChild(rightButton);
// Add and remove tab buttons depending on scroll position and total
// window size.
var tabUpdateHandler = function () {
if (this.tabBar_.scrollLeft > 0) {
leftButton.classList.add(this.CssClasses_.IS_ACTIVE);
} else {
leftButton.classList.remove(this.CssClasses_.IS_ACTIVE);
}
if (this.tabBar_.scrollLeft < this.tabBar_.scrollWidth - this.tabBar_.offsetWidth) {
rightButton.classList.add(this.CssClasses_.IS_ACTIVE);
} else {
rightButton.classList.remove(this.CssClasses_.IS_ACTIVE);
}
}.bind(this);
this.tabBar_.addEventListener('scroll', tabUpdateHandler);
tabUpdateHandler();
// Update tabs when the window resizes.
var windowResizeHandler = function () {
// Use timeouts to make sure it doesn't happen too often.
if (this.resizeTimeoutId_) {
clearTimeout(this.resizeTimeoutId_);
}
this.resizeTimeoutId_ = setTimeout(function () {
tabUpdateHandler();
this.resizeTimeoutId_ = null;
}.bind(this), this.Constant_.RESIZE_TIMEOUT);
}.bind(this);
window.addEventListener('resize', windowResizeHandler);
if (this.tabBar_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
this.tabBar_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
}
// Select element tabs, document panels
var tabs = this.tabBar_.querySelectorAll('.' + this.CssClasses_.TAB);
var panels = this.content_.querySelectorAll('.' + this.CssClasses_.PANEL);
// Create new tabs for each tab element
for (var i = 0; i < tabs.length; i++) {
new MaterialLayoutTab(tabs[i], tabs, panels, this);
}
}
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
}
};
/**
* Constructor for an individual tab.
*
* @constructor
* @param {HTMLElement} tab The HTML element for the tab.
* @param {!Array} tabs Array with HTML elements for all tabs.
* @param {!Array} panels Array with HTML elements for all panels.
* @param {MaterialLayout} layout The MaterialLayout object that owns the tab.
*/
function MaterialLayoutTab(tab, tabs, panels, layout) {
/**
* Auxiliary method to programmatically select a tab in the UI.
*/
function selectTab() {
var href = tab.href.split('#')[1];
var panel = layout.content_.querySelector('#' + href);
layout.resetTabState_(tabs);
layout.resetPanelState_(panels);
tab.classList.add(layout.CssClasses_.IS_ACTIVE);
panel.classList.add(layout.CssClasses_.IS_ACTIVE);
}
if (layout.tabBar_.classList.contains(layout.CssClasses_.JS_RIPPLE_EFFECT)) {
var rippleContainer = document.createElement('span');
rippleContainer.classList.add(layout.CssClasses_.RIPPLE_CONTAINER);
rippleContainer.classList.add(layout.CssClasses_.JS_RIPPLE_EFFECT);
var ripple = document.createElement('span');
ripple.classList.add(layout.CssClasses_.RIPPLE);
rippleContainer.appendChild(ripple);
tab.appendChild(rippleContainer);
}
if (!layout.tabBar_.classList.contains(layout.CssClasses_.TAB_MANUAL_SWITCH)) {
tab.addEventListener('click', function (e) {
if (tab.getAttribute('href').charAt(0) === '#') {
e.preventDefault();
selectTab();
}
});
}
tab.show = selectTab;
}
window['MaterialLayoutTab'] = MaterialLayoutTab;
// The component registers itself. It can assume componentHandler is available
// in the global scope.
componentHandler.register({
constructor: MaterialLayout,
classAsString: 'MaterialLayout',
cssClass: 'mdl-js-layout'
});
/**
* @license
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Class constructor for Data Table Card MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @constructor
* @param {Element} element The element that will be upgraded.
*/
var MaterialDataTable = function MaterialDataTable(element) {
this.element_ = element;
// Initialize instance.
this.init();
};
window['MaterialDataTable'] = MaterialDataTable;
/**
* Store constants in one place so they can be updated easily.
*
* @enum {string | number}
* @private
*/
MaterialDataTable.prototype.Constant_ = {};
/**
* Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date.
*
* @enum {string}
* @private
*/
MaterialDataTable.prototype.CssClasses_ = {
DATA_TABLE: 'mdl-data-table',
SELECTABLE: 'mdl-data-table--selectable',
SELECT_ELEMENT: 'mdl-data-table__select',
IS_SELECTED: 'is-selected',
IS_UPGRADED: 'is-upgraded'
};
/**
* Generates and returns a function that toggles the selection state of a
* single row (or multiple rows).
*
* @param {Element} checkbox Checkbox that toggles the selection state.
* @param {Element} row Row to toggle when checkbox changes.
* @param {(Array