material 0.6.1 → 0.7.0

package/src/control/button.js

@@ -1,117 +1,107 @@
-import emitter from '../module/emitter'
-import attach from '../module/attach'
-
-import dataset from '../view/dataset'
-
-const defaults = {
-  class: 'button',
-  tag: 'button',
-  styles: ['style', 'color'],
-  stopPropagation: false,
-  events: [
-    ['root.click', 'click'],
-    ['root.mousedown', 'mousedown'],
-    ['root.mouseup', 'mouseup'],
-    ['root.mouseleave', 'mouseup'],
-    ['root.touchstart', 'mousedown'],
-    ['root.touchend', 'mouseup']
-  ]
+import EventEmitter from '../mixin/emitter'
 
-}
+import build from '../module/build'
+import display from '../mixin/display'
+import bindEvents from '../module/events'
+
+import dataset from '../module/dataset'
+import ripple from '../module/ripple'
 
-class Button {
+class Button extends EventEmitter{
   static isComponent () {
     return true
   }
 
+  static defaults = {
+    class: 'button',
+    tag: 'button',
+    modules: [build, bindEvents],
+    styles: ['style', 'color'],
+    ripple: false,
+    stopPropagation: false,
+    events: [
+      ['element.click', 'click'],
+      ['element.mousedown', 'mousedown'],
+      ['element.mouseup', 'mouseup'],
+      ['element.mouseleave', 'mouseup'],
+      ['element.touchstart', 'mousedown'],
+      ['element.touchend', 'mouseup']
+    ]
+  }
+
   /**
    * Constructor
    * @param  {Object} options - Component options
    * @return {Object} Class instance
    */
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter, attach)
-    // console.log('options', options)
-
-    this.init()
-
-    return this
-  }
+    super()
 
-  init () {
+    this.init(options)
     this.build()
     this.setup()
-    this.attach()
+    this.bindEvents()
 
     if (this.options.container) {
       this.append(this.options.container)
     }
+
+    return this
   }
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.root = document.createElement(this.options.tag)
+  init (options) {
+    this.options = Object.assign({}, Button.defaults, options || {})
+    Object.assign(this, build, display, bindEvents)
 
-    if (this.options.class !== 'button') {
-      this.root.setAttribute('class', 'button ' + this.options.class)
-    } else {
-      this.root.classList.add('button')
-    }
+  }
 
+  setup () {
     this.styleAttributes()
 
     this.buildIcon()
     this.buildLabel()
 
     if (this.options.text) {
-      this.root.innerHTML = this.root.innerHTML + this.options.text
+      this.element.innerHTML = this.element.innerHTML + this.options.text
     }
 
-    return this
-  }
-
-  setup () {
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     if (this.options.type) {
-      this.root.setAttribute('type', this.options.type)
+      this.element.setAttribute('type', this.options.type)
     } else {
-      this.root.setAttribute('type', 'button')
+      this.element.setAttribute('type', 'button')
     }
 
     if (this.options.name) {
-      this.root.setAttribute('name', this.options.name)
+      this.element.setAttribute('name', this.options.name)
     }
 
     if (this.options.value) {
-      this.root.setAttribute('value', this.options.value)
+      this.element.setAttribute('value', this.options.value)
     }
 
     if (this.options.title) {
-      this.root.setAttribute('title', this.options.title)
+      this.element.setAttribute('title', this.options.title)
     }
 
-    this.root.setAttribute('aria-label', this.options.text || this.options.label || this.options.class)
+    this.element.setAttribute('aria-label', this.options.text || this.options.label || this.options.class)
 
     if (this.options.tooltip) {
-      this.root.setAttribute('data-tooltip', this.options.tooltip)
+      this.element.setAttribute('data-tooltip', this.options.tooltip)
     }
 
     if (this.options.case) {
-      this.root.classList.add(this.options.case + '-case')
+      this.element.classList.add(this.options.case + '-case')
     }
   }
 
   append (container) {
     container = container || this.options.container
     if (this.options.container) {
-      container.appendChild(this.root)
+      container.appendChild(this.element)
     }
   }
 
