├── .gitignore ├── docs ├── build │ ├── img │ │ └── bg_1.png │ ├── fonts │ │ ├── roboto │ │ │ ├── Roboto-Bold.ttf │ │ │ ├── Roboto-Thin.ttf │ │ │ ├── Roboto-Bold.woff │ │ │ ├── Roboto-Bold.woff2 │ │ │ ├── Roboto-Light.ttf │ │ │ ├── Roboto-Light.woff │ │ │ ├── Roboto-Light.woff2 │ │ │ ├── Roboto-Medium.ttf │ │ │ ├── Roboto-Medium.woff │ │ │ ├── Roboto-Regular.ttf │ │ │ ├── Roboto-Thin.woff │ │ │ ├── Roboto-Thin.woff2 │ │ │ ├── Roboto-Medium.woff2 │ │ │ ├── Roboto-Regular.woff │ │ │ └── Roboto-Regular.woff2 │ │ └── icons │ │ │ ├── Material-Design-Icons.eot │ │ │ ├── Material-Design-Icons.ttf │ │ │ ├── Material-Design-Icons.woff │ │ │ ├── Material-Design-Icons.woff2 │ │ │ └── LICENSE.txt │ ├── index.html │ ├── css │ │ ├── docs.css │ │ └── prism.css │ └── js │ │ ├── prism.js │ │ └── material.min.js └── src │ ├── components │ ├── index.js │ ├── docComponents.js │ ├── docCode.js │ └── docComponent.js │ ├── views │ ├── startView.js │ ├── index.js │ ├── benchmarkView.js │ ├── slidersView.js │ ├── badgesView.js │ ├── tablesView.js │ ├── textfieldsView.js │ ├── togglesView.js │ ├── loadingView.js │ ├── menusView.js │ ├── layoutView.js │ ├── cardsView.js │ └── buttonsView.js │ └── app.js ├── lib ├── menuItem.js ├── layout │ ├── layoutContent.js │ ├── layoutDrawer.js │ ├── layoutSpacer.js │ ├── layoutHeaderRow.js │ ├── layoutTitle.js │ ├── layout.js │ └── layoutHeader.js ├── navigation │ ├── navigation.js │ └── navigationLink.js ├── tabs │ ├── tabsPanel.js │ └── tabs.js ├── badge.js ├── icon.js ├── card │ ├── cardMenu.js │ ├── cardActions.js │ ├── cardSupportingText.js │ ├── card.js │ ├── cardMedia.js │ └── cardTitle.js ├── menu.js ├── spinner.js ├── grid │ ├── grid.js │ └── gridCell.js ├── slider.js ├── progress.js ├── button.js ├── toggle.js ├── textfield.js ├── table.js └── index.js ├── package.json ├── webpack.config.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | !docs/build/ -------------------------------------------------------------------------------- /docs/build/img/bg_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/img/bg_1.png -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Bold.ttf -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Thin.ttf -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Bold.woff -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Bold.woff2 -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Light.ttf -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Light.woff -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Light.woff2 -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Medium.ttf -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Medium.woff -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Regular.ttf -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Thin.woff -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Thin.woff2 -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Medium.woff2 -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Regular.woff -------------------------------------------------------------------------------- /docs/build/fonts/roboto/Roboto-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/roboto/Roboto-Regular.woff2 -------------------------------------------------------------------------------- /docs/build/fonts/icons/Material-Design-Icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/icons/Material-Design-Icons.eot -------------------------------------------------------------------------------- /docs/build/fonts/icons/Material-Design-Icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/icons/Material-Design-Icons.ttf -------------------------------------------------------------------------------- /docs/build/fonts/icons/Material-Design-Icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/icons/Material-Design-Icons.woff -------------------------------------------------------------------------------- /docs/build/fonts/icons/Material-Design-Icons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zarxor/mdl-reactjs/HEAD/docs/build/fonts/icons/Material-Design-Icons.woff2 -------------------------------------------------------------------------------- /docs/src/components/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | DocCode: require('./docCode'), 3 | DocComponent: require('./docComponent'), 4 | DocComponents: require('./docComponents'), 5 | }; 6 | -------------------------------------------------------------------------------- /docs/src/components/docComponents.js: -------------------------------------------------------------------------------- 1 | var React = require("react"); 2 | 3 | module.exports = React.createClass({ 4 | 5 | getDefaultProps: function() { 6 | return { 7 | }; 8 | }, 9 | 10 | render: function () { 11 | return
12 | {this.props.children} 13 |
; 14 | }, 15 | 16 | componentDidMount: function() { 17 | } 18 | }); 19 | -------------------------------------------------------------------------------- /docs/src/views/startView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import readmeFile from '../../../README.md'; 3 | 4 | export default class StartView extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | render() { 10 | return ( 11 |
12 |
13 |
14 | ); 15 | } 16 | } -------------------------------------------------------------------------------- /docs/src/components/docCode.js: -------------------------------------------------------------------------------- 1 | var React = require("react"); 2 | 3 | module.exports = React.createClass({ 4 | 5 | getDefaultProps: function() { 6 | return { 7 | language: 'jsx' 8 | }; 9 | }, 10 | 11 | render: function () { 12 | return 
13 |               
{this.props.title}

14 |     					
15 |     						{this.props.children}
16 |     					
17 |
18 | }, 19 | 20 | componentDidMount: function() { 21 | Prism.highlightAll(); 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /docs/src/components/docComponent.js: -------------------------------------------------------------------------------- 1 | var React = require("react"); 2 | 3 | module.exports = React.createClass({ 4 | 5 | getDefaultProps: function() { 6 | return { 7 | caption: '' 8 | }; 9 | }, 10 | 11 | render: function () { 12 | return
13 |
14 | {this.props.children} 15 |
16 |

17 | {this.props.caption} 18 |

19 |
20 | }, 21 | 22 | componentDidMount: function() { 23 | } 24 | }); 25 | -------------------------------------------------------------------------------- /lib/menuItem.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"), 3 | cx = require('classnames'), 4 | _ = require('lodash'); 5 | 6 | var _defaultProps = { 7 | }; 8 | 9 | 10 | module.exports = React.createClass({ 11 | displayName : 'MDL.MenuItem', 12 | 13 | propTypes: { 14 | 15 | }, 16 | 17 | getDefaultProps: function() { 18 | return _defaultProps; 19 | }, 20 | 21 | _getClasses: function() { 22 | var classes = { 23 | 'mdl-menu__item': true 24 | }; 25 | return cx(classes); 26 | }, 27 | 28 | _getElement: function() { 29 | return React.createElement("li", null, this.props.children) 30 | }, 31 | 32 | render: function () { 33 | var element = this._getElement(); 34 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 35 | return React.cloneElement(element, newProps); 36 | }, 37 | 38 | componentDidMount: function() { 39 | __functions.updateComponents(); 40 | } 41 | }); 42 | -------------------------------------------------------------------------------- /docs/src/views/index.js: -------------------------------------------------------------------------------- 1 | import StartView from './startView'; 2 | 3 | import BadgesView from './badgesView'; 4 | import BenchmarkView from './benchmarkView'; 5 | import ButtonsView from './buttonsView'; 6 | import CardsView from './cardsView'; 7 | import LayoutView from './layoutView'; 8 | import LoadingView from './loadingView'; 9 | import MenusView from './menusView'; 10 | import SlidersView from './slidersView'; 11 | import TablesView from './tablesView'; 12 | import TextfieldsView from './textfieldsView'; 13 | import TogglesView from './togglesView'; 14 | 15 | module.exports = { 16 | StartView: StartView, 17 | BadgesView: BadgesView, 18 | BenchmarkView: BenchmarkView, 19 | ButtonsView: ButtonsView, 20 | CardsView: CardsView, 21 | LayoutView: LayoutView, 22 | LoadingView: LoadingView, 23 | MenusView: MenusView, 24 | SlidersView: SlidersView, 25 | TablesView: TablesView, 26 | TextfieldsView: TextfieldsView, 27 | TogglesView: TogglesView 28 | }; 29 | -------------------------------------------------------------------------------- /lib/layout/layoutContent.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"), 3 | cx = require('classnames'), 4 | _ = require('lodash'); 5 | 6 | var _defaultProps = { 7 | tag: 'main' 8 | }; 9 | 10 | module.exports = React.createClass({ 11 | displayName : 'MDL.Layout', 12 | 13 | propTypes: { 14 | 15 | }, 16 | 17 | getDefaultProps: function() { 18 | return _defaultProps; 19 | }, 20 | 21 | _getClasses: function() { 22 | var classes = { 23 | 'mdl-layout__content': true, 24 | }; 25 | return cx(classes); 26 | }, 27 | 28 | _getElement: function() { 29 | return React.createElement(this.props.tag, {}, this.props.children); 30 | }, 31 | 32 | render: function () { 33 | var element = this._getElement(); 34 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 35 | 36 | return React.cloneElement(element, newProps); 37 | }, 38 | 39 | componentDidMount: function() { 40 | __functions.updateComponents(); 41 | } 42 | }); 43 | -------------------------------------------------------------------------------- /lib/navigation/navigation.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"); 3 | var cx = require('classnames'); 4 | var _ = require('lodash'); 5 | 6 | var _defaultProps = { 7 | tag: 'nav', 8 | }; 9 | 10 | module.exports = React.createClass({ 11 | displayName : 'MDL.Navigation', 12 | 13 | propTypes: { 14 | 15 | }, 16 | 17 | getDefaultProps: function() { 18 | return _defaultProps; 19 | }, 20 | 21 | _getClasses: function() { 22 | var classes = { 23 | 'mdl-navigation': true, 24 | }; 25 | return cx(classes); 26 | }, 27 | 28 | _getElement: function() { 29 | var element = React.createElement(this.props.tag, {}, this.props.children); 30 | return element; 31 | }, 32 | 33 | render: function () { 34 | var element = this._getElement(); 35 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 36 | 37 | return React.cloneElement(element, newProps); 38 | }, 39 | 40 | componentDidMount: function() { 41 | __functions.updateComponents(); 42 | } 43 | }); 44 | -------------------------------------------------------------------------------- /lib/layout/layoutDrawer.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"); 3 | var cx = require('classnames'); 4 | var _ = require('lodash'); 5 | 6 | var _defaultProps = { 7 | tag: 'div' 8 | }; 9 | 10 | module.exports = React.createClass({ 11 | displayName : 'MDL.LayoutDrawer', 12 | 13 | propTypes: { 14 | 15 | }, 16 | 17 | getDefaultProps: function() { 18 | return _defaultProps; 19 | }, 20 | 21 | _getClasses: function() { 22 | var classes = { 23 | 'mdl-layout__drawer': true, 24 | }; 25 | return cx(classes); 26 | }, 27 | 28 | _getElement: function() { 29 | var element = React.createElement(this.props.tag, {}, this.props.children); 30 | 31 | return element; 32 | }, 33 | 34 | render: function () { 35 | var element = this._getElement(); 36 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 37 | 38 | return React.cloneElement(element, newProps); 39 | }, 40 | 41 | componentDidMount: function() { 42 | __functions.updateComponents(); 43 | } 44 | }); 45 | -------------------------------------------------------------------------------- /docs/src/views/benchmarkView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MDL from '../../../lib/'; 3 | 4 | export default class BenchmarkView extends React.Component { 5 | componentWillMount() { 6 | this.renderStart = new Date().getTime(); 7 | } 8 | 9 | componentDidMount() { 10 | var elapsed = new Date().getTime()-this.renderStart; 11 | console.log(elapsed); 12 | } 13 | 14 | render() { 15 | var benchMarkItems = []; 16 | for (var x = 0; x < 1000; x++) { 17 | benchMarkItems.push( 18 | 19 | asdf 20 | 21 | 22 | 1 23 | 2 24 | 3 25 | 4 26 | 5 27 | 6 28 | 29 | 30 | ); 31 | } 32 | 33 | return ( 34 | 35 | {benchMarkItems} 36 | 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /lib/navigation/navigationLink.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"); 3 | var cx = require('classnames'); 4 | var _ = require('lodash'); 5 | 6 | var _defaultProps = { 7 | tag: 'a' 8 | }; 9 | 10 | module.exports = React.createClass({ 11 | displayName : 'MDL.NavigationLink', 12 | 13 | propTypes: { 14 | 15 | }, 16 | 17 | getDefaultProps: function() { 18 | return _defaultProps; 19 | }, 20 | 21 | _getClasses: function() { 22 | var classes = { 23 | 'mdl-navigation__link': true, 24 | }; 25 | return cx(classes); 26 | }, 27 | 28 | _getElement: function() { 29 | var element = React.createElement(this.props.tag, { 30 | children: this.props.children 31 | }); 32 | 33 | return element; 34 | }, 35 | 36 | render: function () { 37 | var element = this._getElement(); 38 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 39 | 40 | return React.cloneElement(element, newProps); 41 | }, 42 | 43 | componentDidMount: function() { 44 | __functions.updateComponents(); 45 | } 46 | }); 47 | -------------------------------------------------------------------------------- /lib/layout/layoutSpacer.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"); 3 | var cx = require('classnames'); 4 | var _ = require('lodash'); 5 | 6 | module.exports = React.createClass({ 7 | displayName : 'MDL.LayoutSpacer', 8 | 9 | getDefaultProps: function() { 10 | return { 11 | }; 12 | }, 13 | 14 | _getClasses: function() { 15 | var classes = { 16 | 'mdl-layout-spacer': true 17 | }; 18 | return cx(classes); 19 | }, 20 | 21 | _getElement: function() { 22 | return React.createElement("div", null, this.props.children) 23 | }, 24 | 25 | render: function () { 26 | var element = this._getElement(); 27 | var classname = element.props.className || ''; 28 | 29 | var newProps = { 30 | className : classname + ' ' + this._getClasses(), 31 | disabled : this.props.disabled, 32 | style : _.extend(element.props.style || {}, this.props.style), 33 | id : this.props.id, 34 | }; 35 | 36 | return React.cloneElement(element, newProps); 37 | }, 38 | 39 | componentDidMount: function() { 40 | __functions.updateComponents(); 41 | } 42 | }); 43 | -------------------------------------------------------------------------------- /lib/tabs/tabsPanel.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"), 3 | cx = require('classnames'), 4 | _ = require('lodash'); 5 | 6 | var _defaultProps = { 7 | tag: 'div', 8 | ripple: false, 9 | title: '', 10 | active: false 11 | }; 12 | 13 | module.exports = React.createClass({ 14 | displayName : 'MDL.TabsPanel', 15 | 16 | propTypes: { 17 | 18 | }, 19 | 20 | getDefaultProps: function() { 21 | return _defaultProps; 22 | }, 23 | 24 | _getClasses: function() { 25 | var classes = { 26 | 'mdl-tabs__panel': true, 27 | 'is-active': this.props.active, 28 | }; 29 | return cx(classes); 30 | }, 31 | 32 | _getElement: function() { 33 | return React.createElement(this.props.tag, {}, this.props.children); 34 | }, 35 | 36 | render: function () { 37 | var element = this._getElement(); 38 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 39 | return React.cloneElement(element, newProps); 40 | }, 41 | 42 | componentDidMount: function() { 43 | __functions.updateComponents(); 44 | } 45 | }); 46 | -------------------------------------------------------------------------------- /lib/layout/layoutHeaderRow.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"); 3 | var cx = require('classnames'); 4 | var _ = require('lodash'); 5 | 6 | module.exports = React.createClass({ 7 | displayName : 'MDL.LayoutHeaderRow', 8 | 9 | propTypes: { 10 | 11 | }, 12 | 13 | getDefaultProps: function() { 14 | return { 15 | tag: 'div', 16 | isTransparent: false 17 | }; 18 | }, 19 | 20 | _getClasses: function() { 21 | var classes = { 22 | 'mdl-layout__header-row': true, 23 | }; 24 | return cx(classes); 25 | }, 26 | 27 | _getElement: function() { 28 | var element = React.createElement(this.props.tag, {}, this.props.children); 29 | return element; 30 | }, 31 | 32 | render: function () { 33 | var element = this._getElement(); 34 | var classname = element.props.className || ''; 35 | 36 | var newProps = { 37 | className : classname + ' ' + this._getClasses(), 38 | style : _.extend(element.props.style || {}, this.props.style), 39 | id : this.props.id, 40 | }; 41 | 42 | return React.cloneElement(element, newProps); 43 | }, 44 | 45 | componentDidMount: function() { 46 | __functions.updateComponents(); 47 | } 48 | }); 49 | -------------------------------------------------------------------------------- /lib/layout/layoutTitle.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"); 3 | var cx = require('classnames'); 4 | var _ = require('lodash'); 5 | 6 | module.exports = React.createClass({ 7 | displayName : 'MDL.LayoutTitle', 8 | 9 | propTypes: { 10 | 11 | }, 12 | 13 | getDefaultProps: function() { 14 | return { 15 | tag: 'div', 16 | isTransparent: false 17 | }; 18 | }, 19 | 20 | _getClasses: function() { 21 | var classes = { 22 | 'mdl-layout-title': true 23 | }; 24 | return cx(classes); 25 | }, 26 | 27 | _getElement: function() { 28 | var element = React.createElement(this.props.tag, { 29 | children: this.props.children 30 | });; 31 | 32 | return element; 33 | }, 34 | 35 | render: function () { 36 | var element = this._getElement(); 37 | var classname = element.props.className || ''; 38 | 39 | var newProps = { 40 | className : classname + ' ' + this._getClasses(), 41 | style : _.extend(element.props.style || {}, this.props.style), 42 | id : this.props.id, 43 | }; 44 | 45 | return React.cloneElement(element, newProps); 46 | }, 47 | 48 | componentDidMount: function() { 49 | __functions.updateComponents(); 50 | } 51 | }); 52 | -------------------------------------------------------------------------------- /lib/badge.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"), 3 | cx = require('classnames'), 4 | _ = require('lodash'); 5 | 6 | var _defaultProps = { 7 | isIcon: false, 8 | tag: 'span', 9 | data: '', 10 | background: true 11 | }; 12 | 13 | module.exports = React.createClass({ 14 | displayName : 'MDL.Badge', 15 | 16 | propTypes: { 17 | 18 | }, 19 | 20 | getDefaultProps: function() { 21 | return _defaultProps; 22 | }, 23 | 24 | _getClasses: function() { 25 | var classes = { 26 | 'mdl-badge': true, 27 | 'material-icons': this.props.isIcon, 28 | 'mdl-badge--no-background': !this.props.background 29 | }; 30 | return cx(classes); 31 | }, 32 | 33 | _getElement: function() { 34 | var element = React.createElement(this.props.tag, { 35 | 'data-badge': this.props.data 36 | }, this.props.children); 37 | 38 | return element; 39 | }, 40 | 41 | render: function () { 42 | var element = this._getElement(); 43 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 44 | 45 | return React.cloneElement(element, newProps); 46 | }, 47 | 48 | componentDidMount: function() { 49 | __functions.updateComponents(); 50 | } 51 | }); 52 | -------------------------------------------------------------------------------- /lib/icon.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"); 3 | var cx = require('classnames'); 4 | var _ = require('lodash'); 5 | 6 | var _generalProps = { 7 | colors: true, 8 | }; 9 | var _defaultProps = __functions.makeDefaultProps({ 10 | }, _generalProps); 11 | 12 | var _propTypes = __functions.makeDefaultPropTypes({ 13 | }, _generalProps); 14 | 15 | module.exports = React.createClass({ 16 | displayName : 'MDL.Icon', 17 | 18 | propTypes: _propTypes, 19 | 20 | getDefaultProps: function() { 21 | return _defaultProps; 22 | }, 23 | 24 | _getClasses: function() { 25 | var classes = { 26 | 'material-icons': true 27 | }; 28 | 29 | classes = __functions.addGeneralClasses(classes, this.props); 30 | 31 | return cx(classes); 32 | }, 33 | 34 | _getElement: function() { 35 | return React.createElement("i", null, this.props.children) 36 | }, 37 | 38 | render: function () { 39 | var element = this._getElement(); 40 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 41 | 42 | return React.cloneElement(element, newProps); 43 | }, 44 | 45 | componentDidMount: function() { 46 | __functions.updateComponents(); 47 | } 48 | }); 49 | -------------------------------------------------------------------------------- /lib/layout/layout.js: -------------------------------------------------------------------------------- 1 | var React = require("react"), 2 | cx = require('classnames'), 3 | _ = require('lodash'); 4 | 5 | var _defaultProps = { 6 | tag: 'div', 7 | isFixedHeader: false, 8 | isFixedDrawer: false, 9 | }; 10 | 11 | module.exports = React.createClass({ 12 | displayName: 'MDL.Layout', 13 | 14 | propTypes: { 15 | 16 | }, 17 | 18 | getDefaultProps: function () { 19 | return _defaultProps; 20 | }, 21 | 22 | _getClasses: function () { 23 | var classes = { 24 | 'mdl-layout': true, 25 | 'mdl-js-layout': true, 26 | 'mdl-layout--fixed-header': this.props.isFixedHeader, 27 | 'mdl-layout--fixed-drawer': this.props.isFixedDrawer, 28 | }; 29 | return cx(classes); 30 | }, 31 | 32 | _getElement: function () { 33 | return React.createElement(this.props.tag, {}, this.props.children); 34 | }, 35 | 36 | render: function () { 37 | var element = this._getElement(); 38 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 39 | 40 | return React.createElement("div", { 41 | className: "mdl-layout__container--root" 42 | }, React.cloneElement(element, newProps)); 43 | }, 44 | 45 | componentDidMount: function () { 46 | __functions.updateComponents(); 47 | } 48 | }); -------------------------------------------------------------------------------- /lib/card/cardMenu.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"), 3 | cx = require('classnames'), 4 | _ = require('lodash'); 5 | 6 | var _generalProps = { 7 | shadow: true, 8 | colors: true 9 | }; 10 | 11 | var _defaultProps = __functions.makeDefaultProps({ 12 | shadow: 0 13 | }, _generalProps); 14 | 15 | var _propTypes = __functions.makeDefaultPropTypes({ 16 | }, _generalProps); 17 | 18 | module.exports = React.createClass({ 19 | displayName : 'MDL.CardMenu', 20 | 21 | propTypes: _propTypes, 22 | 23 | getDefaultProps: function() { 24 | return _defaultProps; 25 | }, 26 | 27 | _getClasses: function() { 28 | var classes = { 29 | 'mdl-card__menu': true, 30 | }; 31 | classes = __functions.addGeneralClasses(classes, this.props); 32 | return cx(classes); 33 | }, 34 | 35 | _getElement: function() { 36 | return React.createElement("div", null, this.props.children) 37 | }, 38 | 39 | render: function () { 40 | var element = this._getElement(); 41 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 42 | 43 | return React.cloneElement(element, newProps); 44 | }, 45 | 46 | componentDidMount: function() { 47 | __functions.updateComponents(); 48 | } 49 | }); 50 | -------------------------------------------------------------------------------- /lib/menu.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"), 3 | cx = require('classnames'), 4 | _ = require('lodash'); 5 | 6 | var _defaultProps = { 7 | ripple: true, 8 | position: 'bottom-left' 9 | }; 10 | 11 | 12 | module.exports = React.createClass({ 13 | displayName : 'MDL.Menu', 14 | 15 | propTypes: { 16 | position : React.PropTypes.oneOf([ 17 | 'bottom-left', 18 | 'bottom-right', 19 | 'top-right', 20 | 'top-left', 21 | ]), 22 | }, 23 | 24 | getDefaultProps: function() { 25 | return _defaultProps; 26 | }, 27 | 28 | _getClasses: function() { 29 | var classes = { 30 | 'mdl-menu': true, 31 | 'mdl-js-menu': true, 32 | 'mdl-js-ripple-effect': this.props.ripple 33 | }; 34 | 35 | classes['mdl-menu--' + this.props.position] = true; 36 | 37 | return cx(classes); 38 | }, 39 | 40 | _getElement: function() { 41 | return React.createElement("ul", null, this.props.children) 42 | }, 43 | 44 | render: function () { 45 | var element = this._getElement(); 46 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 47 | 48 | return React.cloneElement(element, newProps); 49 | }, 50 | 51 | componentDidMount: function() { 52 | __functions.updateComponents(); 53 | } 54 | }); 55 | -------------------------------------------------------------------------------- /lib/spinner.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"); 3 | var cx = require('classnames'); 4 | var _ = require('lodash'); 5 | 6 | module.exports = React.createClass({ 7 | displayName : 'MDL.Spinner', 8 | 9 | propTypes: { 10 | id: React.PropTypes.string.isRequired, 11 | }, 12 | 13 | getDefaultProps: function() { 14 | return { 15 | active: false, 16 | singleColor: false, 17 | tag: 'div' 18 | }; 19 | }, 20 | 21 | _getClasses: function() { 22 | var classes = { 23 | 'mdl-spinner': true, 24 | 'mdl-js-spinner': true, 25 | 'is-active': this.props.active, 26 | 'mdl-spinner--single-color': this.props.singleColor 27 | }; 28 | return cx(classes); 29 | }, 30 | 31 | _getElement: function() { 32 | return React.createElement(this.props.tag); 33 | }, 34 | 35 | render: function () { 36 | var element = this._getElement(); 37 | var classname = element.props.className || ''; 38 | 39 | var newProps = { 40 | className : classname + ' ' + this._getClasses(), 41 | style : _.extend(element.props.style || {}, this.props.style), 42 | id : this.props.id, 43 | }; 44 | 45 | return React.cloneElement(element, newProps); 46 | }, 47 | 48 | componentDidMount: function() { 49 | __functions.updateComponents(); 50 | } 51 | }); 52 | -------------------------------------------------------------------------------- /lib/grid/grid.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"), 3 | cx = require('classnames'), 4 | _ = require('lodash'); 5 | 6 | var _generalProps = { 7 | colors: true, 8 | }; 9 | 10 | var _defaultProps = __functions.makeDefaultProps({ 11 | tag: 'div', 12 | 'no-spacing': false 13 | }, _generalProps); 14 | 15 | var _propTypes = __functions.makeDefaultPropTypes({ 16 | }, _generalProps); 17 | 18 | module.exports = React.createClass({ 19 | displayName : 'MDL.Grid', 20 | 21 | propTypes: _propTypes, 22 | 23 | getDefaultProps: function() { 24 | return _defaultProps; 25 | }, 26 | 27 | _getClasses: function() { 28 | var classes = { 29 | 'mdl-grid': true, 30 | 'mdl-grid--no-spacing': this.props['no-spacing'] 31 | }; 32 | 33 | classes = __functions.addGeneralClasses(classes, this.props); 34 | 35 | return cx(classes); 36 | }, 37 | 38 | _getElement: function() { 39 | return React.createElement(this.props.tag, {}, this.props.children); 40 | }, 41 | 42 | render: function () { 43 | var element = this._getElement(); 44 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 45 | 46 | return React.cloneElement(element, newProps); 47 | }, 48 | 49 | componentDidMount: function() { 50 | __functions.updateComponents(); 51 | } 52 | }); 53 | -------------------------------------------------------------------------------- /lib/layout/layoutHeader.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"); 3 | var cx = require('classnames'); 4 | var _ = require('lodash'); 5 | 6 | var _defaultProps = { 7 | tag: 'header', 8 | transparent: false, 9 | scroll: false, 10 | waterfall: false, 11 | }; 12 | 13 | module.exports = React.createClass({ 14 | displayName : 'MDL.LayoutHeader', 15 | 16 | propTypes: { 17 | 18 | }, 19 | 20 | getDefaultProps: function() { 21 | return _defaultProps; 22 | }, 23 | 24 | _getClasses: function() { 25 | var classes = { 26 | 'mdl-layout__header': true, 27 | 'mdl-layout__header--transparent': this.props.transparent, 28 | 'mdl-layout__header--scroll': this.props.scroll, 29 | 'mdl-layout__header--waterfall': this.props.waterfall, 30 | }; 31 | return cx(classes); 32 | }, 33 | 34 | _getElement: function() { 35 | var element = React.createElement(this.props.tag, { 36 | children: this.props.children 37 | });; 38 | 39 | return element; 40 | }, 41 | 42 | render: function () { 43 | var element = this._getElement(); 44 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 45 | 46 | return React.cloneElement(element, newProps); 47 | }, 48 | 49 | componentDidMount: function() { 50 | __functions.updateComponents(); 51 | } 52 | }); 53 | -------------------------------------------------------------------------------- /lib/card/cardActions.js: -------------------------------------------------------------------------------- 1 | var React = require("react"), 2 | cx = require('classnames'), 3 | _ = require('lodash'); 4 | 5 | var _generalProps = { 6 | shadow: true, 7 | colors: true 8 | }; 9 | 10 | var _defaultProps = __functions.makeDefaultProps({ 11 | isExpand: false, 12 | border: false, 13 | shadow: 0 14 | }, _generalProps); 15 | 16 | var _propTypes = __functions.makeDefaultPropTypes({ 17 | }, _generalProps); 18 | 19 | module.exports = React.createClass({ 20 | displayName : 'MDL.CardActions', 21 | 22 | propTypes: _propTypes, 23 | 24 | getDefaultProps: function() { 25 | return _defaultProps; 26 | }, 27 | 28 | _getClasses: function() { 29 | var classes = { 30 | 'mdl-card__actions': true, 31 | 'mdl-card--border': this.props.border 32 | }; 33 | classes = __functions.addGeneralClasses(classes, this.props); 34 | return cx(classes); 35 | }, 36 | 37 | _getElement: function() { 38 | return React.createElement("div", null, this.props.children) 39 | }, 40 | 41 | render: function () { 42 | var element = this._getElement(); 43 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 44 | 45 | return React.cloneElement(element, newProps); 46 | }, 47 | 48 | componentDidMount: function() { 49 | __functions.updateComponents(); 50 | } 51 | }); 52 | -------------------------------------------------------------------------------- /lib/card/cardSupportingText.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"), 3 | cx = require('classnames'), 4 | _ = require('lodash'); 5 | 6 | var _generalProps = { 7 | shadow: true, 8 | colors: true 9 | }; 10 | 11 | var _defaultProps = __functions.makeDefaultProps({ 12 | isExpand: false, 13 | border: false, 14 | shadow: 0 15 | }, _generalProps); 16 | 17 | var _propTypes = __functions.makeDefaultPropTypes({ 18 | }, _generalProps); 19 | 20 | module.exports = React.createClass({ 21 | displayName : 'MDL.CardSupportingText', 22 | 23 | propTypes: _propTypes, 24 | 25 | getDefaultProps: function() { 26 | return _defaultProps; 27 | }, 28 | 29 | _getClasses: function() { 30 | var classes = { 31 | 'mdl-card__supporting-text': true, 32 | 'mdl-card--expand': this.props.isExpand, 33 | 'mdl-card--border': this.props.border 34 | }; 35 | classes = __functions.addGeneralClasses(classes, this.props); 36 | return cx(classes); 37 | }, 38 | 39 | _getElement: function() { 40 | return React.createElement("div", null, this.props.children) 41 | }, 42 | 43 | render: function () { 44 | var element = this._getElement(); 45 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 46 | 47 | return React.cloneElement(element, newProps); 48 | }, 49 | 50 | componentDidMount: function() { 51 | __functions.updateComponents(); 52 | } 53 | }); 54 | -------------------------------------------------------------------------------- /docs/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Material Design for React Js 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /lib/card/card.js: -------------------------------------------------------------------------------- 1 | var React = require("react"), 2 | cx = require('classnames'), 3 | _ = require('lodash'); 4 | 5 | var _generalProps = { 6 | shadow: true, 7 | colors: true 8 | }; 9 | 10 | var _defaultProps = __functions.makeDefaultProps({ 11 | shadow: 2, 12 | useChild: false 13 | }, _generalProps); 14 | 15 | var _propTypes = __functions.makeDefaultPropTypes({ 16 | }, _generalProps); 17 | 18 | module.exports = React.createClass({ 19 | displayName : 'MDL.Card', 20 | propTypes: _propTypes, 21 | 22 | getDefaultProps: function() { 23 | return _defaultProps; 24 | }, 25 | 26 | _getClasses: function() { 27 | var classes = { 28 | 'mdl-card': true 29 | }; 30 | 31 | classes = __functions.addGeneralClasses(classes, this.props); 32 | 33 | return cx(classes); 34 | }, 35 | 36 | _getElement: function() { 37 | var child = this.props.children instanceof Array 38 | ? this.props.children[0] 39 | : this.props.children; 40 | 41 | if (this.props.useChild && child && !_.isString(child)) { 42 | return child; 43 | } else { 44 | return React.createElement("div", null, this.props.children) 45 | } 46 | }, 47 | 48 | render: function () { 49 | var element = this._getElement(); 50 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 51 | 52 | return React.cloneElement(element, newProps); 53 | }, 54 | 55 | componentDidMount: function() { 56 | __functions.updateComponents(); 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /lib/slider.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"); 3 | var cx = require('classnames'); 4 | var _ = require('lodash'); 5 | 6 | module.exports = React.createClass({ 7 | displayName : 'MDL.Button', 8 | 9 | getDefaultProps: function() { 10 | return { 11 | min: 0, 12 | max: 100, 13 | defaultValue: 0, 14 | step: 1, 15 | useChild: false 16 | }; 17 | }, 18 | 19 | _getClasses: function() { 20 | var classes = { 21 | 'mdl-slider': true, 22 | 'mdl-js-slider': true 23 | }; 24 | return cx(classes); 25 | }, 26 | 27 | _getElement: function() { 28 | var child = this.props.children instanceof Array 29 | ? this.props.children[0] 30 | : this.props.children; 31 | 32 | if (this.props.useChild && child && !_.isString(child)) { 33 | return child; 34 | } else { 35 | return React.createElement("input", {className: this.props.className || ''}) 36 | } 37 | }, 38 | 39 | render: function () { 40 | var element = this._getElement(); 41 | var classname = element.props.className || ''; 42 | 43 | var newProps = { 44 | className : classname + ' ' + this._getClasses(), 45 | disabled : this.props.disabled, 46 | style : _.extend(element.props.style || {}, this.props.style), 47 | id : this.props.id, 48 | min : this.props.min, 49 | max : this.props.max, 50 | defaultValue : this.props.defaultValue, 51 | step : this.props.step, 52 | type : 'range' 53 | }; 54 | 55 | return React.cloneElement(element, newProps); 56 | }, 57 | 58 | componentDidMount: function() { 59 | __functions.updateComponents(); 60 | } 61 | }); 62 | -------------------------------------------------------------------------------- /lib/card/cardMedia.js: -------------------------------------------------------------------------------- 1 | var React = require("react"), 2 | cx = require('classnames'), 3 | _ = require('lodash'); 4 | 5 | var _generalProps = { 6 | shadow: true, 7 | colors: true 8 | }; 9 | 10 | var _defaultProps = __functions.makeDefaultProps({ 11 | isExpand: false, 12 | imgSrc: '', 13 | imgProps: {}, 14 | border: false, 15 | shadow: 0 16 | }, _generalProps); 17 | 18 | var _propTypes = __functions.makeDefaultPropTypes({ 19 | }, _generalProps); 20 | 21 | module.exports = React.createClass({ 22 | displayName : 'MDL.CardMedia', 23 | 24 | propTypes: _propTypes, 25 | 26 | getDefaultProps: function() { 27 | return _defaultProps; 28 | }, 29 | 30 | _getClasses: function() { 31 | var classes = { 32 | 'mdl-card__media': true, 33 | 'mdl-card--expand': this.props.isExpand, 34 | 'mdl-card--border': this.props.border 35 | }; 36 | classes = __functions.addGeneralClasses(classes, this.props); 37 | return cx(classes); 38 | }, 39 | 40 | _getElement: function() { 41 | var inner; 42 | if (this.props.imgSrc.length > 0) { 43 | inner = React.createElement("img", React.__spread({src: this.props.imgSrc}, this.props.imgProps)) 44 | } else { 45 | inner = this.props.children; 46 | } 47 | 48 | return React.createElement("div", null, inner) 49 | }, 50 | 51 | render: function () { 52 | var element = this._getElement(); 53 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 54 | 55 | return React.cloneElement(element, newProps); 56 | }, 57 | 58 | componentDidMount: function() { 59 | __functions.updateComponents(); 60 | } 61 | }); 62 | -------------------------------------------------------------------------------- /docs/build/css/docs.css: -------------------------------------------------------------------------------- 1 | .docs-layout > header { 2 | background-color: #C2185B; 3 | } 4 | 5 | .docs-components { 6 | margin: 50px 0 30px; 7 | text-align: center; 8 | } 9 | 10 | .docs-component { 11 | display: inline-block;padding: 10px 20px; 12 | } 13 | 14 | .docs-component__body > * { 15 | text-align: left; 16 | } 17 | 18 | .docs-component__caption { 19 | margin-top: 20px; 20 | background-color: rgba(0,0,0,0.1); 21 | padding: 10px 20px; 22 | border-radius: 3px; 23 | } 24 | 25 | 26 | .docs-text { 27 | margin: 0 50px; 28 | } 29 | .docs-text h1 { 30 | font-size: 1.5em; 31 | } 32 | .docs-text h2, .docs-text--centred h2 { 33 | font-size: 1.3em; 34 | } 35 | .docs-text--centred table { 36 | text-align: left; 37 | } 38 | .docs-text--centred code, .docs-text pre { 39 | background: #EFEFEF; 40 | padding: 5px; 41 | } 42 | .docs-text--centred { 43 | max-width: 640px; 44 | width: 100%; 45 | margin: 0 auto; 46 | } 47 | .docs-view { 48 | padding-bottom: 100px; 49 | } 50 | .docs-view pre[class*='language-'] { 51 | padding: 2em 2em 1em; 52 | margin: 0; 53 | } 54 | 55 | .docs-view pre[class*='language-']:hover { 56 | background-color: rgb(255,223,234); 57 | } 58 | .docs-view-code { 59 | position: relative; 60 | } 61 | .docs-view-code__title { 62 | font-size: 1em; 63 | display: inline-block; 64 | margin: 0; 65 | background-color: #DDD; 66 | padding: 0 10px; 67 | line-height: inherit; 68 | top: 0px; 69 | left: 0px; 70 | position: absolute; 71 | } 72 | 73 | /* 74 | Layout 75 | */ 76 | .docs-view .mdl-cell { 77 | background: #999; 78 | padding: 10px; 79 | color: #FFF; 80 | } 81 | 82 | #docs-navigation > .mdl-navigation__link { 83 | padding: 8px 20px; 84 | } 85 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mdl-reactjs", 3 | "version": "0.1.1", 4 | "description": "React implementation of googles Material Design Lite (http://getmdl.io)", 5 | "main": "./lib", 6 | "keywords": [ 7 | "React", 8 | "Material Design", 9 | "mdl", 10 | "material-design", 11 | "badge", 12 | "button", 13 | "card", 14 | "layout", 15 | "loading", 16 | "spinner", 17 | "menu", 18 | "slider", 19 | "toggles", 20 | "textfield", 21 | "fab-button", 22 | "icon", 23 | "icon-button", 24 | "switch", 25 | "progress", 26 | "progress bar", 27 | "tooltip", 28 | "dropdown", 29 | "grid", 30 | "tabs" 31 | ], 32 | "scripts": { 33 | "dev-build": "webpack --config webpack.config.js --colors", 34 | "dev-watch": "webpack --config webpack.config.js --watch --colors", 35 | "dev-server": "webpack-dev-server --config webpack.config.js --content-base ./docs/build/ --colors" 36 | }, 37 | "author": "Johan Bostrom", 38 | "license": "GPL-3.0", 39 | "dependencies": { 40 | "react": "^15.3.2", 41 | "react-dom": "^15.3.2", 42 | "classnames": "^2.1.3", 43 | "lodash": "^3.10.1" 44 | }, 45 | "devDependencies": { 46 | "babel-core": "^6.18.2", 47 | "babel-loader": "^6.2.7", 48 | "babel-preset-es2015": "^6.18.0", 49 | "babel-preset-react": "^6.16.0", 50 | "html-loader": "^0.4.4", 51 | "markdown-loader": "^0.1.7", 52 | "react-router": "^3.0.0", 53 | "webpack": "^1.13.3", 54 | "webpack-dev-server": "^1.16.2" 55 | }, 56 | "directories": { 57 | "doc": "docs" 58 | }, 59 | "repository": { 60 | "type": "git", 61 | "url": "https://github.com/zarxor/mdl-reactjs.git" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var Path = require("path"); 2 | var Webpack = require("webpack"); 3 | var Pkg = require("./package.json"); 4 | 5 | /* 6 | * Default webpack configuration for development 7 | */ 8 | var Config = { 9 | devtool: "eval-source-map", 10 | cache: true, 11 | entry: { 12 | app: Path.join(__dirname, "docs", "src", "app.js") 13 | }, 14 | output: { 15 | path: Path.join(__dirname, "docs", "build"), 16 | filename: "[name].js", 17 | sourceMapFilename: "[file].map" 18 | }, 19 | resolve: { 20 | modulesDirectories: ["node_modules"] 21 | }, 22 | plugins: [ 23 | new Webpack.OldWatchingPlugin() //needed to make watch work. see http://stackoverflow.com/a/29292578/1434764 24 | ], 25 | resolveLoader: { 26 | 'fallback': Path.join(__dirname, "node_modules") 27 | }, 28 | module: { 29 | loaders: [ 30 | { 31 | test: /\.md$/, 32 | loader: "html!markdown" 33 | }, { 34 | test: /(\.js)$/, 35 | exclude: [/node_modules/], 36 | loader: "babel-loader", 37 | query: { 38 | presets: ["es2015", "react"] 39 | } 40 | } 41 | ] 42 | } 43 | } 44 | 45 | /* 46 | * If bundling for production, optimize output 47 | */ 48 | if (process.env.NODE_ENV === "production") { 49 | Config.devtool = false; 50 | 51 | Config.plugins = [ 52 | new Webpack 53 | .optimize 54 | .OccurenceOrderPlugin(), 55 | 56 | new Webpack 57 | .optimize 58 | .UglifyJsPlugin({ 59 | comments: false, 60 | compress: { 61 | warnings: false 62 | } 63 | }), 64 | new Webpack.DefinePlugin({ 65 | 'process.env': { 66 | NODE_ENV: JSON.stringify("production") 67 | } 68 | }) 69 | ]; 70 | }; 71 | 72 | module.exports = Config; -------------------------------------------------------------------------------- /lib/tabs/tabs.js: -------------------------------------------------------------------------------- 1 | var React = require("react"), 2 | cx = require('classnames'), 3 | _ = require('lodash'); 4 | 5 | var _defaultProps = { 6 | tag: 'div', 7 | ripple: false, 8 | tabBarProps: {} 9 | }; 10 | 11 | module.exports = React.createClass({ 12 | displayName: 'MDL.Tabs', 13 | 14 | propTypes: {}, 15 | 16 | getDefaultProps: function () { 17 | return _defaultProps; 18 | }, 19 | 20 | _getClasses: function () { 21 | var classes = { 22 | 'mdl-tabs': true, 23 | 'mdl-js-tabs': true, 24 | 'mdl-js-ripple-effect': this.props.ripple 25 | }; 26 | return cx(classes); 27 | }, 28 | 29 | _getTabBar: function (panels) { 30 | var tabBarProps = __functions.joinProps({}, this.props.tabBarProps, {}, "mdl-tabs__tab-bar"); 31 | var tabBarTabs = panels.map(function (panel, panelKey) { 32 | return (React.createElement("a", { 33 | key: panelKey, 34 | href: "#" + panel.props.id, 35 | className: "mdl-tabs__tab" + (panel.props.active 36 | ? " is-active" 37 | : "") 38 | }, panel.props.title)); 39 | }); 40 | 41 | return React.cloneElement(React.createElement("div", {key: "tabBar"}), tabBarProps, tabBarTabs); 42 | }, 43 | 44 | _getElement: function () { 45 | var tabBar = this._getTabBar(this.props.children); 46 | var children = [tabBar].concat(this.props.children); 47 | return React.createElement(this.props.tag, {}, children); 48 | }, 49 | 50 | render: function () { 51 | var element = this._getElement(); 52 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 53 | return React.cloneElement(element, newProps); 54 | }, 55 | 56 | componentDidMount: function () { 57 | __functions.updateComponents(); 58 | } 59 | }); 60 | -------------------------------------------------------------------------------- /docs/src/views/slidersView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MDL from '../../../lib/'; 3 | import DOCS from '../components'; 4 | 5 | export default class SlidersView extends React.Component { 6 | render() { 7 | return ( 8 |
9 |
10 |

SLIDERS

11 |

Selecting a value out of a range.

12 |
13 | {/* 14 | Colored FAB 15 | */} 16 | 17 | 18 | this.defaultSlider = x} min={0} max={100} defaultValue={0} /> 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | {''} 27 | 28 | 29 | {''} 30 | 31 | 32 | {/* 33 | Documentation text 34 | */} 35 | 36 |
37 |

