material 0.6.2 → 0.7.1

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,12 @@ 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
   }
 }

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

@@ -2,41 +2,19 @@
 
 import dom from '../module/dom'
 
-/**
- * Inject method insert element to the domtree using Dom methods
- * @param {HTMLElement} container [description]
- * @param  {string} context - Injection context
- * @return {Object} This class intance
- */
 export default {
 
-  /**
-   * [insert description]
-   * @param  {?} container [description]
-   * @param  {?} context   [description]
-   * @param  {?} debug     [description]
-   * @return {?}           [description]
-   */
   insert (container, context) {
-    var element = this.root
+    var element = this.element
 
     this.insertElement(element, container, context)
 
     return this
   },
 
-  /**
-   * [insertElement description]
-
-   * @param  {?} element   [description]
-   * @param  {?} container [description]
-   * @param  {?} context   [description]
-   * @param  {?} debug     [description]
-   * @return {?}           [description]
-   */
   insertElement (element, container, context) {
-    if (container && container.root) {
-      container = container.root
+    if (container && container.element) {
+      container = container.element
     }
 
     this.container = container

package/src/{control/module → module}/attributes.js

@@ -1,6 +1,6 @@
 const special = ['required', 'disabled', 'multiple', 'checked']
 
-function setAttributes (element, o) {
+function attributes (element, o) {
   // console.log('attributes', o.attributes, element)
 
   if (!element) return
@@ -18,4 +18,4 @@ function setAttributes (element, o) {
   }
 }
 
-export default setAttributes
+export default attributes

package/src/module/build.js

@@ -4,22 +4,26 @@ import Layout from '../layout'
 export default {
   build () {
     this.element = document.createElement(this.options.tag || 'div')
-    // for backward compatibility
-    this.root = this.element
 
     const defaults = this.constructor.defaults || {}
 
-    this.element.classList.add(defaults.class)
+    if (defaults.base) this.element.classList.add(defaults.base)
+
+    if (defaults.class) this.element.classList.add(defaults.class)
 
     if (this.options.class !== defaults.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
+    if (this.options.base === 'view') {
+      this.container = this.options.container || document.body
+    } else {
+      this.container = this.options.container
+    }
 
     if (this.container) this.appendTo(this.container)
 
@@ -35,9 +39,9 @@ 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)
 }

package/src/module/events.js

@@ -1,12 +1,14 @@
 import extract from './extract'
 
+function last (str) {}
+
 export default {
   bindEvents: function (events) {
-    console.log('bindEvents', events)
+    // console.log('bindEvents', events)
     events = events || this.options.events
     if (!events) return
 
-    console.log('attach', events, this)
+    // console.log('attach', events, this)
     var instance = this
     events.map((def) => {
       var e = extract.e(instance, def[0])

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

@@ -6,40 +6,21 @@ const defaults = {
   opacity: ['1', '.3']
 }
 
-/**
- * init ripple
- * @param  {?} container [description]
- * @return {?}           [description]
- */
-function init (instance) {
-  instance.on('built', (container) => {
-    set(container)
-  })
-}
-
-/**
- * this function set the event listener
- * @param {HTMLElement} container [description]
- */
-function set (container) {
+function init (container) {
+  console.log('set', container)
   container.addEventListener('mousedown', (e) => {
+    console.log('mousedown')
     show(e)
   })
 }
 
-/**
- * show method
- * @param  {event} e The event related to the the touch
- * @param  {Object} coord
- * @return {void}
- */
 function show (e) {
-  // console.log('show', e);
+  console.log('show', e)
   var container = e.target
   var offs = offset(container)
 
   let ripple = document.createElement('div')
-  ripple.classList.add('material-ripple')
+  ripple.classList.add('ripple')
   let end = coordinate(offs)
   let initial = {
     left: (e.offsetX || offs.width / 2) + 'px',
@@ -67,24 +48,6 @@ function show (e) {
   }
 }
 
-/**
- * this method hides the given ripple
- * @return {Object} Size and position
- */
-function destroy (ripple) {
-  if (ripple.parentNode) { ripple.style.opacity = '0' }
-
-  document.body.onmouseup = null
-
-  setTimeout(() => {
-    if (ripple.parentNode) { ripple.parentNode.removeChild(ripple) }
-  }, 1000)
-}
-
-/**
- * Get ripple final coordinates
- * @return {Object} Size and position
- */
 function coordinate (o) {
   var size = o.height
   var top = -o.height / 2
@@ -101,4 +64,14 @@ function coordinate (o) {
   }
 }
 
+function destroy (ripple) {
+  if (ripple.parentNode) { ripple.style.opacity = '0' }
+
+  document.body.onmouseup = null
+
+  setTimeout(() => {
+    if (ripple.parentNode) { ripple.parentNode.removeChild(ripple) }
+  }, 1000)
+}
+
 export default init

package/src/navigation.js

@@ -0,0 +1,19 @@
+import build from './module/build'
+
+class Navigation {
+  static defaults = {
+    class: 'navigation'
+  }
+
+  constructor (options) {
+    this.init(options)
+    this.build()
+  }
+
+  init (options) {
+    this.options = Object.assign({}, Navigation.defaults, options || {})
+    Object.assign(this, build)
+  }
+}
+
+export default Navigation

package/src/progress.js

@@ -1,8 +1,6 @@
-'use strict'
-
 // import Component from './component';
 import create from './element/create'
-import classify from './component/classify'
+import classify from './module/classify'
 import css from './module/css'
 import insert from './element/insert'
 
@@ -55,23 +53,23 @@ class Spinner {
    * @return {Object} This class instance
    */
   build (options) {
-    this.root = create(this.options.tag)
-    classify(this.root, this.options)
+    this.element = create(this.options.tag)
+    classify(this.element, this.options)
 
     if (this.options.type === 'circular') {
-      this.root.innerHTML = this.options.circular
+      this.element.innerHTML = this.options.circular
     } if (this.options.type === 'indeterminate') {
       this.bar = create('div', 'bar')
-      insert(this.bar, this.root)
+      insert(this.bar, this.element)
     } else {
       this.bar = create('div', 'bar')
-      insert(this.bar, this.root)
+      insert(this.bar, this.element)
 
       this.set(this.options.progress)
     }
 
     if (this.options.container) {
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
 
     return this

package/src/search.js

@@ -0,0 +1,71 @@
+import EventEmitter from './mixin/emitter'
+
+import build from './module/build'
+import bindEvents from './module/events'
+
+import Button from './button'
+import cancel from './skin/material/icon/cancel.svg'
+
+class Search extends EventEmitter {
+  static defaults = {
+    class: 'search-input',
+    minChar: 4,
+    iconCancel: cancel,
+    timeout: 200,
+    events: [
+      ['input.input', 'onInput'],
+      ['input.cancel', 'onCancel']
+    ]
+  }
+
+  constructor (options) {
+    super()
+
+    this.init(options)
+    this.build()
+    this.buildSearch()
+    this.bindEvents()
+  }
+
+  init(options) {
+    this.options = Object.assign({}, Search.defaults, options || {})
+    Object.assign(this, build, bindEvents)
+  }
+
+  buildSearch () {
+    if (this.options.icon) {
+      this.icon = document.createElement('i')
+      this.icon.classList.add('icon')
+      this.icon.innerHTML = this.options.icon
+      this.element.appendChild(this.icon)
+    }
+
+    this.input = document.createElement('input')
+    this.input.classList.add('input')
+    this.element.appendChild(this.input)
+
+    this.cancel = new Button({
+      container: this.element,
+      class: 'clear',
+      icon: this.options.iconCancel
+    })
+  }
+
+  onInput () {
+    if (this.input.value.length < this.options.minChar) return
+
+    clearTimeout(this.timeout)
+
+    this.timeout = setTimeout(() => {
+      this.emit('change', this.input.value)
+    }, this.options.timeout)
+  }
+
+  onCancel () {
+    this.input.value = ''
+    this.input.focus()
+    this.emit('cancel')
+  }
+}
+
+export default Search