material 0.6.2 → 0.7.0

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')

package/src/{module → mixin}/display.js

@@ -1,3 +1,4 @@
+import dom from '../module/dom'
 
 export default {
   toggle () {
@@ -8,7 +9,7 @@ export default {
   },
 
   show () {
-    console.log('show', this.visible)
+    // console.log('show', this.visible)
 
     // if (this.options.transition) {
     //   this.element.style.display = 'initial'
@@ -28,12 +29,12 @@ export default {
   },
 
   hide () {
-    console.log('hide')
+    // console.log('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.element.classList.remove('show')
     this.visible = false
@@ -54,8 +55,8 @@ export default {
   },
 
   destroy () {
-    // console.log('destroy', this.options.transition, this.root)
-    if (this.options.transition && this.root) {
+    // console.log('destroy', this.options.transition, this.element)
+    if (this.options.transition && this.element) {
       this.element.classList.remove('show')
 
       if (this.underlay) {
@@ -63,26 +64,13 @@ export default {
       }
 
       setTimeout(() => {
-        this.removeChild()
+        dom.destroy(this.element)
       }, this.options.transition)
     } else {
-      this.removeChild()
+      dom.destroy(this.element)
     }
 
-   this.emit?.('destroy')
-  },
-
-  removeChild () {
-    if (this.root && this.element.parentNode) {
-      this.element.parentNode.removeChild(this.root)
-      this.root = null
-    }
 
-    if (this.underlay && this.underlay.parentNode) {
-      this.underlay.parentNode.removeChild(this.underlay)
-    }
-
-    this.emit?.('remove')
-    return this
+   this.emit?.('destroy')
   }
 }

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

@@ -6,7 +6,7 @@ export default {
    * @param {Function} fn    [description]
    */
   addEvent (event, fn) {
-    var element = this.root
+    var element = this.element
     // avoid memory overhead of new anonymous functions for every event handler that's installed
     // by using local functions
     function listenHandler (e) {
@@ -45,7 +45,7 @@ export default {
    * @return {Object}         [description]
    */
   removeEvent (event, fn) {
-    var element = this.root
+    var element = this.element
 
     if (element.removeEventListener) {
       element.removeEventListener(event, fn, false)

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

@@ -8,7 +8,7 @@ export default {
   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
   },
@@ -18,8 +18,7 @@ export default {
    * @return {?} [description]
    */
   blur () {
-    css.remove(this.root, 'is-focused')
+    css.remove(this.element, 'is-focused')
     return this
   }
 }
-

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

@@ -18,7 +18,7 @@ export default {
    * @return {?}           [description]
    */
   insert (container, context) {
-    var element = this.root
+    var element = this.element
 
     this.insertElement(element, container, context)
 

package/src/module/build.js

@@ -5,7 +5,7 @@ export default {
   build () {
     this.element = document.createElement(this.options.tag || 'div')
     // for backward compatibility
-    this.root = this.element
+    this.element = this.element
 
     const defaults = this.constructor.defaults || {}
 
@@ -16,7 +16,7 @@ export default {
     }
 
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     this.container = this.options.container
@@ -35,7 +35,8 @@ export default {
     container.appendChild(this.element)
   },
 
-  addClass  (c) {
+  addClass (clss) {
+    const c = clss.replace(/\s+/g, ' ').trim()
     const list = c.split(' ')
     list.forEach(item => this.element.classList.add(item))
   }

package/src/{component → module}/classify.js

@@ -1,18 +1,5 @@
 import css from '../module/css'
 
-/**
- * Classify component related functions
- * @module component/classify
- * @category component
- */
-
-/**
- * Init component class
- * @param  {element} element The component root element
- * @param  {object} options component class options
- * @return {Instance} The Class instance
- *
- */
 function classify (element, options) {
   css.add(element, options.prefix + '-' + options.class)
 

package/src/module/dom.js

@@ -1,98 +1,42 @@
-'use strict'
+// DOM manipulation function
 
-/**
- * Element insertion related methods
- * @module module/dom
- */
-
-/**
- * Inserts content specified by the container argument at the end of HTMLElement
- *
- * @param {HTMLElement} container
- * @param {String|HTMLElement} html
- * @return {HTMLElement} inserted element
- */
 function append (container, element) {
   container.appendChild(element)
   return element
 }
 
-/**
- * Inserts content specified by the html argument at the beginning of HTMLElement
- *
- * @param {HTMLElement} container
- * @param {string|HTMLElement} html
- * @returns {HTMLElement} inserted container
- */
 function prepend (container, element) {
   return container.insertBefore(element, container.firstChild)
 }
 
-/**
- * Inserts content specified by the html argument after the HTMLElement
- *
- * @param {HTMLElement} container
- * @returns {HTMLElement} inserted container
- */
 function after (container, element) {
   return container.parentNode.insertBefore(element, container.nextSibling)
 }
 
-/**
- * Inserts content specified by the html argument before the HTMLElement
- *
- * @param {HTMLElement} container
- * @returns {HTMLElement} inserted container
- */
 function before (container, element) {
   return container.insertBefore(element, container)
 }
 
-/**
- * Replaces given html container with content specified in html parameter
- *
- * @param {HTMLElement} container
- * @param {string|HTMLElement} html
- * @returns {HTMLElement} inserted container
- */
 function replace (container, element) {
   return container.parentNode.replaceChild(element, container)
 }
 
-/**
- * Removes HTMLElement from dom tree
- *
- * @param {HTMLElement} container
- * @returns {HTMLElement} removed container
- */
 function remove (element) {
   var parent = element.parentNode
   return parent.removeChild(element)
 }
 
-/**
- * [dispose description]
- * @return {Object} The class instance
- */
 function dispose (element) {
   var el = element
   return (el.parentNode) ? el.parentNode.removeChild(el) : el
 }
 
-/**
- * empty
- * @return {void}
- */
 function empty (element) {
   while (element.firstChild) {
     element.removeChild(element.firstChild)
   }
 }
 
-/**
- * [destroy description]
- * @return {Object} this class
- */
 function destroy (element) {
   return element.parentNode.removeChild(element)
 }