CONFIGURATION OPTIONS

38 |

39 | Down below you can find all the attributes that can be applied to the component 40 |

41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
AttributeEffectValues
AttributeEffectValues
57 |
58 |
59 | ); 60 | } 61 | } -------------------------------------------------------------------------------- /docs/src/views/badgesView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MDL from '../../../lib/'; 3 | import DOCS from '../components'; 4 | 5 | export default class BadgesView extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | }; 10 | } 11 | render() { 12 | return ( 13 |
14 |
15 |

Badges!

16 |

Small status descriptors for UI elements.

17 |
18 | {/* 19 | Colored FAB 20 | */} 21 | 22 | 23 | account_box 24 | 25 | 26 | account_box 27 | 28 | 29 | 30 | 31 | {'account_box'} 32 | 33 | 34 | {'account_box'} 35 | 36 | 37 | {/* 38 | Documentation text 39 | */} 40 | 41 |
42 |

CONFIGURATION OPTIONS

43 |

44 | Down below you can find all the attributes that can be applied to the component 45 |

46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
AttributeEffectValues
AttributeEffectValues
62 |
63 |
64 | ); 65 | } 66 | } -------------------------------------------------------------------------------- /lib/grid/gridCell.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"), 3 | cx = require('classnames'), 4 | _ = require('lodash'); 5 | 6 | var _defaultProps = { 7 | col: 1, 8 | colPhone: 0, 9 | colTablet: 0, 10 | colDesktop: 0, 11 | 12 | hidePhone: false, 13 | hideTable: false, 14 | hideDesktop: false, 15 | 16 | spacing: true, 17 | stretch: false, 18 | align: '', 19 | 20 | tag: 'div' 21 | }; 22 | 23 | module.exports = React.createClass({ 24 | displayName : 'MDL.GridCell', 25 | 26 | propTypes: { 27 | 28 | }, 29 | 30 | getDefaultProps: function() { 31 | return _defaultProps; 32 | }, 33 | 34 | _getClasses: function() { 35 | var classes = { 36 | 'mdl-cell': true, 37 | 'mdl-grid--no-spacing': !this.props.spacing, 38 | 39 | 'mdl-cell-hide-phone': this.props.hidePhone, 40 | 'mdl-cell-hide-tablet': this.props.hideTablet, 41 | 'mdl-cell-hide-desktop': this.props.hideDesktop, 42 | 43 | 'mdl-cell--stretch': this.props.stretch, 44 | }; 45 | classes['mdl-cell--' + this.props.col + '-col'] = true; 46 | classes['mdl-cell--' + this.props.colPhone + '-col-phone'] = (this.props.colPhone > 0); 47 | classes['mdl-cell--' + this.props.colTablet + '-col-tablet'] = (this.props.colTablet > 0); 48 | classes['mdl-cell--' + this.props.colDesktop + '-col-desktop'] = (this.props.colDesktop > 0); 49 | classes['mdl-cell--' + this.props.align + ''] = (this.props.align.length > 0); 50 | 51 | return cx(classes); 52 | }, 53 | 54 | _getElement: function() { 55 | var element = React.createElement(this.props.tag, {}, this.props.children); 56 | return element; 57 | }, 58 | 59 | render: function () { 60 | var element = this._getElement(); 61 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 62 | 63 | return React.cloneElement(element, newProps); 64 | }, 65 | 66 | componentDidMount: function() { 67 | __functions.updateComponents(); 68 | } 69 | }); 70 | -------------------------------------------------------------------------------- /lib/card/cardTitle.js: -------------------------------------------------------------------------------- 1 | var React = require("react"), 2 | cx = require('classnames'), 3 | _ = require('lodash'); 4 | 5 | var _generalProps = { 6 | shadow: true, 7 | colors: true 8 | }; 9 | 10 | var _defaultProps = __functions.makeDefaultProps({ 11 | useChild: false, 12 | textTag: 'h2', 13 | textTagOff: false, 14 | border: false, 15 | expand: false, 16 | shadow: 0 17 | }, _generalProps); 18 | 19 | var _propTypes = __functions.makeDefaultPropTypes({}, _generalProps); 20 | 21 | module.exports = React.createClass({ 22 | displayName: 'MDL.CardTitle', 23 | 24 | propTypes: _propTypes, 25 | 26 | getDefaultProps: function () { 27 | return _defaultProps; 28 | }, 29 | 30 | _getClasses: function () { 31 | var classes = { 32 | 'mdl-card__title': true, 33 | 'mdl-card--expand': this.props.expand, 34 | 'mdl-card--border': this.props.border 35 | }; 36 | classes = __functions.addGeneralClasses(classes, this.props); 37 | return cx(classes); 38 | }, 39 | 40 | _getElement: function () { 41 | var child = this.props.children instanceof Array ? 42 | this.props.children[0] : 43 | this.props.children; 44 | 45 | if (this.props.useChild && child && !_.isString(child)) { 46 | return child; 47 | } else { 48 | var text; 49 | if (this.props.textTagOff || typeof this.props.children != 'string') { 50 | text = this.props.children; 51 | } else { 52 | text = React.createElement(this.props.textTag, { 53 | children: this.props.children, 54 | className: "mdl-card__title-text" 55 | }); 56 | } 57 | return React.createElement("div", null, text) 58 | } 59 | }, 60 | 61 | render: function () { 62 | var element = this._getElement(); 63 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 64 | 65 | return React.cloneElement(element, newProps); 66 | }, 67 | 68 | componentDidMount: function () { 69 | __functions.updateComponents(); 70 | } 71 | }); -------------------------------------------------------------------------------- /lib/progress.js: -------------------------------------------------------------------------------- 1 | var React = require("react"), 2 | ReactDOM = require("react-dom"), 3 | cx = require('classnames'), 4 | _ = require('lodash'); 5 | 6 | var _generalProps = { 7 | shadow: true, 8 | }; 9 | 10 | var _defaultProps = __functions.makeDefaultProps({ 11 | indeterminate: false, 12 | progress: 0, 13 | buffer: -1, 14 | }, _generalProps), 15 | _propTypes = __functions.makeDefaultPropTypes({ 16 | id: React.PropTypes.string.isRequired, 17 | }, _generalProps); 18 | 19 | module.exports = React.createClass({ 20 | displayName: 'MDL.Progress', 21 | 22 | propTypes: _propTypes, 23 | 24 | getDefaultProps: function () { 25 | return _defaultProps; 26 | }, 27 | 28 | getInitialState: function () { 29 | return { 30 | progress: this.props.progress, 31 | buffer: this.props.buffer 32 | }; 33 | }, 34 | 35 | _getClasses: function () { 36 | var classes = { 37 | 'mdl-progress': true, 38 | 'mdl-js-progress': true, 39 | 'mdl-progress__indeterminate': this.props.indeterminate 40 | }; 41 | return cx(classes); 42 | }, 43 | 44 | _getElement: function () { 45 | return React.createElement("div", null); 46 | }, 47 | 48 | render: function () { 49 | var element = this._getElement(); 50 | var classname = element.props.className || ''; 51 | 52 | var newProps = { 53 | className: classname + ' ' + this._getClasses(), 54 | style: _.extend(element.props.style || {}, this.props.style), 55 | id: this.props.id, 56 | }; 57 | 58 | return React.cloneElement(element, newProps); 59 | }, 60 | 61 | _refreshProgress: function () { 62 | var element = ReactDOM.findDOMNode(this); 63 | var progress = this.props.progress; 64 | var buffer = this.props.buffer; 65 | 66 | if (element.MaterialProgress != undefined) { 67 | element.MaterialProgress.setProgress(progress); 68 | } else { 69 | element.addEventListener('mdl-componentupgraded', function () { 70 | this.MaterialProgress.setProgress(progress); 71 | if (buffer > -1) 72 | this.MaterialProgress.setBuffer(buffer); 73 | }); 74 | } 75 | 76 | __functions.updateComponents(); 77 | }, 78 | 79 | 80 | 81 | componentDidUpdate: function () { 82 | this._refreshProgress(); 83 | }, 84 | 85 | componentDidMount: function () { 86 | this._refreshProgress(); 87 | } 88 | }); -------------------------------------------------------------------------------- /lib/button.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"), 3 | cx = require('classnames'), 4 | _ = require('lodash'); 5 | 6 | var _generalProps = { 7 | colors: true, 8 | }; 9 | 10 | var _defaultProps = __functions.makeDefaultProps({ 11 | ripple: false, 12 | fab: false, 13 | size: false, 14 | icon: '', 15 | useChild: false, 16 | colored: false, 17 | raised: false, 18 | primary: false, 19 | accent: false, 20 | 21 | children: [] 22 | }, _generalProps); 23 | 24 | var _propTypes = __functions.makeDefaultPropTypes({ 25 | }, _generalProps); 26 | 27 | module.exports = React.createClass({ 28 | displayName: 'MDL.Button', 29 | 30 | propTypes: _propTypes, 31 | 32 | getDefaultProps: function () { 33 | return _defaultProps; 34 | }, 35 | 36 | _getClasses: function () { 37 | var classes = { 38 | 'mdl-button': true, 39 | 'mdl-button--fab': this.props.fab, 40 | 'mdl-button--mini-fab': (this.props.fab && this.props.size == "mini"), 41 | 42 | 'mdl-button--raised': this.props.raised, 43 | 'mdl-button--colored': this.props.colored, 44 | 'mdl-button--accent': this.props.accent, 45 | 'mdl-button--primary': this.props.primary, 46 | 47 | 'mdl-button--icon': (this.props.icon.length > 0 && !this.props.fab), 48 | 49 | 'mdl-js-button': true, 50 | 'mdl-js-ripple-effect': this.props.ripple 51 | }; 52 | 53 | classes = __functions.addGeneralClasses(classes, this.props); 54 | 55 | return cx(classes); 56 | }, 57 | 58 | _getElement: function () { 59 | 60 | var child = this.props.children instanceof Array 61 | ? this.props.children[0] 62 | : this.props.children; 63 | 64 | if (this.props.useChild && child && !_.isString(child)) { 65 | return child; 66 | } else if (this.props.icon.length > 0) { 67 | return (React.createElement("button", null, React.createElement("i", {className: "material-icons"}, this.props.icon), this.props.children)); 68 | } else { 69 | return (React.createElement("button", null, this.props.children)); 70 | } 71 | }, 72 | 73 | render: function () { 74 | var element = this._getElement(); 75 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 76 | 77 | return React.cloneElement(element, newProps); 78 | }, 79 | 80 | componentDidMount: function () { 81 | __functions.updateComponents(); 82 | } 83 | }); 84 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Material Design Lite for React JS 2 | Material Design Lite for React JS lets you add a Material Design look and feel to your websites using the React framework. 3 | 4 | [You can find documentation and examples here](https://zarxor.github.io/mdl-reactjs/docs/build/) 5 | 6 | ## Usage ## 7 | To install run 8 | ```jsx 9 | npm install mdl-reactjs 10 | ``` 11 | How to include in project 12 | ```jsx 13 | var MDL = require('mdl-reactjs'); 14 | var Button = MDL.Button; 15 | var Card = MDL.Card; 16 | ``` 17 | 18 | Include the MDL css and js in your project 19 | ``` 20 | 21 | 22 | 23 | 24 | ``` 25 | 26 | ### How to run the demo / documentation ### 27 | ``` 28 | npm install 29 | npm run dev-server 30 | // Open http://localhost:8080/ 31 | ``` 32 | ## Project status ## 33 | The project is still under development and will be adding features and functions 34 | 35 | ### Components list / Todo 36 | - [x] Badge [[Docs](https://zarxor.github.io/mdl-reactjs/docs/build/#/badges)] [[getmdl.io](http://www.getmdl.io/components/index.html#badges-section)] 37 | - [x] Buttons [[Docs](https://zarxor.github.io/mdl-reactjs/docs/build/#/buttons)] [[getmdl.io](http://www.getmdl.io/components/index.html#buttons-section)] 38 | - Loading [[Docs](https://zarxor.github.io/mdl-reactjs/docs/build/#/loading)] [[getmdl.io](http://www.getmdl.io/components/index.html#loading-section)] 39 | - [x] Progress 40 | - [x] Spinner 41 | - [x] Sliders [[Docs](https://zarxor.github.io/mdl-reactjs/docs/build/#/sliders)] [[getmdl.io](http://www.getmdl.io/components/index.html#sliders-section)] 42 | - [x] Icon [Docs] 43 | - [x] Textfields [[Docs](https://zarxor.github.io/mdl-reactjs/docs/build/#/textfields)] [[getmdl.io](http://www.getmdl.io/components/index.html#textfields-section)] 44 | - [x] Cards [[Docs](https://zarxor.github.io/mdl-reactjs/docs/build/#/cards)] [[getmdl.io](http://www.getmdl.io/components/index.html#cards-section)] 45 | - Layout [[Docs](https://zarxor.github.io/mdl-reactjs/docs/build/#/layout)] [[getmdl.io](http://www.getmdl.io/components/index.html#layout-section)] 46 | - [x] Header + Rows 47 | - [x] Drawer 48 | - [x] Title 49 | - [x] Content 50 | - [x] Navigation + Links 51 | - [x] Grid 52 | - [x] Layout Tabs 53 | - [x] Tabs 54 | - [ ] Footer 55 | - [x] Menus [[Docs](https://zarxor.github.io/mdl-reactjs/docs/build/#/menus)] [[getmdl.io](http://www.getmdl.io/components/index.html#menus-section)] 56 | -------------------------------------------------------------------------------- /docs/src/views/tablesView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MDL from '../../../lib/'; 3 | import DOCS from '../components'; 4 | 5 | export default class TablesView extends React.Component { 6 | render() { 7 | return ( 8 |
9 |
10 |

Tables

11 |

Choose between states.

12 |
13 | {/* 14 | 15 | */} 16 | 17 | 18 | 27 | 28 | 29 | 38 | 39 | 40 | 41 | 42 | {'See docs source code..'} 43 | 44 | 45 | {/* 46 | Documentation text 47 | */} 48 | 49 |
50 |

CONFIGURATION OPTIONS

51 |

52 | Down below you can find all the attributes that can be applied to the component 53 |

54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
AttributeEffectValues
AttributeEffectValues
70 |
71 |
72 | ); 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /lib/toggle.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"); 3 | var ReactDOM = require("react-dom"); 4 | var cx = require('classnames'); 5 | var _ = require('lodash'); 6 | 7 | var _defaultProps = { 8 | ripple: false, 9 | checked: false, 10 | label: null, 11 | id: null, // Sets in getDefaultProps 12 | type: 'checkbox', 13 | name: null, 14 | defaultValue: null, 15 | required: false 16 | }; 17 | 18 | module.exports = React.createClass({ 19 | displayName: 'MDL.Toggle', 20 | 21 | propTypes: { 22 | type: React.PropTypes.oneOf(['checkbox', 'icon-toggle', 'radio', 'switch']), 23 | }, 24 | 25 | getInitialState: function () { 26 | return { isChecked: this.props.checked }; 27 | }, 28 | 29 | getDefaultProps: function () { 30 | return _defaultProps; 31 | }, 32 | 33 | _getClasses: function () { 34 | var classes = { 35 | 'mdl-js-ripple-effect': this.props.ripple, 36 | }; 37 | 38 | classes['mdl-' + this.props.type] = true; 39 | classes['mdl-js-' + this.props.type] = true; 40 | 41 | return cx(classes); 42 | }, 43 | 44 | _handleChange: function () { 45 | var node = ReactDOM.findDOMNode(this.refs.toggleInput) 46 | this.setState({ isChecked: node.checked }); 47 | 48 | if (node.checked && typeof (this.props.onChecked) == 'function') { 49 | this.props.onChecked(); 50 | } else if (!node.checked && typeof (this.props.onUnchecked) == 'function') { 51 | this.props.onUnchecked() 52 | } 53 | }, 54 | 55 | _getElement: function () { 56 | var _id = this.props.id || ('toggle' + Math.floor((Math.random() * 10000) + 1000)); 57 | var _name = this.props.name || _id; 58 | var _type = this.props.type == "radio" ? "radio" : "checkbox"; 59 | 60 | var _inputClassname = "mdl-" + this.props.type + "__input"; 61 | var _labelClassname = "mdl-" + this.props.type + "__label"; 62 | var _labelTag = "span"; 63 | 64 | switch (this.props.type) { 65 | case 'radio': 66 | _inputClassname = "mdl-" + this.props.type + "__button"; 67 | break; 68 | case 'icon-toggle': 69 | _labelTag = "i"; 70 | _labelClassname += " material-icons"; 71 | break; 72 | } 73 | 74 | return ( 75 | React.createElement("label", {htmlFor: _id}, 76 | React.createElement("input", {required: this.props.required, ref: "toggleInput", name: _name, type: _type, id: _id, className: _inputClassname, defaultChecked: this.props.checked, defaultValue: this.props.defaultValue, onChange: this._handleChange}), 77 | React.createElement(_labelTag, { className: _labelClassname, children: (this.props.label || this.props.children) }) 78 | ) 79 | ); 80 | }, 81 | 82 | render: function () { 83 | var element = this._getElement(); 84 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 85 | 86 | return React.cloneElement(element, newProps); 87 | }, 88 | 89 | componentDidMount: function () { 90 | __functions.updateComponents(); 91 | } 92 | }); 93 | -------------------------------------------------------------------------------- /docs/src/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom' 3 | import { Router, Route, Link, IndexRoute, hashHistory } from 'react-router' 4 | import _ from 'lodash'; 5 | import MDL from '../../lib'; 6 | import Views, { StartView, BadgesView, TextfieldsView, BenchmarkView } from './views'; 7 | 8 | 9 | var navRoutes = [ 10 | { name: "home", to: "/", text: "Home", icon: "domain", view: StartView }, 11 | { name: "badges", to: "/badges", text: "Badges", icon: "chat_bubble", view: BadgesView }, 12 | { name: "buttons", to: "/buttons", text: "Buttons", icon: "chevron_right", view: Views.ButtonsView }, 13 | { name: "cards", to: "/cards", text: "Cards (partial)", icon: "web", view: Views.CardsView }, 14 | { name: "layout", to: "/layout", text: "Layout (partial)", icon: "view_quilt", view: Views.LayoutView }, 15 | { name: "loading", to: "/loading", text: "Loading (partial)", icon: "replay", view: Views.LoadingView }, 16 | { name: "menus", to: "/menus", text: "Menus (partial)", icon: "format_align_justify", view: Views.MenusView }, 17 | { name: "sliders", to: "/sliders", text: "Sliders (partial)", icon: "tune", view: Views.SlidersView }, 18 | { name: "toggles", to: "/toggles", text: "Toggles (partial)", icon: "exposure", view: Views.TogglesView }, 19 | { name: "tables", to: "/tables", text: "Tables (todo)", icon: "view_list", view: Views.TablesView }, 20 | { name: "textfields", to: "/textfields", text: "Text fields (partial)", icon: "font_download", view: TextfieldsView }, 21 | //{ name: "", to: "/", text: "Tooltips (todo)", icon: "beenhere" }, 22 | 23 | // { name: "benchmark", to: "/benchmark", text: "Benchmark", icon: "beenhere", view: BenchmarkView }, 24 | ]; 25 | 26 | class App extends React.Component { 27 | getNav() { 28 | return ( 29 | {navRoutes.map(function (item, i) { 30 | return ( 31 | 32 | {item.text} 33 | 34 | ); 35 | })} 36 | ); 37 | } 38 | 39 | render() { 40 | return ( 41 | 42 | 43 | 44 | 45 | Material Design Lite components for ReactJS 46 | 47 | 48 | 49 | 50 | MDL-REACTJS 51 | {this.getNav()} 52 | 53 | 54 | {this.props.children} 55 | 56 | 57 | ); 58 | } 59 | } 60 | 61 | var routes = ( 62 | 63 | {_.map(navRoutes, function (route) { 64 | if (route.to.length > 0) { 65 | return 66 | } 67 | })} 68 | ); 69 | 70 | render({routes}, document.getElementById('app')); -------------------------------------------------------------------------------- /lib/textfield.js: -------------------------------------------------------------------------------- 1 | var React = require("react"), 2 | cx = require('classnames'), 3 | _ = require('lodash'); 4 | 5 | var _defaultProps = { 6 | type: "text", 7 | floatingLabel: false, 8 | expandable: false, 9 | multiline: false, 10 | icon: "", 11 | label: "", 12 | error: "", 13 | onChange: null, 14 | autogrow: false, 15 | rows: 1, 16 | required: false, 17 | disabled: false 18 | }; 19 | 20 | module.exports = React.createClass({ 21 | displayName : 'MDL.Textfield', 22 | 23 | propTypes: { 24 | 25 | }, 26 | 27 | getDefaultProps: function() { 28 | return _defaultProps; 29 | }, 30 | 31 | _getClasses: function() { 32 | var classes = { 33 | 'mdl-textfield': true, 34 | 'mdl-js-textfield': true, 35 | 'mdl-textfield--floating-label': this.props.floatingLabel, 36 | 'mdl-textfield--expandable': this.props.expandable, 37 | }; 38 | return cx(classes); 39 | }, 40 | 41 | change: function (a,b,c) { 42 | if (this.props.onChange) { 43 | this.props.onChange(a,b,c); 44 | } 45 | if (this.props.multiline && this.props.autogrow) { 46 | var element = React.findDOMNode(this.refs.mdlTextfield); 47 | element.style.height = 'auto'; 48 | element.style.height = element.scrollHeight+'px'; 49 | } 50 | }, 51 | 52 | _getElement: function() { 53 | var children = []; 54 | var tag = this.props.multiline ? 'textarea' : 'input'; 55 | 56 | children.push(React.createElement(tag, { 57 | className : "mdl-textfield__input", 58 | defaultValue : this.props.defaultValue, 59 | value : this.props.value, 60 | id : this.props.id, 61 | name : this.props.id, 62 | rows : this.props.rows, 63 | type : this.props.type, 64 | pattern : this.props.pattern, 65 | disabled : this.props.disabled, 66 | onChange : this.change, 67 | ref: 'mdlTextfield', 68 | required: this.props.required, 69 | key: 'textfield' 70 | })); 71 | 72 | if (this.props.label.length > 0) { 73 | children.push(React.createElement("label", { 74 | className: "mdl-textfield__label", 75 | htmlFor: this.props.id, 76 | key: 'label' 77 | }, this.props.label)); 78 | } 79 | 80 | if (this.props.error.length > 0) { 81 | children.push(React.createElement("label", { 82 | className: "mdl-textfield__error", 83 | key: 'errorlabel' 84 | }, this.props.error)); 85 | } 86 | 87 | if (this.props.expandable > 0) { 88 | children = [ 89 | React.createElement("label", { 90 | className: "mdl-button mdl-js-button mdl-button--icon", 91 | htmlFor: this.props.id, 92 | key: 'expandablelabel' 93 | }, React.createElement("i", { 94 | className: "material-icons", 95 | key: 'expandablelabelicon' 96 | }, this.props.icon)), 97 | React.createElement("div", { 98 | className: "mdl-textfield__expandable-holder", 99 | key: 'expandableholder' 100 | }, children) 101 | ]; 102 | } 103 | 104 | return React.createElement("div", null, children); 105 | }, 106 | 107 | render: function () { 108 | var element = this._getElement(); 109 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 110 | return React.cloneElement(element, newProps); 111 | }, 112 | 113 | componentDidMount: function() { 114 | __functions.updateComponents(); 115 | } 116 | }); 117 | -------------------------------------------------------------------------------- /docs/src/views/textfieldsView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MDL from '../../../lib/'; 3 | import DOCS from '../components'; 4 | 5 | export default class TextfieldsView extends React.Component { 6 | render() { 7 | return ( 8 |
9 |
10 |

