material 0.6.2 → 0.7.1

package/src/control/snackbar.js

@@ -1,89 +0,0 @@
-// base class
-import EventEmitter from '../component/emitter'
-// related modules
-import build from '../module/build'
-import bindEvents from '../module/events'
-import display from '../module/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']
-    ]
-  };
-
-  constructor (options) {
-    super()
-    
-    this.init(options)
-    this.build(this.constructor)
-    this.render()    
-    this.bindEvents()
-    this.show()
-
-    if (this.options.duration)
-      setTimeout(()=>{
-        this.destroy()
-      }, this.options.duration)
-  }
-
-  init(options) {
-    this.options = Object.assign({}, Snackbar.defaults, options || {})
-    Object.assign(this, build, bindEvents, display)
-
-    this.buildSnackbarContainer(this.options.container)
-  }
-
-  buildSnackbarContainer (container = document.body) {
-    console.log('buildSnackbarContainer', container)
-
-    let snackbarContainer = container.querySelector('.snackbars')
-
-    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
-    }
-  }
-
-  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 () {
-    this.emit('action')
-    this.destroy()
-  }
-
-  close() {
-    // console.log('close')
-    this.destroy()
-  }
-}
-
-export default Snackbar

package/src/control/switch.js

@@ -1,272 +0,0 @@
-// module
-import dataset from '../view/dataset'
-import attach from '../module/attach'
-import emitter from '../module/emitter'
-import attributes from './module/attributes'
-import addClass from './module/addclass'
-
-// ui
-import Layout from '../layout'
-import Element from '../element'
-
-let 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' }]
-      ]
-    ]
-  ],
-  events: [
-    ['ui.control.click', 'toggle'],
-    // ['ui.label.click', 'toggle'],
-    // for accessibility purpose
-    ['ui.input.click', 'toggle'],
-    ['ui.input.focus', 'focus'],
-    ['ui.input.blur', 'blur']
-  ]
-}
-
-class Switch {
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter, attach, dataset)
-
-    this.value = this.options.value
-
-    this.build()
-    this.setup()
-    this.attach()
-
-    return this
-  }
-
-  /**
-   * build method
-   * @return {Object} The class instance
-   */
-  build () {
-    var tag = this.options.tag || 'span'
-    this.root = document.createElement(tag)
-    this.root.classList.add('switch')
-
-    if (this.options.class !== 'switch') {
-      addClass(this.root, this.options.class)
-    }
-
-    this.layout = new Layout(this.options.layout, this.root)
-    this.ui = this.layout.component
-
-    // console.log('ui', this.ui)
-
-    this.styleAttributes()
-
-    this.buildIcon()
-    this.buildLabel()
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.root)
-    }
-  }
-
-  setup () {
-    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')
-    }
-
-    if (this.options.tooltip) {
-      this.root.setAttribute('data-tooltip', this.options.tooltip)
-    }
-
-    this.ui.input.setAttribute('aria-label', this.options.name)
-
-    if (this.options.case) {
-      this.root.classList.add(this.options.case + '-case')
-    }
-  }
-
-  buildLabel () {
-    // console.log('buildLabel', this.options.label)
-    if (!this.options.label) return
-
-    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.root.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.root.insertBefore(this.ui.icon, this.ui.input)
-  }
-
-  styleAttributes () {
-    if (this.options.style) {
-      this.root.classList.add('style-' + this.options.style)
-    }
-
-    if (this.options.size) {
-      this.root.classList.add(this.options.size + '-size')
-    }
-
-    if (this.options.color) {
-      this.root.classList.add('color-' + this.options.color)
-    }
-
-    if (this.options.bold) {
-      this.root.classList.add('bold')
-    }
-  }
-
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
-  set (prop, value, silent) {
-    switch (prop) {
-      case 'value':
-        this.setValue(value, silent)
-        break
-      case 'text':
-        this.setValue(value)
-        break
-      case 'disabled':
-        if (value === true) {
-          this.disable()
-        } else if (value === false) {
-          this.enable()
-        }
-        break
-      default:
-        this.setValue(prop, value)
-    }
-
-    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, typeof silent, silent)
-    this.check(value, silent)
-  }
-
- /**
-   * [toggle description]
-   * @return {Object} The class instance
-   */
-  toggle () {
-    // console.log('toggle')
-    if (this.disabled) return
-
-    this.focus()
-
-    if (this.checked) {
-      this.check(false)
-    } else {
-      this.check(true)
-    }
-
-    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.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.ui.input.checked = false
-      this.checked = false
-      this.value = false
-      if (!silent) {
-        this.emit('change', this.checked)
-      }
-    }
-    return this
-  }
-
-  /**
-   * [_onInputFocus description]
-   * @return {?} [description]
-   */
-  focus () {
-    if (this.disabled === true) return this
-
-    this.root.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')
-    return this
-  }
-}
-
-export default Switch

