material 0.6.2 → 0.7.1

package/src/slider.js

@@ -1,13 +1,11 @@
-'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 +13,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 +82,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 +103,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 +131,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 +155,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 +165,7 @@ class Slider {
 
     this.initDragging()
 
-    var delay = 100
+    const delay = 100
 
     setTimeout(() => {
       this.setValue(this.options.value)
@@ -195,8 +193,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 +205,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 +216,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 +228,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 +239,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 +263,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 +282,7 @@ class Slider {
    * @return {?}           [description]
    */
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.element, container, context)
   }
 
   /**
@@ -313,7 +311,7 @@ class Slider {
    * @param {string} value
    */
   get (prop) {
-    var value
+    let value
 
     switch (prop) {
       case 'value':

package/src/snackbar.js

@@ -1,69 +1,90 @@
-'use strict'
-
-// import modules
-import init from './component/init'
-import create from './element/create'
-import insert from './component/insert'
-import classify from './component/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)
+
+    let snackbarContainer = container.querySelector('.snackbars')
 
-    this.root = create(tag)
-    classify(this.root, this.options)
+    // console.log('snackbarContainer', snackbarContainer)
 
-    this.layout = new Layout(this.options.layout, this.root)
+    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.root.classList.add('show')
-    }, 10)
-
-    if (this.options.delay) {
-      setTimeout(() => {
-        this.hide()
-      }, this.options.delay)
+  render () {
+    this.ui.text.set(this.options.text)
+
+    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.root.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 './component/control'
-import build from './element/build'
-import emitter from './module/emitter'
-import insert from './component/insert'
+// module
+import build from './module/build'
+import dataset from './module/dataset'
 import attach from './module/attach'
-import classify from './component/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.root = this.element.root
+  setup () {
+    this.styleAttributes()
 
-    classify(this.root, this.options)
+    this.buildIcon()
+    this.buildLabel()
 
-    if (this.options.disabled) {
-      this.disable()
+    if (this.options.data) {
+      dataset(this.root, 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,23 +188,19 @@ class Switch {
     return this
   }
 
-  /**
-   * Set checkbox value
-   * @param {boolean} value [description]
-   */
   check (checked, silent) {
     // console.log('check', checked, silent)
     if (checked === true) {
-      this.root.classList.add('is-checked')
-      this.element.input.checked = true
+      this.element.classList.add('is-checked')
+      this.ui.input.checked = true
       this.checked = true
       this.value = true
       if (!silent) {
         this.emit('change', this.checked)
       }
     } else {
-      this.root.classList.remove('is-checked')
-      this.element.input.checked = false
+      this.element.classList.remove('is-checked')
+      this.ui.input.checked = false
       this.checked = false
       this.value = false
       if (!silent) {
@@ -194,24 +210,16 @@ class Switch {
     return this
   }
 
-  /**
-   * [_onInputFocus description]
-   * @return {?} [description]
-   */
   focus () {
     if (this.disabled === true) return this
 
-    this.root.classList.add('is-focused')
-    if (this.element.input !== document.activeElement) { this.element.input.focus() }
+    this.element.classList.add('is-focused')
+    if (this.ui.input !== document.activeElement) { this.ui.input.focus() }
     return this
   }
 
-  /**
-   * [_onInputBlur description]
-   * @return {?} [description]
-   */
   blur () {
-    this.root.classList.remove('is-focused')
+    this.element.classList.remove('is-focused')
     return this
   }
 }