Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
material-design-lite
Advanced tools
material-design-lite - npm Package Compare versions
Comparing version 1.0.4 to 1.0.5
| { | ||
| "name": "material-design-lite", | ||
| "version": "1.0.4", | ||
| "version": "1.0.5", | ||
| "homepage": "https://github.com/google/material-design-lite", | ||
@@ -5,0 +5,0 @@ "authors": [ |
@@ -221,3 +221,3 @@ /** | ||
| return gulp.src(sources) | ||
| .pipe(uniffe()) | ||
| .pipe($.if(/mdlComponentHandler\.js/, $.util.noop(), uniffe())) | ||
| .pipe($.sourcemaps.init()) | ||
@@ -366,2 +366,5 @@ // Concatenate Scripts | ||
| gulp.task('demos', ['demoresources'], function() { | ||
| /** | ||
| * Retrieves the list of component folders. | ||
| */ | ||
| function getComponentFolders() { | ||
@@ -449,2 +452,5 @@ return fs.readdirSync('./src/') | ||
| /** | ||
| * Defines the list of resources to watch for changes. | ||
| */ | ||
| function watch() { | ||
@@ -548,5 +554,5 @@ gulp.watch(['src/**/*.js', '!src/**/README.md'], | ||
| // (cache control, in this case). | ||
| // For cache control, start with 0s (disable caching during dev), | ||
| // but consider more helpful interval (e.g. 3600s) after launch. | ||
| var cacheControl = '-h "Cache-Control:public,max-age=3600"'; | ||
| // Code files should NEVER be touched after uploading, therefore | ||
| // 30 days caching is a safe value. | ||
| var cacheControl = '-h "Cache-Control:public,max-age=2592000"'; | ||
| var gsutilCpCmd = 'gsutil -m cp -z js,css,map '; | ||
@@ -573,4 +579,7 @@ var gsutilCacheCmd = 'gsutil -m setmeta -R ' + cacheControl; | ||
| // Function to publish staging or prod version from local tree, | ||
| // or to promote staging to prod, per passed arg. | ||
| /** | ||
| * Function to publish staging or prod version from local tree, | ||
| * or to promote staging to prod, per passed arg. | ||
| * @param {string} pubScope the scope to publish to. | ||
| */ | ||
| function mdlPublish(pubScope) { | ||
@@ -701,6 +710,6 @@ var cacheTtl = null; | ||
| ]) | ||
| .pipe($.cache($.imagemin({ | ||
| .pipe($.imagemin({ | ||
| progressive: true, | ||
| interlaced: true | ||
| }))) | ||
| })) | ||
| .pipe(gulp.dest('dist/templates')); | ||
@@ -707,0 +716,0 @@ }); |
| { | ||
| "name": "material-design-lite", | ||
| "version": "1.0.4", | ||
| "version": "1.0.5", | ||
| "description": "Material Design Components in CSS, JS and HTML", | ||
@@ -34,3 +34,3 @@ "license": "Apache-2.0", | ||
| "gulp-imagemin": "^2.2.1", | ||
| "gulp-jscs": "^1.6.0", | ||
| "gulp-jscs": "^2.0.0", | ||
| "gulp-jshint": "^1.6.3", | ||
@@ -37,0 +37,0 @@ "gulp-load-plugins": "^0.10.0", |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **badge** component is an onscreen notification element. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are. | ||
@@ -14,6 +14,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **badge** component: | ||
| ### To include an MDL **badge** component: | ||
@@ -37,3 +37,3 @@ 1. Code an `<a>` (anchor/link) or a `<span>` element. Include any desired attributes and content. | ||
| ####Examples | ||
| #### Examples | ||
| A badge inside a link. | ||
@@ -62,3 +62,3 @@ ```html | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual enhancements to the badge. The table below lists the available classes and their effects. | ||
@@ -65,0 +65,0 @@ |
@@ -34,3 +34,3 @@ /** | ||
| }; | ||
| window.MaterialButton = MaterialButton; | ||
| window['MaterialButton'] = MaterialButton; | ||
@@ -40,3 +40,3 @@ /** | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -53,3 +53,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -85,2 +85,3 @@ */ | ||
| }; | ||
| MaterialButton.prototype['disable'] = MaterialButton.prototype.disable; | ||
@@ -95,2 +96,3 @@ /** | ||
| }; | ||
| MaterialButton.prototype['enable'] = MaterialButton.prototype.enable; | ||
@@ -97,0 +99,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **button** component is an enhanced version of the standard HTML `<button>` element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects. | ||
@@ -8,6 +8,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **button** component: | ||
| ### To include an MDL **button** component: | ||
@@ -25,3 +25,3 @@ 1. Code a `<button>` element. Include any desired attributes and values, such as an id or event handler, and add a text caption or image as appropriate. | ||
| ####Examples | ||
| #### Examples | ||
| A button with the "raised" effect. | ||
@@ -43,3 +43,3 @@ ```html | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual and behavioral enhancements to the button. The table below lists the available classes and their effects. | ||
@@ -46,0 +46,0 @@ |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **card** component is a user interface element representing a virtual piece of paper that contains related data — such as a photo, some text, and a link — that are all about a single subject. | ||
@@ -8,6 +8,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **card** component: | ||
| ### To include an MDL **card** component: | ||
@@ -74,3 +74,3 @@ 1. Code a `<div>` element; this is the "outer" container, intended to hold all of the card's content. | ||
| ####Examples | ||
| #### Examples | ||
@@ -117,3 +117,3 @@ A card (no shadow) with a title, image, text, and action. | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual and behavioral enhancements to the card. The table below lists the available classes and their effects. | ||
@@ -120,0 +120,0 @@ |
@@ -26,2 +26,3 @@ /** | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} element The element that will be upgraded. | ||
@@ -35,3 +36,3 @@ */ | ||
| }; | ||
| window.MaterialCheckbox = MaterialCheckbox; | ||
| window['MaterialCheckbox'] = MaterialCheckbox; | ||
@@ -41,3 +42,3 @@ /** | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -54,3 +55,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -127,6 +128,5 @@ */ | ||
| * | ||
| * @param {Event} event The event that fired. | ||
| * @private | ||
| */ | ||
| MaterialCheckbox.prototype.blur_ = function(event) { | ||
| MaterialCheckbox.prototype.blur_ = function() { | ||
| // TODO: figure out why there's a focus event being fired after our blur, | ||
@@ -136,3 +136,3 @@ // so that we can avoid this hack. | ||
| this.inputElement_.blur(); | ||
| }.bind(this), this.Constant_.TINY_TIMEOUT); | ||
| }.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT)); | ||
| }; | ||
@@ -154,2 +154,4 @@ | ||
| }; | ||
| MaterialCheckbox.prototype['checkToggleState'] = | ||
| MaterialCheckbox.prototype.checkToggleState; | ||
@@ -168,2 +170,4 @@ /** | ||
| }; | ||
| MaterialCheckbox.prototype['checkDisabled'] = | ||
| MaterialCheckbox.prototype.checkDisabled; | ||
@@ -179,2 +183,3 @@ /** | ||
| }; | ||
| MaterialCheckbox.prototype['disable'] = MaterialCheckbox.prototype.disable; | ||
@@ -190,2 +195,3 @@ /** | ||
| }; | ||
| MaterialCheckbox.prototype['enable'] = MaterialCheckbox.prototype.enable; | ||
@@ -201,2 +207,3 @@ /** | ||
| }; | ||
| MaterialCheckbox.prototype['check'] = MaterialCheckbox.prototype.check; | ||
@@ -212,2 +219,3 @@ /** | ||
| }; | ||
| MaterialCheckbox.prototype['uncheck'] = MaterialCheckbox.prototype.uncheck; | ||
@@ -214,0 +222,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **checkbox** component is an enhanced version of the standard HTML `<input type="checkbox">` element. A checkbox consists of a small square and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it. Checkboxes typically, but not necessarily, appear in groups, and can be selected and deselected individually. The MDL checkbox component allows you to add display and click effects. | ||
@@ -8,6 +8,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **checkbox** component: | ||
| ### To include an MDL **checkbox** component: | ||
@@ -43,3 +43,3 @@ 1. Code a `<label>` element and give it a `for` attribute whose value is the unique id of the checkbox it will contain. The `for` attribute is optional when the `<input>` element is contained inside the `<label>` element, but is recommended for clarity. | ||
| ####Example | ||
| #### Example | ||
@@ -55,3 +55,3 @@ A checkbox with a ripple click effect. | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual and behavioral enhancements to the checkbox. The table below lists the available classes and their effects. | ||
@@ -58,0 +58,0 @@ |
@@ -26,2 +26,3 @@ /** | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} element The element that will be upgraded. | ||
@@ -35,8 +36,9 @@ */ | ||
| }; | ||
| window.MaterialDataTable = MaterialDataTable; | ||
| window['MaterialDataTable'] = MaterialDataTable; | ||
| /** | ||
| * Store constants in one place so they can be updated easily. | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -53,3 +55,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -68,8 +70,8 @@ */ | ||
| * | ||
| * @param {HTMLElement} checkbox Checkbox that toggles the selection state. | ||
| * @param {Element} checkbox Checkbox that toggles the selection state. | ||
| * @param {HTMLElement} row Row to toggle when checkbox changes. | ||
| * @param {HTMLElement[]} rows Rows to toggle when checkbox changes. | ||
| * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes. | ||
| * @private | ||
| */ | ||
| MaterialDataTable.prototype.selectRow_ = function(checkbox, row, rows) { | ||
| MaterialDataTable.prototype.selectRow_ = function(checkbox, row, opt_rows) { | ||
| if (row) { | ||
@@ -85,3 +87,3 @@ return function() { | ||
| if (rows) { | ||
| if (opt_rows) { | ||
| return function() { | ||
@@ -91,12 +93,12 @@ var i; | ||
| if (checkbox.checked) { | ||
| for (i = 0; i < rows.length; i++) { | ||
| el = rows[i].querySelector('td').querySelector('.mdl-checkbox'); | ||
| el.MaterialCheckbox.check(); | ||
| rows[i].classList.add(this.CssClasses_.IS_SELECTED); | ||
| for (i = 0; i < opt_rows.length; i++) { | ||
| el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox'); | ||
| el['MaterialCheckbox'].check(); | ||
| opt_rows[i].classList.add(this.CssClasses_.IS_SELECTED); | ||
| } | ||
| } else { | ||
| for (i = 0; i < rows.length; i++) { | ||
| el = rows[i].querySelector('td').querySelector('.mdl-checkbox'); | ||
| el.MaterialCheckbox.uncheck(); | ||
| rows[i].classList.remove(this.CssClasses_.IS_SELECTED); | ||
| for (i = 0; i < opt_rows.length; i++) { | ||
| el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox'); | ||
| el['MaterialCheckbox'].uncheck(); | ||
| opt_rows[i].classList.remove(this.CssClasses_.IS_SELECTED); | ||
| } | ||
@@ -113,6 +115,6 @@ } | ||
| * @param {HTMLElement} row Row to toggle when checkbox changes. | ||
| * @param {HTMLElement[]} rows Rows to toggle when checkbox changes. | ||
| * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes. | ||
| * @private | ||
| */ | ||
| MaterialDataTable.prototype.createCheckbox_ = function(row, rows) { | ||
| MaterialDataTable.prototype.createCheckbox_ = function(row, opt_rows) { | ||
| var label = document.createElement('label'); | ||
@@ -128,5 +130,7 @@ label.classList.add('mdl-checkbox'); | ||
| checkbox.addEventListener('change', this.selectRow_(checkbox, row)); | ||
| } else if (rows) { | ||
| checkbox.addEventListener('change', this.selectRow_(checkbox, null, rows)); | ||
| } else if (opt_rows) { | ||
| checkbox.addEventListener('change', | ||
| this.selectRow_(checkbox, null, opt_rows)); | ||
| } | ||
| label.appendChild(checkbox); | ||
@@ -133,0 +137,0 @@ componentHandler.upgradeElement(label, 'MaterialCheckbox'); |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **data-table** component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. | ||
@@ -8,6 +8,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **data-table** component: | ||
| ### To include an MDL **data-table** component: | ||
@@ -81,3 +81,3 @@ 1. Code a `<table>` element. Include `<thead>` and `<tbody>` elements to hold the title and data rows, respectively. | ||
| ####Examples | ||
| #### Examples | ||
| A data-table with a "master" select checkbox and individual row select checkboxes. | ||
@@ -153,3 +153,3 @@ ```html | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual and behavioral enhancements to the data-table. The table below lists the available classes and their effects. | ||
@@ -156,0 +156,0 @@ |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **footer** component is a comprehensive container intended to present a substantial amount of related content in a visually attractive and logically intuitive area. Although it is called "footer", it may be placed at any appropriate location on a device screen, either before or after other content. | ||
@@ -8,6 +8,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **mega-footer** component: | ||
| ### To include an MDL **mega-footer** component: | ||
@@ -233,3 +233,3 @@ 1a. Code a `<footer>` element. Inside the footer, include one `<div>` element for each content section, typically three: *top*, *middle*, and *bottom*. | ||
| ####Examples | ||
| #### Examples | ||
@@ -285,3 +285,3 @@ A mega-footer component with three sections and two drop-down sections in the middle section. | ||
| ###To include an MDL **mini-footer** component: | ||
| ### To include an MDL **mini-footer** component: | ||
@@ -365,3 +365,3 @@ 1a. Code a `<footer>` element. Inside the footer, code two `<div>` elements, one for the *left* section and one for the *right* section. | ||
| ####Examples | ||
| #### Examples | ||
@@ -390,3 +390,3 @@ A mini-footer with left and right sections. | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual enhancements to the footer. The table below lists the available classes and their effects. | ||
@@ -393,0 +393,0 @@ |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **grid** component is a simplified method for laying out content for multiple screen sizes. It reduces the usual coding burden required to correctly display blocks of content in a variety of display conditions. | ||
@@ -13,6 +13,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **grid** component: | ||
| ### To include an MDL **grid** component: | ||
@@ -56,3 +56,3 @@ 1. Code a `<div>` element; this is the "outer" container, intended to hold all of the grid's cells. Style the div as desired (colors, font size, etc.). | ||
| ####Examples | ||
| #### Examples | ||
@@ -99,3 +99,3 @@ A grid with five cells of column size 1. | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual enhancements and behavioral effects to the grid. The table below lists the available classes and their effects. | ||
@@ -102,0 +102,0 @@ |
@@ -26,2 +26,3 @@ /** | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} element The element that will be upgraded. | ||
@@ -35,3 +36,3 @@ */ | ||
| }; | ||
| window.MaterialIconToggle = MaterialIconToggle; | ||
| window['MaterialIconToggle'] = MaterialIconToggle; | ||
@@ -41,3 +42,3 @@ /** | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -54,3 +55,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -123,6 +124,5 @@ */ | ||
| * | ||
| * @param {Event} event The event that fired. | ||
| * @private | ||
| */ | ||
| MaterialIconToggle.prototype.blur_ = function(event) { | ||
| MaterialIconToggle.prototype.blur_ = function() { | ||
| // TODO: figure out why there's a focus event being fired after our blur, | ||
@@ -132,3 +132,3 @@ // so that we can avoid this hack. | ||
| this.inputElement_.blur(); | ||
| }.bind(this), this.Constant_.TINY_TIMEOUT); | ||
| }.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT)); | ||
| }; | ||
@@ -150,2 +150,4 @@ | ||
| }; | ||
| MaterialIconToggle.prototype['checkToggleState'] = | ||
| MaterialIconToggle.prototype.checkToggleState; | ||
@@ -164,2 +166,4 @@ /** | ||
| }; | ||
| MaterialIconToggle.prototype['checkDisabled'] = | ||
| MaterialIconToggle.prototype.checkDisabled; | ||
@@ -175,2 +179,4 @@ /** | ||
| }; | ||
| MaterialIconToggle.prototype['disable'] = | ||
| MaterialIconToggle.prototype.disable; | ||
@@ -186,2 +192,3 @@ /** | ||
| }; | ||
| MaterialIconToggle.prototype['enable'] = MaterialIconToggle.prototype.enable; | ||
@@ -197,2 +204,3 @@ /** | ||
| }; | ||
| MaterialIconToggle.prototype['check'] = MaterialIconToggle.prototype.check; | ||
@@ -208,2 +216,4 @@ /** | ||
| }; | ||
| MaterialIconToggle.prototype['uncheck'] = | ||
| MaterialIconToggle.prototype.uncheck; | ||
@@ -210,0 +220,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **icon-toggle** component is an enhanced version of the standard HTML `<input type="checkbox">` element. An icon-toggle consists of a user defined icon that indicates, by visual highlighting, a binary condition that will be set or unset when the user clicks or touches it. Like checkboxes, icon-toggles may appear individually or in groups, and can be selected and deselected individually. | ||
@@ -8,6 +8,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **icon-toggle** component: | ||
| ### To include an MDL **icon-toggle** component: | ||
@@ -43,3 +43,3 @@ 1. Code a `<label>` element and give it a `for` attribute whose value is the unique id of the icon-toggle it will contain. | ||
| ####Example | ||
| #### Example | ||
@@ -55,3 +55,3 @@ An icon-toggle with a ripple click effect. | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual and behavioral enhancements to the icon-toggle. The table below lists the available classes and their effects. | ||
@@ -58,0 +58,0 @@ |
| # Material Design Lite | ||
| ##Introduction | ||
| ## Introduction | ||
| **Material Design Light (MDL)** is a library of components for web developers based on Google's **Material Design** philosophy: "A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science." Understanding the goals and principles of Material Design is critical to the proper use of the MDL components. If you have not yet read the [Material Design Introduction](http://www.google.com/design/spec/material-design/introduction.html), you should do so before attempting to use the components. | ||
@@ -14,6 +14,6 @@ | ||
| ###Get the components | ||
| ### Get the components | ||
| To obtain the components, clone or download the [GitHub MDL repository](https://github.com/google/material-design-lite). Copy the entire package (the top-level folder and everything below it) to the project folder where you will write your HTML pages. This ensures that your project can access all of MDL's components and assets, and that you always have the original files for reference in case you break something. :-) | ||
| ###Include the master CSS and JavaScript | ||
| ### Include the master CSS and JavaScript | ||
| In each HTML page in your project, include the minified (compressed) CSS and JavaScript files using standard relative-path references and the Material Icon font. This example assumes that a copy of the MDL package folders resides in your project folder. | ||
@@ -30,3 +30,3 @@ | ||
| ###Use the components | ||
| ### Use the components | ||
| In general, follow these basic steps to use an MDL component in your HTML page. | ||
@@ -41,3 +41,3 @@ | ||
| ##What's next? | ||
| ## What's next? | ||
| Detailed instructions for using the components, including MDL classes and their effects, coding considerations, and configuration options, can be found in each component's `README.md` file. Working examples using various options are in each component's `demo.html` page. | ||
@@ -44,0 +44,0 @@ |
@@ -26,2 +26,3 @@ /** | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} element The element that will be upgraded. | ||
@@ -35,3 +36,3 @@ */ | ||
| }; | ||
| window.MaterialLayout = MaterialLayout; | ||
| window['MaterialLayout'] = MaterialLayout; | ||
@@ -41,3 +42,3 @@ /** | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -57,3 +58,3 @@ */ | ||
| * | ||
| * @enum {Number} | ||
| * @enum {number} | ||
| * @private | ||
@@ -73,3 +74,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -252,3 +253,4 @@ */ | ||
| // of small screens. | ||
| this.screenSizeMediaQuery_ = window.matchMedia(this.Constant_.MAX_WIDTH); | ||
| this.screenSizeMediaQuery_ = window.matchMedia( | ||
| /** @type {string} */ (this.Constant_.MAX_WIDTH)); | ||
| this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this)); | ||
@@ -293,2 +295,6 @@ this.screenSizeHandler_(); | ||
| /** | ||
| * Prevents an event from triggering the default behaviour. | ||
| * @param {Event} ev the event to eat. | ||
| */ | ||
| var eatEvent = function(ev) { | ||
@@ -300,5 +306,14 @@ ev.preventDefault(); | ||
| if (this.drawer_) { | ||
| var drawerButton = document.createElement('div'); | ||
| drawerButton.classList.add(this.CssClasses_.DRAWER_BTN); | ||
| var drawerButton = this.element_.querySelector('.' + | ||
| this.CssClasses_.DRAWER_BTN); | ||
| if (typeof(drawerButton) === 'undefined' || drawerButton === null) { | ||
| drawerButton = document.createElement('div'); | ||
| drawerButton.classList.add(this.CssClasses_.DRAWER_BTN); | ||
| var drawerButtonIcon = document.createElement('i'); | ||
| drawerButtonIcon.classList.add(this.CssClasses_.ICON); | ||
| drawerButtonIcon.textContent = this.Constant_.MENU_ICON; | ||
| drawerButton.appendChild(drawerButtonIcon); | ||
| } | ||
| if (this.drawer_.classList.contains(this.CssClasses_.ON_LARGE_SCREEN)) { | ||
@@ -311,6 +326,3 @@ //If drawer has ON_LARGE_SCREEN class then add it to the drawer toggle button as well. | ||
| } | ||
| var drawerButtonIcon = document.createElement('i'); | ||
| drawerButtonIcon.classList.add(this.CssClasses_.ICON); | ||
| drawerButtonIcon.textContent = this.Constant_.MENU_ICON; | ||
| drawerButton.appendChild(drawerButtonIcon); | ||
| drawerButton.addEventListener('click', | ||
@@ -414,2 +426,11 @@ this.drawerToggleHandler_.bind(this)); | ||
| /** | ||
| * Constructor for an individual tab. | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} tab The HTML element for the tab. | ||
| * @param {!Array<HTMLElement>} tabs Array with HTML elements for all tabs. | ||
| * @param {!Array<HTMLElement>} panels Array with HTML elements for all panels. | ||
| * @param {MaterialLayout} layout The MaterialLayout object that owns the tab. | ||
| */ | ||
| function MaterialLayoutTab(tab, tabs, panels, layout) { | ||
@@ -416,0 +437,0 @@ if (tab) { |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **layout** component is a comprehensive approach to page layout that uses MDL development tenets, allows for efficient use of MDL components, and automatically adapts to different browsers, screen sizes, and devices. | ||
@@ -8,6 +8,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include a basic MDL **layout** component: | ||
| ### To include a basic MDL **layout** component: | ||
@@ -191,3 +191,3 @@ 1. Code a `<div>` element. This is the "outer" div that holds the entire layout. Add MDL classes as indicated, separated by spaces, to the div using the `class` attribute. | ||
| ####Examples | ||
| #### Examples | ||
| A layout with a fixed header for larger screens and a collapsible drawer for smaller screens. | ||
@@ -302,3 +302,3 @@ ```html | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual and behavioral enhancements to the layout. The table below lists the available classes and their effects. | ||
@@ -305,0 +305,0 @@ |
@@ -26,3 +26,62 @@ /** | ||
| /* exported componentHandler */ | ||
| window.componentHandler = (function() { | ||
| // Pre-defining the componentHandler interface, for closure documentation and | ||
| // static verification. | ||
| var componentHandler = { | ||
| /** | ||
| * Searches existing DOM for elements of our component type and upgrades them | ||
| * if they have not already been upgraded. | ||
| * | ||
| * @param {string=} optJsClass the programatic name of the element class we | ||
| * need to create a new instance of. | ||
| * @param {string=} optCssClass the name of the CSS class elements of this | ||
| * type will have. | ||
| */ | ||
| upgradeDom: function(optJsClass, optCssClass) {}, | ||
| /** | ||
| * Upgrades a specific element rather than all in the DOM. | ||
| * | ||
| * @param {!Element} element The element we wish to upgrade. | ||
| * @param {string=} optJsClass Optional name of the class we want to upgrade | ||
| * the element to. | ||
| */ | ||
| upgradeElement: function(element, optJsClass) {}, | ||
| /** | ||
| * Upgrades a specific list of elements rather than all in the DOM. | ||
| * | ||
| * @param {!Element|!Array<!Element>|!NodeList|!HTMLCollection} elements | ||
| * The elements we wish to upgrade. | ||
| */ | ||
| upgradeElements: function(elements) {}, | ||
| /** | ||
| * Upgrades all registered components found in the current DOM. This is | ||
| * automatically called on window load. | ||
| */ | ||
| upgradeAllRegistered: function() {}, | ||
| /** | ||
| * Allows user to be alerted to any upgrades that are performed for a given | ||
| * component type | ||
| * | ||
| * @param {string} jsClass The class name of the MDL component we wish | ||
| * to hook into for any upgrades performed. | ||
| * @param {function(!HTMLElement)} callback The function to call upon an | ||
| * upgrade. This function should expect 1 parameter - the HTMLElement which | ||
| * got upgraded. | ||
| */ | ||
| registerUpgradedCallback: function(jsClass, callback) {}, | ||
| /** | ||
| * Registers a class for future use and attempts to upgrade existing DOM. | ||
| * | ||
| * @param {componentHandler.ComponentConfigPublic} config the registration configuration | ||
| */ | ||
| register: function(config) {}, | ||
| /** | ||
| * Downgrade either a given node, an array of nodes, or a NodeList. | ||
| * | ||
| * @param {!Node|!Array<!Node>|!NodeList} nodes | ||
| */ | ||
| downgradeElements: function(nodes) {} | ||
| }; | ||
| componentHandler = (function() { | ||
| 'use strict'; | ||
@@ -43,5 +102,5 @@ | ||
| * | ||
| * @param {String} name The name of a class we want to use. | ||
| * @param {string} name The name of a class we want to use. | ||
| * @param {componentHandler.ComponentConfig=} optReplace Optional object to replace match with. | ||
| * @return {!Object|Boolean} | ||
| * @return {!Object|boolean} | ||
| * @private | ||
@@ -52,3 +111,3 @@ */ | ||
| if (registeredComponents_[i].className === name) { | ||
| if (optReplace !== undefined) { | ||
| if (typeof optReplace !== 'undefined') { | ||
| registeredComponents_[i] = optReplace; | ||
@@ -65,4 +124,4 @@ } | ||
| * | ||
| * @param {!HTMLElement} element The element to fetch data from. | ||
| * @return {!Array<String>} | ||
| * @param {!Element} element The element to fetch data from. | ||
| * @return {!Array<string>} | ||
| * @private | ||
@@ -80,5 +139,5 @@ */ | ||
| * | ||
| * @param {!HTMLElement} element The element we want to check. | ||
| * @param {String} jsClass The class to check for. | ||
| * @returns {Boolean} | ||
| * @param {!Element} element The element we want to check. | ||
| * @param {string} jsClass The class to check for. | ||
| * @returns {boolean} | ||
| * @private | ||
@@ -95,9 +154,10 @@ */ | ||
| * | ||
| * @param {String=} optJsClass the programatic name of the element class we | ||
| * @param {string=} optJsClass the programatic name of the element class we | ||
| * need to create a new instance of. | ||
| * @param {String=} optCssClass the name of the CSS class elements of this | ||
| * @param {string=} optCssClass the name of the CSS class elements of this | ||
| * type will have. | ||
| */ | ||
| function upgradeDomInternal(optJsClass, optCssClass) { | ||
| if (optJsClass === undefined && optCssClass === undefined) { | ||
| if (typeof optJsClass === 'undefined' && | ||
| typeof optCssClass === 'undefined') { | ||
| for (var i = 0; i < registeredComponents_.length; i++) { | ||
@@ -108,4 +168,4 @@ upgradeDomInternal(registeredComponents_[i].className, | ||
| } else { | ||
| var jsClass = /** @type {String} */ (optJsClass); | ||
| if (optCssClass === undefined) { | ||
| var jsClass = /** @type {string} */ (optJsClass); | ||
| if (typeof optCssClass === 'undefined') { | ||
| var registeredClass = findRegisteredClass_(jsClass); | ||
@@ -127,4 +187,4 @@ if (registeredClass) { | ||
| * | ||
| * @param {!HTMLElement} element The element we wish to upgrade. | ||
| * @param {String=} optJsClass Optional name of the class we want to upgrade | ||
| * @param {!Element} element The element we wish to upgrade. | ||
| * @param {string=} optJsClass Optional name of the class we want to upgrade | ||
| * the element to. | ||
@@ -188,3 +248,3 @@ */ | ||
| * | ||
| * @param {!HTMLElement|!Array<!HTMLElement>|!NodeList|!HTMLCollection} elements | ||
| * @param {!Element|!Array<!Element>|!NodeList|!HTMLCollection} elements | ||
| * The elements we wish to upgrade. | ||
@@ -203,6 +263,6 @@ */ | ||
| if (element instanceof HTMLElement) { | ||
| upgradeElementInternal(element); | ||
| if (element.children.length > 0) { | ||
| upgradeElementsInternal(element.children); | ||
| } | ||
| upgradeElementInternal(element); | ||
| } | ||
@@ -215,11 +275,23 @@ } | ||
| * | ||
| * @param {{constructor: !Function, classAsString: String, cssClass: String, widget: String}} config | ||
| * @param {componentHandler.ComponentConfigPublic} config | ||
| */ | ||
| function registerInternal(config) { | ||
| // In order to support both Closure-compiled and uncompiled code accessing | ||
| // this method, we need to allow for both the dot and array syntax for | ||
| // property access. You'll therefore see the `foo.bar || foo['bar']` | ||
| // pattern repeated across this method. | ||
| var widgetMissing = (typeof config.widget === 'undefined' && | ||
| typeof config['widget'] === 'undefined'); | ||
| var widget = true; | ||
| if (!widgetMissing) { | ||
| widget = config.widget || config['widget']; | ||
| } | ||
| var newConfig = /** @type {componentHandler.ComponentConfig} */ ({ | ||
| 'classConstructor': config.constructor, | ||
| 'className': config.classAsString, | ||
| 'cssClass': config.cssClass, | ||
| 'widget': config.widget === undefined ? true : config.widget, | ||
| 'callbacks': [] | ||
| classConstructor: config.constructor || config['constructor'], | ||
| className: config.classAsString || config['classAsString'], | ||
| cssClass: config.cssClass || config['cssClass'], | ||
| widget: widget, | ||
| callbacks: [] | ||
| }); | ||
@@ -229,3 +301,3 @@ | ||
| if (item.cssClass === newConfig.cssClass) { | ||
| throw new Error('The provided cssClass has already been registered.'); | ||
| throw new Error('The provided cssClass has already been registered: ' + item.cssClass); | ||
| } | ||
@@ -255,3 +327,3 @@ if (item.className === newConfig.className) { | ||
| * | ||
| * @param {String} jsClass The class name of the MDL component we wish | ||
| * @param {string} jsClass The class name of the MDL component we wish | ||
| * to hook into for any upgrades performed. | ||
@@ -328,2 +400,6 @@ * @param {function(!HTMLElement)} callback The function to call upon an | ||
| function downgradeNodesInternal(nodes) { | ||
| /** | ||
| * Auxiliary function to downgrade a single node. | ||
| * @param {!Node} node the node to be downgraded | ||
| */ | ||
| var downgradeNode = function(node) { | ||
@@ -356,21 +432,15 @@ deconstructComponentInternal(findCreatedComponentByNodeInternal(node)); | ||
| window.addEventListener('load', function() { | ||
| 'use strict'; | ||
| /** | ||
| * Describes the type of a registered component type managed by | ||
| * componentHandler. Provided for benefit of the Closure compiler. | ||
| * | ||
| * @typedef {{ | ||
| * constructor: Function, | ||
| * classAsString: string, | ||
| * cssClass: string, | ||
| * widget: (string|boolean|undefined) | ||
| * }} | ||
| */ | ||
| componentHandler.ComponentConfigPublic; // jshint ignore:line | ||
| /** | ||
| * Performs a "Cutting the mustard" test. If the browser supports the features | ||
| * tested, adds a mdl-js class to the <html> element. It then upgrades all MDL | ||
| * components requiring JavaScript. | ||
| */ | ||
| if ('classList' in document.createElement('div') && | ||
| 'querySelector' in document && | ||
| 'addEventListener' in window && Array.prototype.forEach) { | ||
| document.documentElement.classList.add('mdl-js'); | ||
| componentHandler.upgradeAllRegistered(); | ||
| } else { | ||
| componentHandler.upgradeElement = | ||
| componentHandler.register = function() {}; | ||
| } | ||
| }); | ||
| /** | ||
@@ -382,5 +452,5 @@ * Describes the type of a registered component type managed by | ||
| * constructor: !Function, | ||
| * className: String, | ||
| * cssClass: String, | ||
| * widget: String, | ||
| * className: string, | ||
| * cssClass: string, | ||
| * widget: (string|boolean), | ||
| * callbacks: !Array<function(!HTMLElement)> | ||
@@ -397,8 +467,47 @@ * }} | ||
| * element_: !HTMLElement, | ||
| * className: String, | ||
| * classAsString: String, | ||
| * cssClass: String, | ||
| * widget: String | ||
| * className: string, | ||
| * classAsString: string, | ||
| * cssClass: string, | ||
| * widget: string | ||
| * }} | ||
| */ | ||
| componentHandler.Component; // jshint ignore:line | ||
| // Export all symbols, for the benefit of Closure compiler. | ||
| // No effect on uncompiled code. | ||
| componentHandler['upgradeDom'] = componentHandler.upgradeDom; | ||
| componentHandler['upgradeElement'] = componentHandler.upgradeElement; | ||
| componentHandler['upgradeElements'] = componentHandler.upgradeElements; | ||
| componentHandler['upgradeAllRegistered'] = | ||
| componentHandler.upgradeAllRegistered; | ||
| componentHandler['registerUpgradedCallback'] = | ||
| componentHandler.registerUpgradedCallback; | ||
| componentHandler['register'] = componentHandler.register; | ||
| componentHandler['downgradeElements'] = componentHandler.downgradeElements; | ||
| window.componentHandler = componentHandler; | ||
| window['componentHandler'] = componentHandler; | ||
| window.addEventListener('load', function() { | ||
| 'use strict'; | ||
| /** | ||
| * Performs a "Cutting the mustard" test. If the browser supports the features | ||
| * tested, adds a mdl-js class to the <html> element. It then upgrades all MDL | ||
| * components requiring JavaScript. | ||
| */ | ||
| if ('classList' in document.createElement('div') && | ||
| 'querySelector' in document && | ||
| 'addEventListener' in window && Array.prototype.forEach) { | ||
| document.documentElement.classList.add('mdl-js'); | ||
| componentHandler.upgradeAllRegistered(); | ||
| } else { | ||
| /** | ||
| * Dummy function to avoid JS errors. | ||
| */ | ||
| componentHandler.upgradeElement = function() {}; | ||
| /** | ||
| * Dummy function to avoid JS errors. | ||
| */ | ||
| componentHandler.register = function() {}; | ||
| } | ||
| }); |
@@ -26,2 +26,3 @@ /** | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} element The element that will be upgraded. | ||
@@ -35,3 +36,3 @@ */ | ||
| }; | ||
| window.MaterialMenu = MaterialMenu; | ||
| window['MaterialMenu'] = MaterialMenu; | ||
@@ -41,3 +42,3 @@ /** | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -58,3 +59,3 @@ */ | ||
| * | ||
| * @enum {Number} | ||
| * @enum {number} | ||
| * @private | ||
@@ -75,3 +76,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -309,3 +310,3 @@ */ | ||
| this.closing_ = false; | ||
| }.bind(this), this.Constant_.CLOSE_TIMEOUT); | ||
| }.bind(this), /** @type {number} */ (this.Constant_.CLOSE_TIMEOUT)); | ||
| } | ||
@@ -319,4 +320,4 @@ }; | ||
| * | ||
| * @param {Number} height Height of the clip rectangle | ||
| * @param {Number} width Width of the clip rectangle | ||
| * @param {number} height Height of the clip rectangle | ||
| * @param {number} width Width of the clip rectangle | ||
| * @private | ||
@@ -327,3 +328,3 @@ */ | ||
| // Do not clip. | ||
| this.element_.style.clip = null; | ||
| this.element_.style.clip = ''; | ||
| } else if (this.element_.classList.contains(this.CssClasses_.BOTTOM_RIGHT)) { | ||
@@ -343,3 +344,3 @@ // Clip to the top right corner of the menu. | ||
| // Default: do not clip (same as clipping to the top left corner). | ||
| this.element_.style.clip = null; | ||
| this.element_.style.clip = ''; | ||
| } | ||
@@ -428,2 +429,3 @@ }; | ||
| }; | ||
| MaterialMenu.prototype['show'] = MaterialMenu.prototype.show; | ||
@@ -458,2 +460,3 @@ /** | ||
| }; | ||
| MaterialMenu.prototype['hide'] = MaterialMenu.prototype.hide; | ||
@@ -472,2 +475,3 @@ /** | ||
| }; | ||
| MaterialMenu.prototype['toggle'] = MaterialMenu.prototype.toggle; | ||
@@ -474,0 +478,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **menu** component is a user interface element that allows users to select one of a number of options. The selection typically results in an action initiation, a setting change, or other observable effect. Menu options are always presented in sets of two or more, and options may be programmatically enabled or disabled as required. The menu appears when the user is asked to choose among a series of options, and is usually dismissed after the choice is made. | ||
@@ -6,11 +6,11 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **menu** component: | ||
| ### To include an MDL **menu** component: | ||
| 1. Code a `<button>` element; this is the clickable toggle that will show and hide the menu options. Include an `id` attribute whose value will match the `for` attribute of the unordered list coded in the next step. Inside the button, code a `<span>` element to contain an icon of your choice. | ||
| 1. Code a `<button>` element; this is the clickable toggle that will show and hide the menu options. Include an `id` attribute whose value will match the `for` attribute of the unordered list coded in the next step. Inside the button, code a `<i>` or `<span>` element to contain an icon of your choice. | ||
| ```html | ||
| <button id="menu1"> | ||
| <span /> | ||
| <i></i> | ||
| </button> | ||
@@ -48,3 +48,3 @@ ``` | ||
| ####Examples | ||
| #### Examples | ||
| A menu with three options. | ||
@@ -84,3 +84,3 @@ ```html | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual and behavioral enhancements to the menu. The table below lists the available classes and their effects. | ||
@@ -95,2 +95,3 @@ | ||
| | `mdl-menu` | Defines an unordered list container as an MDL component | Required on ul element | | ||
| | `mdl-js-menu` | Assigns basic MDL behavior to menu | Required on ul element | | ||
| | `mdl-menu__item` | Defines buttons as MDL menu options and assigns basic MDL behavior | Required on list item elements | | ||
@@ -105,3 +106,5 @@ | `mdl-js-ripple-effect` | Applies *ripple* click effect to option links | Optional; goes on unordered list element | | ||
| (2) The `i` or `span` element in "button"" element can be used interchangeably. | ||
| >**Note:** Disabled versions of the menu options are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<li class="mdl-menu__item" disabled>Medium</li>` | ||
| >This attribute may be added or removed programmatically via scripting. |
@@ -26,2 +26,3 @@ /** | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} element The element that will be upgraded. | ||
@@ -35,3 +36,3 @@ */ | ||
| }; | ||
| window.MaterialProgress = MaterialProgress; | ||
| window['MaterialProgress'] = MaterialProgress; | ||
@@ -41,3 +42,3 @@ /** | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -53,3 +54,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -64,3 +65,3 @@ */ | ||
| * | ||
| * @param {Number} p Percentage of the progress (0-100) | ||
| * @param {number} p Percentage of the progress (0-100) | ||
| * @public | ||
@@ -75,2 +76,4 @@ */ | ||
| }; | ||
| MaterialProgress.prototype['setProgress'] = | ||
| MaterialProgress.prototype.setProgress; | ||
@@ -80,3 +83,3 @@ /** | ||
| * | ||
| * @param {Number} p Percentage of the buffer (0-100) | ||
| * @param {number} p Percentage of the buffer (0-100) | ||
| * @public | ||
@@ -88,2 +91,4 @@ */ | ||
| }; | ||
| MaterialProgress.prototype['setBuffer'] = | ||
| MaterialProgress.prototype.setBuffer; | ||
@@ -90,0 +95,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **progress** component is a visual indicator of background activity in a web page or application. A progress indicator consists of a (typically) horizontal bar containing some animation that conveys a sense of motion. While some progress devices indicate an approximate or specific percentage of completion, the MDL progress component simply communicates the fact that an activity is ongoing and is not yet complete. | ||
@@ -6,6 +6,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **progress** component: | ||
| ### To include an MDL **progress** component: | ||
@@ -23,3 +23,3 @@ 1. Code a `<div>` element. Include any desired attributes and values, such as an id or width — typically done using external CSS rather than the inline `style` attribute as shown here. | ||
| ####Examples | ||
| #### Examples | ||
| A static (non-animated) progress indicator. | ||
@@ -36,3 +36,3 @@ ```html | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual and behavioral enhancements to the progress indicator. The table below lists the available classes and their effects. | ||
@@ -39,0 +39,0 @@ |
@@ -26,2 +26,3 @@ /** | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} element The element that will be upgraded. | ||
@@ -35,3 +36,3 @@ */ | ||
| }; | ||
| window.MaterialRadio = MaterialRadio; | ||
| window['MaterialRadio'] = MaterialRadio; | ||
@@ -41,3 +42,3 @@ /** | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -54,3 +55,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -88,3 +89,3 @@ */ | ||
| if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) { | ||
| radios[i].MaterialRadio.updateClasses_(); | ||
| radios[i]['MaterialRadio'].updateClasses_(); | ||
| } | ||
@@ -137,6 +138,5 @@ } | ||
| * | ||
| * @param {Event} event The event that fired. | ||
| * @private | ||
| */ | ||
| MaterialRadio.prototype.blur_ = function(event) { | ||
| MaterialRadio.prototype.blur_ = function() { | ||
@@ -147,3 +147,3 @@ // TODO: figure out why there's a focus event being fired after our blur, | ||
| this.btnElement_.blur(); | ||
| }.bind(this), this.Constant_.TINY_TIMEOUT); | ||
| }.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT)); | ||
| }; | ||
@@ -165,2 +165,4 @@ | ||
| }; | ||
| MaterialRadio.prototype['checkDisabled'] = | ||
| MaterialRadio.prototype.checkDisabled; | ||
@@ -179,2 +181,4 @@ /** | ||
| }; | ||
| MaterialRadio.prototype['checkToggleState'] = | ||
| MaterialRadio.prototype.checkToggleState; | ||
@@ -190,2 +194,3 @@ /** | ||
| }; | ||
| MaterialRadio.prototype['disable'] = MaterialRadio.prototype.disable; | ||
@@ -201,2 +206,3 @@ /** | ||
| }; | ||
| MaterialRadio.prototype['enable'] = MaterialRadio.prototype.enable; | ||
@@ -212,2 +218,3 @@ /** | ||
| }; | ||
| MaterialRadio.prototype['check'] = MaterialRadio.prototype.check; | ||
@@ -223,2 +230,3 @@ /** | ||
| }; | ||
| MaterialRadio.prototype['uncheck'] = MaterialRadio.prototype.uncheck; | ||
@@ -225,0 +233,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **radio** component is an enhanced version of the standard HTML `<input type="radio">`, or "radio button" element. A radio button consists of a small circle and, typically, text that clearly communicates a condition that will be set when the user clicks or touches it. Radio buttons always appear in groups of two or more and, while they can be individually selected, can only be deselected by selecting a different radio button in the same group (which deselects all other radio buttons in the group). The MDL radio component allows you to add display and click effects. | ||
@@ -8,6 +8,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **radio** component: | ||
| ### To include an MDL **radio** component: | ||
@@ -48,3 +48,3 @@ 1. Code a `<label>` element and give it a `for` attribute whose value is the unique id of the radio button it will contain. The `for` attribute is optional when the `<input>` element is contained inside the `<label>` element, but is recommended for clarity. | ||
| ####Example | ||
| #### Example | ||
| A group of radio buttons to control a camera's flash setting. | ||
@@ -66,3 +66,3 @@ ```html | ||
| ``` | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual and behavioral enhancements to the radio button. The table below lists the available classes and their effects. | ||
@@ -69,0 +69,0 @@ |
@@ -26,2 +26,3 @@ /** | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} element The element that will be upgraded. | ||
@@ -35,3 +36,3 @@ */ | ||
| }; | ||
| window.MaterialRipple = MaterialRipple; | ||
| window['MaterialRipple'] = MaterialRipple; | ||
@@ -41,3 +42,3 @@ /** | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -58,3 +59,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -171,2 +172,6 @@ */ | ||
| /** | ||
| * Getter for frameCount_. | ||
| * @return {number} the frame count. | ||
| */ | ||
| this.getFrameCount = function() { | ||
@@ -176,2 +181,6 @@ return this.frameCount_; | ||
| /** | ||
| * Setter for frameCount_. | ||
| * @param {number} fC the frame count. | ||
| */ | ||
| this.setFrameCount = function(fC) { | ||
@@ -181,2 +190,6 @@ this.frameCount_ = fC; | ||
| /** | ||
| * Getter for rippleElement_. | ||
| * @return {Element} the ripple element. | ||
| */ | ||
| this.getRippleElement = function() { | ||
@@ -186,2 +199,7 @@ return this.rippleElement_; | ||
| /** | ||
| * Sets the ripple X and Y coordinates. | ||
| * @param {number} newX the new X coordinate | ||
| * @param {number} newY the new Y coordinate | ||
| */ | ||
| this.setRippleXY = function(newX, newY) { | ||
@@ -192,2 +210,6 @@ this.x_ = newX; | ||
| /** | ||
| * Sets the ripple styles. | ||
| * @param {boolean} start whether or not this is the start frame. | ||
| */ | ||
| this.setRippleStyles = function(start) { | ||
@@ -226,2 +248,5 @@ if (this.rippleElement_ !== null) { | ||
| /** | ||
| * Handles an animation frame. | ||
| */ | ||
| this.animFrameHandler = function() { | ||
@@ -228,0 +253,0 @@ if (this.frameCount_-- > 0) { |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **shadow** is not a component in the same sense as an MDL card, menu, or textbox; it is a visual effect that can be assigned to a user interface element. The effect simulates a three-dimensional positioning of the element, as though it is slightly raised above the surface it rests upon — a positive *z-axis* value, in user interface terms. The shadow starts at the edges of the element and gradually fades outward, providing a realistic 3-D effect. | ||
@@ -8,6 +8,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **shadow** effect: | ||
| ### To include an MDL **shadow** effect: | ||
@@ -29,3 +29,3 @@ 1. Code an element, such as a `<div>`, that is to receive the shadow effect; size and style it as desired, and add any required content. | ||
| ####Examples | ||
| #### Examples | ||
@@ -44,3 +44,3 @@ A div with a user-specified class and a small shadow. | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual shadows to the element. The table below lists the available classes and their effects. | ||
@@ -47,0 +47,0 @@ |
@@ -1,4 +0,4 @@ | ||
| #Slider | ||
| # Slider | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **slider** component is an enhanced version of the new HTML5 `<input type="range">` element. A slider consists of a horizontal line upon which sits a small, movable disc (the *thumb*) and, typically, text that clearly communicates a value that will be set when the user moves it. | ||
@@ -10,6 +10,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **slider** component: | ||
| ### To include an MDL **slider** component: | ||
@@ -37,3 +37,3 @@ 1. Code a `<p>` paragraph element and style it as desired. Include a CSS `width` property (directly or via a CSS class), which determines the slider's size. | ||
| ####Example | ||
| #### Example | ||
| A slider that controls volume. | ||
@@ -46,3 +46,3 @@ ```html | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual and behavioral enhancements to the slider. The table below lists the available classes and their effects. | ||
@@ -63,3 +63,3 @@ | ||
| ##More information | ||
| ## More information | ||
| For working examples of the **slider** component, see the MDL [slider demo page](www.github.com/google/material-design-lite/src/slider/demo.html). | ||
@@ -66,0 +66,0 @@ |
@@ -26,2 +26,3 @@ /** | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} element The element that will be upgraded. | ||
@@ -36,3 +37,3 @@ */ | ||
| }; | ||
| window.MaterialSlider = MaterialSlider; | ||
| window['MaterialSlider'] = MaterialSlider; | ||
@@ -42,3 +43,3 @@ /** | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -55,3 +56,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -107,2 +108,3 @@ */ | ||
| * @private | ||
| * @suppress {missingProperties} | ||
| */ | ||
@@ -131,6 +133,5 @@ MaterialSlider.prototype.onContainerMouseDown_ = function(event) { | ||
| * | ||
| * @param {Event} event The event that fired. | ||
| * @private | ||
| */ | ||
| MaterialSlider.prototype.updateValueStyles_ = function(event) { | ||
| MaterialSlider.prototype.updateValueStyles_ = function() { | ||
| // Calculate and apply percentages to div structure behind slider. | ||
@@ -164,2 +165,3 @@ var fraction = (this.element_.value - this.element_.min) / | ||
| }; | ||
| MaterialSlider.prototype['disable'] = MaterialSlider.prototype.disable; | ||
@@ -175,2 +177,3 @@ /** | ||
| }; | ||
| MaterialSlider.prototype['enable'] = MaterialSlider.prototype.enable; | ||
@@ -180,3 +183,3 @@ /** | ||
| * | ||
| * @param {Number} value The value to which to set the control (optional). | ||
| * @param {number} value The value to which to set the control (optional). | ||
| * @public | ||
@@ -191,2 +194,3 @@ */ | ||
| }; | ||
| MaterialSlider.prototype['change'] = MaterialSlider.prototype.change; | ||
@@ -193,0 +197,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **spinner** component is an enhanced replacement for the classic "wait cursor" (which varies significantly among hardware and software versions) and indicates that there is an ongoing process, the results of which are not yet available. A spinner consists of an open circle that changes colors as it animates in a clockwise direction, and clearly communicates that a process has been started but not completed. | ||
@@ -8,6 +8,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **spinner** component: | ||
| ### To include an MDL **spinner** component: | ||
@@ -25,3 +25,3 @@ 1. Code an element, such as a `<div>`, `<p>`, or `<span>`, to contain the spinner; the element should have no content of its own. | ||
| ####Examples | ||
| #### Examples | ||
@@ -40,3 +40,3 @@ A default spinner in a div. | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual enhancements to the spinner. The table below lists the available classes and their effects. | ||
@@ -43,0 +43,0 @@ |
@@ -35,3 +35,3 @@ /** | ||
| }; | ||
| window.MaterialSpinner = MaterialSpinner; | ||
| window['MaterialSpinner'] = MaterialSpinner; | ||
@@ -41,3 +41,3 @@ /** | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -54,3 +54,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -70,3 +70,3 @@ */ | ||
| * | ||
| * @param {Number} index Index of the layer to be created. | ||
| * @param {number} index Index of the layer to be created. | ||
| * @public | ||
@@ -104,2 +104,4 @@ */ | ||
| }; | ||
| MaterialSpinner.prototype['createLayer'] = | ||
| MaterialSpinner.prototype.createLayer; | ||
@@ -115,2 +117,3 @@ /** | ||
| }; | ||
| MaterialSpinner.prototype['stop'] = MaterialSpinner.prototype.stop; | ||
@@ -127,2 +130,3 @@ /** | ||
| }; | ||
| MaterialSpinner.prototype['start'] = MaterialSpinner.prototype.start; | ||
@@ -129,0 +133,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **switch** component is an enhanced version of the standard HTML `<input type="checkbox">` element. A switch consists of a short horizontal "track" with a prominent circular state indicator and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it. Like checkboxes, switches may appear individually or in groups, and can be selected and deselected individually. However, switches provide a more intuitive visual representation of their state: left/gray for *off*, right/colored for *on*. The MDL switch component allows you to add both display and click effects. | ||
@@ -8,6 +8,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **switch** component: | ||
| ### To include an MDL **switch** component: | ||
@@ -43,3 +43,3 @@ 1. Code a `<label>` element and give it a `for` attribute whose value is the unique id of the switch it will contain. | ||
| ####Example | ||
| #### Example | ||
@@ -55,3 +55,3 @@ A switch with a ripple click effect. | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual and behavioral enhancements to the switch. The table below lists the available classes and their effects. | ||
@@ -58,0 +58,0 @@ |
@@ -26,2 +26,3 @@ /** | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} element The element that will be upgraded. | ||
@@ -35,3 +36,3 @@ */ | ||
| }; | ||
| window.MaterialSwitch = MaterialSwitch; | ||
| window['MaterialSwitch'] = MaterialSwitch; | ||
@@ -41,3 +42,3 @@ /** | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -54,3 +55,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -128,3 +129,3 @@ */ | ||
| */ | ||
| MaterialSwitch.prototype.blur_ = function(event) { | ||
| MaterialSwitch.prototype.blur_ = function() { | ||
| // TODO: figure out why there's a focus event being fired after our blur, | ||
@@ -134,3 +135,3 @@ // so that we can avoid this hack. | ||
| this.inputElement_.blur(); | ||
| }.bind(this), this.Constant_.TINY_TIMEOUT); | ||
| }.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT)); | ||
| }; | ||
@@ -152,2 +153,4 @@ | ||
| }; | ||
| MaterialSwitch.prototype['checkDisabled'] = | ||
| MaterialSwitch.prototype.checkDisabled; | ||
@@ -166,2 +169,4 @@ /** | ||
| }; | ||
| MaterialSwitch.prototype['checkToggleState'] = | ||
| MaterialSwitch.prototype.checkToggleState; | ||
@@ -177,2 +182,3 @@ /** | ||
| }; | ||
| MaterialSwitch.prototype['disable'] = MaterialSwitch.prototype.disable; | ||
@@ -188,2 +194,3 @@ /** | ||
| }; | ||
| MaterialSwitch.prototype['enable'] = MaterialSwitch.prototype.enable; | ||
@@ -199,2 +206,3 @@ /** | ||
| }; | ||
| MaterialSwitch.prototype['on'] = MaterialSwitch.prototype.on; | ||
@@ -210,2 +218,3 @@ /** | ||
| }; | ||
| MaterialSwitch.prototype['off'] = MaterialSwitch.prototype.off; | ||
@@ -212,0 +221,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **tab** component is a user interface element that allows different content blocks to share the same screen space in a mutually exclusive manner. Tabs are always presented in sets of two or more, and they make it easy to explore and switch among different views or functional aspects of an app, or to browse categorized data sets individually. Tabs serve as "headings" for their respective content; the *active* tab — the one whose content is currently displayed — is always visually distinguished from the others so the user knows which heading the current content belongs to. | ||
@@ -6,6 +6,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include a set of MDL **tab** components: | ||
| ### To include a set of MDL **tab** components: | ||
@@ -94,3 +94,3 @@ 1. Code a `<div>` element; this is the "outer" div, intended to contain all of the tabs and their content. | ||
| ####Example | ||
| #### Example | ||
| Three tabs, with ripple effect on tab links. | ||
@@ -141,3 +141,3 @@ | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual and behavioral enhancements to the tabs. The table below lists the available classes and their effects. | ||
@@ -144,0 +144,0 @@ |
@@ -26,2 +26,3 @@ /** | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} element The element that will be upgraded. | ||
@@ -36,3 +37,3 @@ */ | ||
| }; | ||
| window.MaterialTabs = MaterialTabs; | ||
| window['MaterialTabs'] = MaterialTabs; | ||
@@ -42,3 +43,3 @@ /** | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -55,3 +56,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -126,2 +127,9 @@ */ | ||
| /** | ||
| * Constructor for an individual tab. | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} tab The HTML element for the tab. | ||
| * @param {MaterialTabs} ctx The MaterialTabs object that owns the tab. | ||
| */ | ||
| function MaterialTab(tab, ctx) { | ||
@@ -128,0 +136,0 @@ if (tab) { |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **text field** component is an enhanced version of the standard HTML `<input type="text">` and `<input type="textarea">` elements. A text field consists of a horizontal line indicating where keyboard input can occur and, typically, text that clearly communicates the intended contents of the text field. The MDL text field component provides various types of text fields, and allows you to add both display and click effects. | ||
@@ -8,3 +8,3 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
@@ -14,3 +14,3 @@ | ||
| ###To include a *single-line* MDL **text field** component: | ||
| ### To include a *single-line* MDL **text field** component: | ||
@@ -54,3 +54,3 @@ 1. Code a `<div>` element to hold the text field. | ||
| ####Examples | ||
| #### Examples | ||
@@ -82,3 +82,3 @@ Single-line text field with a standard label. | ||
| ###To include a *multi-line* MDL **text field** component: | ||
| ### To include a *multi-line* MDL **text field** component: | ||
@@ -114,3 +114,3 @@ 1. Code a `<div>` element to hold the text field. | ||
| ####Examples | ||
| #### Examples | ||
@@ -142,3 +142,3 @@ Multi-line text field with one visible input line. | ||
| ###To include an *expandable* MDL **text field** component: | ||
| ### To include an *expandable* MDL **text field** component: | ||
@@ -216,3 +216,3 @@ 1. Code an "outer" `<div>` element to hold the expandable text field. | ||
| ####Examples | ||
| #### Examples | ||
@@ -247,3 +247,3 @@ Expandable text field with a standard label. | ||
| ``` | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual and behavioral enhancements to the text field. The table below lists the available classes and their effects. | ||
@@ -250,0 +250,0 @@ |
@@ -26,2 +26,3 @@ /** | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} element The element that will be upgraded. | ||
@@ -35,3 +36,3 @@ */ | ||
| }; | ||
| window.MaterialTextfield = MaterialTextfield; | ||
| window['MaterialTextfield'] = MaterialTextfield; | ||
@@ -41,3 +42,3 @@ /** | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -55,3 +56,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -129,2 +130,4 @@ */ | ||
| }; | ||
| MaterialTextfield.prototype['checkDisabled'] = | ||
| MaterialTextfield.prototype.checkDisabled; | ||
@@ -143,2 +146,4 @@ /** | ||
| }; | ||
| MaterialTextfield.prototype['checkValidity'] = | ||
| MaterialTextfield.prototype.checkValidity; | ||
@@ -157,2 +162,4 @@ /** | ||
| }; | ||
| MaterialTextfield.prototype['checkDirty'] = | ||
| MaterialTextfield.prototype.checkDirty; | ||
@@ -168,2 +175,3 @@ /** | ||
| }; | ||
| MaterialTextfield.prototype['disable'] = MaterialTextfield.prototype.disable; | ||
@@ -179,2 +187,3 @@ /** | ||
| }; | ||
| MaterialTextfield.prototype['enable'] = MaterialTextfield.prototype.enable; | ||
@@ -184,3 +193,3 @@ /** | ||
| * | ||
| * @param {String} value The value to which to set the control (optional). | ||
| * @param {string} value The value to which to set the control (optional). | ||
| * @public | ||
@@ -192,5 +201,8 @@ */ | ||
| this.input_.value = value; | ||
| } else { | ||
| this.input_.value = ''; | ||
| } | ||
| this.updateClasses_(); | ||
| }; | ||
| MaterialTextfield.prototype['change'] = MaterialTextfield.prototype.change; | ||
@@ -207,5 +219,6 @@ /** | ||
| if (this.input_) { | ||
| if (this.input_.hasAttribute(this.Constant_.MAX_ROWS_ATTRIBUTE)) { | ||
| if (this.input_.hasAttribute( | ||
| /** @type {string} */ (this.Constant_.MAX_ROWS_ATTRIBUTE))) { | ||
| this.maxRows = parseInt(this.input_.getAttribute( | ||
| this.Constant_.MAX_ROWS_ATTRIBUTE), 10); | ||
| /** @type {string} */ (this.Constant_.MAX_ROWS_ATTRIBUTE)), 10); | ||
| if (isNaN(this.maxRows)) { | ||
@@ -212,0 +225,0 @@ this.maxRows = this.Constant_.NO_MAX_ROWS; |
@@ -15,3 +15,8 @@ // Source: https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js | ||
| if (!Date.now) { | ||
| /** | ||
| * Date.now polyfill. | ||
| * @return {number} the current Date | ||
| */ | ||
| Date.now = function() { return new Date().getTime(); }; | ||
| Date['now'] = Date.now; | ||
| } | ||
@@ -24,3 +29,5 @@ | ||
| window.cancelAnimationFrame = (window[vp + 'CancelAnimationFrame'] || | ||
| window[vp + 'CancelRequestAnimationFrame']); | ||
| window[vp + 'CancelRequestAnimationFrame']); | ||
| window['requestAnimationFrame'] = window.requestAnimationFrame; | ||
| window['cancelAnimationFrame'] = window.cancelAnimationFrame; | ||
| } | ||
@@ -30,12 +37,17 @@ | ||
| var lastTime = 0; | ||
| /** | ||
| * requestAnimationFrame polyfill. | ||
| * @param {!Function} callback the callback function. | ||
| */ | ||
| window.requestAnimationFrame = function(callback) { | ||
| var now = Date.now(); | ||
| var nextTime = Math.max(lastTime + 16, now); | ||
| return setTimeout(function() { callback(lastTime = nextTime); }, | ||
| nextTime - now); | ||
| }; | ||
| var now = Date.now(); | ||
| var nextTime = Math.max(lastTime + 16, now); | ||
| return setTimeout(function() { callback(lastTime = nextTime); }, | ||
| nextTime - now); | ||
| }; | ||
| window.cancelAnimationFrame = clearTimeout; | ||
| window['requestAnimationFrame'] = window.requestAnimationFrame; | ||
| window['cancelAnimationFrame'] = window.cancelAnimationFrame; | ||
| } | ||
| })(); | ||
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **tooltip** component is an enhanced version of the standard HTML tooltip as produced by the `title` attribute. A tooltip consists of text and/or an image that clearly communicates additional information about an element when the user hovers over or, in a touch-based UI, touches the element. The MDL tooltip component is pre-styled (colors, fonts, and other settings are contained in *material.min.css*) to provide a vivid, attractive visual element that displays related but typically non-essential content, e.g., a definition, clarification, or brief instruction. | ||
@@ -6,6 +6,6 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction. | ||
| ###To include an MDL **tooltip** component: | ||
| ### To include an MDL **tooltip** component: | ||
@@ -29,3 +29,3 @@ 1. Code an element, such as a `<div>`, `<p>`, or `<span>`, and style it as desired; this will be the tooltip's target. Include an `id` attribute and unique value to link the container to its tooltip. | ||
| ####Examples | ||
| #### Examples | ||
@@ -63,3 +63,3 @@ A target with a simple text tooltip. | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes apply various predefined visual enhancements to the tooltip. The table below lists the available classes and their effects. | ||
@@ -66,0 +66,0 @@ |
@@ -26,2 +26,3 @@ /** | ||
| * | ||
| * @constructor | ||
| * @param {HTMLElement} element The element that will be upgraded. | ||
@@ -35,3 +36,3 @@ */ | ||
| }; | ||
| window.MaterialTooltip = MaterialTooltip; | ||
| window['MaterialTooltip'] = MaterialTooltip; | ||
@@ -41,3 +42,3 @@ /** | ||
| * | ||
| * @enum {String | Number} | ||
| * @enum {string | number} | ||
| * @private | ||
@@ -54,3 +55,3 @@ */ | ||
| * | ||
| * @enum {String} | ||
| * @enum {string} | ||
| * @private | ||
@@ -57,0 +58,0 @@ */ |
@@ -1,2 +0,2 @@ | ||
| ##Introduction | ||
| ## Introduction | ||
| The Material Design Lite (MDL) **typography** component is a comprehensive approach to standardizing the use of typefaces in applications and page displays. MDL typography elements are intended to replace the myriad fonts used by developers (which vary significantly in appearance) and provide a robust, uniform library of text styles from which developers can choose. | ||
@@ -8,3 +8,3 @@ | ||
| ##Basic use | ||
| ## Basic use | ||
| MDL typography does not require the inclusion of the minified CSS and JavaScript files that drive the other MDL components. Instead, just include a link to the Google stylesheet that accesses the font and its desired variations. | ||
@@ -20,3 +20,3 @@ ```html | ||
| ###To include an MDL **typography** component: | ||
| ### To include an MDL **typography** component: | ||
@@ -34,3 +34,3 @@ 1. Code any element (`<div>`,`<p>`,`<span>`, etc.) that can contain text, including whatever content is appropriate. | ||
| ####Examples | ||
| #### Examples | ||
@@ -72,3 +72,3 @@ A "headline" paragraph. | ||
| ##Configuration options | ||
| ## Configuration options | ||
| The MDL CSS classes specify the style to use. The table below lists the available classes and their effects. | ||
@@ -75,0 +75,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 4 instances in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by437.59%
51033
- Number of medium supply chain risk alerts
- decreased by-80%
1
Worsened metrics
- Total package byte prevSize
- decreased by-63.08%
4775941
- Number of package files
- decreased by-41.42%
215
No dependency changes