material 0.6.2 → 0.7.1

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

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')
-    // 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/banner.js

@@ -1,231 +0,0 @@
-'use strict'
-
-import create from './component/create'
-import insert from './element/insert'
-import event from './element/event'
-import offset from './element/offset'
-import emitter from './module/emitter'
-
-const defaults = {
-  prefix: 'material',
-  class: 'banner',
-  tag: 'div'
-}
-
-/**
- * Class representing a UI Container. Can add components.
- *
- * @extends Component
- * @return {parent} The class instance
- * @example new Container({
- *   container: document.body
- * });
- */
-class Banner {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    // init and build
-    this.init(options)
-    this.build()
-    this.attach()
-
-    return this
-  }
-
-  /**
-   * Init class
-   * @params {Object} options The instance options
-   * @return {Object} This class instance
-   */
-  init (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter)
-
-    return this
-  }
-
-  /**
-   * [build description]
-   * @return {Object} This class  instance
-   */
-  build () {
-    this.root = create(this.options)
-
-    if (this.options.container) {
-      insert(this.root, this.options.container)
-    }
-
-    return this
-  }
-
-  attach () {
-    event.add(this.root, 'click', (ev) => {
-      // console.log('click', ev.target)
-
-      if (ev.target && ev.target.classList.contains('material-button')) {
-        var name = ev.target.getAttribute('data-name')
-        // console.log('name', name)
-        this.emit('select', name)
-        this.dismiss(ev.target)
-      }
-
-      ev.stopPropagation()
-    })
-
-    this.root.addEventListener('DOMNodeInserted', (e) => {
-      // console.log('DOMNodeInserted', e.target)
-      var textNode = e.target
-
-      if (textNode == this.root) {
-        // console.log('banner root inserted', e.target)
-        if (!this.wrapper) { this.wrap() }
-        this.scroll(this.view)
-      }
-      this.updatePaddingView()
-
-      // if (textNode !== this.root) return
-    })
-  }
-
-  dismiss () {
-    this.wrapper.classList.add('is-closed')
-    this.wrapper.style.height = '0'
-    this.updatePaddingView()
-  }
-
-  show () {
-    console.log('this.height', this.height)
-    this.wrapper.classList.remove('is-closed')
-    this.wrapper.style.height = this.height + 'px'
-    this.updatePaddingView()
-    this.updatePosition()
-  }
-
-  wrap () {
-    this.view = this.root.parentNode
-
-    // console.log('wrap', this.root, this.view)
-    this.wrapper = document.createElement('div')
-
-    this.wrapper.classList.add('banner-wrapper')
-
-    this.view.insertBefore(this.wrapper, this.root)
-
-    this.wrapper.appendChild(this.root)
-
-    // insert(this.wrapper, this.root, 'before')
-
-    // insert(this.root, this.wrapper)
-  }
-
-  updatePaddingView () {
-    // console.log('updatePaddingView', this.view)
-
-    this.height = offset(this.root, 'height')
-    if (!this.paddingview) {
-      this.paddingview = window.getComputedStyle(this.view)['padding-top']
-    }
-
-      // this.root.style.top = 'top: ' + this.paddingview
-
-        // console.log('paddingTop', padding)
-        // if (!padding) padding = window.getComputedStyle(this.root.parentNode, 'padding')
-        // console.log('padding', padding)
-
-    var padding = parseInt(this.paddingview, 10)
-    var size = parseInt(this.height, 10)
-
-    this.padding = padding
-
-      // console.log(' banner inserted in', size, 'padding', padding)
-      //
-      //
-
-    var ptop = this.ptop = padding
-
-    if (this.wrapper.classList.contains('is-fixed') && !this.wrapper.classList.contains('is-closed')) {
-      var ptop = this.ptop = size + padding
-    }
-
-    this.view.setAttribute('style', 'padding-top: ' + ptop + 'px')
-  }
-
-  scroll (view) {
-    // console.log('initScroll', offset(this.root, 'top'), offset(view, 'top'))
-
-    var isBody = false
-
-    var element = view
-
-    this.scrolling = view
-
-    if (view === document.body) {
-      isBody = true
-      element = document
-      this.scrolling = document.body
-    }
-
-    // view.classList.add()
-
-    element.addEventListener('scroll', (e) => {
-      // console.log('scroll', this.view)
-      this.updatePosition()
-    })
-  }
-
-  updatePosition () {
-    var view = this.view
-    var scrollTop
-    if (view === document.body) {
-      scrollTop = (document.documentElement ||
-       document.body.parentNode ||
-       document.body).scrollTop
-    } else {
-      scrollTop = view.scrollTop
-    }
-
-      // var o = offset(this.root, 'top') - offset(view, 'top')
-      // console.log('o', this.root.offsetTop)
-
-    var padding = this.paddingview
-    padding = parseInt(padding, 10)
-
-    // console.log('scroll', scrollTop, padding)
-
-    if (scrollTop > padding) {
-      var y = scrollTop - padding
-      // console.log('fixed', y)
-      this.wrapper.classList.add('is-fixed')
-      this.wrapper.style.transform = 'translateY(' + y + 'px)'
-
-      // this.update(scrollTop, padding)
-      // this.wrapper.setAttribute('style', 'top: ' + this.paddingview)
-      this.wrapper.style.top = this.paddingview
-    } else {
-      // console.log('relative')
-      this.wrapper.classList.remove('is-fixed')
-      this.wrapper.style.transform = 'translateY(' + 0 + 'px)'
-      this.wrapper.style.top = '0'
-      // this.wrapper.setAttribute('style', 'top: ' + this.paddingview)
-      // this.wrapper.setAttribute('style', 'top: 0')
-    }
-
-    this.updatePaddingView()
-  }
-
-  update (scrollTop, padding) {
-
-  }
-
-  insert (container, context) {
-    insert(this.root, container, context)
-
-    return this
-  }
-}
-
-export default Banner

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