TEXT FIELDS

11 |

Textual input components.

12 |
13 | {/* 14 | 15 | */} 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | {''} 27 | 28 | 29 | {''} 30 | 31 | 32 | {/* 33 | 34 | */} 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | {''} 46 | 47 | 48 | 49 | {''} 50 | 51 | 52 | {/* 53 | 54 | */} 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | {''} 66 | 67 | 68 | {''} 69 | 70 | 71 | {/* 72 | Documentation text 73 | */} 74 | 75 |
76 |

CONFIGURATION OPTIONS

77 |

78 | Down below you can find all the attributes that can be applied to the component 79 |

80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 |
AttributeEffectValues
AttributeEffectValues
96 |
97 |
98 | ); 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /docs/src/views/togglesView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MDL from '../../../lib/'; 3 | import DOCS from '../components'; 4 | 5 | export default class TogglesView extends React.Component { 6 | render() { 7 | return ( 8 |
9 |
10 |

TOGGLES

11 |

Choose between states.

12 |

Checkbox

13 |
14 | {/* 15 | 16 | */} 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | {''} 28 | 29 | 30 | {''} 31 | 32 | 33 | {/* 34 | 35 | */} 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | {''} 47 | 48 | 49 | {''} 50 | 51 | 52 | {/* 53 | 54 | */} 55 | 56 | 57 | format_bold 58 | 59 | 60 | format_italic 61 | 62 | 63 | 64 | 65 | {'format_bold'} 66 | 67 | 68 | {'format_italic'} 69 | 70 | 71 | {/* 72 | 73 | */} 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | {''} 85 | 86 | 87 | {''} 88 | 89 | 90 | {/* 91 | Documentation text 92 | */} 93 | 94 |
95 |

CONFIGURATION OPTIONS

96 |

97 | Down below you can find all the attributes that can be applied to the component 98 |

99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 |
AttributeEffectValues
AttributeEffectValues
115 |
116 |
117 | ); 118 | } 119 | } -------------------------------------------------------------------------------- /docs/build/css/prism.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+jsx&plugins=line-numbers */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | text-shadow: 0 1px white; 12 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 13 | direction: ltr; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | line-height: 1.5; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | } 29 | 30 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 31 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 32 | text-shadow: none; 33 | background: #b3d4fc; 34 | } 35 | 36 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 37 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 38 | text-shadow: none; 39 | background: #b3d4fc; 40 | } 41 | 42 | @media print { 43 | code[class*="language-"], 44 | pre[class*="language-"] { 45 | text-shadow: none; 46 | } 47 | } 48 | 49 | /* Code blocks */ 50 | pre[class*="language-"] { 51 | padding: 1em; 52 | margin: .5em 0; 53 | overflow: auto; 54 | } 55 | 56 | :not(pre) > code[class*="language-"], 57 | pre[class*="language-"] { 58 | background: #f5f2f0; 59 | } 60 | 61 | /* Inline code */ 62 | :not(pre) > code[class*="language-"] { 63 | padding: .1em; 64 | border-radius: .3em; 65 | } 66 | 67 | .token.comment, 68 | .token.prolog, 69 | .token.doctype, 70 | .token.cdata { 71 | color: slategray; 72 | } 73 | 74 | .token.punctuation { 75 | color: #999; 76 | } 77 | 78 | .namespace { 79 | opacity: .7; 80 | } 81 | 82 | .token.property, 83 | .token.tag, 84 | .token.boolean, 85 | .token.number, 86 | .token.constant, 87 | .token.symbol, 88 | .token.deleted { 89 | color: #905; 90 | } 91 | 92 | .token.selector, 93 | .token.attr-name, 94 | .token.string, 95 | .token.char, 96 | .token.builtin, 97 | .token.inserted { 98 | color: #690; 99 | } 100 | 101 | .token.operator, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .style .token.string { 106 | color: #a67f59; 107 | background: hsla(0, 0%, 100%, .5); 108 | } 109 | 110 | .token.atrule, 111 | .token.attr-value, 112 | .token.keyword { 113 | color: #07a; 114 | } 115 | 116 | .token.function { 117 | color: #DD4A68; 118 | } 119 | 120 | .token.regex, 121 | .token.important, 122 | .token.variable { 123 | color: #e90; 124 | } 125 | 126 | .token.important, 127 | .token.bold { 128 | font-weight: bold; 129 | } 130 | .token.italic { 131 | font-style: italic; 132 | } 133 | 134 | .token.entity { 135 | cursor: help; 136 | } 137 | 138 | pre.line-numbers { 139 | position: relative; 140 | padding-left: 3.8em; 141 | counter-reset: linenumber; 142 | } 143 | 144 | pre.line-numbers > code { 145 | position: relative; 146 | } 147 | 148 | .line-numbers .line-numbers-rows { 149 | position: absolute; 150 | pointer-events: none; 151 | top: 0; 152 | font-size: 100%; 153 | left: -3.8em; 154 | width: 3em; /* works for line-numbers below 1000 lines */ 155 | letter-spacing: -1px; 156 | border-right: 1px solid #999; 157 | 158 | -webkit-user-select: none; 159 | -moz-user-select: none; 160 | -ms-user-select: none; 161 | user-select: none; 162 | 163 | } 164 | 165 | .line-numbers-rows > span { 166 | pointer-events: none; 167 | display: block; 168 | counter-increment: linenumber; 169 | } 170 | 171 | .line-numbers-rows > span:before { 172 | content: counter(linenumber); 173 | color: #999; 174 | display: block; 175 | padding-right: 0.8em; 176 | text-align: right; 177 | } 178 | -------------------------------------------------------------------------------- /docs/src/views/loadingView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MDL from '../../../lib/'; 3 | import DOCS from '../components'; 4 | 5 | export default class LoadingView extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | progressOne: 11 10 | }; 11 | } 12 | 13 | setProgressOne() { 14 | this.setState({progressOne: 44}); 15 | } 16 | 17 | render() { 18 | return ( 19 |
20 |
21 |

