material 0.4.2 → 0.5.0

package/dist/tracks.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>album-24px</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="album-24px">
+            <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
+            <path d="M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2 Z M12,16.5 C9.51,16.5 7.5,14.49 7.5,12 C7.5,9.51 9.51,7.5 12,7.5 C14.49,7.5 16.5,9.51 16.5,12 C16.5,14.49 14.49,16.5 12,16.5 Z M12,11 C11.45,11 11,11.45 11,12 C11,12.55 11.45,13 12,13 C12.55,13 13,12.55 13,12 C13,11.45 12.55,11 12,11 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "A lightweight implementation of Material Design Components - ES6",
   "main": "index.js",
   "repository": {

package/src/appbar.js

@@ -1,5 +1,4 @@
-'use strict'
-
+import passiveEvents from './module/passive'
 import create from './component/create'
 import insert from './component/insert'
 import offset from './element/offset'

package/src/control/button.js

@@ -0,0 +1,263 @@
+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)
+
+    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

@@ -0,0 +1,190 @@
+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

@@ -0,0 +1,65 @@
+
+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

@@ -0,0 +1,174 @@
+'use strict'
+
+// 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: [
+    ['root.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')
+
+    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) {
+    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