material 0.6.1 → 0.7.0

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
@@ -50,16 +50,20 @@ class Text {
 
     var label = this.options.label || ''
 
-    this.root.innerHTML = label + text
+    if (this.options.textFirst) {
+      this.element.innerHTML = text + label
+    } else {
+      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
   }
 }
 

package/src/control/textfield.js

@@ -42,11 +42,11 @@ class Text {
   build () {
     var tag = this.options.tag || 'div'
 
-    this.root = document.createElement(tag)
-    this.root.classList.add('textfield')
+    this.element = document.createElement(tag)
+    this.element.classList.add('textfield')
 
     if (this.options.class !== 'textfield') {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
 
     this.buildLabel()
@@ -57,11 +57,11 @@ class Text {
     }
 
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     if (this.container) {
-      this.container.appendChild(this.root)
+      this.container.appendChild(this.element)
     }
 
     return this
@@ -72,7 +72,7 @@ class Text {
       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)
     }
   }
 
@@ -83,7 +83,7 @@ class Text {
     }
     this.input = document.createElement(tag)
     this.input.classList.add('input')
-    this.root.appendChild(this.input)
+    this.element.appendChild(this.input)
 
     attributes(this.input, this.options)
 
@@ -99,12 +99,12 @@ class Text {
   }
 
   onFocus (ev) {
-    this.root.classList.add('focused')
+    this.element.classList.add('focused')
     this.emit('focus', ev)
   }
 
   onBlur (ev) {
-    this.root.classList.remove('focused')
+    this.element.classList.remove('focused')
     this.emit('blur', ev)
   }
 
@@ -120,7 +120,7 @@ class Text {
    * @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.setValue(value)
@@ -162,11 +162,11 @@ class Text {
   }
 
   hide () {
-    this.root.classList.add('hide')
+    this.element.classList.add('hide')
   }
 
   show () {
-    this.root.classList.remove('hide')
+    this.element.classList.remove('hide')
   }
 
   get () {

package/src/dialog.js

@@ -1,11 +1,11 @@
 'use strict'
 
 // dialog related modules
-import events from './component/events'
+import events from './mixin/events'
 import emitter from './module/emitter'
-import controller from './component/controller'
+import controller from './mixin/controller'
 import attach from './module/attach'
-import insert from './component/insert'
+import insert from './mixin/insert'
 import event from './element/event.js'
 import css from './module/css'
 
@@ -34,7 +34,7 @@ class Dialog {
     this.build()
     this.attach()
 
-    this.root.style.display = 'none'
+    this.element.style.display = 'none'
 
     return this
   }
@@ -65,27 +65,27 @@ class Dialog {
    * @return {Object} The class instance
    */
   build () {
-    this.root = document.createElement('div')
+    this.element = document.createElement('div')
 
-    css.add(this.root, 'material-dialog')
+    css.add(this.element, 'material-dialog')
 
     if (this.options.name) {
-      css.add(this.root, 'dialog-' + this.options.name)
+      css.add(this.element, 'dialog-' + this.options.name)
     }
 
     if (this.options.css) {
-      css.add(this.root, this.options.css)
+      css.add(this.element, this.options.css)
     }
 
     if (this.options.theme) {
-      css.add(this.root, this.options.theme + '-theme')
+      css.add(this.element, this.options.theme + '-theme')
     }
 
     this.surface = document.createElement('div')
 
     css.add(this.surface, 'dialog-surface')
 
-    this.insertElement(this.surface, this.root)
+    this.insertElement(this.surface, this.element)
 
     if (this.options.title) {
       this.buildTitle()
@@ -176,13 +176,13 @@ class Dialog {
   }
 
   close () {
-    css.add(this.root, 'dialog-closing')
+    css.add(this.element, 'dialog-closing')
 
     var delayMillis = 200 // 1 second
     setTimeout(() => {
-      this.root.style.display = 'none'
-      css.remove(this.root, 'dialog-closing')
-      css.remove(this.root, 'dialog-show')
+      this.element.style.display = 'none'
+      css.remove(this.element, 'dialog-closing')
+      css.remove(this.element, 'dialog-show')
     }, delayMillis)
 
     this.previousActive.focus()
@@ -193,19 +193,19 @@ class Dialog {
   show () {
     this.previousActive = document.activeElement
 
-    this.root.style.display = 'flex'
-    // css.add(this.root, 'dialog-showing');
+    this.element.style.display = 'flex'
+    // css.add(this.element, 'dialog-showing');
 
     var delayMillis = 100 // 1 second
 
     setTimeout(() => {
-      css.add(this.root, 'dialog-show')
-      // css.remove(this.root, 'dialog-showing');
+      css.add(this.element, 'dialog-show')
+      // css.remove(this.element, 'dialog-showing');
     }, delayMillis)
 
     return this
 
-    // var button = this.root.querySelector('button')
+    // var button = this.element.querySelector('button')
 
     // if (button) button.focus()
   }

package/src/divider.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import create from './component/create'
-import insert from './component/insert'
+import create from './mixin/create'
+import insert from './mixin/insert'
 
 var defaults = {
   prefix: 'material',
@@ -45,10 +45,10 @@ class Divider {
    * @return {Object} This class instance
    */
   build () {
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     if (this.options.text) {
-      this.root.textContent = this.options.text
+      this.element.textContent = this.options.text
     }
 
     if (this.options.container) {

package/src/drawer.js

@@ -1,10 +1,10 @@
 'use strict'
 
-import init from './component/init'
+import init from './mixin/init'
 import insert from './element/insert'
-import classify from './component/classify'
+import classify from './module/classify'
 import css from './module/css'
-import events from './component/events'
+import events from './mixin/events'
 import create from './element/create'
 import emitter from './module/emitter'
 
@@ -57,14 +57,14 @@ class Drawer {
 
     classify(this.wrapper, this.options)
 
-    this.root = create('aside')
+    this.element = create('aside')
 
-    css.add(this.root, 'drawer-panel')
+    css.add(this.element, 'drawer-panel')
 
-    insert(this.root, this.wrapper)
+    insert(this.element, this.wrapper)
 
     if (this.options.position) {
-      css.add(this.root, 'position-' + this.options.position)
+      css.add(this.element, 'position-' + this.options.position)
     }
 
     if (this.options.fixed) {
@@ -73,9 +73,9 @@ class Drawer {
 
     if (this.options.size) {
       if (this.options.position === 'top' || this.options.position === 'bottom') {
-        this.root.style = 'height: ' + this.options.size + 'px;'
+        this.element.style = 'height: ' + this.options.size + 'px;'
       } else {
-        this.root.style = 'width: ' + this.options.size + 'px;'
+        this.element.style = 'width: ' + this.options.size + 'px;'
       }
     }
 
@@ -85,7 +85,7 @@ class Drawer {
 
     if (this.options.container) { insert(this.wrapper, this.options.container) }
 
-    this.emit('built', this.root)
+    this.emit('built', this.element)
 
     return this
   }
@@ -109,7 +109,7 @@ class Drawer {
    */
 
   toggle () {
-    // console.log('toggle', this.root);
+    // console.log('toggle', this.element);
     if (this.wrapper.classList.contains('show')) {
       this.close()
     } else {

package/src/element.js

@@ -1,46 +1,21 @@
-
-/**
- * Class Element
- * @class
- * @since 0.0.1
- * @example
- * var div = new Element({
- *   tag: 'div',
- *   class: 'mydiv',
- * })
- */
-
 class Element {
   static isElement () {
     return true
   }
 
-  /**
-   * The init method of the Button class
-   * @param  {Object} The element attributes
-   * @private
-   * @return {DOMElement} The dom element
-   */
   constructor (options) {
     this.options = Object.assign({}, options || {})
     // console.log('element options', options)
     var element = document.createElement(this.options.tag || 'div')
+    delete this.options.tag
 
-    if (options.html) {
-      element.innerHTML = this.options.html
-    }
-
-    if (options.text) {
-      element.textContent = this.options.text
-    }
-
-    if (options.id) {
-      element.setAttribute('id', options.id)
-    }
+    if (options.html) element.innerHTML = this.options.html
+    delete this.options.html
 
-    delete this.options.tag
+    if (options.text) element.textContent = this.options.text
     delete this.options.text
-    delete this.options.html
+
+    if (options.id) element.setAttribute('id', options.id)
 
     for (var property in this.options) {
       if (this.options.hasOwnProperty(property)) {

package/src/field/email.js

@@ -40,19 +40,19 @@ class EmailLink {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement('a')
-    this.root.classList.add('email')
+    this.element = document.createElement('a')
+    this.element.classList.add('email')
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     return this
   }
 
   set (email) {
-    this.root.innerHTML = email
-    this.root.setAttribute('href', 'mailto:' + email)
+    this.element.innerHTML = email
+    this.element.setAttribute('href', 'mailto:' + email)
   }
 }
 

package/src/field/image.js

@@ -42,11 +42,11 @@ class Image {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement('div')
-    this.root.classList.add(this.options.class)
+    this.element = document.createElement('div')
+    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
@@ -76,7 +76,7 @@ class Image {
       url = url + format
     }
 
-    this.root.style.backgroundImage = 'url(' + asset.url + src.path + 'thumb/' + src.filename + ')'
+    this.element.style.backgroundImage = 'url(' + asset.url + src.path + 'thumb/' + src.filename + ')'
   }
 
   sanitize (formats) {

package/src/form/build.js

@@ -5,19 +5,19 @@ import Layout from '../layout'
 export default {
   build () {
     // console.log('build', this.options.layout)
-    this.root = document.createElement('div')
-    this.root.classList.add('form')
+    this.element = document.createElement('div')
+    this.element.classList.add('form')
 
     if (this.options.class !== 'form') {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
 
     if (this.options.form) {
-      this.root.classList.add(this.options.form)
+      this.element.classList.add(this.options.form)
     }
 
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     this.buildForm(this.options.form)
@@ -25,13 +25,13 @@ export default {
     this.buildLayout()
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
   },
 
   buildForm (form) {
     this.form = document.createElement('form')
-    this.root.appendChild(this.form)
+    this.element.appendChild(this.form)
 
     if (form && form.method) {
       this.form.setAttribute('method', form.method)

package/src/form.js

@@ -4,7 +4,7 @@ import insert from './element/insert'
 import css from './module/css'
 import emitter from './module/emitter'
 import attach from './module/attach'
-import controller from './component/controller'
+import controller from './mixin/controller'
 
 // import component
 import Layout from './layout'
@@ -72,13 +72,13 @@ class Form {
   build () {
     var tag = this.options.tag || 'div'
 
-    this.root = document.createElement(tag)
-    css.add(this.root, this.options.prefix + '-' + this.options.class)
+    this.element = document.createElement(tag)
+    css.add(this.element, this.options.prefix + '-' + this.options.class)
 
     // complete layout options
-    this.options.root = this.root
+    this.options.root = this.element
 
-    this.layout = new Layout(this.options.layout, this.root)
+    this.layout = new Layout(this.options.layout, this.element)
 
     this._initControls(this.layout.controls)
 
@@ -86,7 +86,7 @@ class Form {
   }
 
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.element, container, context)
 
     return this
   }

package/src/icon.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import insert from './component/insert'
+import insert from './mixin/insert'
 import css from './module/css'
 
 var defaults = {
@@ -55,11 +55,11 @@ class Icon {
 
     this.element = this.element || {}
 
-    this.root = document.createElement(tag)
-    css.add(this.root, this.options.prefix + '-' + this.options.class)
+    this.element = document.createElement(tag)
+    css.add(this.element, this.options.prefix + '-' + this.options.class)
 
-    if (options.css) { css.add(this.root, options.css) }
-    // css.add(this.root, this.options.class + '-adjust');
+    if (options.css) { css.add(this.element, options.css) }
+    // css.add(this.element, this.options.class + '-adjust');
 
     if (this.options.container) {
       this.insert(this.options.container)
@@ -73,10 +73,10 @@ class Icon {
    */
   set (value) {
     if (value) {
-      if (this.root.innerText) {
-        this.root.innerText = value
+      if (this.element.innerText) {
+        this.element.innerText = value
       } else {
-        this.root.textContent = value
+        this.element.textContent = value
       }
 
       return this