material 0.6.2 → 0.7.0

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/progress.js

@@ -2,7 +2,7 @@
 
 // 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 +55,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/select.js

@@ -65,28 +65,28 @@ class Select {
   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()
@@ -101,14 +101,14 @@ class Select {
     this.input = document.createElement('select')
     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.options) {
       this.setOptions(this.options.options)
     }
 
     // if (!this.options.value) {
-    //   this.root.classList.add('is-empty')
+    //   this.element.classList.add('is-empty')
     // }
 
     if (this.readonly) {
@@ -132,7 +132,7 @@ class Select {
   buildUnderline () {
     this.underline = document.createElement('span')
     this.underline.classList.add(this.options.class + '-underline')
-    this.root.appendChild(this.underline)
+    this.element.appendChild(this.underline)
   }
 
   /**
@@ -185,7 +185,7 @@ class Select {
     this.disabled = true
 
     this.input.setAttribute('disabled', 'disabled')
-    this.root.classList.add('is-disabled')
+    this.element.classList.add('is-disabled')
     return this
   }
 
@@ -193,7 +193,7 @@ class Select {
     this.disabled = false
 
     this.element.input.removeAttribute('disabled')
-    this.root.classList.remove('is-disabled')
+    this.element.classList.remove('is-disabled')
     return this
   }
 
@@ -237,9 +237,9 @@ class Select {
     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')
     }
 
     this.emit('change', value)
@@ -272,9 +272,9 @@ class Select {
     // console.log('_handleInputKeyPress', e);
 
     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())
@@ -293,7 +293,7 @@ class Select {
   focus () {
     if (this.disabled === true) return this
 
-    this.root.classList.add('is-focused')
+    this.element.classList.add('is-focused')
     if (this.input !== document.activeElement) { this.input.focus() }
     return this
   }
@@ -303,7 +303,7 @@ class Select {
    * @return {?} [description]
    */
   blur () {
-    this.root.classList.remove('is-focused')
+    this.element.classList.remove('is-focused')
     return this
   }
   /**

package/src/selector.js

@@ -44,7 +44,7 @@ class Selector {
     this.attach()
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
   }
 
@@ -53,30 +53,30 @@ class Selector {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement(this.options.tag)
+    this.element = document.createElement(this.options.tag)
 
-    this.root.classList.add('selector')
+    this.element.classList.add('selector')
 
     if (this.options.class !== 'selector') {
-      this.root.setAttribute('class', this.options.class)
+      this.element.setAttribute('class', this.options.class)
     }
 
     if (this.options.modules.indexOf('border') > -1) {
       this.border = document.createElement('div')
       this.border.classList.add('border')
-      this.root.appendChild(this.border)
+      this.element.appendChild(this.border)
     }
 
     if (this.options.modules.indexOf('label') > -1) {
       this.label = document.createElement('div')
       this.label.classList.add('label')
-      this.root.appendChild(this.label)
+      this.element.appendChild(this.label)
     }
 
     if (this.options.modules.indexOf('resizer') > -1) {
       this.resizer = document.createElement('div')
       this.resizer.classList.add('resizer')
-      this.root.appendChild(this.resizer)
+      this.element.appendChild(this.resizer)
     }
 
     return this
@@ -95,7 +95,7 @@ class Selector {
    * @return {Object} The class instance
    */
   set (prop, value) {
-    // console.log('set', this.root, prop, value)
+    // console.log('set', this.element, prop, value)
     switch (prop) {
       case 'target':
         this.setTarget(value)
@@ -113,21 +113,21 @@ class Selector {
 
     this.update(this.target)
 
-    this.root.classList.remove('hide')
+    this.element.classList.remove('hide')
 
-    // console.log('target', this.root, this.target)
+    // console.log('target', this.element, this.target)
   }
 
   update (target) {
     target = target || this.target
     if (!target) return
     var coords = target.getBoundingClientRect()
-    var pcoords = this.root.parentNode.getBoundingClientRect()
+    var pcoords = this.element.parentNode.getBoundingClientRect()
 
-    this.root.style.top = coords.top - pcoords.top + 'px'
-    this.root.style.left = coords.left - pcoords.left + 'px'
-    this.root.style.width = coords.width + 'px'
-    this.root.style.height = coords.height + 'px'
+    this.element.style.top = coords.top - pcoords.top + 'px'
+    this.element.style.left = coords.left - pcoords.left + 'px'
+    this.element.style.width = coords.width + 'px'
+    this.element.style.height = coords.height + 'px'
   }
 
   /**
@@ -139,11 +139,11 @@ class Selector {
   get (prop, value) {
     switch (prop) {
       case 'value':
-        return this.root.value
+        return this.element.value
       case 'label':
         return this.label.innerHTML
       default:
-        return this.root.value
+        return this.element.value
     }
   }
 
@@ -154,11 +154,11 @@ class Selector {
     let width = 0
     let height = 0
 
-    const offsetX = this.root.getBoundingClientRect().x
-    const offsetY = this.root.getBoundingClientRect().y
+    const offsetX = this.element.getBoundingClientRect().x
+    const offsetY = this.element.getBoundingClientRect().y
     const element = document.body
 
-    var ratio = parseInt(this.root.style.width, 10) / parseInt(this.root.style.height, 10)
+    var ratio = parseInt(this.element.style.width, 10) / parseInt(this.element.style.height, 10)
 
     this.border.setPointerCapture(ev.pointerId)
 
@@ -184,8 +184,8 @@ class Selector {
         if (height < this.options.resizer.minHeight) height = this.options.resizer.minHeight
       }
 
-      this.root.style.width = width + 'px'
-      this.root.style.height = height + 'px'
+      this.element.style.width = width + 'px'
+      this.element.style.height = height + 'px'
 
       this.emit('resize', width, height)
     }
@@ -195,31 +195,31 @@ class Selector {
 
       element.onpointermove = null
       element.onpointerup = null
-      this.root.releasePointerCapture(e.pointerId)
+      this.element.releasePointerCapture(e.pointerId)
 
-      // if (e.target !== this.root) return
+      // if (e.target !== this.element) return
     }
   }
 
   disable () {
-    this.root.disabled = true
+    this.element.disabled = true
   }
 
   enable () {
-    this.root.disabled = false
+    this.element.disabled = false
   }
 
   hide () {
-    this.root.classList.add('hide')
+    this.element.classList.add('hide')
   }
 
   show () {
-    this.root.classList.remove('hide')
+    this.element.classList.remove('hide')
   }
 
   destroy () {
-    if (this.root && this.root.parentNode) {
-      this.root.parentNode.removeChild(this.root)
+    if (this.element && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element)
     }
   }
 
@@ -228,11 +228,11 @@ class Selector {
   }
 
   mousedown (ev) {
-    this.root.classList.add('pushed')
+    this.element.classList.add('pushed')
   }
 
   mouseup (ev) {
-    this.root.classList.remove('pushed')
+    this.element.classList.remove('pushed')
   }
 }
 

package/src/slider.js

@@ -1,13 +1,13 @@
 'use strict'
 
-import init from './component/init'
+import init from './mixin/init'
 import build from './element/build'
-import control from './component/control'
+import control from './mixin/control'
 
-import events from './component/events'
+import events from './mixin/events'
 import insert from './element/insert'
 import offset from './element/offset'
-import classify from './component/classify'
+import classify from './module/classify'
 // import control from './control';
 import attach from './module/attach'
 import css from './module/css'
@@ -15,7 +15,7 @@ import emitter from './module/emitter'
 
 import icon from './skin/material/icon/pin.svg'
 
-let defaults = {
+const defaults = {
   prefix: 'material',
   class: 'slider',
   type: 'control',
@@ -84,19 +84,19 @@ class Slider {
    */
   build () {
     this.element = build(this.options.build)
-    this.root = this.element.root
+    this.element = this.element.root
 
-    classify(this.root, this.options)
+    classify(this.element, this.options)
 
     if (this.options.container) {
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
 
-    var value = this.element.marker.innerHTML
+    const value = this.element.marker.innerHTML
     this.element.marker.innerHTML = icon + value
 
     if (this.options.type) {
-      css.add(this.root, 'type-' + this.options.type)
+      css.add(this.element, 'type-' + this.options.type)
     }
 
     // init input
@@ -105,19 +105,19 @@ class Slider {
     }
 
     // if (this.options.name) {
-    //   this.root.dataset.name = name
+    //   this.element.dataset.name = name
     //   this.element.input.name = name
     // }
 
     // init text
-    let text = this.options.label || this.options.text
+    const text = this.options.label || this.options.text
     this.element.label.textContent = text
 
     this.options.label = this.options.label || this.options.text
 
     this.initTrack()
 
-    var delay = 50
+    const delay = 50
 
     setTimeout(() => {
       this.initCanvas()
@@ -133,13 +133,13 @@ class Slider {
   }
 
   drawCanvas () {
-    var width = offset(this.element.track, 'width')
-    var height = offset(this.element.track, 'height')
+    const width = offset(this.element.track, 'width')
+    const height = offset(this.element.track, 'height')
 
     this.element.canvas.width = width
     this.element.canvas.height = height
 
-    var context = this.element.canvas.getContext('2d')
+    const context = this.element.canvas.getContext('2d')
     context.lineWidth = 2
     context.beginPath()
 
@@ -157,7 +157,7 @@ class Slider {
     this.element.track.addEventListener('mousedown', (ev) => {
       if (this.disabled === true) return
       this.initTrackSize()
-      var position = ev.layerX
+      const position = ev.layerX
       this.update(position)
     })
 
@@ -167,7 +167,7 @@ class Slider {
 
     this.initDragging()
 
-    var delay = 100
+    const delay = 100
 
     setTimeout(() => {
       this.setValue(this.options.value)
@@ -195,8 +195,8 @@ class Slider {
 
       css.add(this.element.control, 'dragging')
 
-      var start = 0
-      var position = 0
+      let start = 0
+      let position = 0
 
       if (e.pageX) start = e.pageX
       else if (e.clientX) start = e.clientX
@@ -207,7 +207,7 @@ class Slider {
         console.log('mousedown', this.disabled)
 
         e = e || window.event
-        var end = 0
+        let end = 0
         if (e.pageX) end = e.pageX
         else if (e.clientX) end = e.clientX
 
@@ -218,7 +218,7 @@ class Slider {
         document.body.onmousemove = document.body.onmouseup = null
 
         e = e || window.event
-        var end = 0
+        let end = 0
         if (e.pageX) end = e.pageX
         else if (e.clientX) end = e.clientX
 
@@ -230,8 +230,8 @@ class Slider {
   }
 
   update (position) {
-    var size = this._tracksize
-    var range = this.options.range[1] - this.options.range[0]
+    const size = this._tracksize
+    const range = this.options.range[1] - this.options.range[0]
 
     if (position > size) {
       position = size
@@ -241,8 +241,8 @@ class Slider {
       position = 0
     }
 
-    var ratio = (size / position)
-    var value = Math.round((range / ratio)) + this.options.range[0]
+    const ratio = (size / position)
+    const value = Math.round((range / ratio)) + this.options.range[0]
 
     if (position === 0) {
       css.remove(this.element.knob, 'notnull')
@@ -265,12 +265,12 @@ class Slider {
   updateValue (value) {
     this.initTrackSize()
 
-    var size = offset(this.element.track, 'width')
+    let size = offset(this.element.track, 'width')
     size = parseInt(size)
 
-    var range = this.options.range[1] - this.options.range[0]
-    var ratio = value * 100 / range
-    var position = Math.round(size * ratio / 100)
+    const range = this.options.range[1] - this.options.range[0]
+    const ratio = value * 100 / range
+    const position = Math.round(size * ratio / 100)
 
     this.update(position)
 
@@ -284,7 +284,7 @@ class Slider {
    * @return {?}           [description]
    */
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.element, container, context)
   }
 
   /**
@@ -313,7 +313,7 @@ class Slider {
    * @param {string} value
    */
   get (prop) {
-    var value
+    let value
 
     switch (prop) {
       case 'value':

package/src/snackbar.js

@@ -1,10 +1,10 @@
 'use strict'
 
 // import modules
-import init from './component/init'
+import init from './mixin/init'
 import create from './element/create'
-import insert from './component/insert'
-import classify from './component/classify'
+import insert from './mixin/insert'
+import classify from './module/classify'
 // import components
 import Layout from './layout'
 
@@ -40,10 +40,10 @@ class Snackbar {
   build () {
     var tag = this.options.tag || 'div'
 
-    this.root = create(tag)
-    classify(this.root, this.options)
+    this.element = create(tag)
+    classify(this.element, this.options)
 
-    this.layout = new Layout(this.options.layout, this.root)
+    this.layout = new Layout(this.options.layout, this.element)
   }
 
   /**
@@ -52,7 +52,7 @@ class Snackbar {
    */
   show () {
     setTimeout(() => {
-      this.root.classList.add('show')
+      this.element.classList.add('show')
     }, 10)
 
     if (this.options.delay) {
@@ -63,7 +63,7 @@ class Snackbar {
   }
 
   hide () {
-    this.root.classList.remove('show')
+    this.element.classList.remove('show')
   }
 }