material 0.7.1 → 0.7.2

package/src/search.js

@@ -1,20 +1,24 @@
 import EventEmitter from './mixin/emitter'
 
 import build from './module/build'
+import display from './mixin/display'
 import bindEvents from './module/events'
 
+import Element from './element'
 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,
+    layout: [
+      [Element, 'input', { tag: 'input', class: 'input'} ],
+      [Button, 'clear', { class: 'clear'} ]
+    ],
     events: [
-      ['input.input', 'onInput'],
-      ['input.cancel', 'onCancel']
+      ['ui.input.input', 'onInput'],
+      ['ui.clear.click', 'onClear']
     ]
   }
 
@@ -23,47 +27,38 @@ class Search extends EventEmitter {
 
     this.init(options)
     this.build()
-    this.buildSearch()
     this.bindEvents()
-  }
 
-  init(options) {
-    this.options = Object.assign({}, Search.defaults, options || {})
-    Object.assign(this, build, bindEvents)
+    this.input = this.ui.input
   }
 
-  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)
-    }
+  init (options) {
+    this.options = { ...Search.defaults, ...options }
+    Object.assign(this, build, display, bindEvents)
+  }
 
-    this.input = document.createElement('input')
-    this.input.classList.add('input')
-    this.element.appendChild(this.input)
+  set (value) {
+    if (value) this.input.value = value
+    else this.input.value = ''
+  }
 
-    this.cancel = new Button({
-      container: this.element,
-      class: 'clear',
-      icon: this.options.iconCancel
-    })
+  focus () {
+    this.ui.input.focus()
   }
 
   onInput () {
-    if (this.input.value.length < this.options.minChar) return
+    if (this.ui.input.value.length < this.options.minChar) return
 
     clearTimeout(this.timeout)
 
     this.timeout = setTimeout(() => {
-      this.emit('change', this.input.value)
+      this.emit('change', this.ui.input.value)
     }, this.options.timeout)
   }
 
-  onCancel () {
-    this.input.value = ''
-    this.input.focus()
+  onClear () {
+    this.set(null)
+    this.focus()
     this.emit('cancel')
   }
 }

package/src/select.js

@@ -1,9 +1,9 @@
 import EventEmitter from './mixin/emitter'
-
+// modules
 import build from './module/build'
 import attach from './module/attach'
 import attributes from './module/attributes'
