├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── README.md ├── dist └── index.js ├── example └── app.js ├── index.html ├── package.json └── src └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | Code of Conduct 2 | --------------- 3 | 4 | Introduction 5 | ------------ 6 | 7 | This code of conduct *governs how we behave* in any forum and whenever we will be judged by our actions. We expect it to be honored by everyone who participates in the material-hyperscript community formally or informally, or claims any affiliation with the project. 8 | 9 | This code of conduct also *applies to all spaces* managed by the material-hyperscript, including IRC, all public and private mailing lists, the issue tracker, the wiki, the blogs, Twitter, and any other forum which the company uses for communication. 10 | 11 | This code is not *exhaustive or complete*. It serves to distill our common understanding of a collaborative, shared environment and goals. We expect it to be followed in spirit as much as in the letter, so that it can enrich all of us and the technical communities in which we participate. 12 | 13 | Specific Guidelines 14 | ------------------- 15 | 16 | We strive to: 17 | 18 | 1. **Be open**. We invite anyone to participate in our community, we preferably use public methods of communication for project-related messages, unless discussing something sensitive. This applies to messages for help or SearchBookGo-related support, too; not only is a public support request much more likely to result in an answer to a question, it also makes sure that any inadvertent mistakes made by people answering will be more easily detected and corrected. 19 | 20 | 2. **Be empathetic**, welcoming, friendly, and patient: We work together to resolve conflict, assume good intentions, and do our best to act in an empathetic fashion. We may all experience some frustration from time to time, but we do not allow frustration to turn into a personal attack. A company where people feel uncomfortable or threatened is not a productive one. We should be respectful when dealing with other company members as well as with people outside our company. 21 | 22 | 3. **Be collaborative**. Our work will be used by other people, and in turn we will depend on the work of others. When we make something for the benefit of the project, we are willing to explain to others how it works, so that they can build on the work to make it even better. Any decision we make will affect users and colleagues, and we take those consequences seriously when making decisions. 23 | 24 | 4. **Be inquisitive**. Nobody knows everything! Asking questions early avoids many problems later, so questions are encouraged, though they may be directed to the appropriate forum. Those who are asked should be responsive and helpful, within the context of our shared goal of improving material-hyperscript. 25 | 26 | 5. **Be careful in the words that we choose**. Whether we are participating as professionals or volunteers, we value professionalism in all interactions, and take responsibility for our own speech. Be kind to others. Do not insult or put down other participants. Harassment and other exclusionary behaviour are not acceptable. This includes, but is not limited to: 27 | Violent threats or language directed against another person. 28 | Sexist, racist, or otherwise discriminatory jokes and language. 29 | Posting sexually explicit or violent material. 30 | Posting (or threatening to post) other people's personally identifying information ("doxing"). 31 | Sharing private content, such as emails sent privately or non-publicly, or unlogged forums such as IRC channel history. 32 | Personal insults, especially those using racist or sexist terms. 33 | Unwelcome sexual attention. 34 | Excessive or unnecessary profanity. 35 | Repeated harassment of others. In general, if someone asks you to stop, then stop. 36 | Advocating for, or encouraging, any of the above behaviour. 37 | 38 | 6. **Be concise**. Keep in mind that what you write once will be read by hundreds of persons. Writing a short email means people can understand the conversation as efficiently as possible. Short emails should always strive to be empathetic, welcoming, friendly and patient. When a long explanation is necessary, consider adding a summary. 39 | 40 | Try to bring new ideas to a conversation so that each mail adds something unique to the thread, keeping in mind that the rest of the thread still contains the other messages with arguments that have already been made. 41 | 42 | Try to stay on topic, especially in discussions that are already fairly large. 43 | 44 | 7. **Step down considerately**: Members of every project come and go. When somebody leaves or disengages from the project they should tell people they are leaving and take the proper steps to ensure that others can pick up where they left off. In doing so, they should remain respectful of those who continue to participate in the project and should not misrepresent the project's goals or achievements. Likewise, company members should respect any individual's choice to leave the project. 45 | 46 | Diversity Statement 47 | ------------------- 48 | 49 | material-hyperscript welcomes and encourages participation by everyone. We are committed to being a company that everyone feels good about joining. Although we may not be able to satisfy everyone, we will always work to treat everyone well. 50 | 51 | No matter how you identify yourself or how others perceive you: we welcome you. Though no list can hope to be comprehensive, we explicitly honor diversity in: age, culture, ethnicity, genotype, gender identity or expression, language, national origin, neurotype, phenotype, political beliefs, profession, race, religion, sexual orientation, socioeconomic status, subculture and technical ability. 52 | 53 | Though we welcome people fluent in all languages, material-hyperscript development is conducted in English. 54 | 55 | Standards for behaviour in the SearchBookGo company are detailed in the Code of Conduct above. We expect participants in our company to meet these standards in all their interactions and to help others to do so as well. 56 | 57 | 58 | Reporting Guidelines 59 | -------------------- 60 | 61 | material-hyperscript contributors have the primary responsibility to ensure this code of conduct is adhered to however all in the company are invited to participate in cultivating a respectful atmosphere. If you believe someone is violating this code of conduct, you may reply to them and point out this code of conduct. Such messages may be in public or in private, whatever is most appropriate. However, regardless of whether the message is public or not, it should still adhere to the relevant parts of this code of conduct; in particular, it should not be abusive or disrespectful. Should there be difficulties in dealing with the situation, you may report your compliance issues in confidence twilson63@gmail.com. 62 | 63 | Anyone violating the code of conduct will be notified and asked to stop, if anyone repeatedly violates the code of conduct then the actions may include but not be limited to closing problematic bugs, temporary or permanent exclusion from GitHub, mailing lists or other SearchBookGo controlled companies. 64 | 65 | Endnotes 66 | -------- 67 | 68 | This Code defines empathy as "a vicarious participation in the emotions, ideas, or opinions of others; the ability to imagine oneself in the condition or predicament of another." Empathetic is the adjectival form of empathy. 69 | 70 | This document was derived primarily from the [Apache CouchDB Code of Conduct](http://couchdb.apache.org/conduct.html) with thanks. The Apache CouchDB thanks the following documents on which it draws for content and inspiration: 71 | 72 | * [Fedora Project Code of Conduct](http://fedoraproject.org/code-of-conduct) 73 | * [Speak Up! Code of Conduct](http://speakup.io/coc.html) 74 | * [Django Code of Conduct](https://www.djangoproject.com/conduct/) 75 | * [Debian Code of Conduct](http://www.debian.org/vote/2014/vote_002) 76 | * [Twitter Open Source Code of Conduct](https://github.com/twitter/code-of-conduct/blob/master/code-of-conduct.md) 77 | * [Mozilla Code of Conduct/Draft](https://wiki.mozilla.org/Code_of_Conduct/Draft#Conflicts_of_Interest) 78 | * [Python Diversity Appendix](https://www.python.org/community/diversity/) 79 | * [Python Mentors Home Page](http://pythonmentors.com/) 80 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | [material-hyperscript](http://material-hyperscript.com) - Bringing Material Design Lite to Hyperscript 2 | 3 | Welcome, so you are thinking about contributing to material-hyperscript? awesome, this is a great place to start. 4 | 5 | Get in Touch 6 | ------------ 7 | 8 | The following documentation should answer most of the common questions about how to get started contributing, if you have any questions, please feel free to get in touch @ [slack](http://slack.material-hyperscript.com) or post an issue at https://github.com/twilson63/material-hyperscript/issues 9 | 10 | Weekly Office Hours 11 | ------------------- 12 | 13 | Help Wanted 14 | ----------- 15 | 16 | Guide to Contributors 17 | --------------------- 18 | 19 | Dependencies 20 | ------------ 21 | 22 | Building material-hyperscript 23 | ----------------------------- 24 | 25 | Testing material-hyperscript 26 | ---------------------------- 27 | 28 | Git Essentials 29 | -------------- 30 | 31 | Building documentation 32 | ---------------------- 33 | 34 | Writing a Blog post 35 | ------------------- 36 | 37 | Committers: 38 | ----------- 39 | 40 | Release Procedure 41 | ----------------- 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Material Hyperscript 2 | 3 | Material Design Lite is a project that implements the Material Design: 4 | 5 | > Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. 6 | 7 | This project uses MDL to implement `hyperscript` components for `mdl` 8 | 9 | Hyperscript can be used in several frameworks: CycleJS, Mercury, React - or stand-alone. 10 | 11 | ## Example 12 | 13 | ``` js 14 | var { h, create, diff, patch } = require('virtual-dom') 15 | var {layout, header, headerRow, title, 16 | spacer, nav, navLink, content} = require('material-hyperscript')(h) 17 | 18 | document.body.appendChild( 19 | create( 20 | layout([ 21 | header([ 22 | headerRow([ 23 | title('Hello World'), 24 | spacer(), 25 | nav([ 26 | navLink(['Link 1']), 27 | navLink(['Link 2']) 28 | ]) 29 | ]) 30 | ]), 31 | content([ 32 | h('h1', ['Hello World']) 33 | ]) 34 | ]) 35 | ) 36 | ) 37 | ``` 38 | 39 | ## Install 40 | 41 | ``` 42 | npm install material-design-lite --save 43 | npm install material-hyperscript --save 44 | ``` 45 | 46 | ## Setup 47 | 48 | index.html - head 49 | 50 | ``` html 51 | 52 | 53 | 54 | ``` 55 | 56 | ## Documentation 57 | 58 | [TODO] 59 | 60 | 61 | Changelog 62 | ---- 63 | 64 | material-hyperscript follows [semantic versioning](http://semver.org/). To see a changelog with all material-hyperscript releases, check out the [Github releases page](https://github.com/twilson63/material-hyperscript/releases). 65 | 66 | For a concise list of breaking changes, there's the [wiki list of breaking changes](https://github.com/twilson63/material-hyperscript/wiki/Breaking-changes). 67 | 68 | Contributing 69 | ------------ 70 | 71 | We're always looking for new contributors! If you'd like to try your hand at writing code, writing documentation, designing the website, writing a blog post, or answering [questions on StackOverflow](http://stackoverflow.com/search?tab=newest&q=material-hyperscript), then we'd love to have your input. 72 | 73 | If you have a pull request that you'd like to submit, please read the [contributing guide](https://github.com/twilson63/material-hyperscript/blob/master/CONTRIBUTING.md) for info on style, commit message format, and other (slightly!) nitpicky things like that. Material-hyperscript is heavily tested, so you'll also want to check out the [testing guide](https://github.com/twilson63/material-hyperscript/blob/master/TESTING.md). 74 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | var isValidString = 2 | function ( param ) { return typeof param === 'string' && param.length > 0; } 3 | 4 | var startsWith = 5 | function (string, start) { return string[0] === start; } 6 | 7 | var isSelector = 8 | function ( param ) { return isValidString(param) && (startsWith(param, '.') || startsWith(param, '#')); } 9 | 10 | var TAGS = { 11 | badge: 'div.material-icons.mdl-badge', 12 | fab: 'button.mdl-button.mdl-js-button.mdl-button--fab', 13 | btn: 'button.mdl-button.mdl-js-button', 14 | iconBtn: 'button.mdl-button.mdl-js-button.mdl-button--icon', 15 | miniFab: 'button.mdl-button.mdl-js-button.mdl-button--fab.mdl-button--mini-fab', 16 | txtField: 'div.mdl-textfield.mdl-js-textfield', 17 | txtInput: 'input.mdl-textfield__input', 18 | txtLabel: 'label.mdl-textfield__label', 19 | slider: 'input.mdl-slider.mdl-js-slider', 20 | icon: 'i.material-icons', 21 | menu: 'ul.mdl-menu.mdl-js-menu', 22 | menuItem: 'li.mdl-menu__item', 23 | tooltip: 'div.mdl-tooltip', 24 | dataTable: 'div.mdl-data-table.mdl-js-data-table', 25 | thCell: 'th.mdl-data-table__cell--non-numeric', 26 | tdCell: 'td.mdl-data-table__cell--non-numeric', 27 | _switch: 'label.mdl-switch.mdl-js-switch', 28 | cbSwitch: 'input.mdl-switch__input', 29 | lblSwitch: 'span.mdl-switch__label', 30 | spinner: 'div.mdl-spinner.mdl-js-spinner', 31 | list: 'ul.mdl-list', 32 | listItem: 'li.mdl-list__item', 33 | liPrimary: 'span.mdl-list__item-primary-content', 34 | liIcon: 'i.material-cons.mdl-list__item-icon', 35 | liLink: 'a.mdl-list__item-secondary-action', 36 | liSecondary: 'a.mdl-list__item-secondary-content', 37 | liBody: 'span.mdl-list__item-text-body', 38 | layout: 'div.mdl-layout.mdl-js-layout', 39 | header: 'header.mdl-layout__header', 40 | headerRow: 'div.mdl-layout__header-row', 41 | title: 'div.mdl-layout-title', 42 | spacer: 'div.mdl-layout-spacer', 43 | nav: 'nav.mdl-navigation', 44 | navLink: 'a.mdl-navigation__link', 45 | drawer: 'div.mdl-layout__drawer', 46 | content: 'main.mdl-layout__content', 47 | grid: 'div.mdl-grid', 48 | cell_1: 'div.mdl-cell.mdl-cell--1-col', 49 | cell_2: 'div.mdl-cell.mdl-cell--2-col', 50 | cell_3: 'div.mdl-cell.mdl-cell--3-col', 51 | cell_4: 'div.mdl-cell.mdl-cell--4-col', 52 | cell_5: 'div.mdl-cell.mdl-cell--5-col', 53 | cell_6: 'div.mdl-cell.mdl-cell--6-col', 54 | cell_7: 'div.mdl-cell.mdl-cell--7-col', 55 | cell_8: 'div.mdl-cell.mdl-cell--8-col', 56 | cell_9: 'div.mdl-cell.mdl-cell--9-col', 57 | cell_10: 'div.mdl-cell.mdl-cell--10-col', 58 | cell_11: 'div.mdl-cell.mdl-cell--11-col', 59 | cell_12: 'div.mdl-cell.mdl-cell--12-col', 60 | card: 'div.mdl-card', 61 | cardTitle: 'div.mdl-card__title', 62 | cardMenu: 'div.mdl-card__menu' 63 | } 64 | 65 | var node = function ( h ) { return function ( tagName ) { return function (first) { 66 | var rest = [], len = arguments.length - 1; 67 | while ( len-- > 0 ) rest[ len ] = arguments[ len + 1 ]; 68 | 69 | var tag = TAGS[tagName] 70 | if (isSelector(first)) { 71 | if (typeof rest[0] === 'Object') { 72 | rest[0] = Object.assign({}, {'upgrade-hook': new UpgradeHook() }, rest[0]) 73 | } 74 | return h.apply(void 0, [ tag + first ].concat( rest )) 75 | } else { 76 | if (typeof first === 'Object') { 77 | first = Object.assign({}, {'upgrade-hook': new UpgradeHook() }, first) 78 | } 79 | return h.apply(void 0, [ tag, first ].concat( rest )) 80 | } 81 | }; }; } 82 | 83 | 84 | var materialTags = function ( h ) { 85 | var createTag = node(h) 86 | var exported = { } 87 | Object.keys(TAGS).forEach(function ( n ) { 88 | exported[n] = createTag(n) 89 | }) 90 | return exported 91 | } 92 | 93 | module.exports = materialTags 94 | 95 | function UpgradeHook (){} 96 | UpgradeHook.prototype.hook = function (node, propertyName, previousValue) { 97 | if (!componentHandler && console) { 98 | return console.log('componentHander not found') 99 | } 100 | setTimeout(function ( _ ) { return componentHandler.upgradeElement(node); }, 0) 101 | 102 | } 103 | -------------------------------------------------------------------------------- /example/app.js: -------------------------------------------------------------------------------- 1 | var { h, create, diff, patch } = require('virtual-dom') 2 | var { layout, header, headerRow, title, 3 | spacer, nav, navLink, content, grid, cell_11, cell_1, 4 | cell_5, card, cardTitle 5 | } = require('../src')(h) 6 | 7 | document.body.appendChild( 8 | create( 9 | layout([ 10 | header([ 11 | headerRow([ 12 | title('Material Hyperscript'), 13 | spacer(), 14 | nav([ 15 | navLink(['Home']), 16 | navLink(['Components']) 17 | ]) 18 | ]) 19 | ]), 20 | content([ 21 | grid([ 22 | cell_11('.mdl-cell--1-offset', [ 23 | h('h1', ['Welcome']), 24 | h('p', [`To Material-Hyperscript, a module that combines 25 | material design lite with hyperscript. 26 | `]) 27 | ]) 28 | ]), 29 | grid([ 30 | cell_5('.mdl-cell--1-offset', [ 31 | card('.mdl-shadow--2dp', [ 32 | cardTitle([ 33 | h('pre', [ 34 | h('code', [` 35 | layout([ 36 | header([ 37 | //... 38 | ]), 39 | content([ 40 | //... 41 | ]) 42 | ]) 43 | `]) 44 | ]) 45 | ]) 46 | ]), 47 | ]), 48 | cell_5([ 49 | card('.mdl-shadow--2dp', [ 50 | cardTitle([ 51 | h('img', {src: 'http://placehold.it/300'}) 52 | ]) 53 | ]) 54 | ]) 55 | ]) 56 | ]) 57 | ]) 58 | ) 59 | ) 60 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-hyperscript", 3 | "version": "1.0.1", 4 | "description": "Material Design Lite is a project that implements the Material Design:", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "demo": "wzrd example/app.js -- -t [bubleify]", 9 | "build": "buble src -o dist" 10 | }, 11 | "keywords": [], 12 | "author": "Tom", 13 | "license": "MIT", 14 | "devDependencies": { 15 | "browserify": "^13.0.1", 16 | "bubleify": "^0.2.0", 17 | "hyperscript": "^1.4.7", 18 | "material-design-lite": "^1.1.3", 19 | "virtual-dom": "^2.1.1", 20 | "wzrd": "^1.3.1" 21 | }, 22 | "dependencies": {}, 23 | "directories": { 24 | "example": "example" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "git+https://github.com/twilson63/material-hyperscript.git" 29 | }, 30 | "bugs": { 31 | "url": "https://github.com/twilson63/material-hyperscript/issues" 32 | }, 33 | "homepage": "https://github.com/twilson63/material-hyperscript#readme" 34 | } 35 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const isValidString = 2 | param => 3 | typeof param === 'string' && param.length > 0 4 | 5 | const startsWith = 6 | (string, start) => 7 | string[0] === start 8 | 9 | const isSelector = 10 | param => 11 | isValidString(param) && (startsWith(param, '.') || startsWith(param, '#')) 12 | 13 | const TAGS = { 14 | badge: 'div.material-icons.mdl-badge', 15 | fab: 'button.mdl-button.mdl-js-button.mdl-button--fab', 16 | btn: 'button.mdl-button.mdl-js-button', 17 | iconBtn: 'button.mdl-button.mdl-js-button.mdl-button--icon', 18 | miniFab: 'button.mdl-button.mdl-js-button.mdl-button--fab.mdl-button--mini-fab', 19 | txtField: 'div.mdl-textfield.mdl-js-textfield', 20 | txtInput: 'input.mdl-textfield__input', 21 | txtLabel: 'label.mdl-textfield__label', 22 | slider: 'input.mdl-slider.mdl-js-slider', 23 | icon: 'i.material-icons', 24 | menu: 'ul.mdl-menu.mdl-js-menu', 25 | menuItem: 'li.mdl-menu__item', 26 | tooltip: 'div.mdl-tooltip', 27 | dataTable: 'div.mdl-data-table.mdl-js-data-table', 28 | thCell: 'th.mdl-data-table__cell--non-numeric', 29 | tdCell: 'td.mdl-data-table__cell--non-numeric', 30 | _switch: 'label.mdl-switch.mdl-js-switch', 31 | cbSwitch: 'input.mdl-switch__input', 32 | lblSwitch: 'span.mdl-switch__label', 33 | spinner: 'div.mdl-spinner.mdl-js-spinner', 34 | list: 'ul.mdl-list', 35 | listItem: 'li.mdl-list__item', 36 | liPrimary: 'span.mdl-list__item-primary-content', 37 | liIcon: 'i.material-cons.mdl-list__item-icon', 38 | liLink: 'a.mdl-list__item-secondary-action', 39 | liSecondary: 'a.mdl-list__item-secondary-content', 40 | liBody: 'span.mdl-list__item-text-body', 41 | layout: 'div.mdl-layout.mdl-js-layout', 42 | header: 'header.mdl-layout__header', 43 | headerRow: 'div.mdl-layout__header-row', 44 | title: 'div.mdl-layout-title', 45 | spacer: 'div.mdl-layout-spacer', 46 | nav: 'nav.mdl-navigation', 47 | navLink: 'a.mdl-navigation__link', 48 | drawer: 'div.mdl-layout__drawer', 49 | content: 'main.mdl-layout__content', 50 | grid: 'div.mdl-grid', 51 | cell_1: 'div.mdl-cell.mdl-cell--1-col', 52 | cell_2: 'div.mdl-cell.mdl-cell--2-col', 53 | cell_3: 'div.mdl-cell.mdl-cell--3-col', 54 | cell_4: 'div.mdl-cell.mdl-cell--4-col', 55 | cell_5: 'div.mdl-cell.mdl-cell--5-col', 56 | cell_6: 'div.mdl-cell.mdl-cell--6-col', 57 | cell_7: 'div.mdl-cell.mdl-cell--7-col', 58 | cell_8: 'div.mdl-cell.mdl-cell--8-col', 59 | cell_9: 'div.mdl-cell.mdl-cell--9-col', 60 | cell_10: 'div.mdl-cell.mdl-cell--10-col', 61 | cell_11: 'div.mdl-cell.mdl-cell--11-col', 62 | cell_12: 'div.mdl-cell.mdl-cell--12-col', 63 | card: 'div.mdl-card', 64 | cardTitle: 'div.mdl-card__title', 65 | cardMenu: 'div.mdl-card__menu' 66 | } 67 | 68 | const node = h => 69 | tagName => 70 | (first, ...rest) => { 71 | var tag = TAGS[tagName] 72 | if (isSelector(first)) { 73 | if (typeof rest[0] === 'Object') { 74 | rest[0] = Object.assign({}, {'upgrade-hook': new UpgradeHook() }, rest[0]) 75 | } 76 | return h(tag + first, ...rest) 77 | } else { 78 | if (typeof first === 'Object') { 79 | first = Object.assign({}, {'upgrade-hook': new UpgradeHook() }, first) 80 | } 81 | return h(tag, first, ...rest) 82 | } 83 | } 84 | 85 | 86 | const materialTags = h => { 87 | const createTag = node(h) 88 | const exported = { } 89 | Object.keys(TAGS).forEach(n => { 90 | exported[n] = createTag(n) 91 | }) 92 | return exported 93 | } 94 | 95 | module.exports = materialTags 96 | 97 | function UpgradeHook (){} 98 | UpgradeHook.prototype.hook = (node, propertyName, previousValue) => { 99 | if (!componentHandler && console) { 100 | return console.log('componentHander not found') 101 | } 102 | setTimeout(_ => componentHandler.upgradeElement(node), 0) 103 | 104 | } 105 | --------------------------------------------------------------------------------