From 250c3afd484aa4e7756bf4b64008655fc222fe14 Mon Sep 17 00:00:00 2001 From: Brad Zacher Date: Sun, 24 Apr 2016 00:32:31 +0930 Subject: [PATCH] added material-design-lite definition and tests (#9080) --- .../material-design-lite-tests.ts | 38 ++++++ .../material-design-lite.d.ts | 128 ++++++++++++++++++ 2 files changed, 166 insertions(+) create mode 100644 material-design-lite/material-design-lite-tests.ts create mode 100644 material-design-lite/material-design-lite.d.ts diff --git a/material-design-lite/material-design-lite-tests.ts b/material-design-lite/material-design-lite-tests.ts new file mode 100644 index 0000000000..afbf5faf15 --- /dev/null +++ b/material-design-lite/material-design-lite-tests.ts @@ -0,0 +1,38 @@ +// Test file for Google Maps JavaScript API Definition file +/// + +componentHandler.upgradeDom(); +componentHandler.upgradeDom('MaterialButton'); +componentHandler.upgradeDom('MaterialButton', 'mdl-button'); + +componentHandler.upgradeElement(document.createElement('div')); +componentHandler.upgradeElement(document.getElementById('id')); +componentHandler.upgradeElement(document.getElementsByTagName('button')[0], 'MaterialButton'); + +componentHandler.upgradeElements(document.getElementsByTagName('div')); +componentHandler.upgradeElements([document.createElement('div')]); +componentHandler.upgradeElements(document.querySelectorAll('div.mdl-button')); + +componentHandler.upgradeAllRegistered(); + +componentHandler.registerUpgradedCallback('MaterialButton', function(element : HTMLElement) {}); + +componentHandler.register({ + constructor: function(element: HTMLElement) {}, + classAsString: 'MaterialCheese', + cssClass: 'mdl-cheese' +}); +componentHandler.register({ + constructor: function(element: HTMLElement) {}, + classAsString: 'MaterialFoo', + cssClass: 'mdl-foo', + widget: true +}); +componentHandler.register({ + constructor: function(element: HTMLElement) {}, + classAsString: 'MaterialFoo', + cssClass: 'mdl-foo', + widget: 'FooBar' +}); + +componentHandler.downgradeElements(document.querySelectorAll('div')); diff --git a/material-design-lite/material-design-lite.d.ts b/material-design-lite/material-design-lite.d.ts new file mode 100644 index 0000000000..11b93ea792 --- /dev/null +++ b/material-design-lite/material-design-lite.d.ts @@ -0,0 +1,128 @@ +// Type definitions for material-design-lite v1.1.3 +// Project: https://getmdl.io +// Definitions by: Brad Zacher +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare module MaterialDesignLite { + interface ComponentHandler { + /** + * Searches existing DOM for elements of our component type and upgrades them + * if they have not already been upgraded. + */ + upgradeDom() : void; + /** + * Searches existing DOM for elements of our component type and upgrades them + * if they have not already been upgraded. + * + * @param {string} jsClass the programatic name of the element class we + * need to create a new instance of. + */ + upgradeDom(jsClass : string) : void; + /** + * Searches existing DOM for elements of our component type and upgrades them + * if they have not already been upgraded. + * + * @param {string} jsClass the programatic name of the element class we + * need to create a new instance of. + * @param {string} cssClass the name of the CSS class elements of this + * type will have. + */ + upgradeDom(jsClass : string, cssClass : string) : void; + + /** + * Upgrades a specific element rather than all in the DOM. + * + * @param {!Element} element The element we wish to upgrade. + */ + upgradeElement(element : HTMLElement) : void; + /** + * Upgrades a specific element rather than all in the DOM. + * + * @param {!Element} element The element we wish to upgrade. + * @param {string} jsClass Optional name of the class we want to upgrade + * the element to. + */ + upgradeElement(element : HTMLElement, jsClass : string) : void; + + /** + * Upgrades a specific list of elements rather than all in the DOM. + * + * @param {!Element} elements + * The elements we wish to upgrade. + */ + upgradeElements(elements : HTMLElement) : void; + /** + * Upgrades a specific list of elements rather than all in the DOM. + * + * @param {!Array} elements + * The elements we wish to upgrade. + */ + upgradeElements(elements : Array) : void; + /** + * Upgrades a specific list of elements rather than all in the DOM. + * + * @param {!NodeList} elements + * The elements we wish to upgrade. + */ + upgradeElements(elements : NodeList) : void; + /** + * Upgrades a specific list of elements rather than all in the DOM. + * + * @param {!HTMLCollection} elements + * The elements we wish to upgrade. + */ + upgradeElements(elements : HTMLCollection) : void; + + /** + * Upgrades all registered components found in the current DOM. This is + * automatically called on window load. + */ + upgradeAllRegistered() : void; + + /** + * 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(jsClass : string, callback : (element : HTMLElement) => any) : void; + + /** + * Registers a class for future use and attempts to upgrade existing DOM. + * + * @param {componentHandler.ComponentConfigPublic} config the registration configuration + */ + register(config : ComponentConfigPublic) : void; + + /** + * Downgrade either a given node, an array of nodes, or a NodeList. + * + * @param {!Node} nodes The list of nodes. + */ + downgradeElements(nodes : Node) : void; + /** + * Downgrade either a given node, an array of nodes, or a NodeList. + * + * @param {!Array} nodes The list of nodes. + */ + downgradeElements(nodes : Array) : void; + /** + * Downgrade either a given node, an array of nodes, or a NodeList. + * + * @param {!NodeList} nodes The list of nodes. + */ + downgradeElements(nodes : NodeList) : void; + } + interface ComponentConfigPublic { + constructor(element : HTMLElement) : void; + classAsString : string; + cssClass : string; + widget? : string | boolean; + } +} + +declare var componentHandler : MaterialDesignLite.ComponentHandler; \ No newline at end of file