material 0.6.2 → 0.7.0

package/src/switch.js

@@ -1,12 +1,12 @@
 'use strict'
 
 // import control from '../control';
-// import control from './component/control'
+// import control from './mixin/control'
 import build from './element/build'
 import emitter from './module/emitter'
-import insert from './component/insert'
+import insert from './mixin/insert'
 import attach from './module/attach'
-import classify from './component/classify'
+import classify from './module/classify'
 
 let defaults = {
   prefix: 'material',
@@ -77,9 +77,9 @@ class Switch {
    */
   build () {
     this.element = build(this.options.build)
-    this.root = this.element.root
+    this.element = this.element.root
 
-    classify(this.root, this.options)
+    classify(this.element, this.options)
 
     if (this.options.disabled) {
       this.disable()
@@ -175,7 +175,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.element.input.checked = true
       this.checked = true
       this.value = true
@@ -183,7 +183,7 @@ class Switch {
         this.emit('change', this.checked)
       }
     } else {
-      this.root.classList.remove('is-checked')
+      this.element.classList.remove('is-checked')
       this.element.input.checked = false
       this.checked = false
       this.value = false
@@ -201,7 +201,7 @@ class Switch {
   focus () {
     if (this.disabled === true) return this
 
-    this.root.classList.add('is-focused')
+    this.element.classList.add('is-focused')
     if (this.element.input !== document.activeElement) { this.element.input.focus() }
     return this
   }
@@ -211,7 +211,7 @@ class Switch {
    * @return {?} [description]
    */
   blur () {
-    this.root.classList.remove('is-focused')
+    this.element.classList.remove('is-focused')
     return this
   }
 }

package/src/tabs.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'
 import emitter from './module/emitter'
 
 import offset from './element/offset'
@@ -44,11 +44,11 @@ class Tabs {
    * @return {Object} This class instance
    */
   build () {
-    this.root = create(this.options)
+    this.element = create(this.options)
     this.tab = { }
     if (this.options.list) {
       this.list = new List({
-        // root: this.root,
+        // root: this.element,
         tag: 'div',
         list: this.options.list,
         target: '.material-button',
@@ -75,11 +75,11 @@ class Tabs {
           this.selected = item
           this.click(item)
         }
-      }).insert(this.root)
+      }).insert(this.element)
     }
 
     this.indicator = create(this.options.indicator)
-    this.insertElement(this.indicator, this.root)
+    this.insertElement(this.indicator, this.element)
 
     if (this.options.container) {
       this.insert(this.options.container)
@@ -95,8 +95,8 @@ class Tabs {
   }
 
   click (item, silent) {
-    // console.log('clickitem', item, this.root);
-    var or = offset(this.root)
+    // console.log('clickitem', item, this.element);
+    var or = offset(this.element)
     var o = offset(item)
     this.indicator.setAttribute('style', 'width: ' + o.width + 'px; left: ' + (o.left - or.left) + 'px;')
 

package/src/tabview.js

@@ -31,7 +31,7 @@ class TabView {
 
     var ready = false
 
-    observer.insert(this.root, () => {
+    observer.insert(this.element, () => {
       // console.log('!!! inserted')
       if (!ready) {
         ready = true
@@ -46,13 +46,13 @@ class TabView {
   }
 
   build () {
-    this.root = document.createElement(this.options.tag || 'div')
-    this.root.classList.add('tabview')
+    this.element = document.createElement(this.options.tag || 'div')
+    this.element.classList.add('tabview')
 
-    this.root.classList.add('view')
+    this.element.classList.add('view')
 
     if (this.options.class !== 'tabview') {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
 
     this.ui = {}
@@ -63,9 +63,9 @@ class TabView {
     this.view = {}
     this.views = []
 
-    this.ui.tabs = this.root.querySelector('[class="tabs"]')
-    this.ui.view = this.root.querySelector('[class="views"]')
-    this.ui.indicator = this.root.querySelector('[class="indicator"]')
+    this.ui.tabs = this.element.querySelector('[class="tabs"]')
+    this.ui.view = this.element.querySelector('[class="views"]')
+    this.ui.indicator = this.element.querySelector('[class="indicator"]')
 
     this.ui.buttons = this.ui.tabs.childNodes
     this.ui.views = this.ui.view.childNodes

package/src/text.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',
@@ -66,7 +66,7 @@ class Text {
   build () {
     this.options.tag = this.options.types[this.options.type]
 
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     if (this.options.text) {
       this.set(this.options.text)
@@ -85,9 +85,9 @@ class Text {
    */
   set (value) {
     if (value) {
-      this.root.textContent = value
+      this.element.textContent = value
     } else {
-      this.root.textContent = ''
+      this.element.textContent = ''
     }
 
     return this

package/src/textfield.js

@@ -62,28 +62,28 @@ class Textfield {
   build () {
     // create a new div as input element
     var tag = this.options.tag || 'div'
-    this.root = document.createElement(tag)
-    this.root.classList.add(this.options.prefix + '-' + this.options.class)
+    this.element = document.createElement(tag)
+    this.element.classList.add(this.options.prefix + '-' + this.options.class)
 
     this.buildLabel()
     this.buildInput()
     this.buildUnderline()
 
     if (this.disabled) {
-      css.add(this.root, 'is-disabled')
+      css.add(this.element, 'is-disabled')
     }
 
     // insert if container this.options is given
     if (this.options.container) {
       // console.log(this.name, opts.container);
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
   }
 
   buildLabel () {
     this.label = document.createElement('label')
     this.label.classList.add(this.options.class + '-label')
-    this.root.appendChild(this.label)
+    this.element.appendChild(this.label)
 
     if (this.options.label !== false) {
       this.setLabel()
@@ -98,14 +98,14 @@ class Textfield {
     this.input = document.createElement('input')
     this.input.classList.add(this.options.class + '-input')
     this.input.setAttribute('type', 'text')
-    this.root.appendChild(this.input)
+    this.element.appendChild(this.input)
 
     if (this.options.name) {
       this.input.setAttribute('name', this.options.name)
     }
 
     if (!this.options.value) {
-      this.root.classList.add('is-empty')
+      this.element.classList.add('is-empty')
     }
 
     if (this.readonly) {
@@ -123,7 +123,7 @@ class Textfield {
   buildUnderline () {
     this.underline = document.createElement('span')
     this.underline.classList.add(this.options.class + '-underline')
-    this.root.appendChild(this.underline)
+    this.element.appendChild(this.underline)
   }
 
   /**
@@ -176,7 +176,7 @@ class Textfield {
     this.disabled = true
 
     this.input.setAttribute('disabled', 'disabled')
-    this.root.classList.add('is-disabled')
+    this.element.classList.add('is-disabled')
     return this
   }
 
@@ -184,7 +184,7 @@ class Textfield {
     this.disabled = false
 
     this.element.input.removeAttribute('disabled')
-    this.root.classList.remove('is-disabled')
+    this.element.classList.remove('is-disabled')
     return this
   }
 
@@ -228,9 +228,9 @@ class Textfield {
     this.input.value = value
 
     if (value) {
-      this.root.classList.remove('is-empty')
+      this.element.classList.remove('is-empty')
     } else {
-      this.root.classList.add('is-empty')
+      this.element.classList.add('is-empty')
     }
 
     if (!silent) { this.emit('change', value) }
@@ -258,9 +258,9 @@ class Textfield {
     if (this.readonly) return
 
     if (this.get('value') === '') {
-      this.root.classList.add('is-empty')
+      this.element.classList.add('is-empty')
     } else {
-      this.root.classList.remove('is-empty')
+      this.element.classList.remove('is-empty')
     }
 
     this.emit('change', this.getValue())
@@ -274,7 +274,7 @@ class Textfield {
     if (this.disabled) return this
     if (this.readonly) return this
 
-    this.root.classList.add('is-focused')
+    this.element.classList.add('is-focused')
     if (this.input !== document.activeElement) { this.input.focus() }
     return this
   }
@@ -286,7 +286,7 @@ class Textfield {
   blur () {
     if (this.readonly) return this
 
-    this.root.classList.remove('is-focused')
+    this.element.classList.remove('is-focused')
 
     return this
   }

package/src/toolbar.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'
 import offset from './element/offset'
 
 const defaults = {
@@ -37,21 +37,21 @@ class Toolbar {
    * @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) {
@@ -62,19 +62,19 @@ class Toolbar {
   }
 
   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)
 
       var padding = window.getComputedStyle(view)['padding-top']
       // 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)
@@ -89,7 +89,7 @@ class Toolbar {
 
       if (document.body == view) {
         // console.log('toolbar container body')
-        this.root.classList.add('toolbar-body')
+        this.element.classList.add('toolbar-body')
       }
 
       // view.setAttribute('style', 'padding-top: ' + ptop + 'px')
@@ -107,7 +107,7 @@ class Toolbar {
   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)
@@ -150,9 +150,9 @@ class Toolbar {
       }
 
       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)
@@ -167,42 +167,42 @@ class Toolbar {
   }
 
   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/tooltip.js

@@ -40,19 +40,19 @@ class Tooltip {
   build () {
     var container = this.options.container || document.body
 
-    this.root = document.createElement('span')
-    this.root.classList.add('tooltip')
-    this.root.classList.add('control')
+    this.element = document.createElement('span')
+    this.element.classList.add('tooltip')
+    this.element.classList.add('control')
 
     this.pointer = document.createElement('span')
     this.pointer.classList.add('pointer')
-    this.root.appendChild(this.pointer)
+    this.element.appendChild(this.pointer)
 
     this.label = document.createElement('span')
     this.label.classList.add('label')
-    this.root.appendChild(this.label)
+    this.element.appendChild(this.label)
 
-    container.appendChild(this.root)
+    container.appendChild(this.element)
   }
 
   attach () {
@@ -78,8 +78,8 @@ class Tooltip {
         var coord = this.offset(e.currentTarget)
 
         this.show()
-        this.root.style.top = (coord.top + this.options.offset.top) + 'px'
-        this.root.style.left = coord.left - (this.root.offsetWidth / 2) + (e.currentTarget.offsetWidth / 2) + 'px'
+        this.element.style.top = (coord.top + this.options.offset.top) + 'px'
+        this.element.style.left = coord.left - (this.element.offsetWidth / 2) + (e.currentTarget.offsetWidth / 2) + 'px'
       })
 
       targets[i].addEventListener('mouseleave', (e) => {
@@ -88,7 +88,7 @@ class Tooltip {
       })
     }
 
-    this.root.addEventListener('click', (e) => {
+    this.element.addEventListener('click', (e) => {
       e.preventDefault()
       e.stop()
       this.hide()
@@ -103,11 +103,11 @@ class Tooltip {
   }
 
   hide () {
-    this.root.classList.remove('show')
+    this.element.classList.remove('show')
   }
 
   show () {
-    this.root.classList.add('show')
+    this.element.classList.add('show')
   }
 
   disable () {

package/src/tree.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import insert from './component/insert'
+import insert from './mixin/insert'
 import css from './module/css'
 import attach from './module/attach'
 
@@ -85,8 +85,8 @@ class Tree {
     // define main tag
     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)
 
     if (this.options.container) {
       this.insert(this.options.container)
@@ -96,7 +96,7 @@ class Tree {
       this.buildTree(this.options.data)
     }
 
-    // this.root.addEventListener("click", function(e) {
+    // this.element.addEventListener("click", function(e) {
     //   // console.log("list", this, e);
     //   // e.target was the clicked element
     // });
@@ -105,13 +105,12 @@ class Tree {
   }
 
   buildTree (data) {
-    this.root.innerHTML = ''
+    this.element.innerHTML = ''
 
     // console.log('buildTree', data);
 
     var tree = ''
 
-
     function checkChildren (parentObj, level) {
       if (level) {
         level++
@@ -119,11 +118,10 @@ class Tree {
         level = 0
       }
 
-
-      level++;
+      level++
 
       // console.log('-- ', level, parentObj);
-      if (parentObj.path) { 
+      if (parentObj.path) {
         var level = (parentObj.path.split('/').length - 1)
 
         if (level > 0) {
@@ -131,7 +129,7 @@ class Tree {
         }
       } else {
         if (level > 1) {
-          tree += '<li class="item-tree" data-id="'+parentObj._id+'">' + parentObj.name 
+          tree += '<li class="item-tree" data-id="' + parentObj._id + '">' + parentObj.name
         }
       }
 
@@ -150,13 +148,11 @@ class Tree {
       }
     }
 
-
-
     checkChildren(data)
 
     // console.log('html tree', tree);
 
-    this.root.innerHTML = tree
+    this.element.innerHTML = tree
 
     return tree
   }
@@ -238,8 +234,8 @@ class Tree {
     }
 
     var where = 'bottom'
-    this.insertElement(item.root, this.root, where)
-    // item.insert(this.root, where);
+    this.insertElement(item.root, this.element, where)
+    // item.insert(this.element, where);
     this.items.push(item)
 
     return item
@@ -247,7 +243,7 @@ class Tree {
 
   empty () {
     // console.log('empty')
-    this.root.innerHTML = ''
+    this.element.innerHTML = ''
     this.items = []
     this.item = null
   }

package/src/view/build.js

@@ -4,22 +4,22 @@ import Layout from '../layout'
 
 export default {
   build () {
-    this.root = document.createElement('div')
-    this.root.classList.add('view')
+    this.element = document.createElement('div')
+    this.element.classList.add('view')
 
     if (this.options.class) {
       this.addClass(this.options.class)
     }
 
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     this.container = this.options.container || document.body
-    this.container.appendChild(this.root)
+    this.container.appendChild(this.element)
 
     if (this.options.layout) {
-      this.layout = new Layout(this.options.layout, this.root)
+      this.layout = new Layout(this.options.layout, this.element)
       this.ui = this.layout.component
     }
   },
@@ -28,7 +28,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])
     }
   }
 }