material 0.6.1 → 0.7.0

package/index.js

@@ -1,5 +1,5 @@
 import AppBar from 'material/src/appbar'
-import Button from 'material/src/button'
+import Button from 'material/src/control/button'
 import Banner from 'material/src/banner'
 import Calendar from 'material/src/calendar'
 import Card from 'material/src/card'
@@ -27,7 +27,12 @@ import Textfield from 'material/src/textfield'
 import Toolbar from 'material/src/toolbar'
 import View from 'material/src/view'
 import Tree from 'material/src/tree'
+
 import emitter from 'material/src/module/emitter'
+import mediator from 'material/src/module/mediator'
+import display from 'material/src/mixin/display'
+import build from 'material/src/module/build'
+import jsontohtml from 'material/src/module/jsontohtml'
 
 export {
   AppBar,
@@ -59,5 +64,9 @@ export {
   View,
   Snackbar,
   Progress,
-  emitter
+  emitter,
+  display,
+  build,
+  emitter,
+  mediator
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "A lightweight implementation of Material Design Components - ES6",
   "main": "index.js",
   "repository": {

package/src/appbar.js

@@ -1,6 +1,6 @@
 import passiveEvents from './module/passive'
-import create from './component/create'
-import insert from './component/insert'
+import create from './mixin/create'
+import insert from './mixin/insert'
 import offset from './element/offset'
 
 const defaults = {
@@ -36,21 +36,21 @@ class AppBar {
    * @return {Object} This class instance
    */
   build () {
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     // console.log(this.options.height, this.options.fixed)
 
     if (this.options.height) {
-      this.root.style.height = this.options.height + 'px'
+      this.element.style.height = this.options.height + 'px'
     }
 
     if (this.options.fixed) {
       // console.log('is-fixed')
-      this.root.classList.add('is-fixed')
+      this.element.classList.add('is-fixed')
     }
 
     if (this.options.flexible) {
-      this.root.classList.add('is-flexible')
+      this.element.classList.add('is-flexible')
     }
 
     // if (this.options.container) {
@@ -61,13 +61,13 @@ class AppBar {
   }
 
   attach () {
-    this.root.addEventListener('DOMNodeInserted', (e) => {
+    this.element.addEventListener('DOMNodeInserted', (e) => {
       var textNode = e.target
-      if (textNode !== this.root) return
+      if (textNode !== this.element) return
 
-      var size = this.size = offset(this.root, 'height')
+      var size = this.size = offset(this.element, 'height')
 
-      var view = this.view = this.root.parentNode
+      var view = this.view = this.element.parentNode
 
       // console.log('view', view)
 
@@ -77,7 +77,7 @@ class AppBar {
 
       var padding = window.getComputedStyle(view)['padding-' + p]
       // console.log('paddingTop', padding)
-      // if (!padding) padding = window.getComputedStyle(this.root.parentNode, 'padding')
+      // if (!padding) padding = window.getComputedStyle(this.element.parentNode, 'padding')
       // console.log('padding', padding)
 
       padding = parseInt(padding, 10)
@@ -92,7 +92,7 @@ class AppBar {
 
       if (document.body == view) {
         // console.log('toolbar container body')
-        this.root.classList.add('toolbar-body')
+        this.element.classList.add('toolbar-body')
       }
 
       // console.log('p', p)
@@ -111,7 +111,7 @@ class AppBar {
   set (prop, value) {
     switch (prop) {
       case 'minimize':
-        this.root.setAttribute('style', 'height: 64px')
+        this.element.setAttribute('style', 'height: 64px')
         break
       case 'value':
         this.setValue(value)
@@ -154,9 +154,9 @@ class AppBar {
       }
 
       if (scrollTop > 0) {
-        this.root.classList.add('is-scrolled')
+        this.element.classList.add('is-scrolled')
       } else {
-        this.root.classList.remove('is-scrolled')
+        this.element.classList.remove('is-scrolled')
       }
 
       // console.log('scroll', scrollTop)
@@ -171,42 +171,42 @@ class AppBar {
   }
 
   flexible (e, scrollTop) {
-    var size = offset(this.root, 'height')
-    // console.log('flexible', size, this.root.offsetHeight, scrollTop)
+    var size = offset(this.element, 'height')
+    // console.log('flexible', size, this.element.offsetHeight, scrollTop)
     // if (scrollTop < this.size) {
     //
     var height = '64'
     if (size < height) {
-      this.root.style.height = height + 'px'
+      this.element.style.height = height + 'px'
     } else {
       height = this.size - scrollTop
       if (height < 64) height = 64
-      this.root.style.height = height + 'px'
+      this.element.style.height = height + 'px'
     }
 
-    // console.log('scroll', this.root.style.top, scrollTop)
+    // console.log('scroll', this.element.style.top, scrollTop)
 
     // if (scrollTop > 50) {
-    //   this.root.style.trans = scrollTop + 'px'
+    //   this.element.style.trans = scrollTop + 'px'
     // } else {
-    //   this.root.style.top = scrollTop + 'px'
+    //   this.element.style.top = scrollTop + 'px'
     // }
     // }
-      // this.root.style.top = scrollTop + 'px'
-      // this.root.style.height = this.size - scrollTop
+      // this.element.style.top = scrollTop + 'px'
+      // this.element.style.height = this.size - scrollTop
     // } else {
     //   console.log('size scroll', this.size, scrollTop)
 
-    //   this.root.style.height = this.size - scrollTop + 'px'
-    //   // this.root.style.top = scrollTop + 'px'
+    //   this.element.style.height = this.size - scrollTop + 'px'
+    //   // this.element.style.top = scrollTop + 'px'
     // }
   }
 
   fixed (e, scrollTop) {
     if (scrollTop > 0) {
-      this.root.style.transform = 'translateY(' + scrollTop + 'px)'
+      this.element.style.transform = 'translateY(' + scrollTop + 'px)'
     } else {
-      this.root.style.transform = 'translateY(' + scrollTop + 'px)'
+      this.element.style.transform = 'translateY(' + scrollTop + 'px)'
     }
   }
 

package/src/banner.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import create from './component/create'
+import create from './mixin/create'
 import insert from './element/insert'
 import event from './element/event'
 import offset from './element/offset'
@@ -53,17 +53,17 @@ class Banner {
    * @return {Object} This class  instance
    */
   build () {
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     if (this.options.container) {
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
 
     return this
   }
 
   attach () {
-    event.add(this.root, 'click', (ev) => {
+    event.add(this.element, 'click', (ev) => {
       // console.log('click', ev.target)
 
       if (ev.target && ev.target.classList.contains('material-button')) {
@@ -76,18 +76,18 @@ class Banner {
       ev.stopPropagation()
     })
 
-    this.root.addEventListener('DOMNodeInserted', (e) => {
+    this.element.addEventListener('DOMNodeInserted', (e) => {
       // console.log('DOMNodeInserted', e.target)
       var textNode = e.target
 
-      if (textNode == this.root) {
+      if (textNode == this.element) {
         // console.log('banner root inserted', e.target)
         if (!this.wrapper) { this.wrap() }
         this.scroll(this.view)
       }
       this.updatePaddingView()
 
-      // if (textNode !== this.root) return
+      // if (textNode !== this.element) return
     })
   }
 
@@ -106,34 +106,34 @@ class Banner {
   }
 
   wrap () {
-    this.view = this.root.parentNode
+    this.view = this.element.parentNode
 
-    // console.log('wrap', this.root, this.view)
+    // console.log('wrap', this.element, this.view)
     this.wrapper = document.createElement('div')
 
     this.wrapper.classList.add('banner-wrapper')
 
-    this.view.insertBefore(this.wrapper, this.root)
+    this.view.insertBefore(this.wrapper, this.element)
 
-    this.wrapper.appendChild(this.root)
+    this.wrapper.appendChild(this.element)
 
-    // insert(this.wrapper, this.root, 'before')
+    // insert(this.wrapper, this.element, 'before')
 
-    // insert(this.root, this.wrapper)
+    // insert(this.element, this.wrapper)
   }
 
   updatePaddingView () {
     // console.log('updatePaddingView', this.view)
 
-    this.height = offset(this.root, 'height')
+    this.height = offset(this.element, 'height')
     if (!this.paddingview) {
       this.paddingview = window.getComputedStyle(this.view)['padding-top']
     }
 
-      // this.root.style.top = 'top: ' + this.paddingview
+      // this.element.style.top = 'top: ' + this.paddingview
 
         // console.log('paddingTop', padding)
-        // if (!padding) padding = window.getComputedStyle(this.root.parentNode, 'padding')
+        // if (!padding) padding = window.getComputedStyle(this.element.parentNode, 'padding')
         // console.log('padding', padding)
 
     var padding = parseInt(this.paddingview, 10)
@@ -155,7 +155,7 @@ class Banner {
   }
 
   scroll (view) {
-    // console.log('initScroll', offset(this.root, 'top'), offset(view, 'top'))
+    // console.log('initScroll', offset(this.element, 'top'), offset(view, 'top'))
 
     var isBody = false
 
@@ -188,8 +188,8 @@ class Banner {
       scrollTop = view.scrollTop
     }
 
-      // var o = offset(this.root, 'top') - offset(view, 'top')
-      // console.log('o', this.root.offsetTop)
+      // var o = offset(this.element, 'top') - offset(view, 'top')
+      // console.log('o', this.element.offsetTop)
 
     var padding = this.paddingview
     padding = parseInt(padding, 10)
@@ -222,7 +222,7 @@ class Banner {
   }
 
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.element, container, context)
 
     return this
   }

package/src/button.js

@@ -1,8 +1,8 @@
 'use strict'
 
-import create from './component/create'
-import control from './component/control'
-import ripple from './component/ripple'
+import create from './mixin/create'
+import control from './mixin/control'
+import ripple from './module/ripple'
 
 import insert from './element/insert'
 
@@ -13,7 +13,7 @@ const defaults = {
   prefix: 'material',
   class: 'button',
   tag: 'button',
-  ripple: false,
+  ripple: true,
   events: [
     ['root.click', 'handleClick'],
     ['root.mouseover', 'handleMouseOver']
@@ -63,9 +63,6 @@ class Button {
     this.element = this.element || {}
 
     // init module$
-    if (this.options.ripple) {
-      ripple(this)
-    }
 
     this.emit('init')
   }
@@ -78,21 +75,21 @@ class Button {
   build () {
     this.element = {}
 
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     this.options.label = this.options.label || this.options.text
 
-    this.root.setAttribute('aria-label', this.options.label || this.options.name)
+    this.element.setAttribute('aria-label', this.options.label || this.options.name)
 
     if (this.options.title) {
-      this.root.setAttribute('title', this.options.title)
+      this.element.setAttribute('title', this.options.title)
     }
 
     this.label(this.options.label)
     this.icon(this.options.icon)
 
     if (this.options.tooltip) {
-      this.root.dataset.tooltip = this.options.tooltip
+      this.element.dataset.tooltip = this.options.tooltip
     }
 
     if (this.options.container) {
@@ -101,10 +98,12 @@ class Button {
       } else {
         this.container = this.options.container
       }
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
 
-    this.emit('built', this.root)
+    if (this.options.ripple) {
+      ripple(this.element)
+    }
 
     return this
   }
@@ -116,7 +115,7 @@ class Button {
    * @return {?}           [description]
    */
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.element, container, context)
 
     return this
   }
@@ -126,18 +125,18 @@ class Button {
    * @return {?} [description]
    */
   setup () {
-    this.element.input = this.root
+    this.element.input = this.element
 
     if (this.options.name) {
-      this.root.dataset.name = this.options.name
+      this.element.dataset.name = this.options.name
     }
 
     // if (this.options.label) {
-    //   this.root.title = this.options.label
+    //   this.element.title = this.options.label
     // }
 
     if (this.options.content) {
-      this.root.innerHTML = this.options.content
+      this.element.innerHTML = this.options.content
     }
 
     if (this.options.disabled === true) {
@@ -195,7 +194,7 @@ class Button {
   }
 
   destroy () {
-    this.container.removeChild(this.root)
+    this.container.removeChild(this.element)
   }
 
   /**

package/src/calendar.js

@@ -112,12 +112,12 @@ class Calendar {
     // define main tag
     var tag = this.options.tag || 'div'
 
-    this.root = create(tag, this.options.prefix + '-' + this.options.class)
+    this.element = create(tag, this.options.prefix + '-' + this.options.class)
 
     this.buildWeek()
 
     if (this.options.container) {
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
 
     return this
@@ -143,7 +143,7 @@ class Calendar {
    */
   buildHeader () {
     this.header = create('header')
-    insert(this.header, this.root)
+    insert(this.header, this.element)
 
     this.buildHeadline()
 
@@ -266,7 +266,7 @@ class Calendar {
 
     this.body = create('div')
     css.add(this.body, this.options.class + '-body')
-    insert(this.body, this.root)
+    insert(this.body, this.element)
 
     var hours = create('div')
     css.add(hours, 'hours')
@@ -422,7 +422,7 @@ class Calendar {
   next () {
     this.firstDay.setDate(this.firstDay.getDate() + this.options.rangedays)
 
-    this.root.innerHTML = ''
+    this.element.innerHTML = ''
 
     this.buildWeek()
   }
@@ -434,7 +434,7 @@ class Calendar {
   back () {
     this.firstDay.setDate(this.firstDay.getDate() - this.options.rangedays)
 
-    this.root.innerHTML = ''
+    this.element.innerHTML = ''
 
     this.buildWeek()
   }
@@ -448,7 +448,7 @@ class Calendar {
     date = date || new Date()
 
     this.firstDay = this.getFirstDayOfWeek(this.date)
-    this.root.innerHTML = ''
+    this.element.innerHTML = ''
 
     this.buildWeek()
   }
@@ -459,7 +459,7 @@ class Calendar {
 
   empty () {
     console.log('empty')
-    this.root.innerHTML = ''
+    this.element.innerHTML = ''
   }
 }
 

package/src/card.js

@@ -1,8 +1,8 @@
 'use strict'
 
 // import modules
-import create from './component/create'
-import insert from './component/insert'
+import create from './mixin/create'
+import insert from './mixin/insert'
 // import components
 import Layout from './layout'
 
@@ -33,10 +33,10 @@ class Card {
    * @return {Object} The class instance
    */
   build () {
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     if (this.options.layout) {
-      this.layout = new Layout(this.options.layout, this.root)
+      this.layout = new Layout(this.options.layout, this.element)
     }
   }
 }

package/src/checkbox.js

@@ -1,8 +1,8 @@
 'use strict'
 
-import events from './component/events'
-import control from './component/control'
-import label from './component/label'
+import events from './mixin/events'
+import control from './mixin/control'
+import label from './mixin/label'
 
 import insert from './element/insert'
 import build from './element/build'
@@ -79,13 +79,13 @@ class Checkbox {
    */
   build () {
     this.element = build(this.options.build)
-    this.root = this.element.root
+    this.element = this.element.root
 
     this.element.control.innerHTML = icon
 
     var text = this.options.text || this.options.label
 
-    this.element.label = label(this.root, text, this.options)
+    this.element.label = label(this.element, text, this.options)
 
     this.element.input.setAttribute('type', 'checkbox')
     this.element.input.setAttribute('name', this.options.name)
@@ -98,7 +98,7 @@ class Checkbox {
     if (this.options.disabled) {
       this.disabled = this.options.disabled
       this.element.input.setAttribute('disabled', 'disabled')
-      css.add(this.root, 'is-disabled')
+      css.add(this.element, 'is-disabled')
     }
 
     if (this.options.checked) {
@@ -111,7 +111,7 @@ class Checkbox {
 
     // insert if container options is given
     if (this.options.container) {
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
 
     return this
@@ -148,7 +148,7 @@ class Checkbox {
    * @return {?}           [description]
    */
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.element, container, context)
 
     return this
   }

package/src/component.js

@@ -1,8 +1,8 @@
 'use strict'
 
-import create from './component/create'
-import events from './component/events'
-import insert from './component/insert'
+import create from './mixin/create'
+import events from './mixin/events'
+import insert from './mixin/insert'
 
 import emitter from './module/emitter'
 
@@ -59,7 +59,7 @@ class Component {
    * @return {Object} This class instance
    */
   build () {
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     if (this.options.container) {
       this.insert(this.options.container)

package/src/container.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import create from './component/create'
+import create from './mixin/create'
 import insert from './element/insert'
 import emitter from './module/emitter'
 
@@ -50,17 +50,17 @@ class Container {
    * @return {Object} This class  instance
    */
   build () {
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     if (this.options.container) {
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
 
     return this
   }
 
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.element, container, context)
     return this
   }
 }