material 0.6.2 → 0.7.0

package/src/control/list.js

@@ -49,10 +49,10 @@ class List {
 
     var label = this.options.label || ''
 
-    this.root.innerHTML = label + text
+    this.element.innerHTML = label + text
 
     if (this.options.spaceAfter) {
-      this.root.innerHTML = this.root.innerHTML + ' '
+      this.element.innerHTML = this.element.innerHTML + ' '
     }
   }
 
@@ -60,7 +60,7 @@ class List {
 
   setText (text) {
     // console.log('setText', text)
-    this.root.innerHTML = text
+    this.element.innerHTML = text
   }
 }
 

package/src/control/loading.js

@@ -62,16 +62,16 @@ class Loading {
    * @return {Object} This class instance
    */
   build (options) {
-    this.root = document.createElement(this.options.tag)
+    this.element = document.createElement(this.options.tag)
     this.classify()
 
     if (this.options.type === 'circular') {
-      this.root.innerHTML = this.options.circular
+      this.element.innerHTML = this.options.circular
     } if (this.options.type === 'indeterminate') {
       this.bar = document.createElement(this.options.tag)
       this.bar.classList.add('bar')
-      this.root.classList.add('type-indeterminate')
-      this.root.appendChild(this.bar)
+      this.element.classList.add('type-indeterminate')
+      this.element.appendChild(this.bar)
     }
 
     return this
@@ -79,16 +79,16 @@ class Loading {
 
   classify () {
     if (this.options.class !== 'loading') {
-      this.root.setAttribute('class', this.options.class + ' ' + this.options.class)
+      this.element.setAttribute('class', this.options.class + ' ' + this.options.class)
     } else {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
   }
 
   append (container) {
     container = container || this.options.container
     if (this.options.container) {
-      container.appendChild(this.root)
+      container.appendChild(this.element)
     }
   }
 
@@ -101,7 +101,7 @@ class Loading {
 
     clearTimeout(this.showTimeout)
     this.showTimeout = setTimeout(() => {
-      this.root.classList.add('show')
+      this.element.classList.add('show')
     }, this.options.delay)
 
     this.visible = true
@@ -110,7 +110,7 @@ class Loading {
   }
 
   showNow () {
-    this.root.classList.add('show')
+    this.element.classList.add('show')
 
     this.visible
 
@@ -119,7 +119,7 @@ class Loading {
 
   hide () {
     clearTimeout(this.showTimeout)
-    this.root.classList.remove('show')
+    this.element.classList.remove('show')
     this.visible = false
     return this
   }

package/src/control/menu.js

@@ -1,8 +1,8 @@
-import EventEmitter from '../component/emitter'
+import EventEmitter from '../mixin/emitter'
 // menu related modules
 import build from '../module/build'
 import bindEvents from '../module/events'
-import display from '../module/display'
+import display from '../mixin/display'
 
 import Element from '../element'
 import Button from './button'

package/src/control/search.js

@@ -40,32 +40,32 @@ class Search {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement('div')
-    this.root.classList.add('search')
+    this.element = document.createElement('div')
+    this.element.classList.add('search')
 
     if (this.options.class !== 'search') {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
 
     if (this.options.icon) {
       this.icon = document.createElement('i')
       this.icon.classList.add('icon')
       this.icon.innerHTML = this.options.icon
-      this.root.appendChild(this.icon)
+      this.element.appendChild(this.icon)
     }
 
     this.input = document.createElement('input')
     this.input.classList.add('input')
-    this.root.appendChild(this.input)
+    this.element.appendChild(this.input)
 
     this.cancel = new Button({
-      container: this.root,
+      container: this.element,
       class: 'clear',
       icon: this.options.iconCancel
     })
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     return this
@@ -90,8 +90,8 @@ class Search {
   }
 
   set (email) {
-    this.root.innerHTML = email
-    this.root.setAttribute('href', 'mailto:' + email)
+    this.element.innerHTML = email
+    this.element.setAttribute('href', 'mailto:' + email)
   }
 }
 

package/src/control/select.js

@@ -32,18 +32,18 @@ class Select {
    */
   build () {
     var tag = this.options.tag || 'span'
-    this.root = document.createElement(tag)
-    this.root.classList.add('select')
+    this.element = document.createElement(tag)
+    this.element.classList.add('select')
 
     if (this.options.class !== 'select') {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
 
     this.buildLabel()
     this.buildInput()
 
     if (this.container) {
-      this.container.appendChild(this.root)
+      this.container.appendChild(this.element)
     }
 
     return this
@@ -54,14 +54,14 @@ class Select {
       this.label = document.createElement('span')
       this.label.classList.add('label')
       this.label.innerHTML = this.options.label
-      this.root.appendChild(this.label)
+      this.element.appendChild(this.label)
     }
   }
 
   buildInput () {
     this.input = document.createElement('select')
     this.input.classList.add('input')
-    this.root.appendChild(this.input)
+    this.element.appendChild(this.input)
 
     this.input.addEventListener('change', () => {
       // console.log('change', this.input[this.input.selectedIndex].value)

package/src/control/selecter.js

@@ -51,7 +51,7 @@ class Selecter {
 
   setup () {
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     // console.log('attribute', this.ui.input, this.options)
@@ -62,7 +62,7 @@ class Selecter {
     }
 
     if (this.options.tooltip) {
-      this.root.setAttribute('data-tooltip', this.options.tooltip)
+      this.element.setAttribute('data-tooltip', this.options.tooltip)
     }
 
     if (this.options.label) {
@@ -72,7 +72,7 @@ class Selecter {
     this.ui.input.setAttribute('aria-label', this.options.name)
 
     if (this.options.case) {
-      this.root.classList.add(this.options.case + '-case')
+      this.element.classList.add(this.options.case + '-case')
     }
   }
   /**
@@ -81,14 +81,14 @@ class Selecter {
    */
   build () {
     var tag = this.options.tag || 'span'
-    this.root = document.createElement(tag)
-    this.root.classList.add('selecter')
+    this.element = document.createElement(tag)
+    this.element.classList.add('selecter')
 
     if (this.options.class !== 'selecter') {
-      addClass(this.root, this.options.class)
+      addClass(this.element, this.options.class)
     }
 
-    this.layout = new Layout(this.options.layout, this.root)
+    this.layout = new Layout(this.options.layout, this.element)
     this.ui = this.layout.component
 
     // console.log('ui', this.ui)
@@ -99,7 +99,7 @@ class Selecter {
     this.setList(this.options.list)
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
   }
 
@@ -110,13 +110,13 @@ class Selecter {
     this.ui.icon.classList.add('icon')
     this.ui.icon.innerHTML = this.options.icon
 
-    this.root.insertBefore(this.ui.icon, this.ui.input)
+    this.element.insertBefore(this.ui.icon, this.ui.input)
   }
 
   buildInput () {
     this.input = document.createElement('select')
     this.input.classList.add('input')
-    this.root.appendChild(this.input)
+    this.element.appendChild(this.input)
 
     this.input.addEventListener('change', () => {
       // console.log('change', this.input[this.input.selectedIndex].value)
@@ -154,19 +154,19 @@ class Selecter {
 
   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')
     }
   }
   showList () {
@@ -216,7 +216,7 @@ class Selecter {
       this.ui.value.innerHTML = this.values[value]
     }
 
-    this.selected = this.root.querySelector('[data-value=' + value + ']')
+    this.selected = this.element.querySelector('[data-value=' + value + ']')
 
     // console.log('item', this.selected)
     if (this.selected) {

package/src/control/snackbar.js

@@ -1,9 +1,9 @@
 // base class
-import EventEmitter from '../component/emitter'
+import EventEmitter from '../mixin/emitter'
 // related modules
 import build from '../module/build'
 import bindEvents from '../module/events'
-import display from '../module/display'
+import display from '../mixin/display'
 // ui element
 import Text from './text'
 import Button from './button'
@@ -27,7 +27,7 @@ class Snackbar extends EventEmitter {
 
   constructor (options) {
     super()
-    
+
     this.init(options)
     this.build(this.constructor)
     this.render()    
@@ -48,11 +48,11 @@ class Snackbar extends EventEmitter {
   }
 
   buildSnackbarContainer (container = document.body) {
-    console.log('buildSnackbarContainer', container)
+    // console.log('buildSnackbarContainer', container)
 
     let snackbarContainer = container.querySelector('.snackbars')
 
-    console.log('snackbarContainer', snackbarContainer)
+    // console.log('snackbarContainer', snackbarContainer)
 
     if (!snackbarContainer) {
       this.options.container = document.createElement('div')
@@ -65,6 +65,7 @@ class Snackbar extends EventEmitter {
 
   render () {
     this.ui.text.set(this.options.text)
+
     if (this.options.action) {
       this.ui.action.set(this.options.action)
       this.ui.action.element.classList.add('show')
@@ -76,6 +77,7 @@ class Snackbar extends EventEmitter {
   }
 
   action () {
+    // console.log('action')
     this.emit('action')
     this.destroy()
   }

package/src/control/switch.js

@@ -50,14 +50,14 @@ class Switch {
    */
   build () {
     var tag = this.options.tag || 'span'
-    this.root = document.createElement(tag)
-    this.root.classList.add('switch')
+    this.element = document.createElement(tag)
+    this.element.classList.add('switch')
 
     if (this.options.class !== 'switch') {
-      addClass(this.root, this.options.class)
+      addClass(this.element, this.options.class)
     }
 
-    this.layout = new Layout(this.options.layout, this.root)
+    this.layout = new Layout(this.options.layout, this.element)
     this.ui = this.layout.component
 
     // console.log('ui', this.ui)
@@ -68,13 +68,13 @@ class Switch {
     this.buildLabel()
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
   }
 
   setup () {
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     // console.log('attribute', this.ui.input, this.options)
@@ -89,13 +89,13 @@ class Switch {
     }
 
     if (this.options.tooltip) {
-      this.root.setAttribute('data-tooltip', this.options.tooltip)
+      this.element.setAttribute('data-tooltip', this.options.tooltip)
     }
 
     this.ui.input.setAttribute('aria-label', this.options.name)
 
     if (this.options.case) {
-      this.root.classList.add(this.options.case + '-case')
+      this.element.classList.add(this.options.case + '-case')
     }
   }
 
@@ -111,7 +111,7 @@ class Switch {
       this.ui.label.setAttribute('for', this.options.name)
     }
 
-    this.root.insertBefore(this.ui.label, this.ui.input)
+    this.element.insertBefore(this.ui.label, this.ui.input)
   }
 
   buildIcon () {
@@ -121,24 +121,24 @@ class Switch {
     this.ui.icon.classList.add('icon')
     this.ui.icon.innerHTML = this.options.icon
 
-    this.root.insertBefore(this.ui.icon, this.ui.input)
+    this.element.insertBefore(this.ui.icon, this.ui.input)
   }
 
   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')
     }
   }
 
@@ -228,7 +228,7 @@ class Switch {
   check (checked, silent) {
     // console.log('check', checked, silent)
     if (checked === true) {
-      this.root.classList.add('is-checked')
+      this.element.classList.add('is-checked')
       this.ui.input.checked = true
       this.checked = true
       this.value = true
@@ -236,7 +236,7 @@ class Switch {
         this.emit('change', this.checked)
       }
     } else {
-      this.root.classList.remove('is-checked')
+      this.element.classList.remove('is-checked')
       this.ui.input.checked = false
       this.checked = false
       this.value = false
@@ -254,7 +254,7 @@ class Switch {
   focus () {
     if (this.disabled === true) return this
 
-    this.root.classList.add('is-focused')
+    this.element.classList.add('is-focused')
     if (this.ui.input !== document.activeElement) { this.ui.input.focus() }
     return this
   }
@@ -264,7 +264,7 @@ class Switch {
    * @return {?} [description]
    */
   blur () {
-    this.root.classList.remove('is-focused')
+    this.element.classList.remove('is-focused')
     return this
   }
 }

package/src/control/switcher.js

@@ -30,26 +30,26 @@ class Switcher {
   }
 
   build () {
-    this.root = document.createElement(this.options.tag)
+    this.element = document.createElement(this.options.tag)
 
     if (this.options.class !== 'button') {
-      this.root.setAttribute('class', 'switcher ' + this.options.class)
+      this.element.setAttribute('class', 'switcher ' + this.options.class)
     } else {
-      this.root.classList.add('switcher')
+      this.element.classList.add('switcher')
     }
 
     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)
     }
 
     this.knob = document.createElement('span')
     this.knob.classList.add('knob')
-    this.root.appendChild(this.knob)
+    this.element.appendChild(this.knob)
 
     if (this.options.size) {
-      this.root.classList.add(this.options.size + '-size')
+      this.element.classList.add(this.options.size + '-size')
     }
 
     this.buildList(this.options.list)
@@ -59,17 +59,17 @@ class Switcher {
     }
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
   }
 
   buildList (list) {
     this.list = document.createElement('ul')
-    this.root.appendChild(this.list)
+    this.element.appendChild(this.list)
   }
 
   attach () {
-    this.root.addEventListener('click', (event) => {
+    this.element.addEventListener('click', (event) => {
       if (!event.target.dataset.switcher) return
       this.select(event.target)
     })
@@ -97,7 +97,7 @@ class Switcher {
 
   selectByName (name) {
     // console.log('selectByName', name)
-    var item = this.root.querySelector('[data-switcher="' + name + '"]')
+    var item = this.element.querySelector('[data-switcher="' + name + '"]')
     // console.log('item', item)
     if (item) {
       this.select(item)
@@ -106,7 +106,7 @@ class Switcher {
 
   preSelectByName (name) {
     // console.log('selectByName', name)
-    var item = this.root.querySelector('[data-switcher="' + name + '"]')
+    var item = this.element.querySelector('[data-switcher="' + name + '"]')
     // console.log('item', item)
     this.preselect(item)
   }
@@ -165,24 +165,24 @@ class Switcher {
   }
 
   setValue (value) {
-    // console.log('value', value, this.options.list, this.root)
+    // console.log('value', value, this.options.list, this.element)
     var list = this.options.list
     if (this.options.mode === 'unique') {
       for (var i = 0; i < list.length; i++) {
-        this.root.querySelector('[data-switcher="' + list[i] + '"]').classList.remove('selected')
+        this.element.querySelector('[data-switcher="' + list[i] + '"]').classList.remove('selected')
         if (list[i] == value) {
           this.selected = [value]
-          this.root.querySelector('[data-switcher="' + list[i] + '"]').classList.add('selected')
+          this.element.querySelector('[data-switcher="' + list[i] + '"]').classList.add('selected')
         }
       }
     } else {
       value = value || []
       this.selected = []
       for (var i = 0; i < list.length; i++) {
-        this.root.querySelector('[data-switcher="' + list[i] + '"]').classList.remove('selected')
+        this.element.querySelector('[data-switcher="' + list[i] + '"]').classList.remove('selected')
         if (value.indexOf(list[i]) !== -1) {
           this.selected.push(list[i])
-          this.root.querySelector('[data-switcher="' + list[i] + '"]').classList.add('selected')
+          this.element.querySelector('[data-switcher="' + list[i] + '"]').classList.add('selected')
         }
       }
     }

package/src/control/text.js

@@ -26,11 +26,11 @@ class Text {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement(this.options.tag)
-    addClass(this.root, this.options.class)
+    this.element = document.createElement(this.options.tag)
+    addClass(this.element, this.options.class)
 
     if (this.options.class !== 'text') {
-      this.root.classList.add('text')
+      this.element.classList.add('text')
     }
 
     if (this.options.text) {
@@ -38,7 +38,7 @@ class Text {
     }
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     return this
@@ -51,19 +51,19 @@ class Text {
     var label = this.options.label || ''
 
     if (this.options.textFirst) {
-      this.root.innerHTML = text + label
+      this.element.innerHTML = text + label
     } else {
-      this.root.innerHTML = label + text
+      this.element.innerHTML = label + text
     }
 
     if (this.options.spaceAfter) {
-      this.root.innerHTML = this.root.innerHTML + ' '
+      this.element.innerHTML = this.element.innerHTML + ' '
     }
   }
 
   setText (text) {
     // console.log('setText', text)
-    this.root.innerHTML = text
+    this.element.innerHTML = text
   }
 }