Loading

22 |

Indicate loading and progress states.

23 |

Progress bar

24 |
25 | 26 | {/* 27 | Default 28 | */} 29 | 30 | 31 | this.progressOne = x} id="prog_1" progress={this.state.progressOne} /> 32 | this.setState({progressOne: 44}) }>Set progress to 44 33 | 34 | 35 | 36 | 37 | {''} 38 | 39 | 40 | {/* 41 | Default 42 | */} 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | {''} 51 | 52 | 53 | {/* 54 | Default 55 | */} 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | {''} 64 | 65 | 66 | {/* 67 | Documentation text 68 | */} 69 | 70 |
71 |

CONFIGURATION OPTIONS

72 |

73 | Down below you can find all the attributes that can be applied to the component 74 |

75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
AttributeEffectValues
AttributeEffectValues
91 |
92 | 93 | {/* 94 | Titles 95 | */} 96 | 97 |
98 |

Spinner

99 |
100 | 101 | {/* 102 | Default 103 | */} 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | {''} 116 | 117 | 118 | {''} 119 | 120 | 121 | {/* 122 | Documentation text 123 | */} 124 | 125 |
126 |

CONFIGURATION OPTIONS

127 |

128 | Down below you can find all the attributes that can be applied to the component 129 |

130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 |
AttributeEffectValues
AttributeEffectValues
146 |
147 |
148 | ); 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /docs/src/views/menusView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MDL from '../../../lib/'; 3 | import DOCS from '../components'; 4 | 5 | export default class MenusView extends React.Component { 6 | render() { 7 | return ( 8 |
9 |
10 |

Menus

11 |

Lists of clickable actions.

12 |
13 | {/* 14 | Colored FAB 15 | */} 16 | 17 | 18 |
19 | 20 | 21 | Some action 22 | Another action 23 | Disabled action 24 | Yet another action 25 | 26 |
27 | 28 | 29 |
30 | 31 | 32 | Some action 33 | Another action 34 | Disabled action 35 | Yet another action 36 | 37 |
38 | 39 | 40 | 41 | 42 | {'See docs source code..'} 43 | 44 | 45 | {'See docs source code..'} 46 | 47 | 48 | {/* 49 | Colored FAB 50 | */} 51 | 52 | 53 |
54 | 55 | 56 | Some action 57 | Another action 58 | Disabled action 59 | Yet another action 60 | 61 |
62 | 63 | 64 |
65 | 66 | 67 | Some action 68 | Another action 69 | Disabled action 70 | Yet another action 71 | 72 |
73 | 74 | 75 | 76 | 77 | {'See docs source code..'} 78 | 79 | 80 | {'See docs source code..'} 81 | 82 | 83 | {/* 84 | Documentation text 85 | */} 86 | 87 |
88 |

CONFIGURATION OPTIONS

89 |

90 | Down below you can find all the attributes that can be applied to the component 91 |

92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 |
AttributeEffectValues
AttributeEffectValues
108 |
109 |
110 | ); 111 | } 112 | } -------------------------------------------------------------------------------- /lib/table.js: -------------------------------------------------------------------------------- 1 | 2 | var React = require("react"), 3 | ReactDOM = require('react-dom'), 4 | cx = require('classnames'), 5 | _ = require('lodash'); 6 | 7 | var _defaultProps = __functions.makeDefaultProps({ 8 | columns: null, 9 | data: null, 10 | shadow: 2, 11 | selectable: false, 12 | 'no-head': false, 13 | }, { 14 | colors: true, 15 | shadow: true, 16 | }); 17 | 18 | module.exports = React.createClass({ 19 | displayName : 'MDL.Table', 20 | 21 | propTypes: { 22 | columns: React.PropTypes.arrayOf( 23 | React.PropTypes.shape({ 24 | label: React.PropTypes.string, 25 | key: React.PropTypes.string, 26 | isNumeric: React.PropTypes.bool 27 | }) 28 | ).isRequired, 29 | data: React.PropTypes.arrayOf( 30 | React.PropTypes.object 31 | ).isRequired, 32 | }, 33 | 34 | getInitialState: function() { 35 | return { isChecked: this.props.checked }; 36 | }, 37 | 38 | getDefaultProps: function() { 39 | return _defaultProps; 40 | }, 41 | 42 | _getClasses: function() { 43 | var classes = { 44 | 'mdl-data-table' : true, 45 | 'mdl-js-data-table' : true, 46 | 47 | 'mdl-data-table--selectable': this.props.selectable && !this.props['no-head'], 48 | }; 49 | 50 | classes = __functions.addGeneralClasses(classes, this.props); 51 | 52 | return cx(classes); 53 | }, 54 | 55 | _handleChange: function () { 56 | this.setState({ isChecked: !this.state.isChecked }); 57 | if (!this.state.isChecked) { 58 | // todo: implement onChecked event 59 | } else { 60 | // todo: implement onUnchecked event 61 | } 62 | }, 63 | 64 | _getCellClasses: function (column) { 65 | return cx(__functions.addGeneralClasses({ 66 | 'mdl-data-table__cell--non-numeric' : !column.isNumeric, 67 | }, column)); 68 | }, 69 | 70 | _getRowClasses: function (row) { 71 | return cx(__functions.addGeneralClasses({}, row)); 72 | }, 73 | 74 | _rowClicked: function (row, i) { 75 | }, 76 | 77 | _getElement: function() { 78 | return ( 79 | React.createElement("table", null, 80 | 81 | !this.props['no-head'] 82 | ? React.createElement("thead", null, 83 | React.createElement("tr", null, 84 | this.props.columns.map(function (column) { 85 | return ( 86 | React.createElement("th", {key: column.key, className: this._getCellClasses(column), style: column.style}, column.label) 87 | ); 88 | }.bind(this)) 89 | ) 90 | ) 91 | : null, 92 | 93 | React.createElement("tbody", null, 94 | this.props.data.map(function (row, i) { 95 | return ( 96 | React.createElement("tr", {key: i, className: this._getRowClasses(row)}, 97 | this.props.columns.map(function (column) { 98 | return ( 99 | React.createElement("td", {key: column.key, className: this._getCellClasses(column)}, column.prefix, row[column.key], column.suffix) 100 | ); 101 | }.bind(this)) 102 | ) 103 | ); 104 | }.bind(this)) 105 | ) 106 | ) 107 | ); 108 | }, 109 | 110 | render: function () { 111 | var element = this._getElement(); 112 | var newProps = __functions.joinProps(_defaultProps, this.props, element.props, this._getClasses()); 113 | return React.cloneElement(element, newProps); 114 | }, 115 | 116 | componentDidMount: function() { 117 | __functions.updateComponents(); 118 | if (this.props.selectable && !this.props['no-head']) { 119 | var elem = ReactDOM.findDOMNode(this); 120 | var selectBoxes = this._findElementsByClass(elem, "mdl-checkbox__input"); 121 | for (var i = 0; i < selectBoxes.length; i++) { 122 | selectBoxes[i].addEventListener("change", this.props.onChange); 123 | } 124 | } 125 | }, 126 | 127 | getSelectedRows: function () { 128 | //return this. 129 | }, 130 | 131 | _findElementsByClass: function(element, className) { 132 | var foundElements = []; 133 | function recurse(element, className) { 134 | for (var i = 0; i < element.childNodes.length; i++) { 135 | var el = element.childNodes[i]; 136 | var classes = el.className != undefined? el.className.split(" ") : []; 137 | for (var j = 0, jl = classes.length; j < jl; j++) { 138 | if (classes[j] == className) { 139 | foundElements.push(element.childNodes[i]) ; 140 | } 141 | } 142 | 143 | recurse(element.childNodes[i], className); 144 | } 145 | } 146 | recurse(element, className); 147 | return foundElements; 148 | } 149 | }); 150 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | var React = require("react"), 2 | _ = require('lodash'); 3 | 4 | global.__functions = { 5 | updateComponents: _.debounce(function () { 6 | componentHandler.upgradeDom(); 7 | }, 10), 8 | 9 | objDiff: function (obj1, obj2) { 10 | var _keysObj1 = _.keys(obj1); 11 | var _keysObj2 = _.keys(obj2); 12 | 13 | var _keysDiff = _.remove(_keysObj2, function(n) { 14 | return (_(_keysObj1).indexOf(n) == -1); 15 | }); 16 | 17 | return _.pick(obj2, function (value, key) { 18 | return _(_keysDiff).indexOf(key) != -1; 19 | }); 20 | }, 21 | 22 | joinProps: function (defaultProps, currentProps, elementProps, classes) { 23 | var diffedProps = this.objDiff(defaultProps, currentProps); 24 | var joinedProps = _.assign(diffedProps, elementProps); 25 | return _.assign(joinedProps, { 26 | className: _.trimLeft((currentProps.className || '') + ' ' + (elementProps.className || '') + ' ' + classes) 27 | }); 28 | }, 29 | 30 | addColorClasses: function (classArray, color, colorSpectrum, textColor, textColorSpectrum) { 31 | colorSpectrum = colorSpectrum || 400; 32 | textColorSpectrum = textColorSpectrum || 400; 33 | 34 | if (color && color.length) { 35 | if (color == "white" || color == "black") { 36 | classArray["mdl-color--" + color] = true; 37 | } else { 38 | classArray["mdl-color--" + color + "-" + colorSpectrum] = true; 39 | } 40 | } 41 | if (textColor && textColor.length) { 42 | if (textColor == "white" || textColor == "black") { 43 | classArray["mdl-color-text--" + textColor] = true; 44 | } else { 45 | classArray["mdl-color-text--" + textColor + "-" + textColorSpectrum] = true; 46 | } 47 | } 48 | return classArray; 49 | }, 50 | 51 | addShadowClasses: function (classArray, depth) { 52 | if (depth && depth > 0) { 53 | classArray['mdl-shadow--' + depth + 'dp'] = true; 54 | } 55 | 56 | return classArray; 57 | }, 58 | 59 | addGeneralClasses: function (classArray, props) { 60 | classArray = this.addColorClasses(classArray, props.color, props.colorSpectrum, props.textColor, props.textColorSpectrum); 61 | classArray = this.addShadowClasses(classArray, props.shadow); 62 | 63 | return classArray; 64 | }, 65 | 66 | makeDefaultProps: function (props, settings) { 67 | settings = _.assign({ 68 | colors: false, 69 | shadow: false, 70 | }, settings); 71 | 72 | props = settings.colors ? _.assign({ 73 | color: '', 74 | colorSpectrum: '', 75 | textColor: '', 76 | textColorSpectrum: '', 77 | }, props) : props; 78 | 79 | props = settings.shadow ? _.assign({ 80 | shadow: 2 81 | }, props) : props; 82 | 83 | return props; 84 | }, 85 | 86 | makeDefaultPropTypes: function (props, settings) { 87 | settings = _.assign({ 88 | colors: false, 89 | shadow: false, 90 | }, settings); 91 | 92 | var _colors = ['', 'white', 'black', 'red','pink','purple','deep-purple','indigo','blue','light-blue','cyan','teal','green','light-green','lime','yellow','amber','orange','deep-orange','brown','grey','blue-grey']; 93 | var _spectrums = ['', 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700']; 94 | 95 | props = settings.colors ? _.assign({ 96 | color: React.PropTypes.oneOf(_colors), 97 | colorSpectrum: React.PropTypes.oneOf(_spectrums), 98 | textColor: React.PropTypes.oneOf(_colors), 99 | textColorSpectrum: React.PropTypes.oneOf(_spectrums), 100 | }, props) : props; 101 | 102 | props = settings.shadow ? _.assign({ 103 | shadow: React.PropTypes.oneOf([ 0, 2, 3, 4, 6, 8, 16 ]), 104 | }, props) : props; 105 | 106 | return props; 107 | }, 108 | }; 109 | 110 | module.exports = { 111 | Badge: require('./badge.js'), 112 | Button: require('./button.js'), 113 | Icon: require('./icon.js'), 114 | Menu: require('./menu.js'), 115 | MenuItem: require('./menuItem.js'), 116 | Progress: require('./progress.js'), 117 | Slider: require('./slider.js'), 118 | Spinner: require('./spinner.js'), 119 | Textfield: require('./textfield.js'), 120 | Toggle: require('./toggle.js'), 121 | Table: require('./table.js'), 122 | 123 | // Card 124 | Card: require('./card/card.js'), 125 | CardActions: require('./card/cardActions.js'), 126 | CardMedia: require('./card/cardMedia.js'), 127 | CardMenu: require('./card/cardMenu.js'), 128 | CardSupportingText: require('./card/cardSupportingText.js'), 129 | CardTitle: require('./card/cardTitle.js'), 130 | 131 | // Layout 132 | Layout: require('./layout/layout.js'), 133 | LayoutContent: require('./layout/layoutContent.js'), 134 | LayoutDrawer: require('./layout/layoutDrawer.js'), 135 | LayoutHeader: require('./layout/layoutHeader.js'), 136 | LayoutHeaderRow: require('./layout/layoutHeaderRow.js'), 137 | LayoutSpacer: require('./layout/layoutSpacer.js'), 138 | LayoutTitle: require('./layout/layoutTitle.js'), 139 | 140 | // Tabs 141 | Tabs: require('./tabs/tabs.js'), 142 | TabsPanel: require('./tabs/tabsPanel.js'), 143 | 144 | // Navigation 145 | Navigation: require('./navigation/navigation.js'), 146 | NavigationLink: require('./navigation/navigationLink.js'), 147 | 148 | // Grid 149 | Grid: require('./grid/grid.js'), 150 | GridCell: require('./grid/gridCell.js'), 151 | }; 152 | -------------------------------------------------------------------------------- /docs/src/views/layoutView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MDL from '../../../lib/'; 3 | import DOCS from '../components'; 4 | 5 | export default class LayoutView extends React.Component { 6 | // handleChange(name, e) { 7 | // console.log('change'); 8 | // } 9 | 10 | // handleEvent(e) { 11 | // console.log(e); 12 | // } 13 | 14 | render() { 15 | return ( 16 |
17 |
18 |

Layout

19 |

Building blocks for constructing a page layout.

20 |

Grid

21 |
22 | {/* 23 | 24 | */} 25 | 26 | 1 27 | 1 28 | 1 29 | 1 30 | 1 31 | 1 32 | 1 33 | 1 34 | 1 35 | 1 36 | 1 37 | 1 38 | 39 | 40 | 4 41 | 4 42 | 4 43 | 44 | 45 | 6 46 | 4 47 | 2 48 | 49 | 50 | 6 (8 tablet) 51 | 4 (6 tablet) 52 | 2 (4 phone) 53 | 54 | 55 | 56 | {' '}{'\n'} 57 | {' 1'}{'\n'} 58 | {' 1'}{'\n'} 59 | {' 1'}{'\n'} 60 | {' 1'}{'\n'} 61 | {' 1'}{'\n'} 62 | {' 1'}{'\n'} 63 | {' 1'}{'\n'} 64 | {' 1'}{'\n'} 65 | {' 1'}{'\n'} 66 | {' 1'}{'\n'} 67 | {' 1'}{'\n'} 68 | {' 1'}{'\n'} 69 | {' '}{'\n'} 70 | {' '}{'\n'} 71 | {' 4'}{'\n'} 72 | {' 4'}{'\n'} 73 | {' 4'}{'\n'} 74 | {' '}{'\n'} 75 | {' '}{'\n'} 76 | {' 6'}{'\n'} 77 | {' 4'}{'\n'} 78 | {' 2'}{'\n'} 79 | {' '}{'\n'} 80 | {' '}{'\n'} 81 | {' 6 (8 tablet)'}{'\n'} 82 | {' 4 (6 tablet)'}{'\n'} 83 | {' 2 (4 phone)'}{'\n'} 84 | {' '} 85 | 86 | 87 | {/* 88 | Documentation text 89 | */} 90 | 91 |
92 |

CONFIGURATION OPTIONS

93 |

94 | Down below you can find all the attributes that can be applied to the component GridCell 95 |

96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 |
AttributeEffectValues
colSets the column size for the cellINT [1-12]
colDesktopSets the column size for the cell for desktop mode onlyINT [1-12]
colTabletSets the column size for the cell for tablet mode onlyINT [1-12]
colPhoneSets the column size for the cell for phone mode onlyINT [1-12]
hideDesktopHides the cell when in desktop modeboolean
hideTabletHides the cell when in tablet modeboolean
hidePhoneHides the cell when in phone modeboolean
stretchStretches the cell vertically to fill the parentboolean
alignDefines tow the cell alignes to the parent[left/right/top/bottom]
152 |
153 | 154 |
155 |

Tabs

156 |
157 | {/* 158 | 159 | */} 160 | 161 | {/* 162 | Wide 163 | */} 164 | 165 | 166 | 167 | 168 | This is the content of the first tab! 169 | 170 | 171 | And here you have the content of the second tab... 172 | 173 | 174 | 175 | 176 | 177 |
178 | ); 179 | } 180 | } -------------------------------------------------------------------------------- /docs/src/views/cardsView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MDL from '../../../lib/'; 3 | import DOCS from '../components'; 4 | 5 | export default class CardsView extends React.Component { 6 | render() { 7 | return ( 8 |
9 |
10 |

Cards

11 |

Self-contained pieces of paper with data.

12 |
13 | 14 | {/* 15 | Wide 16 | */} 17 | 18 | 19 | 20 | 25 | Welcome 26 | 27 | 28 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 29 | Mauris sagittis pellentesque lacus eleifend lacinia... 30 | 31 | 32 | Get started 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | { 43 | '\n' + 44 | ' \n' + 49 | ' Welcome\n' + 50 | ' \n' + 51 | ' \n' + 52 | ' Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n' + 53 | ' Mauris sagittis pellentesque lacus eleifend lacinia...\n' + 54 | ' \n' + 55 | ' \n' + 56 | ' Get started\n' + 57 | ' \n' + 58 | ' \n' + 59 | ' \n' + 60 | ' \n' + 61 | '' 62 | } 63 | 64 | 65 | {/* 66 | Square 67 | */} 68 | 69 | 70 | 74 | 79 | Update 80 | 81 | 82 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 83 | 84 | 85 | View updates 86 | 87 | 88 | 89 | 90 | 91 | 92 | { 93 | '\n' + 94 | ' height: 320,\n' + 95 | ' width: 320\n' + 96 | '}}>\n' + 97 | ' \n' + 102 | ' Update\n' + 103 | ' \n' + 104 | ' \n' + 105 | ' Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n' + 106 | ' \n' + 107 | ' \n' + 108 | ' View updates\n' + 109 | ' \n' + 110 | '' 111 | } 112 | 113 | 114 | {/* 115 | Square 116 | */} 117 | 118 | 119 | 124 | 125 | 130 | Image.jpg 131 | 132 | 133 | 134 | 135 | 141 | 142 |

143 | Featured event:
144 | May 24, 2016
145 | 7-11pm 146 |

147 | 148 | 153 | 154 | Add to calendar 155 | 156 | 157 | event 158 | 159 | 160 | 161 | 162 | 163 | 164 | { 165 | 'See docs source code..' 166 | } 167 | 168 | 169 | { 170 | 'See docs source code..' 171 | } 172 | 173 | 174 | {/* 175 | Documentation text 176 | */} 177 | 178 |
179 |

CONFIGURATION OPTIONS

180 |

181 | Down below you can find all the attributes that can be applied to the component 182 |

183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 |
AttributeEffectValues
AttributeEffectValues
199 |
200 |
201 | ); 202 | } 203 | } 204 | -------------------------------------------------------------------------------- /docs/src/views/buttonsView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MDL from '../../../lib/'; 3 | import DOCS from '../components'; 4 | 5 | export default class ButonsView extends React.Component { 6 | render() { 7 | return ( 8 |
9 |
10 |

Buttons

11 |

Variations on Material Design buttons.

12 |
13 | 14 | {/* 15 | Colored FAB 16 | */} 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | {''} 28 | 29 | 30 | {''} 31 | 32 | 33 | {/* 34 | Plain FAB 35 | */} 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | {''} 50 | 51 | 52 | {''} 53 | 54 | 55 | {''} 56 | 57 | 58 | {/* 59 | Raised Buttons 60 | */} 61 | 62 | 63 | Button 64 | 65 | 66 | Button 67 | 68 | 69 | Button 70 | 71 | 72 | 73 | 74 | {'Button'} 75 | 76 | 77 | {'Button'} 78 | 79 | 80 | {'Button'} 81 | 82 | 83 | {/* 84 | Raised Buttons 85 | */} 86 | 87 | 88 | Button 89 | 90 | 91 | Button 92 | 93 | 94 | Button 95 | 96 | 97 | 98 | 99 | {'Button'} 100 | 101 | 102 | {'Button'} 103 | 104 | 105 | {'Button'} 106 | 107 | 108 | {/* 109 | Flat Buttons 110 | */} 111 | 112 | 113 | Button 114 | 115 | 116 | Button 117 | 118 | 119 | Button 120 | 121 | 122 | 123 | 124 | {'Button'} 125 | 126 | 127 | {'Button'} 128 | 129 | 130 | {'Button'} 131 | 132 | 133 | {/* 134 | Flat colored Buttons 135 | */} 136 | 137 | 138 | Button 139 | 140 | 141 | Button 142 | 143 | 144 | 145 | 146 | {'Button'} 147 | 148 | 149 | {'Button'} 150 | 151 | 152 | {/* 153 | Icon buttons 154 | */} 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | {''} 166 | 167 | 168 | {''} 169 | 170 | 171 | {/* 172 | Mini fab buttons 173 | */} 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | {''} 185 | 186 | 187 | {''} 188 | 189 | 190 |
191 |

CONFIGURATION OPTIONS

192 |

193 | Down below you can find all the attributes that can be applied to the <button /> component 194 |

195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 |
AttributeEffectValues
rippleApplies ripple display effectboolean
fabApplies fab (circular) display effectboolean
216 |
217 |
218 | ); 219 | } 220 | }; 221 | -------------------------------------------------------------------------------- /docs/build/js/prism.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+jsx&plugins=line-numbers */ 2 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=_self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){g&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,c?t.tokenize(m,c):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+o+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;_self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),_self.close()},!1),_self.Prism):_self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);; 3 | Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[^\s>\/]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&/,"&"))});; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/i,inside:{tag:{pattern:/|<\/style>/i,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css},alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));; 5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};; 6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/(?!\d)[a-z0-9_$]+(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\`|\\?[^`])*`/,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/i,inside:{tag:{pattern:/|<\/script>/i,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript},alias:"language-javascript"}});; 7 | !function(a){var s=a.util.clone(a.languages.javascript);a.languages.jsx=a.languages.extend("markup",s),a.languages.jsx.tag.pattern=/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+|(\{[\w\W]*?\})))?\s*)*\/?>/i,a.languages.jsx.tag.inside["attr-value"].pattern=/=[^\{](?:('|")[\w\W]*?(\1)|[^\s>]+)/i,a.languages.insertBefore("inside","attr-value",{script:{pattern:/=(\{[\w\W]*?\})/i,inside:{"function":a.languages.javascript.function,punctuation:/[={}[\];(),.:]/,keyword:a.languages.javascript.keyword},alias:"language-javascript"}},a.languages.jsx.tag)}(Prism);; 8 | Prism.hooks.add("complete",function(e){var t=e.element.parentNode,s=/\s*\bline-numbers\b\s*/;if(t&&/pre/i.test(t.nodeName)&&(s.test(t.className)||s.test(e.element.className))&&!e.element.querySelector(".line-numbers-rows")){s.test(e.element.className)&&(e.element.className=e.element.className.replace(s,"")),s.test(t.className)||(t.className+=" line-numbers");var a,n=1+e.code.split("\n").length,l=new Array(n);l=l.join(""),a=document.createElement("span"),a.className="line-numbers-rows",a.innerHTML=l,t.hasAttribute("data-start")&&(t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)),e.element.appendChild(a)}});; 9 | -------------------------------------------------------------------------------- /docs/build/fonts/icons/LICENSE.txt: -------------------------------------------------------------------------------- 1 | https://github.com/google/material-design-icons/blob/master/LICENSE 2 | https://github.com/FezVrasta/bootstrap-material-design/blob/master/fonts/LICENSE.txt 3 | 4 | Attribution-ShareAlike 4.0 International 5 | 6 | ======================================================================= 7 | 8 | Creative Commons Corporation ("Creative Commons") is not a law firm and 9 | does not provide legal services or legal advice. Distribution of 10 | Creative Commons public licenses does not create a lawyer-client or 11 | other relationship. Creative Commons makes its licenses and related 12 | information available on an "as-is" basis. Creative Commons gives no 13 | warranties regarding its licenses, any material licensed under their 14 | terms and conditions, or any related information. Creative Commons 15 | disclaims all liability for damages resulting from their use to the 16 | fullest extent possible. 17 | 18 | Using Creative Commons Public Licenses 19 | 20 | Creative Commons public licenses provide a standard set of terms and 21 | conditions that creators and other rights holders may use to share 22 | original works of authorship and other material subject to copyright 23 | and certain other rights specified in the public license below. The 24 | following considerations are for informational purposes only, are not 25 | exhaustive, and do not form part of our licenses. 26 | 27 | Considerations for licensors: Our public licenses are 28 | intended for use by those authorized to give the public 29 | permission to use material in ways otherwise restricted by 30 | copyright and certain other rights. Our licenses are 31 | irrevocable. Licensors should read and understand the terms 32 | and conditions of the license they choose before applying it. 33 | Licensors should also secure all rights necessary before 34 | applying our licenses so that the public can reuse the 35 | material as expected. Licensors should clearly mark any 36 | material not subject to the license. This includes other CC- 37 | licensed material, or material used under an exception or 38 | limitation to copyright. More considerations for licensors: 39 | wiki.creativecommons.org/Considerations_for_licensors 40 | 41 | Considerations for the public: By using one of our public 42 | licenses, a licensor grants the public permission to use the 43 | licensed material under specified terms and conditions. If 44 | the licensor's permission is not necessary for any reason--for 45 | example, because of any applicable exception or limitation to 46 | copyright--then that use is not regulated by the license. Our 47 | licenses grant only permissions under copyright and certain 48 | other rights that a licensor has authority to grant. Use of 49 | the licensed material may still be restricted for other 50 | reasons, including because others have copyright or other 51 | rights in the material. A licensor may make special requests, 52 | such as asking that all changes be marked or described. 53 | Although not required by our licenses, you are encouraged to 54 | respect those requests where reasonable. More_considerations 55 | for the public: 56 | wiki.creativecommons.org/Considerations_for_licensees 57 | 58 | ======================================================================= 59 | 60 | Creative Commons Attribution-ShareAlike 4.0 International Public 61 | License 62 | 63 | By exercising the Licensed Rights (defined below), You accept and agree 64 | to be bound by the terms and conditions of this Creative Commons 65 | Attribution-ShareAlike 4.0 International Public License ("Public 66 | License"). To the extent this Public License may be interpreted as a 67 | contract, You are granted the Licensed Rights in consideration of Your 68 | acceptance of these terms and conditions, and the Licensor grants You 69 | such rights in consideration of benefits the Licensor receives from 70 | making the Licensed Material available under these terms and 71 | conditions. 72 | 73 | 74 | Section 1 -- Definitions. 75 | 76 | a. Adapted Material means material subject to Copyright and Similar 77 | Rights that is derived from or based upon the Licensed Material 78 | and in which the Licensed Material is translated, altered, 79 | arranged, transformed, or otherwise modified in a manner requiring 80 | permission under the Copyright and Similar Rights held by the 81 | Licensor. For purposes of this Public License, where the Licensed 82 | Material is a musical work, performance, or sound recording, 83 | Adapted Material is always produced where the Licensed Material is 84 | synched in timed relation with a moving image. 85 | 86 | b. Adapter's License means the license You apply to Your Copyright 87 | and Similar Rights in Your contributions to Adapted Material in 88 | accordance with the terms and conditions of this Public License. 89 | 90 | c. BY-SA Compatible License means a license listed at 91 | creativecommons.org/compatiblelicenses, approved by Creative 92 | Commons as essentially the equivalent of this Public License. 93 | 94 | d. Copyright and Similar Rights means copyright and/or similar rights 95 | closely related to copyright including, without limitation, 96 | performance, broadcast, sound recording, and Sui Generis Database 97 | Rights, without regard to how the rights are labeled or 98 | categorized. For purposes of this Public License, the rights 99 | specified in Section 2(b)(1)-(2) are not Copyright and Similar 100 | Rights. 101 | 102 | e. Effective Technological Measures means those measures that, in the 103 | absence of proper authority, may not be circumvented under laws 104 | fulfilling obligations under Article 11 of the WIPO Copyright 105 | Treaty adopted on December 20, 1996, and/or similar international 106 | agreements. 107 | 108 | f. Exceptions and Limitations means fair use, fair dealing, and/or 109 | any other exception or limitation to Copyright and Similar Rights 110 | that applies to Your use of the Licensed Material. 111 | 112 | g. License Elements means the license attributes listed in the name 113 | of a Creative Commons Public License. The License Elements of this 114 | Public License are Attribution and ShareAlike. 115 | 116 | h. Licensed Material means the artistic or literary work, database, 117 | or other material to which the Licensor applied this Public 118 | License. 119 | 120 | i. Licensed Rights means the rights granted to You subject to the 121 | terms and conditions of this Public License, which are limited to 122 | all Copyright and Similar Rights that apply to Your use of the 123 | Licensed Material and that the Licensor has authority to license. 124 | 125 | j. Licensor means the individual(s) or entity(ies) granting rights 126 | under this Public License. 127 | 128 | k. Share means to provide material to the public by any means or 129 | process that requires permission under the Licensed Rights, such 130 | as reproduction, public display, public performance, distribution, 131 | dissemination, communication, or importation, and to make material 132 | available to the public including in ways that members of the 133 | public may access the material from a place and at a time 134 | individually chosen by them. 135 | 136 | l. Sui Generis Database Rights means rights other than copyright 137 | resulting from Directive 96/9/EC of the European Parliament and of 138 | the Council of 11 March 1996 on the legal protection of databases, 139 | as amended and/or succeeded, as well as other essentially 140 | equivalent rights anywhere in the world. 141 | 142 | m. You means the individual or entity exercising the Licensed Rights 143 | under this Public License. Your has a corresponding meaning. 144 | 145 | 146 | Section 2 -- Scope. 147 | 148 | a. License grant. 149 | 150 | 1. Subject to the terms and conditions of this Public License, 151 | the Licensor hereby grants You a worldwide, royalty-free, 152 | non-sublicensable, non-exclusive, irrevocable license to 153 | exercise the Licensed Rights in the Licensed Material to: 154 | 155 | a. reproduce and Share the Licensed Material, in whole or 156 | in part; and 157 | 158 | b. produce, reproduce, and Share Adapted Material. 159 | 160 | 2. Exceptions and Limitations. For the avoidance of doubt, where 161 | Exceptions and Limitations apply to Your use, this Public 162 | License does not apply, and You do not need to comply with 163 | its terms and conditions. 164 | 165 | 3. Term. The term of this Public License is specified in Section 166 | 6(a). 167 | 168 | 4. Media and formats; technical modifications allowed. The 169 | Licensor authorizes You to exercise the Licensed Rights in 170 | all media and formats whether now known or hereafter created, 171 | and to make technical modifications necessary to do so. The 172 | Licensor waives and/or agrees not to assert any right or 173 | authority to forbid You from making technical modifications 174 | necessary to exercise the Licensed Rights, including 175 | technical modifications necessary to circumvent Effective 176 | Technological Measures. For purposes of this Public License, 177 | simply making modifications authorized by this Section 2(a) 178 | (4) never produces Adapted Material. 179 | 180 | 5. Downstream recipients. 181 | 182 | a. Offer from the Licensor -- Licensed Material. Every 183 | recipient of the Licensed Material automatically 184 | receives an offer from the Licensor to exercise the 185 | Licensed Rights under the terms and conditions of this 186 | Public License. 187 | 188 | b. Additional offer from the Licensor -- Adapted Material. 189 | Every recipient of Adapted Material from You 190 | automatically receives an offer from the Licensor to 191 | exercise the Licensed Rights in the Adapted Material 192 | under the conditions of the Adapter's License You apply. 193 | 194 | c. No downstream restrictions. You may not offer or impose 195 | any additional or different terms or conditions on, or 196 | apply any Effective Technological Measures to, the 197 | Licensed Material if doing so restricts exercise of the 198 | Licensed Rights by any recipient of the Licensed 199 | Material. 200 | 201 | 6. No endorsement. Nothing in this Public License constitutes or 202 | may be construed as permission to assert or imply that You 203 | are, or that Your use of the Licensed Material is, connected 204 | with, or sponsored, endorsed, or granted official status by, 205 | the Licensor or others designated to receive attribution as 206 | provided in Section 3(a)(1)(A)(i). 207 | 208 | b. Other rights. 209 | 210 | 1. Moral rights, such as the right of integrity, are not 211 | licensed under this Public License, nor are publicity, 212 | privacy, and/or other similar personality rights; however, to 213 | the extent possible, the Licensor waives and/or agrees not to 214 | assert any such rights held by the Licensor to the limited 215 | extent necessary to allow You to exercise the Licensed 216 | Rights, but not otherwise. 217 | 218 | 2. Patent and trademark rights are not licensed under this 219 | Public License. 220 | 221 | 3. To the extent possible, the Licensor waives any right to 222 | collect royalties from You for the exercise of the Licensed 223 | Rights, whether directly or through a collecting society 224 | under any voluntary or waivable statutory or compulsory 225 | licensing scheme. In all other cases the Licensor expressly 226 | reserves any right to collect such royalties. 227 | 228 | 229 | Section 3 -- License Conditions. 230 | 231 | Your exercise of the Licensed Rights is expressly made subject to the 232 | following conditions. 233 | 234 | a. Attribution. 235 | 236 | 1. If You Share the Licensed Material (including in modified 237 | form), You must: 238 | 239 | a. retain the following if it is supplied by the Licensor 240 | with the Licensed Material: 241 | 242 | i. identification of the creator(s) of the Licensed 243 | Material and any others designated to receive 244 | attribution, in any reasonable manner requested by 245 | the Licensor (including by pseudonym if 246 | designated); 247 | 248 | ii. a copyright notice; 249 | 250 | iii. a notice that refers to this Public License; 251 | 252 | iv. a notice that refers to the disclaimer of 253 | warranties; 254 | 255 | v. a URI or hyperlink to the Licensed Material to the 256 | extent reasonably practicable; 257 | 258 | b. indicate if You modified the Licensed Material and 259 | retain an indication of any previous modifications; and 260 | 261 | c. indicate the Licensed Material is licensed under this 262 | Public License, and include the text of, or the URI or 263 | hyperlink to, this Public License. 264 | 265 | 2. You may satisfy the conditions in Section 3(a)(1) in any 266 | reasonable manner based on the medium, means, and context in 267 | which You Share the Licensed Material. For example, it may be 268 | reasonable to satisfy the conditions by providing a URI or 269 | hyperlink to a resource that includes the required 270 | information. 271 | 272 | 3. If requested by the Licensor, You must remove any of the 273 | information required by Section 3(a)(1)(A) to the extent 274 | reasonably practicable. 275 | 276 | b. ShareAlike. 277 | 278 | In addition to the conditions in Section 3(a), if You Share 279 | Adapted Material You produce, the following conditions also apply. 280 | 281 | 1. The Adapter's License You apply must be a Creative Commons 282 | license with the same License Elements, this version or 283 | later, or a BY-SA Compatible License. 284 | 285 | 2. You must include the text of, or the URI or hyperlink to, the 286 | Adapter's License You apply. You may satisfy this condition 287 | in any reasonable manner based on the medium, means, and 288 | context in which You Share Adapted Material. 289 | 290 | 3. You may not offer or impose any additional or different terms 291 | or conditions on, or apply any Effective Technological 292 | Measures to, Adapted Material that restrict exercise of the 293 | rights granted under the Adapter's License You apply. 294 | 295 | 296 | Section 4 -- Sui Generis Database Rights. 297 | 298 | Where the Licensed Rights include Sui Generis Database Rights that 299 | apply to Your use of the Licensed Material: 300 | 301 | a. for the avoidance of doubt, Section 2(a)(1) grants You the right 302 | to extract, reuse, reproduce, and Share all or a substantial 303 | portion of the contents of the database; 304 | 305 | b. if You include all or a substantial portion of the database 306 | contents in a database in which You have Sui Generis Database 307 | Rights, then the database in which You have Sui Generis Database 308 | Rights (but not its individual contents) is Adapted Material, 309 | 310 | including for purposes of Section 3(b); and 311 | c. You must comply with the conditions in Section 3(a) if You Share 312 | all or a substantial portion of the contents of the database. 313 | 314 | For the avoidance of doubt, this Section 4 supplements and does not 315 | replace Your obligations under this Public License where the Licensed 316 | Rights include other Copyright and Similar Rights. 317 | 318 | 319 | Section 5 -- Disclaimer of Warranties and Limitation of Liability. 320 | 321 | a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE 322 | EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS 323 | AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF 324 | ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, 325 | IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, 326 | WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR 327 | PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, 328 | ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT 329 | KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT 330 | ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. 331 | 332 | b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE 333 | TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, 334 | NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, 335 | INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, 336 | COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR 337 | USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN 338 | ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR 339 | DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR 340 | IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. 341 | 342 | c. The disclaimer of warranties and limitation of liability provided 343 | above shall be interpreted in a manner that, to the extent 344 | possible, most closely approximates an absolute disclaimer and 345 | waiver of all liability. 346 | 347 | 348 | Section 6 -- Term and Termination. 349 | 350 | a. This Public License applies for the term of the Copyright and 351 | Similar Rights licensed here. However, if You fail to comply with 352 | this Public License, then Your rights under this Public License 353 | terminate automatically. 354 | 355 | b. Where Your right to use the Licensed Material has terminated under 356 | Section 6(a), it reinstates: 357 | 358 | 1. automatically as of the date the violation is cured, provided 359 | it is cured within 30 days of Your discovery of the 360 | violation; or 361 | 362 | 2. upon express reinstatement by the Licensor. 363 | 364 | For the avoidance of doubt, this Section 6(b) does not affect any 365 | right the Licensor may have to seek remedies for Your violations 366 | of this Public License. 367 | 368 | c. For the avoidance of doubt, the Licensor may also offer the 369 | Licensed Material under separate terms or conditions or stop 370 | distributing the Licensed Material at any time; however, doing so 371 | will not terminate this Public License. 372 | 373 | d. Sections 1, 5, 6, 7, and 8 survive termination of this Public 374 | License. 375 | 376 | 377 | Section 7 -- Other Terms and Conditions. 378 | 379 | a. The Licensor shall not be bound by any additional or different 380 | terms or conditions communicated by You unless expressly agreed. 381 | 382 | b. Any arrangements, understandings, or agreements regarding the 383 | Licensed Material not stated herein are separate from and 384 | independent of the terms and conditions of this Public License. 385 | 386 | 387 | Section 8 -- Interpretation. 388 | 389 | a. For the avoidance of doubt, this Public License does not, and 390 | shall not be interpreted to, reduce, limit, restrict, or impose 391 | conditions on any use of the Licensed Material that could lawfully 392 | be made without permission under this Public License. 393 | 394 | b. To the extent possible, if any provision of this Public License is 395 | deemed unenforceable, it shall be automatically reformed to the 396 | minimum extent necessary to make it enforceable. If the provision 397 | cannot be reformed, it shall be severed from this Public License 398 | without affecting the enforceability of the remaining terms and 399 | conditions. 400 | 401 | c. No term or condition of this Public License will be waived and no 402 | failure to comply consented to unless expressly agreed to by the 403 | Licensor. 404 | 405 | d. Nothing in this Public License constitutes or may be interpreted 406 | as a limitation upon, or waiver of, any privileges and immunities 407 | that apply to the Licensor or You, including from the legal 408 | processes of any jurisdiction or authority. 409 | 410 | 411 | ======================================================================= 412 | 413 | Creative Commons is not a party to its public licenses. 414 | Notwithstanding, Creative Commons may elect to apply one of its public 415 | licenses to material it publishes and in those instances will be 416 | considered the "Licensor." Except for the limited purpose of indicating 417 | that material is shared under a Creative Commons public license or as 418 | otherwise permitted by the Creative Commons policies published at 419 | creativecommons.org/policies, Creative Commons does not authorize the 420 | use of the trademark "Creative Commons" or any other trademark or logo 421 | of Creative Commons without its prior written consent including, 422 | without limitation, in connection with any unauthorized modifications 423 | to any of its public licenses or any other arrangements, 424 | understandings, or agreements concerning use of licensed material. For 425 | the avoidance of doubt, this paragraph does not form part of the public 426 | licenses. 427 | 428 | Creative Commons may be contacted at creativecommons.org. 429 | -------------------------------------------------------------------------------- /docs/build/js/material.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * material-design-lite - Material Design Components in CSS, JS and HTML 3 | * @version v1.1.1 4 | * @license Apache-2.0 5 | * @copyright 2015 Google, Inc. 6 | * @link https://github.com/google/material-design-lite 7 | */ 8 | !function(){"use strict";function e(e,t){if(e){if(t.element_.classList.contains(t.CssClasses_.MDL_JS_RIPPLE_EFFECT)){var s=document.createElement("span");s.classList.add(t.CssClasses_.MDL_RIPPLE_CONTAINER),s.classList.add(t.CssClasses_.MDL_JS_RIPPLE_EFFECT);var i=document.createElement("span");i.classList.add(t.CssClasses_.MDL_RIPPLE),s.appendChild(i),e.appendChild(s)}e.addEventListener("click",function(s){s.preventDefault();var i=e.href.split("#")[1],n=t.element_.querySelector("#"+i);t.resetTabState_(),t.resetPanelState_(),e.classList.add(t.CssClasses_.ACTIVE_CLASS),n.classList.add(t.CssClasses_.ACTIVE_CLASS)})}}function t(e,t,s,i){function n(){var n=e.href.split("#")[1],a=i.content_.querySelector("#"+n);i.resetTabState_(t),i.resetPanelState_(s),e.classList.add(i.CssClasses_.IS_ACTIVE),a.classList.add(i.CssClasses_.IS_ACTIVE)}if(i.tabBar_.classList.contains(i.CssClasses_.JS_RIPPLE_EFFECT)){var a=document.createElement("span");a.classList.add(i.CssClasses_.RIPPLE_CONTAINER),a.classList.add(i.CssClasses_.JS_RIPPLE_EFFECT);var l=document.createElement("span");l.classList.add(i.CssClasses_.RIPPLE),a.appendChild(l),e.appendChild(a)}e.addEventListener("click",function(t){"#"===e.getAttribute("href").charAt(0)&&(t.preventDefault(),n())}),e.show=n,e.addEventListener("click",function(n){n.preventDefault();var a=e.href.split("#")[1],l=i.content_.querySelector("#"+a);i.resetTabState_(t),i.resetPanelState_(s),e.classList.add(i.CssClasses_.IS_ACTIVE),l.classList.add(i.CssClasses_.IS_ACTIVE)})}var s={upgradeDom:function(e,t){},upgradeElement:function(e,t){},upgradeElements:function(e){},upgradeAllRegistered:function(){},registerUpgradedCallback:function(e,t){},register:function(e){},downgradeElements:function(e){}};s=function(){function e(e,t){for(var s=0;s_;_++){if(r=l[_],!r)throw new Error("Unable to find a registered component for the given class.");a.push(r.className),i.setAttribute("data-upgraded",a.join(","));var C=new r.classConstructor(i);C[p]=r,c.push(C);for(var u=0,E=r.callbacks.length;E>u;u++)r.callbacks[u](i);r.widget&&(i[r.className]=C);var m=document.createEvent("Events");m.initEvent("mdl-componentupgraded",!0,!0),i.dispatchEvent(m)}}function a(e){Array.isArray(e)||(e="function"==typeof e.item?Array.prototype.slice.call(e):[e]);for(var t,s=0,i=e.length;i>s;s++)t=e[s],t instanceof HTMLElement&&(n(t),t.children.length>0&&a(t.children))}function l(t){var s="undefined"==typeof t.widget&&"undefined"==typeof t.widget,i=!0;s||(i=t.widget||t.widget);var n={classConstructor:t.constructor||t.constructor,className:t.classAsString||t.classAsString,cssClass:t.cssClass||t.cssClass,widget:i,callbacks:[]};if(h.forEach(function(e){if(e.cssClass===n.cssClass)throw new Error("The provided cssClass has already been registered: "+e.cssClass);if(e.className===n.className)throw new Error("The provided className has already been registered")}),t.constructor.prototype.hasOwnProperty(p))throw new Error("MDL component classes must not have "+p+" defined as a property.");var a=e(t.classAsString,n);a||h.push(n)}function o(t,s){var i=e(t);i&&i.callbacks.push(s)}function r(){for(var e=0;e0&&this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)&&(e.keyCode===this.Keycodes_.UP_ARROW?(e.preventDefault(),t[t.length-1].focus()):e.keyCode===this.Keycodes_.DOWN_ARROW&&(e.preventDefault(),t[0].focus()))}},d.prototype.handleItemKeyboardEvent_=function(e){if(this.element_&&this.container_){var t=this.element_.querySelectorAll("."+this.CssClasses_.ITEM+":not([disabled])");if(t&&t.length>0&&this.container_.classList.contains(this.CssClasses_.IS_VISIBLE)){var s=Array.prototype.slice.call(t).indexOf(e.target);if(e.keyCode===this.Keycodes_.UP_ARROW)e.preventDefault(),s>0?t[s-1].focus():t[t.length-1].focus();else if(e.keyCode===this.Keycodes_.DOWN_ARROW)e.preventDefault(),t.length>s+1?t[s+1].focus():t[0].focus();else if(e.keyCode===this.Keycodes_.SPACE||e.keyCode===this.Keycodes_.ENTER){e.preventDefault();var i=new MouseEvent("mousedown");e.target.dispatchEvent(i),i=new MouseEvent("mouseup"),e.target.dispatchEvent(i),e.target.click()}else e.keyCode===this.Keycodes_.ESCAPE&&(e.preventDefault(),this.hide())}}},d.prototype.handleItemClick_=function(e){e.target.hasAttribute("disabled")?e.stopPropagation():(this.closing_=!0,window.setTimeout(function(e){this.hide(),this.closing_=!1}.bind(this),this.Constant_.CLOSE_TIMEOUT))},d.prototype.applyClip_=function(e,t){this.element_.classList.contains(this.CssClasses_.UNALIGNED)?this.element_.style.clip="":this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)?this.element_.style.clip="rect(0 "+t+"px 0 "+t+"px)":this.element_.classList.contains(this.CssClasses_.TOP_LEFT)?this.element_.style.clip="rect("+e+"px 0 "+e+"px 0)":this.element_.classList.contains(this.CssClasses_.TOP_RIGHT)?this.element_.style.clip="rect("+e+"px "+t+"px "+e+"px "+t+"px)":this.element_.style.clip=""},d.prototype.removeAnimationEndListener_=function(e){e.target.classList.remove(d.prototype.CssClasses_.IS_ANIMATING)},d.prototype.addAnimationEndListener_=function(){this.element_.addEventListener("transitionend",this.removeAnimationEndListener_),this.element_.addEventListener("webkitTransitionEnd",this.removeAnimationEndListener_)},d.prototype.show=function(e){if(this.element_&&this.container_&&this.outline_){var t=this.element_.getBoundingClientRect().height,s=this.element_.getBoundingClientRect().width;this.container_.style.width=s+"px",this.container_.style.height=t+"px",this.outline_.style.width=s+"px",this.outline_.style.height=t+"px";for(var i=this.Constant_.TRANSITION_DURATION_SECONDS*this.Constant_.TRANSITION_DURATION_FRACTION,n=this.element_.querySelectorAll("."+this.CssClasses_.ITEM),a=0;a0&&this.showSnackbar(this.queuedNotifications_.shift())},C.prototype.cleanup_=function(){this.element_.classList.remove(this.cssClasses_.ACTIVE),setTimeout(function(){this.element_.setAttribute("aria-hidden","true"),this.textElement_.textContent="",Boolean(this.actionElement_.getAttribute("aria-hidden"))||(this.setActionHidden_(!0),this.actionElement_.textContent="",this.actionElement_.removeEventListener("click",this.actionHandler_)),this.actionHandler_=void 0,this.message_=void 0,this.actionText_=void 0,this.active=!1,this.checkQueue_()}.bind(this),this.Constant_.ANIMATION_LENGTH)},C.prototype.setActionHidden_=function(e){e?this.actionElement_.setAttribute("aria-hidden","true"):this.actionElement_.removeAttribute("aria-hidden")},s.register({constructor:C,classAsString:"MaterialSnackbar",cssClass:"mdl-js-snackbar",widget:!0});var u=function(e){this.element_=e,this.init()};window.MaterialSpinner=u,u.prototype.Constant_={MDL_SPINNER_LAYER_COUNT:4},u.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"},u.prototype.createLayer=function(e){var t=document.createElement("div");t.classList.add(this.CssClasses_.MDL_SPINNER_LAYER),t.classList.add(this.CssClasses_.MDL_SPINNER_LAYER+"-"+e);var s=document.createElement("div");s.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER),s.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);var i=document.createElement("div");i.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);var n=document.createElement("div");n.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER),n.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);for(var a=[s,i,n],l=0;l=this.maxRows&&e.preventDefault()},L.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},L.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},L.prototype.onReset_=function(e){this.updateClasses_()},L.prototype.updateClasses_=function(){this.checkDisabled(),this.checkValidity(),this.checkDirty(),this.checkFocus()},L.prototype.checkDisabled=function(){this.input_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},L.prototype.checkDisabled=L.prototype.checkDisabled,L.prototype.checkFocus=function(){Boolean(this.element_.querySelector(":focus"))?this.element_.classList.add(this.CssClasses_.IS_FOCUSED):this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},L.prototype.checkFocus=L.prototype.checkFocus,L.prototype.checkValidity=function(){this.input_.validity&&(this.input_.validity.valid?this.element_.classList.remove(this.CssClasses_.IS_INVALID):this.element_.classList.add(this.CssClasses_.IS_INVALID))},L.prototype.checkValidity=L.prototype.checkValidity,L.prototype.checkDirty=function(){this.input_.value&&this.input_.value.length>0?this.element_.classList.add(this.CssClasses_.IS_DIRTY):this.element_.classList.remove(this.CssClasses_.IS_DIRTY)},L.prototype.checkDirty=L.prototype.checkDirty,L.prototype.disable=function(){this.input_.disabled=!0,this.updateClasses_()},L.prototype.disable=L.prototype.disable,L.prototype.enable=function(){this.input_.disabled=!1,this.updateClasses_()},L.prototype.enable=L.prototype.enable,L.prototype.change=function(e){this.input_.value=e||"",this.updateClasses_()},L.prototype.change=L.prototype.change,L.prototype.init=function(){if(this.element_&&(this.label_=this.element_.querySelector("."+this.CssClasses_.LABEL),this.input_=this.element_.querySelector("."+this.CssClasses_.INPUT),this.input_)){this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE)&&(this.maxRows=parseInt(this.input_.getAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE),10),isNaN(this.maxRows)&&(this.maxRows=this.Constant_.NO_MAX_ROWS)),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),this.maxRows!==this.Constant_.NO_MAX_ROWS&&(this.boundKeyDownHandler=this.onKeyDown_.bind(this),this.input_.addEventListener("keydown",this.boundKeyDownHandler));var e=this.element_.classList.contains(this.CssClasses_.IS_INVALID);this.updateClasses_(),this.element_.classList.add(this.CssClasses_.IS_UPGRADED),e&&this.element_.classList.add(this.CssClasses_.IS_INVALID),this.input_.hasAttribute("autofocus")&&(this.element_.focus(),this.checkFocus())}},s.register({constructor:L,classAsString:"MaterialTextfield",cssClass:"mdl-js-textfield",widget:!0});var I=function(e){this.element_=e,this.init()};window.MaterialTooltip=I,I.prototype.Constant_={},I.prototype.CssClasses_={IS_ACTIVE:"is-active",BOTTOM:"mdl-tooltip--bottom",LEFT:"mdl-tooltip--left",RIGHT:"mdl-tooltip--right",TOP:"mdl-tooltip--top"},I.prototype.handleMouseEnter_=function(e){var t=e.target.getBoundingClientRect(),s=t.left+t.width/2,i=t.top+t.height/2,n=-1*(this.element_.offsetWidth/2),a=-1*(this.element_.offsetHeight/2);this.element_.classList.contains(this.CssClasses_.LEFT)||this.element_.classList.contains(this.CssClasses_.RIGHT)?(s=t.width/2,0>i+a?(this.element_.style.top=0,this.element_.style.marginTop=0):(this.element_.style.top=i+"px",this.element_.style.marginTop=a+"px")):0>s+n?(this.element_.style.left=0,this.element_.style.marginLeft=0):(this.element_.style.left=s+"px",this.element_.style.marginLeft=n+"px"),this.element_.classList.contains(this.CssClasses_.TOP)?this.element_.style.top=t.top-this.element_.offsetHeight-10+"px":this.element_.classList.contains(this.CssClasses_.RIGHT)?this.element_.style.left=t.left+t.width+10+"px":this.element_.classList.contains(this.CssClasses_.LEFT)?this.element_.style.left=t.left-this.element_.offsetWidth-10+"px":this.element_.style.top=t.top+t.height+10+"px",this.element_.classList.add(this.CssClasses_.IS_ACTIVE)},I.prototype.handleMouseLeave_=function(){this.element_.classList.remove(this.CssClasses_.IS_ACTIVE)},I.prototype.init=function(){if(this.element_){var e=this.element_.getAttribute("for");e&&(this.forElement_=document.getElementById(e)),this.forElement_&&(this.forElement_.hasAttribute("tabindex")||this.forElement_.setAttribute("tabindex","0"),this.boundMouseEnterHandler=this.handleMouseEnter_.bind(this),this.boundMouseLeaveHandler=this.handleMouseLeave_.bind(this),this.forElement_.addEventListener("mouseenter",this.boundMouseEnterHandler,!1),this.forElement_.addEventListener("touchend",this.boundMouseEnterHandler,!1),this.forElement_.addEventListener("mouseleave",this.boundMouseLeaveHandler,!1),window.addEventListener("touchstart",this.boundMouseLeaveHandler))}},s.register({constructor:I,classAsString:"MaterialTooltip",cssClass:"mdl-tooltip"});var f=function(e){this.element_=e,this.init()};window.MaterialLayout=f,f.prototype.Constant_={MAX_WIDTH:"(max-width: 1024px)",TAB_SCROLL_PIXELS:100,MENU_ICON:"",CHEVRON_LEFT:"chevron_left",CHEVRON_RIGHT:"chevron_right"},f.prototype.Keycodes_={ENTER:13,ESCAPE:27,SPACE:32},f.prototype.Mode_={STANDARD:0,SEAMED:1,WATERFALL:2,SCROLL:3},f.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",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"},f.prototype.contentScrollHandler_=function(){if(!this.header_.classList.contains(this.CssClasses_.IS_ANIMATING)){var e=!this.element_.classList.contains(this.CssClasses_.IS_SMALL_SCREEN)||this.element_.classList.contains(this.CssClasses_.FIXED_HEADER);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),e&&this.header_.classList.add(this.CssClasses_.IS_ANIMATING)):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),e&&this.header_.classList.add(this.CssClasses_.IS_ANIMATING))}},f.prototype.keyboardEventHandler_=function(e){e.keyCode===this.Keycodes_.ESCAPE&&this.toggleDrawer()},f.prototype.screenSizeHandler_=function(){this.screenSizeMediaQuery_.matches?this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN):(this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN),this.drawer_&&(this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN),this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN)))},f.prototype.drawerToggleHandler_=function(e){if(e&&"keydown"===e.type){if(e.keyCode!==this.Keycodes_.SPACE&&e.keyCode!==this.Keycodes_.ENTER)return;e.preventDefault()}this.toggleDrawer()},f.prototype.headerTransitionEndHandler_=function(){this.header_.classList.remove(this.CssClasses_.IS_ANIMATING)},f.prototype.headerClickHandler_=function(){this.header_.classList.contains(this.CssClasses_.IS_COMPACT)&&(this.header_.classList.remove(this.CssClasses_.IS_COMPACT),this.header_.classList.add(this.CssClasses_.IS_ANIMATING))},f.prototype.resetTabState_=function(e){for(var t=0;tn;n++){var a=s[n];a.classList&&a.classList.contains(this.CssClasses_.HEADER)&&(this.header_=a),a.classList&&a.classList.contains(this.CssClasses_.DRAWER)&&(this.drawer_=a),a.classList&&a.classList.contains(this.CssClasses_.CONTENT)&&(this.content_=a)}window.addEventListener("pageshow",function(e){e.persisted&&(this.element_.style.overflowY="hidden",requestAnimationFrame(function(){this.element_.style.overflowY=""}.bind(this)))}.bind(this),!1),this.header_&&(this.tabBar_=this.header_.querySelector("."+this.CssClasses_.TAB_BAR));var l=this.Mode_.STANDARD;if(this.header_&&(this.header_.classList.contains(this.CssClasses_.HEADER_SEAMED)?l=this.Mode_.SEAMED:this.header_.classList.contains(this.CssClasses_.HEADER_WATERFALL)?(l=this.Mode_.WATERFALL,this.header_.addEventListener("transitionend",this.headerTransitionEndHandler_.bind(this)),this.header_.addEventListener("click",this.headerClickHandler_.bind(this))):this.header_.classList.contains(this.CssClasses_.HEADER_SCROLL)&&(l=this.Mode_.SCROLL,e.classList.add(this.CssClasses_.HAS_SCROLLING_HEADER)),l===this.Mode_.STANDARD?(this.header_.classList.add(this.CssClasses_.CASTING_SHADOW),this.tabBar_&&this.tabBar_.classList.add(this.CssClasses_.CASTING_SHADOW)):l===this.Mode_.SEAMED||l===this.Mode_.SCROLL?(this.header_.classList.remove(this.CssClasses_.CASTING_SHADOW),this.tabBar_&&this.tabBar_.classList.remove(this.CssClasses_.CASTING_SHADOW)):l===this.Mode_.WATERFALL&&(this.content_.addEventListener("scroll",this.contentScrollHandler_.bind(this)),this.contentScrollHandler_())),this.drawer_){var o=this.element_.querySelector("."+this.CssClasses_.DRAWER_BTN);if(!o){o=document.createElement("div"),o.setAttribute("aria-expanded","false"),o.setAttribute("role","button"),o.setAttribute("tabindex","0"),o.classList.add(this.CssClasses_.DRAWER_BTN);var r=document.createElement("i");r.classList.add(this.CssClasses_.ICON),r.innerHTML=this.Constant_.MENU_ICON,o.appendChild(r)}this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)?o.classList.add(this.CssClasses_.ON_LARGE_SCREEN):this.drawer_.classList.contains(this.CssClasses_.ON_SMALL_SCREEN)&&o.classList.add(this.CssClasses_.ON_SMALL_SCREEN),o.addEventListener("click",this.drawerToggleHandler_.bind(this)),o.addEventListener("keydown",this.drawerToggleHandler_.bind(this)),this.element_.classList.add(this.CssClasses_.HAS_DRAWER),this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)?this.header_.insertBefore(o,this.header_.firstChild):this.element_.insertBefore(o,this.content_);var _=document.createElement("div");_.classList.add(this.CssClasses_.OBFUSCATOR),this.element_.appendChild(_),_.addEventListener("click",this.drawerToggleHandler_.bind(this)),this.obfuscator_=_,this.drawer_.addEventListener("keydown",this.keyboardEventHandler_.bind(this)),this.drawer_.setAttribute("aria-hidden","true")}if(this.screenSizeMediaQuery_=window.matchMedia(this.Constant_.MAX_WIDTH),this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this)),this.screenSizeHandler_(),this.header_&&this.tabBar_){this.element_.classList.add(this.CssClasses_.HAS_TABS);var d=document.createElement("div");d.classList.add(this.CssClasses_.TAB_CONTAINER),this.header_.insertBefore(d,this.tabBar_),this.header_.removeChild(this.tabBar_);var h=document.createElement("div");h.classList.add(this.CssClasses_.TAB_BAR_BUTTON),h.classList.add(this.CssClasses_.TAB_BAR_LEFT_BUTTON);var c=document.createElement("i");c.classList.add(this.CssClasses_.ICON),c.textContent=this.Constant_.CHEVRON_LEFT,h.appendChild(c),h.addEventListener("click",function(){this.tabBar_.scrollLeft-=this.Constant_.TAB_SCROLL_PIXELS}.bind(this));var p=document.createElement("div");p.classList.add(this.CssClasses_.TAB_BAR_BUTTON),p.classList.add(this.CssClasses_.TAB_BAR_RIGHT_BUTTON);var C=document.createElement("i");C.classList.add(this.CssClasses_.ICON),C.textContent=this.Constant_.CHEVRON_RIGHT,p.appendChild(C),p.addEventListener("click",function(){this.tabBar_.scrollLeft+=this.Constant_.TAB_SCROLL_PIXELS}.bind(this)),d.appendChild(h),d.appendChild(this.tabBar_),d.appendChild(p);var u=function(){this.tabBar_.scrollLeft>0?h.classList.add(this.CssClasses_.IS_ACTIVE):h.classList.remove(this.CssClasses_.IS_ACTIVE),this.tabBar_.scrollLeft0)return;this.setFrameCount(1);var i,n,a=e.currentTarget.getBoundingClientRect();if(0===e.clientX&&0===e.clientY)i=Math.round(a.width/2),n=Math.round(a.height/2);else{var l=e.clientX?e.clientX:e.touches[0].clientX,o=e.clientY?e.clientY:e.touches[0].clientY;i=Math.round(l-a.left),n=Math.round(o-a.top)}this.setRippleXY(i,n),this.setRippleStyles(!0),window.requestAnimationFrame(this.animFrameHandler.bind(this))}},y.prototype.upHandler_=function(e){e&&2!==e.detail&&window.setTimeout(function(){this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE)}.bind(this),0)},y.prototype.init=function(){if(this.element_){var e=this.element_.classList.contains(this.CssClasses_.RIPPLE_CENTER);this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT_IGNORE_EVENTS)||(this.rippleElement_=this.element_.querySelector("."+this.CssClasses_.RIPPLE),this.frameCount_=0,this.rippleSize_=0,this.x_=0,this.y_=0,this.ignoringMouseDown_=!1,this.boundDownHandler=this.downHandler_.bind(this),this.element_.addEventListener("mousedown",this.boundDownHandler),this.element_.addEventListener("touchstart",this.boundDownHandler),this.boundUpHandler=this.upHandler_.bind(this),this.element_.addEventListener("mouseup",this.boundUpHandler),this.element_.addEventListener("mouseleave",this.boundUpHandler),this.element_.addEventListener("touchend",this.boundUpHandler),this.element_.addEventListener("blur",this.boundUpHandler),this.getFrameCount=function(){return this.frameCount_},this.setFrameCount=function(e){this.frameCount_=e},this.getRippleElement=function(){return this.rippleElement_},this.setRippleXY=function(e,t){this.x_=e,this.y_=t},this.setRippleStyles=function(t){if(null!==this.rippleElement_){var s,i,n,a="translate("+this.x_+"px, "+this.y_+"px)";t?(i=this.Constant_.INITIAL_SCALE,n=this.Constant_.INITIAL_SIZE):(i=this.Constant_.FINAL_SCALE,n=this.rippleSize_+"px",e&&(a="translate("+this.boundWidth/2+"px, "+this.boundHeight/2+"px)")),s="translate(-50%, -50%) "+a+i,this.rippleElement_.style.webkitTransform=s,this.rippleElement_.style.msTransform=s,this.rippleElement_.style.transform=s,t?this.rippleElement_.classList.remove(this.CssClasses_.IS_ANIMATING):this.rippleElement_.classList.add(this.CssClasses_.IS_ANIMATING)}},this.animFrameHandler=function(){this.frameCount_-- >0?window.requestAnimationFrame(this.animFrameHandler.bind(this)):this.setRippleStyles(!1)})}},s.register({constructor:y,classAsString:"MaterialRipple",cssClass:"mdl-js-ripple-effect",widget:!1})}(); 10 | //# sourceMappingURL=material.min.js.map 11 | --------------------------------------------------------------------------------