material 0.7.1 → 0.7.4

package/src/calendar.js

@@ -1,6 +1,6 @@
 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'
 
@@ -79,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))
   }
@@ -93,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]
       }
@@ -108,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)
 
@@ -145,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)
@@ -178,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)
 
@@ -194,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', () => {
@@ -206,7 +206,7 @@ class Calendar {
 
     css.add(back.root, 'compact')
 
-    var today = new Button({
+    const today = new Button({
       style: 'dense',
       label: 'today'
     }).on('click', () => {
@@ -215,7 +215,7 @@ class Calendar {
 
     css.add(today.root, 'compact')
 
-    var next = new Button({
+    const next = new Button({
       icon: iconForward,
       style: 'dense'
     }).on('click', () => {
@@ -231,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)
 
@@ -256,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)
@@ -301,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
@@ -312,7 +312,7 @@ class Calendar {
       month = '0' + month
     }
 
-    var date = year + '-' + month + '-' + day
+    const date = year + '-' + month + '-' + day
 
     return date
   }
@@ -323,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) {
@@ -344,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)
@@ -359,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)
     }
@@ -380,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

@@ -4,7 +4,7 @@ import insert from './mixin/insert'
 // import components
 import Layout from './layout'
 
-let defaults = {
+const defaults = {
   prefix: 'material',
   class: 'card',
   tag: 'div'

package/src/checkbox.js

@@ -1,101 +1,67 @@
-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'
-
-import emitter from './module/emitter'
+import EventEmitter from './mixin/events'
+// import control from './mixin/control'
+import build from './module/build'
 import attach from './module/attach'
-import css from './module/css'
+import * as css from './module/css'
 
 import icon from './skin/material/icon/checkbox.svg'
-// element related modules
-
-let defaults = {
-  prefix: 'material',
-  class: 'checkbox',
-  type: 'control',
-  // modules: [events, control, emitter, attach],
-  build: ['$root.material-checkbox', {},
-    ['input$input', {}],
-    ['span$control.checkbox-control']
-  ],
-  events: [
-    ['element.control.click', 'click', {}],
-    ['element.label.click', 'toggle', {}],
-    // for accessibility purpose
-    // ['element.input.click', 'toggle', {}],
-    ['element.input.focus', 'focus'],
-    ['element.input.blur', 'blur'],
-    ['element.input.keydown', 'keydown', {}]
-  ]
-}
-/**
- * Checkbox control class
- * @class
- * @extends Control
- * @since 0.0.1
- * @example
- * var chkbox = checkbox({
- *   label: 'Primary raised button',
- *   type: 'raised',
- *   primary: true
- * }).on('click', function(e) {
- *   console.log('button click', e);
- * }).insert(document.body);
- */
+
+import Element from './element'
+
 class Checkbox {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
+  static defaults = {
+    class: 'checkbox',
+    layout: [
+      [Element, 'input', { type: 'checkbox' } ],
+      [Element, 'control', { type: 'checkbox' } ],
+      [Element, 'label', { tag: 'label' }]
+    ],
+    events: [
+      ['ui.control.click', 'click'],
+      ['ui.label.click', 'toggle'],
+      // for accessibility purpose
+      // ['element.input.click', 'toggle'],
+      ['ui.input.focus', 'focus'],
+      ['ui.input.blur', 'blur'],
+      ['ui.input.keydown', 'keydown']
+    ]
+  }
+
   constructor (options) {
     this.init(options)
     this.build()
+    this.setup()
     this.attach()
-
-    return this
   }
 
-  /**
-   * Constructor
-   * @param  {Object} options The class options
-   * @return {Object} This class instance
-   */
   init (options) {
     this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, events, control, emitter, attach)
+    Object.assign(this, build, attach)
 
     return this
   }
 
-  /**
-   * build the component using the super method
-   * @return {Object} The class instance
-   */
-  build () {
+  setup () {
     this.element = build(this.options.build)
     this.element = this.element.root
 
-    this.element.control.innerHTML = icon
+    this.ui.control.innerHTML = icon
 
-    var text = this.options.text || this.options.label
+    const text = this.options.text || this.options.label
 
-    this.element.label = label(this.element, text, this.options)
+    this.ui.label.innerHTML = text
 
-    this.element.input.setAttribute('type', 'checkbox')
-    this.element.input.setAttribute('name', this.options.name)
-    this.element.input.setAttribute('aria-label', this.options.name)
+    this.ui.input.setAttribute('type', 'checkbox')
+    this.ui.input.setAttribute('name', this.options.name)
+    this.ui.input.setAttribute('aria-label', this.options.name)
 
     if (this.options.value) {
-      this.element.input.setAttribute('value', this.options.value)
+      this.ui.input.setAttribute('value', this.options.value)
     }
 
     if (this.options.disabled) {
       this.disabled = this.options.disabled
-      this.element.input.setAttribute('disabled', 'disabled')
+      this.ui.input.setAttribute('disabled', 'disabled')
       css.add(this.element, 'is-disabled')
     }
 
@@ -106,21 +72,8 @@ class Checkbox {
     if (this.options.value) {
       this.set('value', this.value)
     }
-
-    // insert if container options is given
-    if (this.options.container) {
-      insert(this.element, this.options.container)
-    }
-
-    return this
   }
 
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
   set (prop, value) {
     switch (prop) {
       case 'checked':
@@ -139,38 +92,33 @@ class Checkbox {
     return this
   }
 
-  /**
-   * [insert description]
-   * @param  {?} container [description]
-   * @param  {?} context   [description]
-   * @return {?}           [description]
-   */
-  insert (container, context) {
-    insert(this.element, container, context)
-
+  check (checked) {
+    if (checked === true) {
+      css.add(this.element, 'is-checked')
+      this.ui.input.checked = true
+      this.checked = true
+      this.emit('change', this.checked)
+    } else {
+      css.remove(this.element, 'is-checked')
+      this.ui.input.checked = false
+      this.checked = false
+      this.emit('change', this.checked)
+    }
     return this
   }
 
-  /**
-   * [click description]
-   * @param  {event} e [description]
-   * @return {?}   [description]
-   */
+
   click (e) {
     this.toggle(e)
-    this.element.input.focus()
+    this.ui.input.focus()
 
     return this
   }
 
-  /**
-   * Set checkbox value
-   * @param {boolean} value [description]
-   */
   setValue (value) {
-    console.log('setValue', value)
+    // console.log('setValue', value)
     this.value = value
-    this.element.input.setAttribute('value', value)
+    this.ui.input.setAttribute('value', value)
 
     return this
   }

package/src/datehour.js

@@ -11,26 +11,26 @@ class DateHour {
     this.build()
   }
 
-  init(options) {
+  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)
+    const d = new Date(date)
+    const formatted = this.format(d)
     this.element.innerHTML = formatted
   }
 
   format (date) {
-    var hours = date.getHours()
-    var minutes = date.getMinutes()
-    var ampm = hours >= 12 ? 'pm' : 'am'
+    let hours = date.getHours()
+    let minutes = date.getMinutes()
+    const 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
+    const strTime = hours + ':' + minutes + ' ' + ampm
     return date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear() + ' ' + strTime
   }
 }

package/src/dialog.js

@@ -1,7 +1,7 @@
 // dialog related modules
 import emitter from './module/emitter'
 import attach from './module/attach'
-import display from './view/display'
+import display from './mixin/display'
 
 import Element from './element'
 import Text from './text'
@@ -43,7 +43,7 @@ class Dialog {
     return this
   }
 
-  init(options) {
+  init (options) {
     this.options = Object.assign({}, Dialog.defaults, options || {})
     Object.assign(this, emitter, attach, display)
   }
@@ -101,8 +101,8 @@ class Dialog {
   }
 
   setPosition () {
-    var coord = this.options.target.getBoundingClientRect()
-    var surface_coord = this.surface.getBoundingClientRect()
+    const coord = this.options.target.getBoundingClientRect()
+    const surface_coord = this.surface.getBoundingClientRect()
 
     if (this.options.position === 'right') {
       this.surface.style.top = coord.top + 'px'
@@ -150,7 +150,7 @@ class Dialog {
 
   emphase () {
     this.element.classList.add('emphase')
-    var it
+    let it
     it = setTimeout(() => {
       clearTimeout(it)
       this.element.classList.remove('emphase')

package/src/divider.js

@@ -1,7 +1,7 @@
 import create from './mixin/create'
 import insert from './mixin/insert'
 
-var defaults = {
+const defaults = {
   prefix: 'material',
   class: 'divider',
   tag: 'span'

package/src/drawer.js

@@ -1,7 +1,7 @@
 import init from './mixin/init'
 import insert from './element/insert'
 import classify from './module/classify'
-import css from './module/css'
+import * as css from './module/css'
 import events from './mixin/events'
 import create from './element/create'
 import emitter from './module/emitter'
@@ -17,21 +17,7 @@ const defaults = {
   modules: [emitter, events]
 }
 
-/**
- * Class representing a UI Container. Can add components.
- *
- * @extends Component
- * @return {parent} The class instance
- * @example new Container({
- *   container: document.body
- * });
- */
 class Drawer {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
     this.options = Object.assign({}, defaults, options || {})
 
@@ -41,8 +27,6 @@ class Drawer {
     this.attach()
 
     this.emit('ready')
-
-    return this
   }
 
   /**

package/src/element/attribute.js

@@ -1,24 +1,21 @@
-'use strict'
-
-function init (element, attribute) {
-  for (var key in attribute) {
-    if (attribute.hasOwnProperty(key)) {
+const init = (element, attribute) => {
+  for (const key in attribute) {
+    if (Object.prototype.hasOwnProperty.call(attribute, key)) {
       element.setAttribute(key, attribute[key])
     }
   }
-
   return element
 }
 
-function set (element, name, value) {
-  return element.setAttribute(name, '' + value)
+const set = (element, name, value) => {
+  return element.setAttribute(name, `${value}`)
 }
 
-function get (element, name) {
+const get = (element, name) => {
   return element.getAttribute(name) || null
 }
 
-function remove (element, name) {
+const remove = (element, name) => {
   return element.removeAttribute(name)
 }
 

package/src/element/build.js

@@ -2,13 +2,13 @@ import attribute from './attribute'
 import create from './create'
 import insert from './insert'
 
-function isObject (object) {
+const isObject = (object) => {
   return object &&
     typeof object === 'object' &&
     Object.getPrototypeOf(object) === Object.getPrototypeOf({})
 }
 
-function process (string) {
+const process = (string) => {
   const tags = string.match(/^[\w-]+/)
   const ids = string.match(/#([\w-]+)/)
   const classes = string.match(/\.[\w-]+/g)
@@ -30,17 +30,16 @@ function process (string) {
   return properties
 }
 
-function build (schema, container, object, level) {
+const build = (schema, container, object = {}, level) => {
   let element
-  object = object || {}
 
-  for (var i = 0; i < schema.length; i++) {
+  for (let i = 0; i < schema.length; i++) {
     if (typeof schema[i] === 'string') {
-      var property = process(schema[i])
+      const property = process(schema[i])
       element = create(property.tag, property.class)
       insert(element, container)
 
-      if (property.name) { object[property.name] = element }
+      if (property.name) object[property.name] = element
     } else if (isObject(schema[i])) {
       attribute.init(element, schema[i])
     } else if (Array.isArray(schema[i])) {