package/src/control/text.js

@@ -1,70 +0,0 @@
-import addClass from './module/addclass'
-
-const defaults = {
-  class: 'text',
-  tag: 'span'
-}
-
-class Text {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-
-    // console.log('options', this.options)
-
-    this.build()
-
-    return this
-  }
-
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.root = document.createElement(this.options.tag)
-    addClass(this.root, this.options.class)
-
-    if (this.options.class !== 'text') {
-      this.root.classList.add('text')
-    }
-
-    if (this.options.text) {
-      this.set(this.options.text)
-    }
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.root)
-    }
-
-    return this
-  }
-
-  set (text) {
-    // console.log('set', text)
-    if (text === undefined) return
-
-    var label = this.options.label || ''
-
-    if (this.options.textFirst) {
-      this.root.innerHTML = text + label
-    } else {
-      this.root.innerHTML = label + text
-    }
-
-    if (this.options.spaceAfter) {
-      this.root.innerHTML = this.root.innerHTML + ' '
-    }
-  }
-
-  setText (text) {
-    // console.log('setText', text)
-    this.root.innerHTML = text
-  }
-}
-
-export default Text

package/src/control/textfield.js

@@ -1,177 +0,0 @@
-
-import emitter from '../module/emitter'
-import attach from '../module/attach'
-import dataset from '../view/dataset'
-import attributes from './module/attributes'
-
-const defaults = {
-  class: 'textfield',
-  attributes: ['type', 'name', 'title', 'maxlength', 'pattern', 'min', 'max', 'placeholder', 'readonly', 'autocomplete', 'required', 'disabled'],
-  events: [
-    ['input.input', 'onInput'],
-    ['input.focus', 'onFocus'],
-    ['input.blur', 'onBlur'],
-    ['input.click', 'onClick']
-  ]
-}
-
-class Text {
-  static isComponent () {
-    return true
-  }
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter, attach, dataset)
-    // console.log('options', options)
-
-    this.build()
-    this.attach()
-
-    return this
-  }
-
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    var tag = this.options.tag || 'div'
-
-    this.root = document.createElement(tag)
-    this.root.classList.add('textfield')
-
-    if (this.options.class !== 'textfield') {
-      this.root.classList.add(this.options.class)
-    }
-
-    this.buildLabel()
-    this.buildInput()
-
-    if (this.options.value) {
-      this.set(this.options.value)
-    }
-
-    if (this.options.data) {
-      dataset(this.root, this.options.data)
-    }
-
-    if (this.container) {
-      this.container.appendChild(this.root)
-    }
-
-    return this
-  }
-
-  buildLabel () {
-    if (this.options.label) {
-      this.label = document.createElement('label')
-      this.label.classList.add('label')
-      this.label.innerHTML = this.options.label
-      this.root.appendChild(this.label)
-    }
-  }
-
-  buildInput () {
-    let tag = 'input'
-    if (this.options.type === 'multiline') {
-      tag = 'textarea'
-    }
-    this.input = document.createElement(tag)
-    this.input.classList.add('input')
-    this.root.appendChild(this.input)
-
-    attributes(this.input, this.options)
-
-    if (this.options.focus) {
-      this.input.focus()
-    }
-  }
-
-  onInput (ev) {
-    // console.log('onInput', this.value, this.input.value)
-
-    this.emit('change', ev)
-  }
-
-  onFocus (ev) {
-    this.root.classList.add('focused')
-    this.emit('focus', ev)
-  }
-
-  onBlur (ev) {
-    this.root.classList.remove('focused')
-    this.emit('blur', ev)
-  }
-
-  onClick (ev) {
-    // console.log('click')
-    this.emit('click', ev)
-  }
-
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
-  set (prop, value) {
-    // console.log('set', this.root, prop, value)
-    switch (prop) {
-      case 'value':
-        this.setValue(value)
-        break
-      case 'label':
-        this.setLabel(value)
-        break
-      default:
-        // console.log('prop', prop)
-        this.setValue(prop)
-    }
-
-    return this
-  }
-
-  setValue (value) {
-    // console.log('set', typeof value, value)
-    if (value && value !== 'undefined') {
-      this.value = value
-      this.input.value = value
-    } else {
-      this.input.value = ''
-    }
-  }
-
-  setLabel (value) {
-    // console.log('setLabel', value)
-    if (this.label) {
-      this.label.innerHTML = value
-    }
-  }
-
-  setText (value) {
-    this.setLabel(value)
-
-    if (this.options.placeholder) {
-      this.input.placeholder = value
-    }
-  }
-
-  hide () {
-    this.root.classList.add('hide')
-  }
-
-  show () {
-    this.root.classList.remove('hide')
-  }
-
-  get () {
-    return this.input.value
-  }
-}
-
-export default Text