material 0.6.2 → 0.7.1

package/src/control/button.js

@@ -1,267 +0,0 @@
-import emitter from '../module/emitter'
-import attach from '../module/attach'
-
-import dataset from '../view/dataset'
-
-const defaults = {
-  class: 'button',
-  tag: 'button',
-  styles: ['style', 'color'],
-  stopPropagation: false,
-  events: [
-    ['root.click', 'click'],
-    ['root.mousedown', 'mousedown'],
-    ['root.mouseup', 'mouseup'],
-    ['root.mouseleave', 'mouseup'],
-    ['root.touchstart', 'mousedown'],
-    ['root.touchend', 'mouseup']
-  ]
-
-}
-
-class Button {
-  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)
-    // console.log('options', options)
-
-    this.init()
-
-    return this
-  }
-
-  init () {
-    this.build()
-    this.setup()
-    this.attach()
-
-    if (this.options.container) {
-      this.append(this.options.container)
-    }
-  }
-
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.root = document.createElement(this.options.tag)
-
-    this.element = this.root
-
-    // console.log('class', this.options.class)
-
-    if (this.options.class !== 'button') {
-      this.root.setAttribute('class', 'button ' + this.options.class)
-    } else {
-      this.root.classList.add('button')
-    }
-
-    this.styleAttributes()
-
-    this.buildIcon()
-    this.buildLabel()
-
-    if (this.options.text) {
-      this.root.innerHTML = this.root.innerHTML + this.options.text
-    }
-
-    return this
-  }
-
-  setup () {
-    if (this.options.data) {
-      dataset(this.root, this.options.data)
-    }
-
-    if (this.options.type) {
-      this.root.setAttribute('type', this.options.type)
-    } else {
-      this.root.setAttribute('type', 'button')
-    }
-
-    if (this.options.name) {
-      this.root.setAttribute('name', this.options.name)
-    }
-
-    if (this.options.value) {
-      this.root.setAttribute('value', this.options.value)
-    }
-
-    if (this.options.title) {
-      this.root.setAttribute('title', this.options.title)
-    }
-
-    this.root.setAttribute('aria-label', this.options.text || this.options.label || this.options.class)
-
-    if (this.options.tooltip) {
-      this.root.setAttribute('data-tooltip', this.options.tooltip)
-    }
-
-    if (this.options.case) {
-      this.root.classList.add(this.options.case + '-case')
-    }
-  }
-
-  append (container) {
-    container = container || this.options.container
-    if (this.options.container) {
-      container.appendChild(this.root)
-    }
-  }
-
-  buildLabel () {
-    if (!this.options.label) return
-
-    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)
-    }
-  }
-
-  buildIcon () {
-    if (!this.options.icon) return
-
-    if (this.options.icon) {
-      this.icon = document.createElement('i')
-      this.icon.classList.add('icon')
-      this.icon.innerHTML = this.options.icon
-
-      this.root.appendChild(this.icon)
-    }
-  }
-
-  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) {
-    // console.log('set', this.root, prop, value)
-    switch (prop) {
-      case 'value':
-        this.root.value = value
-        break
-      case 'label':
-        if (this.label) {
-          this.label.innerHTML = value
-        }
-        break
-      case 'text':
-        this.root.innerHTML = value
-        break
-      case 'icon':
-        if (this.label) {
-          this.icon.innerHTML = value
-        }
-        break
-      default:
-        // console.log('prop', prop)
-        this.root.innerHTML = prop
-    }
-
-    return this
-  }
-
-  setLabel (value) {
-    // console.log('setLabel', value)
-    this.label.innerHTML = value
-  }
-
-  setText (value) {
-    // console.log('setText', value)
-    if (this.label) {
-      this.setLabel(value)
-    } else {
-      this.root.innerHTML = value
-    }
-  }
-
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
-  get (prop, value) {
-    switch (prop) {
-      case 'value':
-        return this.root.value
-      case 'label':
-        return this.label.innerHTML
-      default:
-        return this.root.value
-    }
-  }
-
-  disable () {
-    this.root.disabled = true
-  }
-
-  enable () {
-    this.root.disabled = false
-  }
-
-  hide () {
-    this.root.classList.add('hide')
-  }
-
-  show () {
-    this.root.classList.remove('hide')
-  }
-
-  destroy () {
-    if (this.root && this.root.parentNode) {
-      this.root.parentNode.removeChild(this.root)
-    }
-  }
-
-  click (ev) {
-    if (this.options.stopPropagation === true) {
-      ev.stopPropagation()
-    }
-
-    this.emit('click', ev)
-  }
-
-  mousedown (ev) {
-    this.root.classList.add('pushed')
-  }
-
-  mouseup (ev) {
-    this.root.classList.remove('pushed')
-  }
-}
-
-export default Button