@@ -123,7 +113,7 @@ class Button {
       this.label.classList.add('label')
       this.label.innerHTML = this.options.label
 
-      this.root.appendChild(this.label)
+      this.element.appendChild(this.label)
     }
   }
 
@@ -135,25 +125,25 @@ class Button {
       this.icon.classList.add('icon')
       this.icon.innerHTML = this.options.icon
 
-      this.root.appendChild(this.icon)
+      this.element.appendChild(this.icon)
     }
   }
 
   styleAttributes () {
     if (this.options.style) {
-      this.root.classList.add('style-' + this.options.style)
+      this.element.classList.add('style-' + this.options.style)
     }
 
     if (this.options.size) {
-      this.root.classList.add(this.options.size + '-size')
+      this.element.classList.add(this.options.size + '-size')
     }
 
     if (this.options.color) {
-      this.root.classList.add('color-' + this.options.color)
+      this.element.classList.add('color-' + this.options.color)
     }
 
     if (this.options.bold) {
-      this.root.classList.add('bold')
+      this.element.classList.add('bold')
     }
   }
 
@@ -164,10 +154,10 @@ class Button {
    * @return {Object} The class instance
    */
   set (prop, value) {
-    // console.log('set', this.root, prop, value)
+    // console.log('set', this.element, prop, value)
     switch (prop) {
       case 'value':
-        this.root.value = value
+        this.element.value = value
         break
       case 'label':
         if (this.label) {
@@ -175,16 +165,16 @@ class Button {
         }
         break
       case 'text':
-        this.root.innerHTML = value
+        this.element.innerHTML = value
         break
       case 'icon':
-        if (this.label) {
+        if (this.icon) {
           this.icon.innerHTML = value
         }
         break
       default:
         // console.log('prop', prop)
-        this.root.innerHTML = prop
+        this.element.innerHTML = prop
     }
 
     return this
@@ -200,7 +190,7 @@ class Button {
     if (this.label) {
       this.setLabel(value)
     } else {
-      this.root.innerHTML = value
+      this.element.innerHTML = value
     }
   }
 
@@ -213,34 +203,20 @@ class Button {
   get (prop, value) {
     switch (prop) {
       case 'value':
-        return this.root.value
+        return this.element.value
       case 'label':
         return this.label.innerHTML
       default:
-        return this.root.value
+        return this.element.value
     }
   }
 
   disable () {
-    this.root.disabled = true
+    this.element.disabled = true
   }
 
   enable () {
-    this.root.disabled = false
-  }
-
-  hide () {
-    this.root.classList.add('hide')
-  }
-
-  show () {
-    this.root.classList.remove('hide')
-  }
-
-  destroy () {
-    if (this.root && this.root.parentNode) {
-      this.root.parentNode.removeChild(this.root)
-    }
+    this.element.disabled = false
   }
 
   click (ev) {
@@ -252,11 +228,11 @@ class Button {
   }
 
   mousedown (ev) {
-    this.root.classList.add('pushed')
+    this.element.classList.add('pushed')
   }
 
   mouseup (ev) {
-    this.root.classList.remove('pushed')
+    this.element.classList.remove('pushed')
   }
 }
 

package/src/control/button.new.js

@@ -41,17 +41,17 @@ class Button {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement(this.options.tag)
+    this.element = document.createElement(this.options.tag)
 
     if (this.options.class !== 'button') {
-      this.root.classList.add('button')
+      this.element.classList.add('button')
     }
 
-    this.root.classList.add(this.options.class)
+    this.element.classList.add(this.options.class)
     this.styleAttributes()
 
     if (this.options.text) {
-      this.root.innerHTML = this.options.text
+      this.element.innerHTML = this.options.text
     }
 
     if (this.options.label) {
@@ -63,33 +63,33 @@ class Button {
 
   setup () {
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     if (this.options.type) {
-      this.root.setAttribute('type', this.options.type)
+      this.element.setAttribute('type', this.options.type)
     } else {
-      this.root.setAttribute('type', 'button')
+      this.element.setAttribute('type', 'button')
     }
 
     if (this.options.name) {
-      this.root.setAttribute('name', this.options.name)
+      this.element.setAttribute('name', this.options.name)
     }
 
-    this.root.setAttribute('aria-label', this.options.text || this.options.label || this.options.class)
+    this.element.setAttribute('aria-label', this.options.text || this.options.label || this.options.class)
 
     if (this.options.tooltip) {
-      this.root.setAttribute('data-tooltip', this.options.tooltip)
+      this.element.setAttribute('data-tooltip', this.options.tooltip)
     }
 
     if (this.options.case) {
-      this.root.classList.add(this.options.case + '-case')
+      this.element.classList.add(this.options.case + '-case')
     }
   }
 
   append (container) {
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
   }
 
@@ -97,7 +97,7 @@ class Button {
     if (this.options.label) {
       this.label = document.createElement('label')
       this.label.innerHTML = this.options.label
-      this.root.appendChild(this.label)
+      this.element.appendChild(this.label)
     }
   }
 
@@ -105,26 +105,26 @@ class Button {
     if (this.options.icon) {
       this.label = document.createElement('label')
       this.label.innerHTML = this.options.label
-      this.root.appendChild(this.label)
+      this.element.appendChild(this.label)
     }
   }
 
   styleAttributes () {
     if (this.options.style) {
-      this.root.classList.add('style-' + this.options.style)
+      this.element.classList.add('style-' + this.options.style)
     }
 
     if (this.options.color) {
-      this.root.classList.add('color-' + this.options.color)
+      this.element.classList.add('color-' + this.options.color)
     }
 
     if (this.options.bold) {
-      this.root.classList.add('bold')
+      this.element.classList.add('bold')
     }
   }
 
   attach () {
-    this.root.addEventListener('click', (ev) => {
+    this.element.addEventListener('click', (ev) => {
       this.emit('click', ev)
     })
   }
@@ -138,7 +138,7 @@ class Button {
   set (prop, value) {
     switch (prop) {
       case 'value':
-        this.root.value = value
+        this.element.value = value
         break
       case 'label':
         if (this.ui.label) {
@@ -151,7 +151,7 @@ class Button {
         }
         break
       default:
-        this.root.value = value
+        this.element.value = value
     }
 
     return this
@@ -166,24 +166,24 @@ class Button {
   get (prop, value) {
     switch (prop) {
       case 'value':
-        return this.root.value
+        return this.element.value
       case 'label':
         return this.ui.label.innerHTML
       default:
-        return this.root.value
+        return this.element.value
     }
   }
 
   disable () {
-    this.root.disabled = true
+    this.element.disabled = true
   }
 
   enable () {
-    this.root.disabled = false
+    this.element.disabled = false
   }
 
   destroy () {
-    this.root.parentNode.removeChild(this.root)
+    this.element.parentNode.removeChild(this.element)
   }
 }
 

package/src/control/datehour.js

@@ -33,11 +33,11 @@ class DateHour {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement(this.options.tag)
-    this.root.classList.add(this.options.class)
+    this.element = document.createElement(this.options.tag)
+    this.element.classList.add(this.options.class)
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     return this
@@ -47,7 +47,7 @@ class DateHour {
     // console.log('set', src)
     var d = new Date(date)
     var formatted = this.format(d)
-    this.root.innerHTML = formatted
+    this.element.innerHTML = formatted
   }
 
   format (date) {

package/src/control/dialog.js

@@ -1,5 +1,3 @@
-'use strict'
-
 // dialog related modules
 import emitter from '../module/emitter'
 import attach from '../module/attach'
@@ -27,7 +25,7 @@ let defaults = {
     ]
   ],
   events: [
-    ['root.click', 'onClickRoot'],
+    ['element.click', 'onClickRoot'],
     ['surface.click', 'onClick'],
     ['ui.ok.click', 'ok'],
     ['ui.cancel.click', 'cancel'],
@@ -59,26 +57,28 @@ class Dialog {
    * @return {Object} The class instance
    */
   build () {
-    this.root = document.createElement('div')
-    this.root.classList.add('dialog')
+    this.element = document.createElement('div')
+    this.element.classList.add('dialog')
+
+    this.element = this.element
 
     if (this.options.class !== 'dialog') {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
 
     if (this.options.position) {
-      this.root.classList.add('position-' + this.options.position)
+      this.element.classList.add('position-' + this.options.position)
     }
 
     this.surface = document.createElement('div')
     this.surface.classList.add('surface')
-    this.root.appendChild(this.surface)
+    this.element.appendChild(this.surface)
 
     this.layout = new Layout(this.options.layout, this.surface)
     this.ui = this.layout.component
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     if (this.options.display === 'show') {
@@ -149,6 +149,7 @@ class Dialog {
   }
 
   onClickRoot (e) {
+    // console.log('onClickRoot')
     e.stopPropagation()
     if (!this.options.modal) {
       this.destroy()
@@ -156,11 +157,11 @@ class Dialog {
   }
 
   emphase () {
-    this.root.classList.add('emphase')
+    this.element.classList.add('emphase')
     var it
     it = setTimeout(() => {
       clearTimeout(it)
-      this.root.classList.remove('emphase')
+      this.element.classList.remove('emphase')
     }, 100)
   }
 

package/src/control/file.js

@@ -28,18 +28,18 @@ class File {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement('div')
-    this.root.classList.add('file')
+    this.element = document.createElement('div')
+    this.element.classList.add('file')
 
     if (this.options.class !== 'file') {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
 
     this.buildLabel()
     this.buildInput()
 
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     if (this.options.focus) {
@@ -47,7 +47,7 @@ class File {
     }
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     return this
@@ -58,18 +58,18 @@ class File {
       this.label = document.createElement('label')
       this.label.classList.add('label')
       this.label.innerHTML = this.options.label
-      this.root.appendChild(this.label)
+      this.element.appendChild(this.label)
     }
   }
 
   buildInput () {
     this.field = document.createElement('div')
     this.field.classList.add('field')
-    this.root.appendChild(this.field)
+    this.element.appendChild(this.field)
 
     this.input = document.createElement('input')
     this.input.setAttribute('type', 'file')
-    this.root.appendChild(this.input)
+    this.element.appendChild(this.input)
 
     attributes(this.input, this.options)
 

package/src/control/image.js

@@ -38,14 +38,14 @@ class Image {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement(this.options.tag)
-    this.root.classList.add(this.options.class)
+    this.element = document.createElement(this.options.tag)
+    this.element.classList.add(this.options.class)
     if (this.options.class !== 'image') {
-      this.root.classList.add('image')
+      this.element.classList.add('image')
     }
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     return this
@@ -54,7 +54,7 @@ class Image {
   set (src) {
     // console.log('set', src)
     if (!src) {
-      this.root.style.backgroundImage = ''
+      this.element.style.backgroundImage = ''
     } else {
       var url = null
 
@@ -75,7 +75,7 @@ class Image {
         url = src.url
       }
 
-      this.root.style.backgroundImage = 'url(' + url + src.filename + ')'
+      this.element.style.backgroundImage = 'url(' + url + src.filename + ')'
     }
   }
 

package/src/control/link.js

@@ -24,11 +24,11 @@ class Link {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement(this.options.tag)
-    this.root.classList.add(this.options.class)
+    this.element = document.createElement(this.options.tag)
+    this.element.classList.add(this.options.class)
 
     if (this.options.class !== 'link') {
-      this.root.classList.add('link')
+      this.element.classList.add('link')
     }
 
     if (this.options.link) {
@@ -36,15 +36,15 @@ class Link {
     }
 
     if (this.options.target !== 'blank') {
-      this.root.target = this.options.target
+      this.element.target = this.options.target
     }
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     if (this.options.text) {
-      this.root.innerHTML = this.options.text
+      this.element.innerHTML = this.options.text
     }
 
     return this
@@ -55,13 +55,13 @@ class Link {
     if (link === undefined) return
 
     if (this.options.target === 'blank') {
-      this.root.href = '#'
-      this.root.addEventListener('click', () => {
+      this.element.href = '#'
+      this.element.addEventListener('click', () => {
         window.open(link)
         return false
       })
     } else {
-      this.root.href = link
+      this.element.href = link
     }
   }
 }