material 0.7.0 → 0.7.2

package/src/snackbar.js

@@ -1,69 +1,91 @@
-'use strict'
-
-// import modules
-import init from './mixin/init'
-import create from './element/create'
-import insert from './mixin/insert'
-import classify from './module/classify'
-// import components
-import Layout from './layout'
-
-let defaults = {
-  prefix: 'material',
-  class: 'snackbar',
-  delay: 2000,
-  theme: 'dark'
-}
+// base class
+import EventEmitter from './mixin/emitter'
+// related modules
+import build from './module/build'
+import bindEvents from './module/events'
+import display from './mixin/display'
+// ui element
+import Text from './text'
+import Button from './button'
+
+class Snackbar extends EventEmitter {
+  static defaults = {
+    class: 'snackbar',
+    transition: 225,
+    duration: 4000,
+    close: false,
+    layout: [
+      [Text, 'text', { tag: 'span', class: 'text' }],
+      [Button, 'action', { class: 'action', type: 'link' }],
+      [Button, 'close', { class: 'close', type: 'action' }]
+    ],
+    events: [
+      ['ui.action.click', 'action'],
+      ['ui.close.click', 'destroy']
+    ]
+  }
 
-class Snackbar {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    super()
 
-    this.init()
-    this.build()
+    this.init(options)
+    this.build(this.constructor)
+    this.render()
+    this.bindEvents()
     this.show()
+
+    if (this.options.duration) {
+      setTimeout(() => {
+        this.destroy()
+      }, this.options.duration)
+    }
   }
 
-  init () {
-    Object.assign(this, insert)
+  init (options) {
+    this.options = Object.assign({}, Snackbar.defaults, options || {})
+    Object.assign(this, build, bindEvents, display)
+
+    this.buildSnackbarContainer(this.options.container)
   }
 
-  /**
-   * build the component using the super method
-   * @return {Object} The class instance
-   */
-  build () {
-    var tag = this.options.tag || 'div'
+  buildSnackbarContainer (container = document.body) {
+    // console.log('buildSnackbarContainer', container)
 
-    this.element = create(tag)
-    classify(this.element, this.options)
+    const snackbarContainer = container.querySelector('.snackbars')
 
-    this.layout = new Layout(this.options.layout, this.element)
+    // console.log('snackbarContainer', snackbarContainer)
+
+    if (!snackbarContainer) {
+      this.options.container = document.createElement('div')
+      this.options.container.classList.add('snackbars')
+      container.appendChild(this.options.container)
+    } else {
+      this.options.container = snackbarContainer
+    }
   }
 
-  /**
-   *
-   * @return {[type]} [description]
-   */
-  show () {
-    setTimeout(() => {
-      this.element.classList.add('show')
-    }, 10)
+  render () {
+    this.ui.text.set(this.options.text)
 
-    if (this.options.delay) {
-      setTimeout(() => {
-        this.hide()
-      }, this.options.delay)
+    if (this.options.action) {
+      this.ui.action.set(this.options.action)
+      this.ui.action.element.classList.add('show')
     }
+
+    if (this.options.close) this.ui.close.element.classList.add('show')
+
+    return this
+  }
+
+  action () {
+    // console.log('action')
+    this.emit('action')
+    this.destroy()
   }
 
-  hide () {
-    this.element.classList.remove('show')
+  close () {
+    // console.log('close')
+    this.destroy()
   }
 }
 

package/src/switch.js

@@ -1,106 +1,125 @@
-'use strict'
+import EventEmitter from './mixin/emitter'
 
-// import control from '../control';
-// import control from './mixin/control'
-import build from './element/build'
-import emitter from './module/emitter'
-import insert from './mixin/insert'
+// module
+import build from './module/build'
+import dataset from './module/dataset'
 import attach from './module/attach'
-import classify from './module/classify'
-
-let defaults = {
-  prefix: 'material',
-  class: 'switch',
-  type: 'control',
-  label: null,
-  checked: false,
-  error: false,
-  value: false,
-  disabled: false,
-  build: ['$root.material-switch', {},
-    ['input$input$switch-input', { type: 'checkbox' }],
-    ['span$control.switch-control', {},
-      ['span$track.switch-track', {},
-        ['span$knob.switch-knob', {}]
+import attributes from './module/attributes'
+
+// ui
+import Layout from './layout'
+import Element from './element'
+
+class Switch extends EventEmitter {
+  static defaults = {
+    class: 'switch',
+    attributes: ['type', 'name', 'required', 'checked'],
+    layout: [
+      [Element, 'input', { class: 'input', type: 'checkbox' }],
+      [Element, 'control', { class: 'control' },
+        [Element, 'track', { class: 'track' },
+          [Element, 'knob', { class: 'knob' }]
+        ]
       ]
     ],
-    ['label$label.switch-label']
-  ],
-  events: [
-    ['element.control.click', 'toggle'],
-    // ['element.label.click', 'toggle'],
-    // for accessibility purpose
-    ['element.input.click', 'toggle'],
-    ['element.input.focus', 'focus'],
-    ['element.input.blur', 'blur']
-    // ['element.input.keydown', 'keydown']
-  ]
-}
+    events: [
+      ['ui.control.click', 'toggle'],
+      // ['ui.label.click', 'toggle'],
+      // for accessibility purpose
+      ['ui.input.click', 'toggle'],
+      ['ui.input.focus', 'focus'],
+      ['ui.input.blur', 'blur']
+    ]
+  }
 
-/**
- * Switch class
- * @class
- * @extends Control
- */
-class Switch {
-  /**
-   * Constructor
-   * @param  {Object} options
-  - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
+    super()
+
     this.init(options)
     this.build()
+    this.setup()
     this.attach()
-
-    return this
   }
 
-  /**
-   * Constructor
-   * @param  {Object} options The class options
-   * @return {Object} This class instance
-   */
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter, attach, insert)
+    this.options = Object.assign({}, Switch.defaults, options || {})
+    Object.assign(this, build, attach, dataset)
 
     this.value = this.options.value
-
-    return this
   }
 
-  /**
-   * build method
-   * @return {Object} The class instance
-   */
-  build () {
-    this.element = build(this.options.build)
-    this.element = this.element.root
+  setup () {
+    this.styleAttributes()
 
-    classify(this.element, this.options)
+    this.buildIcon()
+    this.buildLabel()
 
-    if (this.options.disabled) {
-      this.disable()
+    if (this.options.data) {
+      dataset(this.element, this.options.data)
+    }
+
+    // console.log('attribute', this.ui.input, this.options)
+    attributes(this.ui.input, this.options)
+
+    if (this.options.checked) {
+      this.check(true)
     }
 
     if (this.value) {
       this.element.input.setAttribute('checked', 'checked')
     }
 
-    this.element.input.setAttribute('aria-label', this.options.name)
+    if (this.options.tooltip) {
+      this.element.setAttribute('data-tooltip', this.options.tooltip)
+    }
 
-    let text = this.options.label || this.options.text || ''
+    this.ui.input.setAttribute('aria-label', this.options.name)
 
-    this.element.label.textContent = text
-    this.element.label.setAttribute('for', this.options.name)
-    if (this.options.checked) {
-      this.check(true)
+    if (this.options.case) {
+      this.element.classList.add(this.options.case + '-case')
     }
+  }
+
+  buildLabel () {
+    // console.log('buildLabel', this.options.label)
+    if (!this.options.label) return
 
-    if (this.options.container) {
-      this.insert(this.options.container)
+    this.ui.label = document.createElement('label')
+    this.ui.label.classList.add('label')
+    this.ui.label.innerHTML = this.options.label
+
+    if (this.options.name) {
+      this.ui.label.setAttribute('for', this.options.name)
+    }
+
+    this.element.insertBefore(this.ui.label, this.ui.input)
+  }
+
+  buildIcon () {
+    if (!this.options.icon) return
+
+    this.ui.icon = document.createElement('i')
+    this.ui.icon.classList.add('icon')
+    this.ui.icon.innerHTML = this.options.icon
+
+    this.element.insertBefore(this.ui.icon, this.ui.input)
+  }
+
+  styleAttributes () {
+    if (this.options.style) {
+      this.element.classList.add('style-' + this.options.style)
+    }
+
+    if (this.options.size) {
+      this.element.classList.add(this.options.size + '-size')
+    }
+
+    if (this.options.color) {
+      this.element.classList.add('color-' + this.options.color)
+    }
+
+    if (this.options.bold) {
+      this.element.classList.add('bold')
     }
   }
 
@@ -115,6 +134,9 @@ class Switch {
       case 'value':
         this.setValue(value, silent)
         break
+      case 'text':
+        this.setValue(value)
+        break
       case 'disabled':
         if (value === true) {
           this.disable()
@@ -129,31 +151,29 @@ class Switch {
     return this
   }
 
+  setLabel (value) {
+    // console.log('setLabel', value)
+    if (this.ui.label) {
+      this.ui.label.innerHTML = value
+    }
+  }
+
+  setText (value) {
+    this.setLabel(value)
+  }
+
   get () {
     return this.value
   }
 
-  /**
-   * set switch value
-   * @param {boolean} value [description]
-   */
   getValue () {
     return this.value
   }
 
-  /**
-   * set switch value
-   * @param {boolean} value [description]
-   */
   setValue (value, silent) {
-    // console.log('setValue', value)
     this.check(value, silent)
   }
 
- /**
-   * [toggle description]
-   * @return {Object} The class instance
-   */
   toggle () {
     if (this.disabled) return
 
@@ -168,15 +188,11 @@ class Switch {
     return this
   }
 
-  /**
-   * Set checkbox value
-   * @param {boolean} value [description]
-   */
   check (checked, silent) {
     // console.log('check', checked, silent)
     if (checked === true) {
       this.element.classList.add('is-checked')
-      this.element.input.checked = true
+      this.ui.input.checked = true
       this.checked = true
       this.value = true
       if (!silent) {
@@ -184,7 +200,7 @@ class Switch {
       }
     } else {
       this.element.classList.remove('is-checked')
-      this.element.input.checked = false
+      this.ui.input.checked = false
       this.checked = false
       this.value = false
       if (!silent) {
@@ -194,22 +210,14 @@ class Switch {
     return this
   }
 
-  /**
-   * [_onInputFocus description]
-   * @return {?} [description]
-   */
   focus () {
     if (this.disabled === true) return this
 
     this.element.classList.add('is-focused')
-    if (this.element.input !== document.activeElement) { this.element.input.focus() }
+    if (this.ui.input !== document.activeElement) { this.ui.input.focus() }
     return this
   }
 
-  /**
-   * [_onInputBlur description]
-   * @return {?} [description]
-   */
   blur () {
     this.element.classList.remove('is-focused')
     return this

package/src/{control/switcher.js → switcher.js}

@@ -1,32 +1,29 @@
-import emitter from '../module/emitter'
-
-const defaults = {
-  class: 'switcher',
-  tag: 'div',
-  list: [],
-  first: false,
-  mode: 'unique',
-  allowEmpty: false
-}
+import EventEmitter from './mixin/emitter'
+
+class Switcher extends EventEmitter {
+  static defaults = {
+    class: 'switcher',
+    tag: 'div',
+    list: [],
+    first: false,
+    mode: 'unique',
+    allowEmpty: false
+  }
 
-class Switcher {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter)
+    super()
 
+    this.init(options)
     this.build()
     this.attach()
 
     if (this.options.default) {
       this.selectByName(this.options.default, true)
     }
+  }
 
-    return this
+  init (options) {
+    this.options = Object.assign({}, Switcher.defaults, options || {})
   }
 
   build () {
@@ -88,8 +85,8 @@ class Switcher {
     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')
       }
     }
@@ -97,7 +94,7 @@ class Switcher {
 
   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)
@@ -106,7 +103,7 @@ class Switcher {
 
   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)
   }
@@ -114,9 +111,9 @@ class Switcher {
   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')
       }
 
@@ -135,7 +132,7 @@ class Switcher {
   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 {
@@ -166,7 +163,7 @@ class Switcher {
 
   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')
@@ -193,7 +190,7 @@ class Switcher {
 
     if (!list) return
 
-    for (var i = 0; i < list.length; i++) {
+    for (let i = 0; i < list.length; i++) {
       this.addOption(list[i])
     }
   }
@@ -205,19 +202,19 @@ class Switcher {
 
     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) }