-import dataset from './view/dataset'
+import dataset from './module/dataset'
 
 class Select extends EventEmitter {
   static defaults = {
@@ -23,7 +23,7 @@ class Select extends EventEmitter {
     this.attach()
   }
 
-  init(options) {
+  init (options) {
     this.options = Object.assign({}, Select.defaults, options || {})
     Object.assign(this, build, attach, dataset)
   }
@@ -61,13 +61,13 @@ class Select extends EventEmitter {
   setOptions (options) {
     // console.log('buildCountry', this.input)
 
-    var first = this.options.first
+    const first = this.options.first
 
     if (first && first[0] && first[1]) {
       this.input.options[0] = new Option(first[1], first[0])
     }
 
-    for (var i = 0; i < options.length; i++) {
+    for (let i = 0; i < options.length; i++) {
       this.addOption(options[i][1], options[i][0])
     }
   }
@@ -96,7 +96,7 @@ class Select extends EventEmitter {
   }
 
   get () {
-    var value = null
+    let value = null
 
     if (this.input[this.input.selectedIndex]) {
       value = this.input[this.input.selectedIndex].value

package/src/selecter.js

@@ -1,52 +1,50 @@
-import emitter from './module/emitter'
+import EventEmitter from './mixin/emitter'
+// modules
 import attach from './module/attach'
-import dataset from './view/dataset'
+import dataset from './module/dataset'
 import attributes from './module/attributes'
-import addClass from './module/addclass'
-
-// ui
+import * as css from './module/css'
+// components
 import Layout from './layout'
 import Element from './element'
 import Button from './button'
 
-const defaults = {
-  class: 'selecter',
-  first: null,
-  attributes: ['type', 'name', 'autocomplete', 'required'],
-  layout: [
-    [Element, 'label', { tag: 'label', class: 'label' }],
-    [Element, 'value', { tag: 'value', class: 'value' }],
-    [Element, 'input', { tag: 'input', type: 'text', class: 'input' }],
-    [Element, 'list', { class: 'list' },
-      [Element, 'head', { class: 'head' },
-        [Element, 'title', { class: 'title' }],
-        [Button, 'close', { class: 'close' }]
-      ],
-      [Element, 'body', { class: 'body' }]
+class Selecter extends EventEmitter {
+  static defaults = {
+    class: 'selecter',
+    first: null,
+    attributes: ['type', 'name', 'autocomplete', 'required'],
+    layout: [
+      [Element, 'label', { tag: 'label', class: 'label' }],
+      [Element, 'value', { tag: 'value', class: 'value' }],
+      [Element, 'input', { tag: 'input', type: 'text', class: 'input' }],
+      [Element, 'list', { class: 'list' },
+        [Element, 'head', { class: 'head' },
+          [Element, 'title', { class: 'title' }],
+          [Button, 'close', { class: 'close' }]
+        ],
+        [Element, 'body', { class: 'body' }]
+      ]
+    ],
+    events: [
+      ['ui.value.click', 'showList'],
+      ['ui.list.click', 'select'],
+      ['ui.close.click', 'hideList']
     ]
-  ],
-  events: [
-    ['ui.value.click', 'showList'],
-    ['ui.list.click', 'select'],
-    ['ui.close.click', 'hideList']
-  ]
-}
+  }
 
-class Selecter {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter, attach, dataset)
+    super()
 
+    this.init(options)
     this.build()
     this.setup()
     this.attach()
+  }
 
-    return this
+  init (options) {
+    this.options = Object.assign({}, Selecter.defaults, options || {})
+    Object.assign(this, attach, dataset)
   }
 
   setup () {
@@ -75,17 +73,18 @@ class Selecter {
       this.element.classList.add(this.options.case + '-case')
     }
   }
+
   /**
    * build method
    * @return {Object} The class instance
    */
   build () {
-    var tag = this.options.tag || 'span'
+    const tag = this.options.tag || 'span'
     this.element = document.createElement(tag)
     this.element.classList.add('selecter')
 
     if (this.options.class !== 'selecter') {
-      addClass(this.element, this.options.class)
+      css.add(this.element, this.options.class)
     }
 
     this.layout = new Layout(this.options.layout, this.element)
@@ -138,9 +137,9 @@ class Selecter {
 
     // console.log('list', list)
 
-    for (var i = 0; i < list.length; i++) {
+    for (let i = 0; i < list.length; i++) {
       // if (list.indexOf(list[i][0]) > -1) {
-      var item = document.createElement('div')
+      const item = document.createElement('div')
       item.classList.add('item')
       item.innerHTML = list[i][1]
       item.dataset.value = list[i][0]
@@ -169,6 +168,7 @@ class Selecter {
       this.element.classList.add('bold')
     }
   }
+
   showList () {
     // console.log('showList')
 

package/src/selector.js

@@ -121,8 +121,8 @@ class Selector {
   update (target) {
     target = target || this.target
     if (!target) return
-    var coords = target.getBoundingClientRect()
-    var pcoords = this.element.parentNode.getBoundingClientRect()
+    const coords = target.getBoundingClientRect()
+    const pcoords = this.element.parentNode.getBoundingClientRect()
 
     this.element.style.top = coords.top - pcoords.top + 'px'
     this.element.style.left = coords.left - pcoords.left + 'px'
@@ -158,7 +158,7 @@ class Selector {
     const offsetY = this.element.getBoundingClientRect().y
     const element = document.body
 
-    var ratio = parseInt(this.element.style.width, 10) / parseInt(this.element.style.height, 10)
+    const ratio = parseInt(this.element.style.width, 10) / parseInt(this.element.style.height, 10)
 
     this.border.setPointerCapture(ev.pointerId)
 

package/src/skin/material/component/navigation.sass

@@ -1 +1,9 @@
-.navigation
+.navigation
+  flex: none
+  display: flex
+  flex-direction: column
+  width: 12px
+  background-color: #3a3a3a
+  margin: 0
+  overflow: hidden
+  transition: 0.1s linear width

package/src/slider.js

@@ -8,7 +8,7 @@ import offset from './element/offset'
 import classify from './module/classify'
 // import control from './control';
 import attach from './module/attach'
-import css from './module/css'
+import * as css from './module/css'
 import emitter from './module/emitter'
 
 import icon from './skin/material/icon/pin.svg'

package/src/snackbar.js

@@ -23,24 +23,25 @@ class Snackbar extends EventEmitter {
       ['ui.action.click', 'action'],
       ['ui.close.click', 'destroy']
     ]
-  };
+  }
 
   constructor (options) {
     super()
 
     this.init(options)
     this.build(this.constructor)
-    this.render()    
+    this.render()
     this.bindEvents()
     this.show()
 
-    if (this.options.duration)
-      setTimeout(()=>{
+    if (this.options.duration) {
+      setTimeout(() => {
         this.destroy()
       }, this.options.duration)
+    }
   }
 
-  init(options) {
+  init (options) {
     this.options = Object.assign({}, Snackbar.defaults, options || {})
     Object.assign(this, build, bindEvents, display)
 
@@ -50,7 +51,7 @@ class Snackbar extends EventEmitter {
   buildSnackbarContainer (container = document.body) {
     // console.log('buildSnackbarContainer', container)
 
-    let snackbarContainer = container.querySelector('.snackbars')
+    const snackbarContainer = container.querySelector('.snackbars')
 
     // console.log('snackbarContainer', snackbarContainer)
 
@@ -82,7 +83,7 @@ class Snackbar extends EventEmitter {
     this.destroy()
   }
 
-  close() {
+  close () {
     // console.log('close')
     this.destroy()
   }

package/src/switch.js

@@ -55,7 +55,7 @@ class Switch extends EventEmitter {
     this.buildLabel()
 
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     // console.log('attribute', this.ui.input, this.options)

package/src/switcher.js

@@ -1,6 +1,6 @@
 import EventEmitter from './mixin/emitter'
 
-class Switcher extends EventEmitter{
+class Switcher extends EventEmitter {
   static defaults = {
     class: 'switcher',
     tag: 'div',
@@ -9,7 +9,7 @@ class Switcher extends EventEmitter{
     mode: 'unique',
     allowEmpty: false
   }
-  
+
   constructor (options) {
     super()
 
@@ -22,7 +22,7 @@ class Switcher extends EventEmitter{
     }
   }
 
-  init(options) {
+  init (options) {
     this.options = Object.assign({}, Switcher.defaults, options || {})
   }
 
@@ -85,8 +85,8 @@ class Switcher extends EventEmitter{
     if (item) {
       item.classList.add('preselected')
     } else {
-      var items = this.list.childNodes
-      for (var i = 0; i < items.length; i++) {
+      const items = this.list.childNodes
+      for (let i = 0; i < items.length; i++) {
         items[i].classList.remove('preselected')
       }
     }
@@ -94,7 +94,7 @@ class Switcher extends EventEmitter{
 
   selectByName (name) {
     // console.log('selectByName', name)
-    var item = this.element.querySelector('[data-switcher="' + name + '"]')
+    const item = this.element.querySelector('[data-switcher="' + name + '"]')
     // console.log('item', item)
     if (item) {
       this.select(item)
@@ -103,7 +103,7 @@ class Switcher extends EventEmitter{
 
   preSelectByName (name) {
     // console.log('selectByName', name)
-    var item = this.element.querySelector('[data-switcher="' + name + '"]')
+    const item = this.element.querySelector('[data-switcher="' + name + '"]')
     // console.log('item', item)
     this.preselect(item)
   }
@@ -111,9 +111,9 @@ class Switcher extends EventEmitter{
   unique (option) {
     // console.log('option', option)
     if (!option.classList.contains('selected')) {
-      var options = this.list.childNodes
+      const options = this.list.childNodes
 
-      for (var i = 0; i < options.length; i++) {
+      for (let i = 0; i < options.length; i++) {
         options[i].classList.remove('selected')
       }
 
@@ -132,7 +132,7 @@ class Switcher extends EventEmitter{
   multiple (option) {
     if (option.classList.contains('selected')) {
       if (this.selected.length === 1) return
-      var i = this.selected.indexOf(option.dataset.switcher)
+      const i = this.selected.indexOf(option.dataset.switcher)
       this.selected.splice(i, 1)
       option.classList.remove('selected')
     } else {
@@ -163,7 +163,7 @@ class Switcher extends EventEmitter{
 
   setValue (value) {
     // console.log('value', value, this.options.list, this.element)
-    var list = this.options.list
+    const list = this.options.list
     if (this.options.mode === 'unique') {
       for (var i = 0; i < list.length; i++) {
         this.element.querySelector('[data-switcher="' + list[i] + '"]').classList.remove('selected')
@@ -190,7 +190,7 @@ class Switcher extends EventEmitter{
 
     if (!list) return
 
-    for (var i = 0; i < list.length; i++) {
+    for (let i = 0; i < list.length; i++) {
       this.addOption(list[i])
     }
   }
@@ -202,19 +202,19 @@ class Switcher extends EventEmitter{
 
     if (this.options.list.length < 1) this.options.list = list
 
-    for (var i = 0; i < list.length; i++) {
+    for (let i = 0; i < list.length; i++) {
       this.addOption(list[i])
     }
   }
 
   addOption (value) {
     // console.log('addOption', value)
-    var item = document.createElement('li')
+    const item = document.createElement('li')
     item.classList.add('item')
     item.dataset.switcher = value
     item.innerHTML = value
     this.list.appendChild(item)
-      // this.options.list.push(list[i])
+    // this.options.list.push(list[i])
   }
 
   setLabel (value) {

package/src/tabs.js

@@ -48,7 +48,6 @@ class Tabs {
     this.tab = { }
     if (this.options.list) {
       this.list = new List({
-        // root: this.element,
         tag: 'div',
         list: this.options.list,
         target: '.material-button',
@@ -56,7 +55,7 @@ class Tabs {
         label: 'Flat',
 
         render: (info) => {
-          var item
+          let item
           if (info.type === 'divider') {
             item = new Divider()
           } else {
@@ -91,13 +90,13 @@ class Tabs {
   select (tab) {
     // console.log('select', tab, this.tab)
     this.selected = this.tab[tab]
-    this.click(this.selected.root, true)
+    this.click(this.selected.element, true)
   }
 
   click (item, silent) {
     // console.log('clickitem', item, this.element);
-    var or = offset(this.element)
-    var o = offset(item)
+    const or = offset(this.element)
+    const o = offset(item)
     this.indicator.setAttribute('style', 'width: ' + o.width + 'px; left: ' + (o.left - or.left) + 'px;')
 
     if (!silent) { this.emit('select', item.dataset.name) }

package/src/tabview.js

@@ -1,38 +1,24 @@
-import emitter from './module/emitter'
-import observer from './module/observer'
+import EventEmitter from './mixin/emitter'
+import observer from './element/observer'
+import build from './module/build'
 import display from './view/display'
 
-/**
- * Class Tab
- * @class
- * @since 0.0.1
- * @example
- * var tab = new TabView()
- */
-
-var defaults = {
-  class: 'tabview',
-  mode: 'style' // css
-}
+class TabView extends EventEmitter {
+  static defaults = {
+    base: 'view',
+    class: 'tabview',
+    mode: 'style'
+  }
 
-class TabView {
-  /**
-   * The init method of the Button class
-   * @param  {Object} The element attributes
-   * @private
-   * @return {DOMElement} The dom element
-   */
   constructor (options) {
-    // console.log('TabView')
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter, display)
+    super()
 
+    this.init(options)
     this.build()
 
-    var ready = false
+    let ready = false
 
     observer.insert(this.element, () => {
-      // console.log('!!! inserted')
       if (!ready) {
         ready = true
         this.setup()
@@ -45,15 +31,9 @@ class TabView {
     return this
   }
 
-  build () {
-    this.element = document.createElement(this.options.tag || 'div')
-    this.element.classList.add('tabview')
-
-    this.element.classList.add('view')
-
-    if (this.options.class !== 'tabview') {
-      this.element.classList.add(this.options.class)
-    }
+  init (options) {
+    this.options = { ...TabView.defaults, ...options }
+    Object.assign(this, build, display)
 
     this.ui = {}
   }
@@ -72,7 +52,7 @@ class TabView {
 
     // console.log('views', this.ui.views)
 
-    for (var i = 0; i < this.ui.views.length; i++) {
+    for (let i = 0; i < this.ui.views.length; i++) {
       if (this.ui.views[i].dataset) {
         this.views.push(this.ui.views[i].dataset.view)
         this.view[this.ui.views[i].dataset.view] = this.ui.views[i]
@@ -98,7 +78,7 @@ class TabView {
   select (view) {
     // console.log('select', view, this.ui.tabs)
     if (this.ui && this.ui.tabs) {
-      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      const button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
       // console.log('tab', button)
       if (button) {
         this.click(button)
@@ -111,7 +91,7 @@ class TabView {
   disable (view) {
     // console.log('select', view)
     if (this.ui && this.ui.tabs) {
-      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      const button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
       // console.log('tab', button)
       if (button) {
         button.disabled = 'disabled'
@@ -125,7 +105,7 @@ class TabView {
     // console.log('select', view)
 
     if (this.ui && this.ui.tabs) {
-      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      const button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
       // console.log('tab', button)
       if (button) {
         button.disabled = false
@@ -137,7 +117,7 @@ class TabView {
 
   hideView () {
     // console.log('hideView')
-    for (var i = 0; i < this.ui.views.length; i++) {
+    for (let i = 0; i < this.ui.views.length; i++) {
       // console.log('hide', this.ui.views[i])
       this.ui.views[i].classList.add('hide')
     }
@@ -145,7 +125,7 @@ class TabView {
 
   click (button) {
     // console.log('click', button.dataset.view, true)
-    var view = this.ui.view.querySelector('[data-view="' + button.dataset.view + '"]')
+    const view = this.ui.view.querySelector('[data-view="' + button.dataset.view + '"]')
     this.hideView()
 
     if (this.button) {
@@ -172,14 +152,14 @@ class TabView {
   indicator (button) {
     if (!this.ui.indicator) return
 
-    var t = this.ui.tabs.getBoundingClientRect()
-    var b = button.getBoundingClientRect()
+    const tabs = this.ui.tabs.getBoundingClientRect()
+    var button = button.getBoundingClientRect()
 
     // console.log('tab rect', b.height, b.height)
 
-    this.ui.indicator.style.top = t.height - 2 + 'px'
-    this.ui.indicator.style.left = (b.left - t.left) + 'px'
-    this.ui.indicator.style.width = b.width + 'px'
+    this.ui.indicator.style.top = tabs.height - 2 + 'px'
+    this.ui.indicator.style.left = (button.left - tabs.left) + 'px'
+    this.ui.indicator.style.width = button.width + 'px'
   }
 }
 

package/src/text.js

@@ -27,7 +27,7 @@ class Text {
     // console.log('set', text)
     if (text === undefined) return
 
-    var label = this.options.label || ''
+    const label = this.options.label || ''
 
     if (this.options.textFirst) {
       this.element.innerHTML = text + label

package/src/textfield.js

@@ -32,7 +32,7 @@ class Textfield {
   }
 
   build () {
-    var tag = this.options.tag || 'div'
+    const tag = this.options.tag || 'div'
 
     this.element = document.createElement(tag)
     this.element.classList.add('textfield')