package/src/control/button.new.js

@@ -1,190 +0,0 @@
-import emitter from '../module/emitter'
-import dataset from '../view/dataset'
-
-const defaults = {
-  class: 'button',
-  tag: 'button',
-  styles: ['style', 'color']
-}
-
-class Button {
-  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)
-    // console.log('options', options)
-
-    this.init()
-
-    return this
-  }
-
-  init () {
-    this.build()
-    this.setup()
-    this.attach()
-
-    if (this.options.container) {
-      this.append(this.options.container)
-    }
-  }
-
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.root = document.createElement(this.options.tag)
-
-    if (this.options.class !== 'button') {
-      this.root.classList.add('button')
-    }
-
-    this.root.classList.add(this.options.class)
-    this.styleAttributes()
-
-    if (this.options.text) {
-      this.root.innerHTML = this.options.text
-    }
-
-    if (this.options.label) {
-      this.buildLabel()
-    }
-
-    return this
-  }
-
-  setup () {
-    if (this.options.data) {
-      dataset(this.root, this.options.data)
-    }
-
-    if (this.options.type) {
-      this.root.setAttribute('type', this.options.type)
-    } else {
-      this.root.setAttribute('type', 'button')
-    }
-
-    if (this.options.name) {
-      this.root.setAttribute('name', this.options.name)
-    }
-
-    this.root.setAttribute('aria-label', this.options.text || this.options.label || this.options.class)
-
-    if (this.options.tooltip) {
-      this.root.setAttribute('data-tooltip', this.options.tooltip)
-    }
-
-    if (this.options.case) {
-      this.root.classList.add(this.options.case + '-case')
-    }
-  }
-
-  append (container) {
-    if (this.options.container) {
-      this.options.container.appendChild(this.root)
-    }
-  }
-
-  buildLabel () {
-    if (this.options.label) {
-      this.label = document.createElement('label')
-      this.label.innerHTML = this.options.label
-      this.root.appendChild(this.label)
-    }
-  }
-
-  buildIcon () {
-    if (this.options.icon) {
-      this.label = document.createElement('label')
-      this.label.innerHTML = this.options.label
-      this.root.appendChild(this.label)
-    }
-  }
-
-  styleAttributes () {
-    if (this.options.style) {
-      this.root.classList.add('style-' + this.options.style)
-    }
-
-    if (this.options.color) {
-      this.root.classList.add('color-' + this.options.color)
-    }
-
-    if (this.options.bold) {
-      this.root.classList.add('bold')
-    }
-  }
-
-  attach () {
-    this.root.addEventListener('click', (ev) => {
-      this.emit('click', ev)
-    })
-  }
-
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
-  set (prop, value) {
-    switch (prop) {
-      case 'value':
-        this.root.value = value
-        break
-      case 'label':
-        if (this.ui.label) {
-          this.ui.label.innerHTML = value
-        }
-        break
-      case 'icon':
-        if (this.ui.label) {
-          this.ui.icon.innerHTML = value
-        }
-        break
-      default:
-        this.root.value = value
-    }
-
-    return this
-  }
-
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
-  get (prop, value) {
-    switch (prop) {
-      case 'value':
-        return this.root.value
-      case 'label':
-        return this.ui.label.innerHTML
-      default:
-        return this.root.value
-    }
-  }
-
-  disable () {
-    this.root.disabled = true
-  }
-
-  enable () {
-    this.root.disabled = false
-  }
-
-  destroy () {
-    this.root.parentNode.removeChild(this.root)
-  }
-}
-
-export default Button

package/src/control/datehour.js

@@ -1,65 +0,0 @@
-
-const defaults = {
-  class: 'date',
-  tag: 'span'
-}
-
-/**
- * Class representing an image.
- *
- * @extends Date
- * @return {parent} The class instance
- * @example new Date({
- *   date: date,
- *   container: document.body
- * });
- */
-class DateHour {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-
-    this.build()
-
-    return this
-  }
-
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.root = document.createElement(this.options.tag)
-    this.root.classList.add(this.options.class)
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.root)
-    }
-
-    return this
-  }
-
-  set (date) {
-    // console.log('set', src)
-    var d = new Date(date)
-    var formatted = this.format(d)
-    this.root.innerHTML = formatted
-  }
-
-  format (date) {
-    var hours = date.getHours()
-    var minutes = date.getMinutes()
-    var ampm = hours >= 12 ? 'pm' : 'am'
-    hours = hours % 12
-    hours = hours || 12 // the hour '0' should be '12'
-    minutes = minutes < 10 ? '0' + minutes : minutes
-    var strTime = hours + ':' + minutes + ' ' + ampm
-    return date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear() + ' ' + strTime
-  }
-}
-
-export default DateHour

