material 0.6.1 → 0.7.0

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])
     }
   },
 

package/src/list/display.js

@@ -10,9 +10,9 @@ export default {
   show () {
     // console.log('show', this.visible)
 
-    this.root.getBoundingClientRect()
+    this.element.getBoundingClientRect()
 
-    this.root.classList.add('show')
+    this.element.classList.add('show')
     this.visible = true
 
     if (this.underlay) {
@@ -26,11 +26,11 @@ export default {
   },
 
   hide () {
-    // console.log('hide', this.root.style.display)
+    // console.log('hide', this.element.style.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) {
@@ -43,8 +43,8 @@ export default {
 
   destroy () {
     // console.log('destroy', this.options.transition)
-    if (this.options.transition && this.root) {
-      this.root.classList.remove('show')
+    if (this.options.transition && this.element) {
+      this.element.classList.remove('show')
 
       if (this.underlay) {
         this.underlay.classList.remove('show')
@@ -63,9 +63,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/list/search.js

@@ -111,7 +111,7 @@ export default {
 
     // console.log('showSearch')
     this.mode = 'search'
-    this.root.classList.add('search-mode')
+    this.element.classList.add('search-mode')
 
     if (this.ui.search) {
       this.ui.search.root.classList.add('selected')
@@ -136,7 +136,7 @@ export default {
   hideSearch (notfetch) {
     // console.log('hideSearch', notfetch)
     this.mode = 'standard'
-    this.root.classList.remove('search-mode')
+    this.element.classList.remove('search-mode')
 
     if (this.ui.search) {
       this.ui.search.root.classList.remove('selected')

package/src/list.js

@@ -3,7 +3,7 @@
 import Item from './item'
 import Divider from './divider'
 
-// import init from './component/init'
+// import init from './mixin/init'
 import emitter from './module/emitter'
 import insert from './element/insert'
 import css from './module/css'
@@ -86,19 +86,19 @@ class List {
     // define main tag
     var tag = this.options.tag || 'ul'
 
-    this.root = document.createElement(tag)
-    css.add(this.root, 'material-' + this.options.class)
+    this.element = document.createElement(tag)
+    css.add(this.element, 'material-' + this.options.class)
 
     if (options.name) {
-      css.add(this.root, options.class + '-' + options.name)
+      css.add(this.element, options.class + '-' + options.name)
     }
 
     if (options.type) {
-      css.add(this.root, 'type-' + options.type)
+      css.add(this.element, 'type-' + options.type)
     }
 
     if (options.layout) {
-      css.add(this.root, 'layout-' + options.layout)
+      css.add(this.element, 'layout-' + options.layout)
     }
 
     if (this.options.list) {
@@ -106,10 +106,10 @@ class List {
     }
 
     if (this.options.container) {
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
 
-    // this.root.addEventListener("click", function(e) {
+    // this.element.addEventListener("click", function(e) {
     //   // console.log("list", this, e);
     //   // e.target was the clicked element
     // });
@@ -207,7 +207,7 @@ class List {
   }
 
   scrollToBottom () {
-    this.root.scrollTop = this.root.scrollHeight - this.root.getBoundingClientRect().height
+    this.element.scrollTop = this.element.scrollHeight - this.element.getBoundingClientRect().height
   }
 
   /**
@@ -221,9 +221,9 @@ class List {
 
     var where = 'bottom'
     if (item.root) {
-      insert(item.root, this.root, where)
+      insert(item.root, this.element, where)
     } else {
-      insert(item, this.root, where)
+      insert(item, this.element, where)
     }
 
     this.items.push(item)
@@ -232,11 +232,11 @@ class List {
   }
 
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.element, container, context)
   }
 
   empty () {
-    this.root.innerHTML = ''
+    this.element.innerHTML = ''
     this.items = []
     this.item = null
   }

package/src/map/build.js

@@ -13,11 +13,11 @@ export default {
    * @return {void} This class instance
    */
   build () {
-    this.root = document.createElement(this.options.tag)
-    this.root.classList.add(this.options.class)
+    this.element = document.createElement(this.options.tag)
+    this.element.classList.add(this.options.class)
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     this.label = document.createElement('div')
@@ -27,7 +27,7 @@ export default {
     this.buildMap()
     this.screenSize()
 
-    observer.insert(this.root, () => {
+    observer.insert(this.element, () => {
       // if (touch()) {
       //   // console.log('pinchzoom', this.options.pichZoom)
       //   this.draggable = new PinchZoom(this.slide, {
@@ -58,7 +58,7 @@ export default {
       })
       // }
 
-      this.rect = this.root.getBoundingClientRect()
+      this.rect = this.element.getBoundingClientRect()
 
       this.screen = {
         y: window.pageYOffset,
@@ -84,7 +84,7 @@ export default {
     // console.log('buildmap')
     this.slide = document.createElement('div')
     this.slide.classList.add('slide')
-    this.root.appendChild(this.slide)
+    this.element.appendChild(this.slide)
 
     this.map = document.createElement('div')
     this.map.classList.add('map')

package/src/map/display.js

@@ -82,24 +82,24 @@ export default {
   },
 
   updateRoot () {
-    this.offsetX = this.screen.width - this.root.offsetWidth
-    this.offsetY = this.screen.height - this.root.offsetHeight
+    this.offsetX = this.screen.width - this.element.offsetWidth
+    this.offsetY = this.screen.height - this.element.offsetHeight
 
     // console.log('--', this.offsetX / 2 + 'px')
 
-    this.root.style.left = (this.offsetX / 2) + 'px'
-    this.root.style.top = (this.offsetY / 2) + 'px'
+    this.element.style.left = (this.offsetX / 2) + 'px'
+    this.element.style.top = (this.offsetY / 2) + 'px'
 
     // if (isTouchScreen()) {
-    //   this.root.style.top = (this.offsetY / 2) + 70 + 'px'
+    //   this.element.style.top = (this.offsetY / 2) + 70 + 'px'
     // } else {
-    //   this.root.style.top = -1200 + 'px'
+    //   this.element.style.top = -1200 + 'px'
     // }
   },
 
   updateMap () {
-    var offsetX = this.root.offsetWidth - this.map.offsetWidth
-    // var offsetY = this.root.height - this.map.offsetHeight
+    var offsetX = this.element.offsetWidth - this.map.offsetWidth
+    // var offsetY = this.element.height - this.map.offsetHeight
 
     // console.log('--', this.offsetX / 2 + 'px')
 

package/src/menu.js

@@ -1,8 +1,8 @@
 'use strict'
 
-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 insert from './element/insert'
 import offset from './element/offset'
 
@@ -66,18 +66,18 @@ class Menu {
    * @return {Object} This class instance
    */
   build () {
-    this.root = create(this.options.tag, this.options.css)
+    this.element = create(this.options.tag, this.options.css)
     this.mask = create(this.options.tag, this.options.class + '-mask')
 
     if (this.options.position) {
-      this.root.style.position = this.options.position
+      this.element.style.position = this.options.position
     }
 
-    classify(this.root, this.options)
+    classify(this.element, this.options)
 
     if (this.options.list) {
       this.list = new List({
-        // root: this.root,
+        // root: this.element,
         list: this.options.list,
         target: '.material-item',
         height: 600,
@@ -86,17 +86,17 @@ class Menu {
           this.selected = item
           this.hide()
         }
-      }).insert(this.root)
+      }).insert(this.element)
     }
 
-    this.emit('built', this.root)
+    this.emit('built', this.element)
 
     return this
   }
 
   insert () {
     insert(this.mask, document.body)
-    insert(this.root, document.body)
+    insert(this.element, document.body)
   }
 
   setup () {
@@ -113,7 +113,7 @@ class Menu {
 
     if (e) this.caller = e.target
 
-    css.add(this.root, this.options.class + '-show')
+    css.add(this.element, this.options.class + '-show')
     this.position(this.caller)
   }
 
@@ -121,19 +121,19 @@ class Menu {
     if (!this.caller) return
     var offs = offset(this.caller)
 
-    var offsw = this.offset = offset(this.root)
+    var offsw = this.offset = offset(this.element)
 
     // console.log('offset')
     // console.log('caller', this.caller, offs, screen.width)
 
-    this.root.style.top = offs.top + 'px'
-    this.root.style.left = offs.left - offsw.width + offs.width + 'px'
-    // this.root.style.right = offs.right + offs.width + offsw.width  + 'px'
+    this.element.style.top = offs.top + 'px'
+    this.element.style.left = offs.left - offsw.width + offs.width + 'px'
+    // this.element.style.right = offs.right + offs.width + offsw.width  + 'px'
   }
 
   hide () {
     // console.log('hide')
-    css.remove(this.root, this.options.class + '-show')
+    css.remove(this.element, this.options.class + '-show')
     css.remove(this.mask, 'mask-show')
   }
 }

package/src/{component → mixin}/control.js

@@ -32,12 +32,12 @@ var control = {
    */
   check (checked) {
     if (checked === true) {
-      css.add(this.root, 'is-checked')
+      css.add(this.element, 'is-checked')
       this.element.input.checked = true
       this.checked = true
       this.emit('change', this.checked)
     } else {
-      css.remove(this.root, 'is-checked')
+      css.remove(this.element, 'is-checked')
       this.element.input.checked = false
       this.checked = false
       this.emit('change', this.checked)
@@ -60,7 +60,7 @@ var control = {
 
     this.element.label.textContent = label
 
-    container = container || this.root
+    container = container || this.element
 
     insert(this.element.label, container)
   },
@@ -73,7 +73,7 @@ var control = {
   icon (icon, container, position) {
     if (!icon) return
 
-    container = container || this.root
+    container = container || this.element
 
     position = position || 'top'
     if (this.options.type === 'text-icon') {
@@ -104,14 +104,14 @@ var control = {
       this.element.error.textContent = text
     }
 
-    insert(this.element.error, this.root, 'bottom')
+    insert(this.element.error, this.element, 'bottom')
   },
 
   disable () {
     this.disabled = true
 
     this.element.input.setAttribute('disabled', 'disabled')
-    css.add(this.root, 'is-disabled')
+    css.add(this.element, 'is-disabled')
     return this
   },
 
@@ -119,7 +119,7 @@ var control = {
     this.disabled = false
 
     this.element.input.removeAttribute('disabled')
-    css.remove(this.root, 'is-disabled')
+    css.remove(this.element, 'is-disabled')
     return this
   },
 
@@ -162,7 +162,7 @@ var control = {
   },
 
   getName () {
-    return this.root.dataset.name
+    return this.element.dataset.name
   },
 
   /**
@@ -172,7 +172,7 @@ var control = {
   focus () {
     if (this.disabled === true) return this
 
-    css.add(this.root, 'is-focused')
+    css.add(this.element, 'is-focused')
     if (this.element.input !== document.activeElement) { this.element.input.focus() }
     return this
   },
@@ -182,7 +182,7 @@ var control = {
    * @return {?} [description]
    */
   blur () {
-    css.remove(this.root, 'is-focused')
+    css.remove(this.element, 'is-focused')
     return this
   }
 }

package/src/{component → mixin}/create.js

@@ -1,4 +1,4 @@
-import classify from './classify'
+import classify from '../module/classify'
 
 function create (options) {
   var element = document.createElement(options.tag || 'div')