material 0.4.3 → 0.5.1

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,18 +1,18 @@
 {
   "name": "material",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "description": "A lightweight implementation of Material Design Components - ES6",
   "main": "index.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/floor/material.git"
+    "url": "https://github.com/alkaloid/material.git"
   },
   "author": "Jérôme Vial <jerome.vial@gmail.com>",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/floor/material/issues"
+    "url": "https://github.com/alkaloid/material/issues"
   },
-  "homepage": "https://github.com/floor/material",
+  "homepage": "https://github.com/alkaloid/material",
   "keywords": [
     "lightweight material design component es6 es2015 vanilla javascript"
   ],

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

@@ -1,25 +1,29 @@
 import emitter from '../module/emitter'
+import attach from '../module/attach'
+
 import dataset from '../view/dataset'
 
 const defaults = {
   class: 'button',
   tag: 'button',
   styles: ['style', 'color'],
-  components: ['label', 'icon'],
-  component: {
-    label: {
-      tag: 'label'
-    },
-    icon: {
-      tag: 'i'
-    }
-  }
+  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
@@ -27,13 +31,22 @@ class Button {
    */
   constructor (options) {
     this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter)
+    Object.assign(this, emitter, attach)
     // console.log('options', options)
 
+    this.init()
+
+    return this
+  }
+
+  init () {
     this.build()
+    this.setup()
     this.attach()
 
-    return this
+    if (this.options.container) {
+      this.append(this.options.container)
+    }
   }
 
   /**
@@ -44,22 +57,28 @@ class Button {
     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.root.classList.add(this.options.class)
     this.styleAttributes()
 
+    this.buildIcon()
+    this.buildLabel()
+
     if (this.options.text) {
-      this.root.innerHTML = 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)
     }
 
-    this.buildComponent()
-
     if (this.options.type) {
       this.root.setAttribute('type', this.options.type)
     } else {
@@ -70,37 +89,53 @@ class Button {
       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) {
-      this.options.container.appendChild(this.root)
+      container.appendChild(this.root)
     }
-
-    return this
   }
 
-  buildComponent () {
-    this.ui = this.ui || {}
-
-    for (var i = 0; i < this.options.components.length; i++) {
-      var component = this.options.components[i]
+  buildLabel () {
+    if (!this.options.label) return
 
-      if (!this.options[component]) continue
+    if (this.options.label) {
+      this.label = document.createElement('label')
+      this.label.classList.add('label')
+      this.label.innerHTML = this.options.label
 
-      var tag = 'div'
-      if (this.options.component && this.options.component[component]) {
-        tag = this.options.component[component].tag || tag
-      }
+      this.root.appendChild(this.label)
+    }
+  }
 
-      this.ui[component] = document.createElement(tag)
+  buildIcon () {
+    if (!this.options.icon) return
 
-      if (component === 'label' || component === 'icon') {
-        this.ui[component].innerHTML = this.options[component]
-      }
+    if (this.options.icon) {
+      this.icon = document.createElement('i')
+      this.icon.classList.add('icon')
+      this.icon.innerHTML = this.options.icon
 
-      this.root.appendChild(this.ui[component])
+      this.root.appendChild(this.icon)
     }
   }
 
@@ -109,6 +144,10 @@ class Button {
       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)
     }
@@ -118,12 +157,6 @@ class Button {
     }
   }
 
-  attach () {
-    this.root.addEventListener('click', (ev) => {
-      this.emit('click', ev)
-    })
-  }
-
   /**
    * Setter
    * @param {string} prop
@@ -131,22 +164,46 @@ class Button {
    * @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.ui.label) {
-          this.ui.label.innerHTML = value
+        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:
-        this.root.value = value
+        // 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
@@ -158,7 +215,7 @@ class Button {
       case 'value':
         return this.root.value
       case 'label':
-        return this.ui.label.innerHTML
+        return this.label.innerHTML
       default:
         return this.root.value
     }
@@ -172,8 +229,34 @@ class Button {
     this.root.disabled = false
   }
 
+  hide () {
+    this.root.classList.add('hide')
+  }
+
+  show () {
+    this.root.classList.remove('hide')
+  }
+
   destroy () {
-    this.root.parentNode.removeChild(this.root)
+    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')
   }
 }
 

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/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