material 0.7.0 → 0.7.2

package/src/button.js

@@ -1,234 +1,184 @@
-'use strict'
-
-import create from './mixin/create'
-import control from './mixin/control'
+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'
 
-import insert from './element/insert'
+const DEFAULT_TYPE = 'button'
+const DEFAULT_CLASS = 'button'
 
-import emitter from './module/emitter'
-import attach from './module/attach'
+class Button extends EventEmitter {
+  static isComponent () {
+    return true
+  }
 
-const defaults = {
-  prefix: 'material',
-  class: 'button',
-  tag: 'button',
-  ripple: true,
-  events: [
-    ['root.click', 'handleClick'],
-    ['root.mouseover', 'handleMouseOver']
-  ]
-}
+  static defaults = {
+    class: DEFAULT_CLASS,
+    tag: 'button',
+    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 (options) {
+    super()
+
     this.init(options)
     this.build()
     this.setup()
-    this.attach()
-
-    this.emit('ready')
-
-    return this
+    this.bindEvents()
   }
 
-  /**
-   * [init description]
-   * @param  {?} options [description]
-   * @return {?}         [description]
-   */
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, control, emitter, attach)
-
-    this.element = this.element || {}
-
-    // init module$
-
-    this.emit('init')
+    this.options = { ...Button.defaults, ...options }
+    Object.assign(this, build, display, bindEvents)
   }
 
