material 0.6.1 → 0.7.0

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/skin/material/control/menu.sass

@@ -0,0 +1,29 @@
+.menu
+  //display: none
+  &.show
+    //display: block
+  .surface
+    background: rgba(0,0,0,.05)
+    .list
+      background: white
+      .item
+        color: rgba(0,0,0,.87)
+
+  &.floating
+    position: fixed
+    top: 0
+    left: 0
+    bottom: 0
+    right: 0
+    background-color: rgba(0, 0, 0, 0.5)
+    display: flex
+    align-items: center
+    justify-content: center
+    overflow: hidden
+    opacity: 0
+    transition: 0.2s
+    .surface
+      position: absolute
+      background-color: white
+
+

package/src/skin/material/control/snackbar.sass

@@ -0,0 +1,65 @@
+$width: 500px
+
+.snackbars
+  position: absolute
+  z-index: 300
+  display: flex
+  width: $width
+  flex-direction: column
+  background-color: rgba(0,0,0,.1)
+  bottom: 160px
+  width: 100%
+  .snackbar
+    overflow: hidden
+    display: flex
+    opacity: 0
+    height: 2px
+    flex-direction: row
+    padding: 0
+    margin: 2px
+    background-color: #322F35
+    border-radius: 4px
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)
+    transition: 225ms opacity cubic-bezier(.4,0,.2,1), 225ms height cubic-bezier(.4,0,.2,1), 225ms padding cubic-bezier(.4,0,.2,1)
+    &.show
+      opacity: 1
+      padding: 8px
+      height: initial
+      transition: 225ms opacity cubic-bezier(.4,0,.2,1), 225ms height cubic-bezier(.4,0,.2,1), 225ms padding cubic-bezier(.4,0,.2,1)
+    .text
+      line-height: 2em
+      padding-left: 8px
+      flex: 1
+      color: rgba(255,255,255,.87)
+    button.action
+      flex:none
+      display: none
+      color: green
+      .show
+        display: inline-block
+    .close
+      flex: none
+      display: none
+      width: 24px
+      height: 24px
+      min-width: 24px
+      background-image: url('../../theme/common/icon/dark/close.svg')
+      background-color: transparent
+      &:hover, &:active
+        background-color: transparent
+      &.show
+        display: inline-block
+
+
+@media only screen and (min-width: $desktop_switch)
+  .snackbars
+    left: 50%
+    bottom: 200px
+    margin-left: -$width / 2
+    width: $width
+    transition: 195ms bottom cubic-bezier(0.4, 0, 0.2, 1)
+    &.up
+      bottom: 500px
+      transition: 225ms bottom cubic-bezier(0.4, 0, 0.2, 1)
+
+      

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

package/src/switch.js

@@ -1,12 +1,12 @@
 'use strict'
 
 // import control from '../control';
-// import control from './component/control'
+// import control from './mixin/control'
 import build from './element/build'
 import emitter from './module/emitter'
-import insert from './component/insert'
+import insert from './mixin/insert'
 import attach from './module/attach'
-import classify from './component/classify'
+import classify from './module/classify'
 
 let defaults = {
   prefix: 'material',
@@ -77,9 +77,9 @@ class Switch {
    */
   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.disabled) {
       this.disable()
@@ -175,7 +175,7 @@ class Switch {
   check (checked, silent) {
     // console.log('check', checked, silent)
     if (checked === true) {
-      this.root.classList.add('is-checked')
+      this.element.classList.add('is-checked')
       this.element.input.checked = true
       this.checked = true
       this.value = true
@@ -183,7 +183,7 @@ class Switch {
         this.emit('change', this.checked)
       }
     } else {
-      this.root.classList.remove('is-checked')
+      this.element.classList.remove('is-checked')
       this.element.input.checked = false
       this.checked = false
       this.value = false
@@ -201,7 +201,7 @@ class Switch {
   focus () {
     if (this.disabled === true) return this
 
-    this.root.classList.add('is-focused')
+    this.element.classList.add('is-focused')
     if (this.element.input !== document.activeElement) { this.element.input.focus() }
     return this
   }
@@ -211,7 +211,7 @@ class Switch {
    * @return {?} [description]
    */
   blur () {
-    this.root.classList.remove('is-focused')
+    this.element.classList.remove('is-focused')
     return this
   }
 }

package/src/tabs.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import create from './component/create'
-import insert from './component/insert'
+import create from './mixin/create'
+import insert from './mixin/insert'
 import emitter from './module/emitter'
 
 import offset from './element/offset'
@@ -44,11 +44,11 @@ class Tabs {
    * @return {Object} This class instance
    */
   build () {
-    this.root = create(this.options)
+    this.element = create(this.options)
     this.tab = { }
     if (this.options.list) {
       this.list = new List({
-        // root: this.root,
+        // root: this.element,
         tag: 'div',
         list: this.options.list,
         target: '.material-button',
@@ -75,11 +75,11 @@ class Tabs {
           this.selected = item
           this.click(item)
         }
-      }).insert(this.root)
+      }).insert(this.element)
     }
 
     this.indicator = create(this.options.indicator)
-    this.insertElement(this.indicator, this.root)
+    this.insertElement(this.indicator, this.element)
 
     if (this.options.container) {
       this.insert(this.options.container)
@@ -95,8 +95,8 @@ class Tabs {
   }
 
   click (item, silent) {
-    // console.log('clickitem', item, this.root);
-    var or = offset(this.root)
+    // console.log('clickitem', item, this.element);
+    var or = offset(this.element)
     var o = offset(item)
     this.indicator.setAttribute('style', 'width: ' + o.width + 'px; left: ' + (o.left - or.left) + 'px;')
 

package/src/tabview.js

@@ -31,7 +31,7 @@ class TabView {
 
     var ready = false
 
-    observer.insert(this.root, () => {
+    observer.insert(this.element, () => {
       // console.log('!!! inserted')
       if (!ready) {
         ready = true
@@ -46,13 +46,13 @@ class TabView {
   }
 
   build () {
-    this.root = document.createElement(this.options.tag || 'div')
-    this.root.classList.add('tabview')
+    this.element = document.createElement(this.options.tag || 'div')
+    this.element.classList.add('tabview')
 
-    this.root.classList.add('view')
+    this.element.classList.add('view')
 
     if (this.options.class !== 'tabview') {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
 
     this.ui = {}
@@ -63,9 +63,9 @@ class TabView {
     this.view = {}
     this.views = []
 
-    this.ui.tabs = this.root.querySelector('[class="tabs"]')
-    this.ui.view = this.root.querySelector('[class="views"]')
-    this.ui.indicator = this.root.querySelector('[class="indicator"]')
+    this.ui.tabs = this.element.querySelector('[class="tabs"]')
+    this.ui.view = this.element.querySelector('[class="views"]')
+    this.ui.indicator = this.element.querySelector('[class="indicator"]')
 
     this.ui.buttons = this.ui.tabs.childNodes
     this.ui.views = this.ui.view.childNodes

package/src/text.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import create from './component/create'
-import insert from './component/insert'
+import create from './mixin/create'
+import insert from './mixin/insert'
 
 var defaults = {
   prefix: 'material',
@@ -66,7 +66,7 @@ class Text {
   build () {
     this.options.tag = this.options.types[this.options.type]
 
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     if (this.options.text) {
       this.set(this.options.text)
@@ -85,9 +85,9 @@ class Text {
    */
   set (value) {
     if (value) {
-      this.root.textContent = value
+      this.element.textContent = value
     } else {
-      this.root.textContent = ''
+      this.element.textContent = ''
     }
 
     return this