package/src/control/dialog.js

@@ -1,175 +0,0 @@
-// dialog related modules
-import emitter from '../module/emitter'
-import attach from '../module/attach'
-import display from '../view/display'
-
-import Element from '../element'
-import Text from './text'
-import Button from './button'
-import Layout from '../layout'
-
-let defaults = {
-  class: 'dialog',
-  close: true,
-  layout: [
-    [Element, 'head', { class: 'head' },
-      [Text, 'title', { class: 'title' }],
-      [Button, 'close', { class: 'close' }]
-    ],
-    [Element, 'body', { class: 'body' },
-      [Text, 'content', { class: 'content' }]
-    ],
-    [Element, 'foot', { class: 'foot' },
-      [Element, { class: 'divider' }],
-      [Button, 'ok', { class: 'ok', text: 'Ok', color: 'primary' }]
-    ]
-  ],
-  events: [
-    ['element.click', 'onClickRoot'],
-    ['surface.click', 'onClick'],
-    ['ui.ok.click', 'ok'],
-    ['ui.cancel.click', 'cancel'],
-    ['ui.close.click', 'close']
-  ]
-}
-
-class Dialog {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-
-    // implement modules
-    Object.assign(this, emitter, attach, display)
-
-    this.build()
-    this.render()
-    this.attach()
-
-    return this
-  }
-
-  /**
-   * build the component using the super method
-   * @return {Object} The class instance
-   */
-  build () {
-    this.root = document.createElement('div')
-    this.root.classList.add('dialog')
-
-    this.element = this.root
-
-    if (this.options.class !== 'dialog') {
-      this.root.classList.add(this.options.class)
-    }
-
-    if (this.options.position) {
-      this.root.classList.add('position-' + this.options.position)
-    }
-
-    this.surface = document.createElement('div')
-    this.surface.classList.add('surface')
-    this.root.appendChild(this.surface)
-
-    this.layout = new Layout(this.options.layout, this.surface)
-    this.ui = this.layout.component
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.root)
-    }
-
-    if (this.options.display === 'show') {
-      this.show()
-    }
-  }
-
-  render () {
-    if (this.options.title && this.ui.title) {
-      this.ui.title.set(this.options.title)
-    }
-
-    if (this.options.content && this.ui.content) {
-      this.ui.content.set(this.options.content)
-    }
-
-    if (this.options.cancel && this.ui.cancel) {
-      this.ui.cancel.set('text', this.options.cancel)
-    }
-
-    if (this.options.ok && this.ui.ok) {
-      this.ui.ok.set('text', this.options.ok)
-    }
-
-    if (this.options.target) {
-      this.setPosition()
-    }
-  }
-
-  setPosition () {
-    var coord = this.options.target.getBoundingClientRect()
-    var surface_coord = this.surface.getBoundingClientRect()
-
-    if (this.options.position === 'right') {
-      this.surface.style.top = coord.top + 'px'
-      this.surface.style.left = coord.left + coord.width // surface_coord.width + 'px'
-    } else {
-      this.surface.style.top = coord.top + 'px'
-      this.surface.style.left = coord.left - surface_coord.width + 'px'
-    }
-  }
-
-  ok () {
-    this.emit('ok')
-    if (this.options.close) {
-      this.destroy()
-    }
-  }
-
-  cancel () {
-    this.emit('cancel')
-
-    if (this.options.close) {
-      this.destroy()
-    }
-  }
-
-  close () {
-    // this.hide()
-
-    if (this.options.close) {
-      this.destroy()
-    }
-  }
-
-  onClick (e) {
-    e.stopPropagation()
-  }
-
-  onClickRoot (e) {
-    console.log('onClickRoot')
-    e.stopPropagation()
-    if (!this.options.modal) {
-      this.destroy()
-    }
-  }
-
-  emphase () {
-    this.root.classList.add('emphase')
-    var it
-    it = setTimeout(() => {
-      clearTimeout(it)
-      this.root.classList.remove('emphase')
-    }, 100)
-  }
-
-  set (prop, value) {
-    if (this.ui[prop]) {
-      this.ui[prop].set(value)
-    }
-  }
-}
-
-export default Dialog