-  /**
-   * Build button's method
-   * @override
-   * @return {void}
-   */
-  build () {
-    this.element = {}
-
-    this.element = create(this.options)
-
-    this.options.label = this.options.label || this.options.text
-
-    this.element.setAttribute('aria-label', this.options.label || this.options.name)
-
-    if (this.options.title) {
-      this.element.setAttribute('title', this.options.title)
-    }
-
-    this.label(this.options.label)
-    this.icon(this.options.icon)
-
-    if (this.options.tooltip) {
-      this.element.dataset.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.element, this.options.container)
-    }
+  setup () {
+    this.setAttributes()
+    this.styleAttributes()
+    this.buildElements()
 
-    if (this.options.ripple) {
-      ripple(this.element)
+    if (this.options.text) {
+      this.element.innerHTML = this.element.innerHTML + this.options.text
     }
+  }
 
-    return this
+  buildElements () {
+    this.buildIcon()
+    this.buildLabel()
   }
 
-  /**
-   * insert method
-   * @param  {?} container [description]
-   * @param  {?} context   [description]
-   * @return {?}           [description]
-   */
-  insert (container, context) {
-    insert(this.element, container, context)
+  setAttributes () {
+    const { type, name, value, title, text, label, tooltip, data, case: caseOption } = this.options
+
+    this.element.setAttribute('type', type ?? DEFAULT_TYPE)
+    if (name) this.element.setAttribute('name', name)
+    if (value) this.element.setAttribute('value', value)
+    if (title) this.element.setAttribute('title', title)
+    this.element.setAttribute('aria-label', text ?? label ?? DEFAULT_CLASS)
+    if (tooltip) this.element.setAttribute('data-tooltip', tooltip)
+    if (data) dataset(this.element, data)
+    if (caseOption) this.element.classList.add(`${caseOption}-case`)
+    if (this.options.ripple) ripple(this.element)
+  }
 
-    return this
+  styleAttributes () {
+    const { style, size, color, bold } = this.options
+    if (style) this.element.classList.add(`style-${style}`)
+    if (size) this.element.classList.add(`${size}-size`)
+    if (color) this.element.classList.add(`color-${color}`)
+    if (bold) this.element.classList.add('bold')
   }
 
-  /**
-   * Setup method
-   * @return {?} [description]
-   */
-  setup () {
-    this.element.input = this.element
+  buildLabel () {
+    if (!this.options.label) return
 
-    if (this.options.name) {
-      this.element.dataset.name = this.options.name
-    }
+    this.label = document.createElement('label')
+    this.label.classList.add('label')
+    this.label.innerHTML = this.options.label
 
-    // if (this.options.label) {
-    //   this.element.title = this.options.label
-    // }
+    this.element.appendChild(this.label)
+  }
 
-    if (this.options.content) {
-      this.element.innerHTML = this.options.content
-    }
+  buildIcon () {
+    if (!this.options.icon) return
 
-    if (this.options.disabled === true) {
-      this.disable()
-    }
+    this.icon = document.createElement('i')
+    this.icon.classList.add('icon')
+    this.icon.innerHTML = this.options.icon
+
+    this.element.appendChild(this.icon)
   }
 
-  /**
-   * 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.buildLabel()
+        this.label.innerHTML = value
+        break
+      case 'text':
+        this.element.innerHTML = value
+        break
+      case 'icon':
+        if (this.icon) {
+          this.icon.innerHTML = value
+        }
+        break
+      case 'enable':
+        this.element.disabled = false
+        break
+      case 'disable':
+        this.element.disabled = true
         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) {
+    if (this.label) {
+      this.label.innerHTML = value
     }
+  }
 
-    if (!this.element.label) {
-      this.label(text)
+  setText (value) {
+    if (this.label) {
+      this.setLabel(value)
     } else {
-      this.element.label.textContent = text
+      this.element.innerHTML = value
     }
   }
 
-  destroy () {
-    this.container.removeChild(this.element)
+  get (prop) {
+    switch (prop) {
+      case 'value':
+        return this.element.value
+      case 'label':
+        return this.label?.innerHTML ?? this.element.value
+      default:
+        return this.element.value
+    }
   }
 
-  /**
-   * method handleClick
-   * @param  {event} e
-   * @return {void}
-   */
-  handleClick (e) {
-    e.preventDefault()
-
-    if (this.disabled === true) return
-    if (this.options.upload) return
-
-    // 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,8 +1,6 @@
-'use strict'
-
 import create from './element/create'
 import insert from './element/insert'
-import css from './module/css'
+import * as css from './module/css'
 import attach from './module/attach'
 import emitter from './module/emitter'
 
@@ -81,8 +79,8 @@ class Calendar {
    */
   getFirstDayOfWeek (d) {
     d = new Date(d)
-    var day = d.getDay()
-    var diff = d.getDate() - day + (day === 0 ? -6 : 1) // adjust when day is sunday
+    const day = d.getDay()
+    const diff = d.getDate() - day + (day === 0 ? -6 : 1) // adjust when day is sunday
 
     return new Date(d.setDate(diff))
   }
@@ -95,8 +93,8 @@ class Calendar {
   _initFunction (functions) {
     functions = functions || []
 
-    for (var i = 0; i < functions.length; i++) {
-      var name = functions[i]
+    for (let i = 0; i < functions.length; i++) {
+      const name = functions[i]
       if (this.options[name]) {
         this[name] = this.options[name]
       }
@@ -110,7 +108,7 @@ class Calendar {
    */
   build () {
     // define main tag
-    var tag = this.options.tag || 'div'
+    const tag = this.options.tag || 'div'
 
     this.element = create(tag, this.options.prefix + '-' + this.options.class)
 
@@ -147,22 +145,22 @@ class Calendar {
 
     this.buildHeadline()
 
-    var element = create('div')
+    const element = create('div')
     insert(element, this.header)
     css.add(element, 'header-days')
 
-    var date = new Date(this.firstDay)
-    var days = this.options.rangedays
+    const date = new Date(this.firstDay)
+    const days = this.options.rangedays
 
-    var margin = create('div')
+    const margin = create('div')
     css.add(margin, 'margin')
     insert(margin, element)
 
-    for (var i = 0; i < days; i++) {
-      var dow = this.options.days[date.getDay()]
-      var dom = (date.getMonth() + 1) + '/' + date.getDate()
+    for (let i = 0; i < days; i++) {
+      const dow = this.options.days[date.getDay()]
+      const dom = (date.getMonth() + 1) + '/' + date.getDate()
 
-      var cell = create('div')
+      const cell = create('div')
       cell.innerHTML = '<div class="first">' + dow + '</div><div class="second">' + dom + '</div>'
       css.add(cell, 'date')
       insert(cell, element)
@@ -180,11 +178,11 @@ class Calendar {
 
     insert(this.headline, this.header)
 
-    var year = this.firstDay.getFullYear()
+    const year = this.firstDay.getFullYear()
 
-    var month = this.options.months[this.firstDay.getMonth()]
+    const month = this.options.months[this.firstDay.getMonth()]
 
-    var monthIndex = create('div', 'month-year')
+    const monthIndex = create('div', 'month-year')
     monthIndex.innerHTML = '<b>' + month + '</b> ' + year
     insert(monthIndex, this.headline)
 
@@ -196,10 +194,10 @@ class Calendar {
    * @return {?} [description]
    */
   buildNavigation () {
-    var navigation = create('div', this.options.prefix + '-toolbar')
+    const navigation = create('div', this.options.prefix + '-toolbar')
     insert(navigation, this.headline)
 
-    var back = new Button({
+    const back = new Button({
       icon: iconBack,
       style: 'dense'
     }).on('click', () => {
@@ -208,7 +206,7 @@ class Calendar {
 
     css.add(back.root, 'compact')
 
-    var today = new Button({
+    const today = new Button({
       style: 'dense',
       label: 'today'
     }).on('click', () => {
@@ -217,7 +215,7 @@ class Calendar {
 
     css.add(today.root, 'compact')
 
-    var next = new Button({
+    const next = new Button({
       icon: iconForward,
       style: 'dense'
     }).on('click', () => {
@@ -233,18 +231,18 @@ class Calendar {
    * @return {?}      [description]
    */
   buildAllDay () {
-    var allday = create('div', 'allday')
+    const allday = create('div', 'allday')
     insert(allday, this.header)
 
-    var dow = new Date(this.firstDay)
-    var days = this.options.rangedays
+    const dow = new Date(this.firstDay)
+    const days = this.options.rangedays
 
-    var label = create('label', 'label')
+    const label = create('label', 'label')
     label.innerHTML = 'all-day'
     insert(label, allday)
 
-    for (var i = 0; i < days; i++) {
-      var day = create('div', 'date')
+    for (let i = 0; i < days; i++) {
+      const day = create('div', 'date')
       day.setAttribute('data-date', this.dateToString(dow))
       insert(day, allday)
 
@@ -258,33 +256,33 @@ class Calendar {
    * @return {?}         [description]
    */
   buildBody () {
-    var cells = []
+    const cells = []
 
-    var firstDay = this.firstDay
+    const firstDay = this.firstDay
 
-    var days = this.options.rangedays
+    const days = this.options.rangedays
 
     this.body = create('div')
     css.add(this.body, this.options.class + '-body')
     insert(this.body, this.element)
 
-    var hours = create('div')
+    const hours = create('div')
     css.add(hours, 'hours')
     insert(hours, this.body)
 
     this.initCanvas()
 
-    for (var i = 0; i < 24; i++) {
-      var hour = create('div')
+    for (let i = 0; i < 24; i++) {
+      const hour = create('div')
       css.add(hour, 'hour')
       insert(hour, hours)
 
       hour.innerHTML = i + ':00'
     }
 
-    var sday = new Date(firstDay)
-    for (var k = 0; k < days; k++) {
-      var day = create('div')
+    const sday = new Date(firstDay)
+    for (let k = 0; k < days; k++) {
+      const day = create('div')
       css.add(day, 'week-day')
       day.setAttribute('data-date', this.dateToString(sday))
       insert(day, this.body)
@@ -303,9 +301,9 @@ class Calendar {
    * @return {Date}
    */
   dateToString (d) {
-    var day = d.getDate()
-    var month = d.getMonth() + 1
-    var year = d.getFullYear()
+    let day = d.getDate()
+    let month = d.getMonth() + 1
+    const year = d.getFullYear()
 
     if (day < 10) {
       day = '0' + day
@@ -314,7 +312,7 @@ class Calendar {
       month = '0' + month
     }
 
-    var date = year + '-' + month + '-' + day
+    const date = year + '-' + month + '-' + day
 
     return date
   }
@@ -325,19 +323,19 @@ class Calendar {
    * @return {?}         [description]
    */
   initCanvas () {
-    var canvas = create('canvas')
+    const canvas = create('canvas')
     css.add(canvas, 'canvas')
     canvas.width = '2000'
     canvas.height = '1440'
     insert(canvas, this.body)
 
-    var ctx = canvas.getContext('2d')
+    const ctx = canvas.getContext('2d')
     ctx.lineWidth = 0.5
     ctx.strokeStyle = '#dedbdb'
 
-    var offset = 6
+    const offset = 6
 
-    for (var j = 0; j <= 24; j++) {
+    for (let j = 0; j <= 24; j++) {
       ctx.beginPath()
 
       if (j < this.options.range[0] - 1 || j > this.options.range[1] - 1) {
@@ -346,7 +344,7 @@ class Calendar {
         ctx.strokeStyle = '#D9D9D9'
       }
 
-      var y = j * 60 + 0.5
+      const y = j * 60 + 0.5
 
       ctx.moveTo(0, y + 60 + offset)
       ctx.lineTo(2000, y + 60 + offset)
@@ -361,16 +359,16 @@ class Calendar {
    */
   add (e) {
     if (e.target && e.target.matches(this.options.target)) {
-      var data = e.target.getAttribute('data-date')
+      const data = e.target.getAttribute('data-date')
 
-      var d = data.split(/-/)
+      const d = data.split(/-/)
 
-      var time = this.roundTime(e.offsetY / 60)
+      const time = this.roundTime(e.offsetY / 60)
 
-      var h = parseInt(time)
-      var m = (time - h) * 60
+      const h = parseInt(time)
+      const m = (time - h) * 60
 
-      var date = new Date(d[0], d[1], d[2], h, m)
+      const date = new Date(d[0], d[1], d[2], h, m)
 
       this.emit('add', date)
     }
@@ -382,8 +380,8 @@ class Calendar {
    * @return {?}       [description]
    */
   roundTime (value) {
-    var step = 0.5
-    var inv = 1.0 / step
+    const step = 0.5
+    const inv = 1.0 / step
     return Math.round(value * inv) / inv
   }
 

package/src/card.js

@@ -1,12 +1,10 @@
-'use strict'
-
 // import modules
 import create from './mixin/create'
 import insert from './mixin/insert'
 // import components
 import Layout from './layout'
 
-let defaults = {
+const defaults = {
   prefix: 'material',
   class: 'card',
   tag: 'div'