material 0.7.0 → 0.7.1

package/src/snackbar.js

@@ -1,69 +1,90 @@
-'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)
+
+    let snackbarContainer = container.querySelector('.snackbars')
 
-    this.element = create(tag)
-    classify(this.element, this.options)
+    // console.log('snackbarContainer', snackbarContainer)
 
-    this.layout = new Layout(this.options.layout, this.element)
+    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)
-
-    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.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.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,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
-}
-
-class Switcher {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
+import EventEmitter from './mixin/emitter'
+
+class Switcher extends EventEmitter{
+  static defaults = {
+    class: 'switcher',
+    tag: 'div',
+    list: [],
+    first: false,
+    mode: 'unique',
+    allowEmpty: false
+  }
+  
   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 () {

package/src/text.js

@@ -1,96 +1,47 @@
-'use strict'
+import build from './module/build'
 
-import create from './mixin/create'
-import insert from './mixin/insert'
-
-var defaults = {
-  prefix: 'material',
-  class: 'text',
-  type: 'default',
-  types: {
-    default: 'span',
-    display4: 'h1',
-    display3: 'h1',
-    display2: 'h1',
-    display1: 'h1',
-    headline: 'h1',
-    title: 'h2',
-    subheading2: 'h3',
-    subheading1: 'h4',
-    body: 'p',
-    body2: 'aside',
-    caption: 'span'
+class Text {
+  static defaults = {
+    class: 'text',
+    tag: 'span'
   }
-}
 
-/**
- * this class creates a text component
- *
- * @since 0.0.6
- * @category Element
- * @param {HTMLElement} element Related element
- * @param {String} className the className to add
- *  grouped values.
- * @returns {HTMLElement} The modified element
- * @example
- *
- * var text = new Text({
- *   text: 'hello',
- *   type: 'title'
- * }).insert(document.body);
- *
- * // => Hello
- */
-class Text {
-  /**
-   * init
-   * @return {Object} The class options
-   */
   constructor (options) {
     this.init(options)
     this.build()
-
-    return this
+    this.setup()
   }
 
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
-
-    Object.assign(this, insert)
+    this.options = Object.assign({}, Text.defaults, options || {})
+    Object.assign(this, build)
   }
 
-  /**
-   * Build function for item
-   * @return {Object} This class instance
-   */
-  build () {
-    this.options.tag = this.options.types[this.options.type]
-
-    this.element = create(this.options)
-
+  setup () {
     if (this.options.text) {
       this.set(this.options.text)
     }
-
-    if (this.options.container) {
-      this.insert(this.options.container)
-    }
-    return this
   }
 
-  /**
-   * Get or set text value of the element
-   * @param {string} value The text to set
-   * @returns {*}
-   */
-  set (value) {
-    if (value) {
-      this.element.textContent = value
+  set (text) {
+    // console.log('set', text)
+    if (text === undefined) return
+
+    var label = this.options.label || ''
+
+    if (this.options.textFirst) {
+      this.element.innerHTML = text + label
     } else {
-      this.element.textContent = ''
+      this.element.innerHTML = label + text
     }
 
-    return this
+    if (this.options.spaceAfter) {
+      this.element.innerHTML = this.element.innerHTML + ' '
+    }
+  }
+
+  setText (text) {
+    this.element.innerHTML = text
   }
 }