material 0.6.2 → 0.7.1

package/src/button.js

@@ -1,235 +1,234 @@
-'use strict'
-
-import create from './component/create'
-import control from './component/control'
-import ripple from './component/ripple'
-
-import insert from './element/insert'
-
-import emitter from './module/emitter'
-import attach from './module/attach'
-
-const defaults = {
-  prefix: 'material',
-  class: 'button',
-  tag: 'button',
-  ripple: false,
-  events: [
-    ['root.click', 'handleClick'],
-    ['root.mouseover', 'handleMouseOver']
-  ]
-}
+import EventEmitter from './mixin/emitter'
+
+import build from './module/build'
+import display from './mixin/display'
+import bindEvents from './module/events'
+
+import dataset from './module/dataset'
+import ripple from './module/ripple'
+
+class Button extends EventEmitter{
+  static isComponent () {
+    return true
+  }
+
+  static defaults = {
+    class: 'button',
+    tag: 'button',
+    modules: [build, bindEvents],
+    styles: ['style', 'color'],
+    ripple: true,
+    stopPropagation: false,
+    events: [
+      ['element.click', 'click'],
+      ['element.mousedown', 'mousedown'],
+      ['element.mouseup', 'mouseup'],
+      ['element.mouseleave', 'mouseup'],
+      ['element.touchstart', 'mousedown'],
+      ['element.touchend', 'mouseup']
+    ]
+  }
 
-/**
- * Class that represents a button
- * @class
- * @since 0.0.1
- * @example
- * var button = new Button({
- *   label: 'Button raised',
- *   type: 'raised',
- *   color: 'primary'
- * }).on('click', function(e) {
- *   console.log('button click', e);
- * }).insert(document.body);
- */
-class Button {
   /**
-   * The init method of the Button class
-   * @param  {Object} options [description]
-   * @private
-   * @return {Object} The class instance
+   * Constructor
+   * @param  {Object} options - Component options
+   * @return {Object} Class instance
    */
   constructor (options) {
+    super()
+
     this.init(options)
     this.build()
     this.setup()
-    this.attach()
+    this.bindEvents()
 
-    this.emit('ready')
+    if (this.options.container) {
+      this.append(this.options.container)
+    }
 
     return this
   }
 
-  /**
-   * [init description]
-   * @param  {?} options [description]
-   * @return {?}         [description]
-   */
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, control, emitter, attach)
+    this.options = Object.assign({}, Button.defaults, options || {})
+    Object.assign(this, build, display, bindEvents)
 
-    this.element = this.element || {}
+  }
 
-    // init module$
-    if (this.options.ripple) {
-      ripple(this)
-    }
+  setup () {
+    this.styleAttributes()
 
-    this.emit('init')
-  }
+    this.buildIcon()
+    this.buildLabel()
 
-  /**
-   * Build button's method
-   * @override
-   * @return {void}
-   */
-  build () {
-    this.element = {}
+    if (this.options.text) {
+      this.element.innerHTML = this.element.innerHTML + this.options.text
+    }
+
+    if (this.options.data) {
+      dataset(this.element, this.options.data)
+    }
 
-    this.root = create(this.options)
+    if (this.options.type) {
+      this.element.setAttribute('type', this.options.type)
+    } else {
+      this.element.setAttribute('type', 'button')
+    }
 
-    this.options.label = this.options.label || this.options.text
+    if (this.options.name) {
+      this.element.setAttribute('name', this.options.name)
+    }
 
-    this.root.setAttribute('aria-label', this.options.label || this.options.name)
+    if (this.options.value) {
+      this.element.setAttribute('value', this.options.value)
+    }
 
     if (this.options.title) {
-      this.root.setAttribute('title', this.options.title)
+      this.element.setAttribute('title', this.options.title)
     }
 
-    this.label(this.options.label)
-    this.icon(this.options.icon)
+    this.element.setAttribute('aria-label', this.options.text || this.options.label || this.options.class)
 
     if (this.options.tooltip) {
-      this.root.dataset.tooltip = this.options.tooltip
+      this.element.setAttribute('data-tooltip', this.options.tooltip)
     }
 
-    if (this.options.container) {
-      if (this.options.container.root) {
-        this.container = this.options.container.root
-      } else {
-        this.container = this.options.container
-      }
-      insert(this.root, this.options.container)
+    if (this.options.case) {
+      this.element.classList.add(this.options.case + '-case')
     }
 
-    this.emit('built', this.root)
+    if (this.options.ripple) ripple(this.element)
+  }
 
-    return this
+  append (container) {
+    container = container || this.options.container
+    if (this.options.container) {
+      container.appendChild(this.element)
+    }
   }
 
-  /**
-   * insert method
-   * @param  {?} container [description]
-   * @param  {?} context   [description]
-   * @return {?}           [description]
-   */
-  insert (container, context) {
-    insert(this.root, container, context)
+  buildLabel () {
+    if (!this.options.label) return
 
-    return this
+    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)
+    }
   }
 
