material 0.7.0 → 0.7.2

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.element = document.createElement(tag)
-    this.element.classList.add('switch')
-
-    if (this.options.class !== 'switch') {
-      addClass(this.element, this.options.class)
-    }
-
-    this.layout = new Layout(this.options.layout, this.element)
-    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.element)
-    }
-  }
-
-  setup () {
-    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')
-    }
-
-    if (this.options.tooltip) {
-      this.element.setAttribute('data-tooltip', this.options.tooltip)
-    }
-
-    this.ui.input.setAttribute('aria-label', this.options.name)
-
-    if (this.options.case) {
-      this.element.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.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')
-    }
-  }
-
-  /**
-   * 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.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.element.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.element.classList.add('is-focused')
-    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
-  }
-}
-
-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.element = document.createElement(this.options.tag)
-    addClass(this.element, this.options.class)
-
-    if (this.options.class !== 'text') {
-      this.element.classList.add('text')
-    }
-
-    if (this.options.text) {
-      this.set(this.options.text)
-    }
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.element)
-    }
-
-    return this
-  }
-
-  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.innerHTML = label + text
-    }
-
-    if (this.options.spaceAfter) {
-      this.element.innerHTML = this.element.innerHTML + ' '
-    }
-  }
-
-  setText (text) {
-    // console.log('setText', text)
-    this.element.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.element = document.createElement(tag)
-    this.element.classList.add('textfield')
-
-    if (this.options.class !== 'textfield') {
-      this.element.classList.add(this.options.class)
-    }
-
-    this.buildLabel()
-    this.buildInput()
-
-    if (this.options.value) {
-      this.set(this.options.value)
-    }
-
-    if (this.options.data) {
-      dataset(this.element, this.options.data)
-    }
-
-    if (this.container) {
-      this.container.appendChild(this.element)
-    }
-
-    return this
-  }
-
-  buildLabel () {
-    if (this.options.label) {
-      this.label = document.createElement('label')
-      this.label.classList.add('label')
-      this.label.innerHTML = this.options.label
-      this.element.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.element.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.element.classList.add('focused')
-    this.emit('focus', ev)
-  }
-
-  onBlur (ev) {
-    this.element.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.element, 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.element.classList.add('hide')
-  }
-
-  show () {
-    this.element.classList.remove('hide')
-  }
-
-  get () {
-    return this.input.value
-  }
-}
-
-export default Text

package/src/element/ripple.js

@@ -1,90 +0,0 @@
-import create from '../element/create'
-import insert from '../element/insert'
-import offset from '../element/offset'
-
-const defaults = {
-  transition: '.5s cubic-bezier(0.4, 0.0, 0.2, 1)',
-  opacity: ['1', '.3']
-}
-
-/**
- * show method
- * @param  {event} e The event related to the the touch
- * @param  {Object} coord
- * @return {void}
- */
-function ripple (e, params) {
-  var options = Object.assign({},
-    defaults, params || {})
-
-  // console.log('show', e);
-  var container = e.target
-  var offs = offset(container)
-
-  let ripple = create('div', 'material-ripple')
-  let end = coordinate(offs)
-  let initial = {
-    left: (e.offsetX || offs.width / 2) + 'px',
-    top: (e.offsetY || offs.height / 2) + 'px'
-  }
-
-  ripple.style.left = initial.left
-  ripple.style.top = initial.top
-  ripple.style.opacity = options.opacity[1]
-  ripple.style.transition = options.transition
-
-  insert(ripple, container, 'top')
-
-  setTimeout(() => {
-    // console.log('style coord', end);
-    ripple.style.left = end.left
-    ripple.style.top = end.top
-    ripple.style.width = end.size
-    ripple.style.height = end.size
-    ripple.style.opacity = options.opacity[1]
-  }, 1)
-
-  document.body.onmouseup = () => {
-    destroy(ripple)
-  }
-}
-
-/**
- * this method hides the given ripple
- * @return {Object} Size and position
- */
-function destroy (ripple) {
-  if (ripple.parentNode) { ripple.style.opacity = '0' }
-
-  document.body.onmouseup = null
-
-  setTimeout(() => {
-    if (ripple.parentNode) { ripple.parentNode.removeChild(ripple) }
-  }, 1000)
-}
-
-/**
- * Get ripple final coordinates
- * @param  {Object} offset
- * @return {Object} Size and position
- */
-function coordinate (offset) {
-  var size = offset.width
-  var top = -offset.height / 2
-
-  if (offset.width > offset.height) {
-    size = offset.width
-    top = -(offset.width - offset.height / 2)
-  } else if (offset.width < offset.height) {
-    size = offset.height
-    top = (offset.width - offset.height) / 2
-  }
-
-  return {
-    size: (size * 2) + 'px',
-    top: top + 'px',
-    left: (size / -2) + 'px'
-  }
-}
-
-export default ripple