material 0.6.1 → 0.7.0

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

@@ -1,25 +1,25 @@
 import scrollbar from '../module/scrollbar'
-import dataset from './dataset'
+import dataset from '../module/dataset'
 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])
     }
   }
 }

package/src/view/display.js

@@ -11,15 +11,15 @@ export default {
     // console.log('show', this.visible)
 
     // if (this.options.transition) {
-    //   this.root.style.display = 'initial'
+    //   this.element.style.display = 'initial'
     // }
 
-    this.root.getBoundingClientRect()
+    this.element.getBoundingClientRect()
 
     // clearTimeout(this.displayTimeout)
-    // this.root.style.display = this._display
+    // this.element.style.display = this._display
 
-    this.root.classList.add('show')
+    this.element.classList.add('show')
     this.visible = true
 
     if (this.underlay) {
@@ -31,14 +31,14 @@ export default {
   },
 
   hide () {
-    // console.log('hide', this.root.style.display)
-    // if (this.root.style.display === 'none') return
+    // console.trace('hide')
+    // if (this.element.style.display === 'none') return
     // clearTimeout(this.displayTimeout)
-    // this._display = getComputedStyle(this.root).display
+    // this._display = getComputedStyle(this.element).display
 
-    if (!this.root) return
+    if (!this.element) return
 
-    this.root.classList.remove('show')
+    this.element.classList.remove('show')
     this.visible = false
 
     if (this.underlay) {
@@ -48,7 +48,7 @@ export default {
     // if (this.options.transition) {
     //   this.displayTimeout = setTimeout(() => {
     //     console.log('display: none', this._display)
-    //     this.root.style.display = 'none'
+    //     this.element.style.display = 'none'
     //   }, this.options.transition)
     // }
 
@@ -57,9 +57,9 @@ export default {
   },
 
   destroy () {
-    // console.log('destroy', this.options.transition, this.root)
-    if (this.options.transition && this.root) {
-      this.root.classList.remove('show')
+    // console.log('destroy', this.options.transition, this.element)
+    if (this.options.transition && this.element) {
+      this.element.classList.remove('show')
 
       if (this.underlay) {
         this.underlay.classList.remove('show')
@@ -76,9 +76,9 @@ export default {
   },
 
   removeChild () {
-    if (this.root && this.root.parentNode) {
-      this.root.parentNode.removeChild(this.root)
-      this.root = null
+    if (this.element && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element)
+      this.element = null
     }
 
     if (this.underlay && this.underlay.parentNode) {

package/src/view.js

@@ -62,26 +62,26 @@ class View {
   build (props) {
     var tag = this.options.tag || 'div'
 
-    this.root = create(tag, this.options.prefix + '-' + this.options.class)
+    this.element = create(tag, this.options.prefix + '-' + this.options.class)
 
     if (this.options.name) {
-      css.add(this.root, this.options.class + '-' + this.options.name)
+      css.add(this.element, this.options.class + '-' + this.options.name)
     }
 
     if (this.options.css) {
-      css.add(this.root, this.options.css)
+      css.add(this.element, this.options.css)
     }
 
     if (this.options.container) {
       // console.log(this.options.name, opts.container);
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
 
     return this
   }
 
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.element, container, context)
     return this
   }
 }

package/src/component/click.js

@@ -1,17 +0,0 @@
-// event related functions and listeners
-/**
- * on element click
- * @param  {event} e click event
- * @return {void}
- */
-function click(e) {
-  e.preventDefault()
-
-  // console.log('click caller', arguments.callee.caller)
-
-  if (e && e.target && e.target.disabled === 'disabled') return
-  // if (options.upload) return
-  // api.emit('click', e)
-}
-
-export default click