-  /**
-   * Setup method
-   * @return {?} [description]
-   */
-  setup () {
-    this.element.input = this.root
+  buildIcon () {
+    if (!this.options.icon) return
 
-    if (this.options.name) {
-      this.root.dataset.name = this.options.name
+    if (this.options.icon) {
+      this.icon = document.createElement('i')
+      this.icon.classList.add('icon')
+      this.icon.innerHTML = this.options.icon
+
+      this.element.appendChild(this.icon)
+    }
+  }
+
+  styleAttributes () {
+    if (this.options.style) {
+      this.element.classList.add('style-' + this.options.style)
     }
 
-    // if (this.options.label) {
-    //   this.root.title = this.options.label
-    // }
+    if (this.options.size) {
+      this.element.classList.add(this.options.size + '-size')
+    }
 
-    if (this.options.content) {
-      this.root.innerHTML = this.options.content
+    if (this.options.color) {
+      this.element.classList.add('color-' + this.options.color)
     }
 
-    if (this.options.disabled === true) {
-      this.disable()
+    if (this.options.bold) {
+      this.element.classList.add('bold')
     }
   }
 
-  /**
-   * 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 'disabled':
-        this.disable(value)
-        break
       case 'value':
-        this.setValue(value)
+        this.element.value = value
         break
       case 'label':
-        this.setLabel(value)
+        if (this.label) {
+          this.label.innerHTML = value
+        }
+        break
+      case 'text':
+        this.element.innerHTML = value
+        break
+      case 'icon':
+        if (this.icon) {
+          this.icon.innerHTML = value
+        }
         break
       default:
-        this.setValue(prop)
+        // console.log('prop', prop)
+        this.element.innerHTML = prop
     }
 
     return this
   }
 
-  /**
-   * [buildLabel description]
-   * @return {Object} The class instance
-   */
-  setLabel (label) {
-    label = label || this.options.label
-    var text = label
-
-    if (label === null || label === false) {
-      text = ''
-    } else if (label) {
-      text = label
-    } else if (this.options.label) {
-      text = label
-    } else {
-      text = this.options.name
-    }
+  setLabel (value) {
+    // console.log('setLabel', value)
+    this.label.innerHTML = value
+  }
 
-    if (!this.element.label) {
-      this.label(text)
+  setText (value) {
+    // console.log('setText', value)
+    if (this.label) {
+      this.setLabel(value)
     } else {
-      this.element.label.textContent = text
+      this.element.innerHTML = value
     }
   }
 
-  destroy () {
-    this.container.removeChild(this.root)
-  }
-
   /**
-   * method handleClick
-   * @param  {event} e
-   * @return {void}
+   * Setter
+   * @param {string} prop
+   * @param {string} value
+   * @return {Object} The class instance
    */
-  handleClick (e) {
-    e.preventDefault()
-
-    if (this.disabled === true) return
-    if (this.options.upload) return
+  get (prop, value) {
+    switch (prop) {
+      case 'value':
+        return this.element.value
+      case 'label':
+        return this.label.innerHTML
+      default:
+        return this.element.value
+    }
+  }
 
-    // this.publish('click');
-    this.emit('click', e)
+  disable () {
+    this.element.disabled = true
+  }
 
-    return this
+  enable () {
+    this.element.disabled = false
   }
 
-  /**
-   * method handleClick
-   * @param  {event} e
-   * @return {void}
-   */
-  handleMouseOver (e) {
-    e.preventDefault()
+  click (ev) {
+    if (this.options.stopPropagation === true) {
+      ev.stopPropagation()
+    }
 
-    // console.log('mouse over', e.target)
+    this.emit('click', ev)
+  }
 
-    if (e.target.dataset.tooltip) {
-      // console.log(e.target.dataset.tooltip)
-    }
+  mousedown (ev) {
+    this.element.classList.add('pushed')
+  }
 
-    return this
+  mouseup (ev) {
+    this.element.classList.remove('pushed')
   }
 }
 

package/src/calendar.js

@@ -1,5 +1,3 @@
-'use strict'
-
 import create from './element/create'
 import insert from './element/insert'
 import css from './module/css'
@@ -112,12 +110,12 @@ class Calendar {
     // define main tag
     var tag = this.options.tag || 'div'
 
-    this.root = create(tag, this.options.prefix + '-' + this.options.class)
+    this.element = create(tag, this.options.prefix + '-' + this.options.class)
 
     this.buildWeek()
 
     if (this.options.container) {
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
 
     return this
@@ -143,7 +141,7 @@ class Calendar {
    */
   buildHeader () {
     this.header = create('header')
-    insert(this.header, this.root)
+    insert(this.header, this.element)
 
     this.buildHeadline()
 
@@ -266,7 +264,7 @@ class Calendar {
 
     this.body = create('div')
     css.add(this.body, this.options.class + '-body')
-    insert(this.body, this.root)
+    insert(this.body, this.element)
 
     var hours = create('div')
     css.add(hours, 'hours')
@@ -422,7 +420,7 @@ class Calendar {
   next () {
     this.firstDay.setDate(this.firstDay.getDate() + this.options.rangedays)
 
-    this.root.innerHTML = ''
+    this.element.innerHTML = ''
 
     this.buildWeek()
   }
@@ -434,7 +432,7 @@ class Calendar {
   back () {
     this.firstDay.setDate(this.firstDay.getDate() - this.options.rangedays)
 
-    this.root.innerHTML = ''
+    this.element.innerHTML = ''
 
     this.buildWeek()
   }
@@ -448,7 +446,7 @@ class Calendar {
     date = date || new Date()
 
     this.firstDay = this.getFirstDayOfWeek(this.date)
-    this.root.innerHTML = ''
+    this.element.innerHTML = ''
 
     this.buildWeek()
   }
@@ -459,7 +457,7 @@ class Calendar {
 
   empty () {
     console.log('empty')
-    this.root.innerHTML = ''
+    this.element.innerHTML = ''
   }
 }
 

package/src/card.js

@@ -1,8 +1,6 @@
-'use strict'
-
 // import modules
-import create from './component/create'
-import insert from './component/insert'
+import create from './mixin/create'
+import insert from './mixin/insert'
 // import components
 import Layout from './layout'
 
@@ -33,10 +31,10 @@ class Card {
    * @return {Object} The class instance
    */
   build () {
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     if (this.options.layout) {
-      this.layout = new Layout(this.options.layout, this.root)
+      this.layout = new Layout(this.options.layout, this.element)
     }
   }
 }

package/src/checkbox.js

@@ -1,8 +1,6 @@
-'use strict'
-
-import events from './component/events'
-import control from './component/control'
-import label from './component/label'
+import events from './mixin/events'
+import control from './mixin/control'
+import label from './mixin/label'
 
 import insert from './element/insert'
 import build from './element/build'
@@ -79,13 +77,13 @@ class Checkbox {
    */
   build () {
     this.element = build(this.options.build)
-    this.root = this.element.root
+    this.element = this.element.root
 
     this.element.control.innerHTML = icon
 
     var text = this.options.text || this.options.label
 
-    this.element.label = label(this.root, text, this.options)
+    this.element.label = label(this.element, text, this.options)
 
     this.element.input.setAttribute('type', 'checkbox')
     this.element.input.setAttribute('name', this.options.name)
@@ -98,7 +96,7 @@ class Checkbox {
     if (this.options.disabled) {
       this.disabled = this.options.disabled
       this.element.input.setAttribute('disabled', 'disabled')
-      css.add(this.root, 'is-disabled')
+      css.add(this.element, 'is-disabled')
     }
 
     if (this.options.checked) {
@@ -111,7 +109,7 @@ class Checkbox {
 
     // insert if container options is given
     if (this.options.container) {
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
 
     return this
@@ -148,7 +146,7 @@ class Checkbox {
    * @return {?}           [description]
    */
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.element, container, context)
 
     return this
   }

package/src/component.js

@@ -1,8 +1,6 @@
-'use strict'
-
-import create from './component/create'
-import events from './component/events'
-import insert from './component/insert'
+import create from './mixin/create'
+import events from './mixin/events'
+import insert from './mixin/insert'
 
 import emitter from './module/emitter'
 
@@ -59,7 +57,7 @@ class Component {
    * @return {Object} This class instance
    */
   build () {
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     if (this.options.container) {
       this.insert(this.options.container)

package/src/container.js

@@ -1,6 +1,4 @@
-'use strict'
-
-import create from './component/create'
+import create from './mixin/create'
 import insert from './element/insert'
 import emitter from './module/emitter'
 
@@ -50,17 +48,17 @@ class Container {
    * @return {Object} This class  instance
    */
   build () {
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     if (this.options.container) {
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
 
     return this
   }
 
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.element, container, context)
     return this
   }
 }

package/src/datehour.js

@@ -0,0 +1,38 @@
+import build from './module/build'
+
+class DateHour {
+  static defaults = {
+    class: 'date',
+    tag: 'span'
+  }
+
+  constructor (options) {
+    this.init(options)
+    this.build()
+  }
+
+  init(options) {
+    this.options = Object.assign({}, DateHour.defaults, options || {})
+    Object.assign(this, build)
+  }
+
+  set (date) {
+    // console.log('set', src)
+    var d = new Date(date)
+    var formatted = this.format(d)
+    this.element.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