material 0.6.2 → 0.7.0

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/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

package/src/image.js

@@ -1,9 +1,9 @@
 'use strict'
 
-// import insert from './component/insert'
+// import insert from './mixin/insert'
 import css from './module/css'
 import insert from './element/insert'
-import control from './component/control'
+import control from './mixin/control'
 
 var defaults = {
   prefix: 'material',
@@ -50,22 +50,22 @@ class Image {
 
     var tag = options.tag || 'div'
     var text = options.text || options.label
-    this.root = document.createElement(tag)
+    this.element = document.createElement(tag)
 
     // if (options.src) {
-    //   this.root.setAttribute('style', 'background-image: url(' + options.src + ')')
+    //   this.element.setAttribute('style', 'background-image: url(' + options.src + ')')
 
     if (options.src) {
       this.image = document.createElement('img')
       this.image.setAttribute('src', options.src)
       css.add(this.image, this.options.class + '-image')
-      insert(this.image, this.root)
+      insert(this.image, this.element)
     }
 
     this.info = document.createElement('span')
     css.add(this.info, this.options.class + '-info')
 
-    insert(this.info, this.root)
+    insert(this.info, this.element)
 
     this.label(text, this.info)
 
@@ -77,13 +77,13 @@ class Image {
     //   this.label = document.createElement('span')
     //   this.label.innerText = text
     //   css.add(this.label, this.options.class + '-label')
-    //   insert(this.label, this.root)
+    //   insert(this.label, this.element)
     // }
 
-    css.add(this.root, this.options.prefix + '-' + this.options.class)
+    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)
@@ -97,7 +97,7 @@ class Image {
    * @return {?}           [description]
    */
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.element, container, context)
 
     return this
   }
@@ -109,10 +109,10 @@ class Image {
    */
   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

package/src/item.js

@@ -2,8 +2,8 @@
 
 import Layout from './layout'
 
-import create from './component/create'
-import insert from './component/insert'
+import create from './mixin/create'
+import insert from './mixin/insert'
 
 var defaults = {
   prefix: 'material',
@@ -70,14 +70,14 @@ class Item {
 
     this.options.tag = this.options.tag
 
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     if (this.options.text) {
       this.set(this.options.text)
     }
 
     if (this.options.layout) {
-      this.layout = new Layout(this.options.layout, this.root)
+      this.layout = new Layout(this.options.layout, this.element)
     } else {
       if (this.options.container) {
         this.insert(this.options.container)
@@ -92,10 +92,10 @@ class Item {
    */
   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

package/src/layout.js

@@ -37,10 +37,10 @@ class Layout {
         }
 
         component = new schema[i](options)
-        var element = component.root || component
+        var element = component.element || component
 
         if (level === 1) {
-          structure.root = element
+          structure.element = element
         }
 
         if (name) {
@@ -57,7 +57,7 @@ class Layout {
           if (component.insert) {
             component.insert(container)
           } else {
-            var wrapper = container.root || container
+            var wrapper = container.element || container
 
             wrapper.appendChild(element)
 
@@ -98,30 +98,30 @@ class Layout {
     // console.log('component', component);
 
     if (options.flex) {
-      css.add(component.root, 'flex-' + options.flex)
+      css.add(component.element, 'flex-' + options.flex)
     } else {
       var size = options.size
       if (options.size && options.width) {
-        component.root.width = size + 'px'
+        component.element.width = size + 'px'
       } else if (options.size && options.height) {
-        component.root.height = size + 'px'
+        component.element.height = size + 'px'
       }
     }
 
     if (options.position) {
-      component.root.position = options.position
+      component.element.position = options.position
     }
 
     if (options.bottom) {
-      component.root.bottom = options.bottom
+      component.element.bottom = options.bottom
     }
 
     if (options.hide) {
-      component.root.display = 'none'
+      component.element.display = 'none'
     }
 
     if (options.theme) {
-      css.add(component.root, 'theme' + '-' + options.theme)
+      css.add(component.element, 'theme' + '-' + options.theme)
     }
   }
 

package/src/list/add.js

@@ -24,7 +24,7 @@ export default {
     this.dataStore[info[this.dataId]] = info
     // console.log('data', this.data.length, this.data)
 
-    if (window.getComputedStyle(this.root, null).display === 'none') {
+    if (window.getComputedStyle(this.element, null).display === 'none') {
       this.virtual.items = this.data
     } else {
       this.virtual.update(this.data)

package/src/list/build.js

@@ -11,14 +11,14 @@ export default {
 
     this.dataId = this.options.dataId || '_id'
 
-    this.root = document.createElement('div')
-    this.root.classList.add('list')
+    this.element = document.createElement('div')
+    this.element.classList.add('list')
 
     if (this.options.class) {
       this.addClass(this.options.class)
     }
 
-    this.root.addEventListener('click', (e) => {
+    this.element.addEventListener('click', (e) => {
       e.stopPropagation()
     })
 
@@ -27,17 +27,17 @@ export default {
     }
 
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
-    this.layout = new Layout(this.options.layout.main, this.root)
+    this.layout = new Layout(this.options.layout.main, this.element)
     this.ui = this.layout.component
 
     // prepare loading
     // this.ui.loading = new Loading()
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     var scrollbarOffset = scrollbar()
@@ -56,7 +56,7 @@ export default {
     var list = c.split(' ')
 
     for (var i = 0; i < list.length; i++) {
-      this.root.classList.add(list[i])
+      this.element.classList.add(list[i])
     }
   },