material 0.7.0 → 0.7.2

package/src/checkbox.js

@@ -1,5 +1,3 @@
-'use strict'
-
 import events from './mixin/events'
 import control from './mixin/control'
 import label from './mixin/label'
@@ -9,12 +7,12 @@ import build from './element/build'
 
 import emitter from './module/emitter'
 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 = {
+const defaults = {
   prefix: 'material',
   class: 'checkbox',
   type: 'control',
@@ -33,26 +31,8 @@ let defaults = {
     ['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);
- */
+
 class Checkbox {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
     this.init(options)
     this.build()
@@ -61,11 +41,6 @@ class Checkbox {
     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)
@@ -73,17 +48,13 @@ class Checkbox {
     return this
   }
 
-  /**
-   * build the component using the super method
-   * @return {Object} The class instance
-   */
   build () {
     this.element = build(this.options.build)
     this.element = this.element.root
 
     this.element.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)
 
@@ -117,12 +88,6 @@ class Checkbox {
     return this
   }
 
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
   set (prop, value) {
     switch (prop) {
       case 'checked':
@@ -141,23 +106,12 @@ class Checkbox {
     return this
   }
 
-  /**
-   * [insert description]
-   * @param  {?} container [description]
-   * @param  {?} context   [description]
-   * @return {?}           [description]
-   */
   insert (container, context) {
     insert(this.element, container, context)
 
     return this
   }
 
-  /**
-   * [click description]
-   * @param  {event} e [description]
-   * @return {?}   [description]
-   */
   click (e) {
     this.toggle(e)
     this.element.input.focus()
@@ -165,12 +119,8 @@ class Checkbox {
     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)
 

package/src/component.js

@@ -1,5 +1,3 @@
-'use strict'
-
 import create from './mixin/create'
 import events from './mixin/events'
 import insert from './mixin/insert'

package/src/container.js

@@ -1,5 +1,3 @@
-'use strict'
-
 import create from './mixin/create'
 import insert from './element/insert'
 import emitter from './module/emitter'

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)
+    const d = new Date(date)
+    const formatted = this.format(d)
+    this.element.innerHTML = formatted
+  }
+
+  format (date) {
+    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
+    const strTime = hours + ':' + minutes + ' ' + ampm
+    return date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear() + ' ' + strTime
+  }
+}
+
+export default DateHour

package/src/dialog.js

@@ -1,213 +1,166 @@
-'use strict'
-
 // dialog related modules
-import events from './mixin/events'
 import emitter from './module/emitter'
-import controller from './mixin/controller'
 import attach from './module/attach'
-import insert from './mixin/insert'
-import event from './element/event.js'
-import css from './module/css'
+import display from './mixin/display'
 
+import Element from './element'
 import Text from './text'
 import Button from './button'
-import Toolbar from './toolbar'
 import Layout from './layout'
 
-let defaults = {
-  prefix: 'material',
-  class: 'dialog',
-  tag: 'div',
-  events: [
-    ['root.click', 'close']
-  ]
-}
-
 class Dialog {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
+  static 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: [
+      ['element.click', 'onClickRoot'],
+      ['surface.click', 'onClick'],
+      ['ui.ok.click', 'ok'],
+      ['ui.cancel.click', 'cancel'],
+      ['ui.close.click', 'close']
+    ]
+  }
+
   constructor (options) {
     this.init(options)
     this.build()
+    this.render()
     this.attach()
 
-    this.element.style.display = 'none'
-
     return this
   }
 
-  /**
-   * Constructor
-   * @param  {Object} options The class options
-   * @return {Object} This class instance
-   */
   init (options) {
-    // init options
-    this.options = Object.assign({}, defaults, options || {})
-
-    // implement modules
-    Object.assign(this, events, emitter, attach, insert)
-
-    this.layout = null
-    this.content = null
-    this.html = null
-
-    this.controller = controller
-
-    return this
+    this.options = Object.assign({}, Dialog.defaults, options || {})
+    Object.assign(this, emitter, attach, display)
   }
 
-  /**
-   * build the component using the super method
-   * @return {Object} The class instance
-   */
   build () {
     this.element = document.createElement('div')
+    this.element.classList.add('dialog')
 
-    css.add(this.element, 'material-dialog')
+    this.element = this.element
 
-    if (this.options.name) {
-      css.add(this.element, 'dialog-' + this.options.name)
+    if (this.options.class !== 'dialog') {
+      this.element.classList.add(this.options.class)
     }
 
-    if (this.options.css) {
-      css.add(this.element, this.options.css)
-    }
-
-    if (this.options.theme) {
-      css.add(this.element, this.options.theme + '-theme')
+    if (this.options.position) {
+      this.element.classList.add('position-' + this.options.position)
     }
 
     this.surface = document.createElement('div')
+    this.surface.classList.add('surface')
+    this.element.appendChild(this.surface)
 
-    css.add(this.surface, 'dialog-surface')
-
-    this.insertElement(this.surface, this.element)
+    this.layout = new Layout(this.options.layout, this.surface)
+    this.ui = this.layout.component
 
-    if (this.options.title) {
-      this.buildTitle()
+    if (this.options.container) {
+      this.options.container.appendChild(this.element)
     }
 
-    if (this.options.content) {
-      this.buildContent()
+    if (this.options.display === 'show') {
+      this.show()
     }
+  }
 
-    if (this.options.layout) {
-      this.buildLayout()
+  render () {
+    if (this.options.title && this.ui.title) {
+      this.ui.title.set(this.options.title)
     }
 
-    if (this.options.html) {
-      this.buildHTML()
+    if (this.options.content && this.ui.content) {
+      this.ui.content.set(this.options.content)
     }
 
-    this.buildActions()
-
-    event.add(this.surface, 'click', function (ev) {
-      ev.stopPropagation()
-    })
-  }
-
-  buildTitle () {
-    this.title = new Text({
-      type: 'title',
-      css: 'dialog-title',
-      text: this.options.title
-    })
+    if (this.options.cancel && this.ui.cancel) {
+      this.ui.cancel.set('text', this.options.cancel)
+    }
 
-    this.insertElement(this.title.root, this.surface)
+    if (this.options.ok && this.ui.ok) {
+      this.ui.ok.set('text', this.options.ok)
+    }
 
-    // console.log('buildTitle', this.title)
+    if (this.options.target) {
+      this.setPosition()
+    }
   }
 
-  buildLayout () {
-    this.layout = new Layout(this.options.layout, this.surface)
-    this.ui = this.layout.component
-  }
+  setPosition () {
+    const coord = this.options.target.getBoundingClientRect()
+    const surface_coord = this.surface.getBoundingClientRect()
 
-  buildHTML () {
-    this.html = new Container({
-      css: 'dialog-content'
-    })
+    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'
+    }
   }
 
-  buildContent () {
-    // console.log('text content', this.options.content)
-    this.content = new Text({
-      type: 'content',
-      css: 'dialog-content',
-      text: this.options.content
-    })
-    this.insertElement(this.content.root, this.surface)
+  ok () {
+    this.emit('ok')
+    if (this.options.close) {
+      this.destroy()
+    }
   }
 
-  buildActions () {
-    if (this.options.actions) {
-      this.actions = new Layout(this.options.actions, this.surface)
+  cancel () {
+    this.emit('cancel')
 
-      css.add(this.actions.get('root'), 'dialog-actions')
-    } else {
-      var actions
-      if (this.options.accept || this.options.cancel) {
-        actions = new Toolbar({ css: 'dialog-actions' })
-        this.insertElement(actions.root, this.surface)
-      }
-
-      if (this.options.cancel) {
-        this.cancel = new Button(this.options.cancel)
-        .on('click', () => {
-          this.emit('canceled')
-          this.close()
-        })
-        this.insertElement(this.cancel.root, actions.root)
-      }
-
-      if (this.options.accept) {
-        this.accept = new Button(this.options.accept)
-        .on('click', () => {
-          this.emit('accepted')
-          this.close()
-        })
-        this.insertElement(this.accept.root, actions.root)
-      }
+    if (this.options.close) {
+      this.destroy()
     }
   }
 
   close () {
-    css.add(this.element, 'dialog-closing')
-
-    var delayMillis = 200 // 1 second
-    setTimeout(() => {
-      this.element.style.display = 'none'
-      css.remove(this.element, 'dialog-closing')
-      css.remove(this.element, 'dialog-show')
-    }, delayMillis)
+    // this.hide()
 
-    this.previousActive.focus()
-
-    return this
+    if (this.options.close) {
+      this.destroy()
+    }
   }
 
-  show () {
-    this.previousActive = document.activeElement
-
-    this.element.style.display = 'flex'
-    // css.add(this.element, 'dialog-showing');
-
-    var delayMillis = 100 // 1 second
-
-    setTimeout(() => {
-      css.add(this.element, 'dialog-show')
-      // css.remove(this.element, 'dialog-showing');
-    }, delayMillis)
+  onClick (e) {
+    e.stopPropagation()
+  }
 
-    return this
+  onClickRoot (e) {
+    // console.log('onClickRoot')
+    e.stopPropagation()
+    if (!this.options.modal) {
+      this.destroy()
+    }
+  }
 
-    // var button = this.element.querySelector('button')
+  emphase () {
+    this.element.classList.add('emphase')
+    let it
+    it = setTimeout(() => {
+      clearTimeout(it)
+      this.element.classList.remove('emphase')
+    }, 100)
+  }
 
-    // if (button) button.focus()
+  set (prop, value) {
+    if (this.ui[prop]) {
+      this.ui[prop].set(value)
+    }
   }
 }
 

package/src/divider.js

@@ -1,9 +1,7 @@
-'use strict'
-
 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,9 +1,7 @@
-'use strict'
-
 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'
@@ -19,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 || {})
 
@@ -43,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])) {

package/src/element/create.js

@@ -1,11 +1,8 @@
-import css from '../module/css'
+import * as css from '../module/css'
 
-function create (tag, className) {
-  tag = tag || 'div'
-
-  var element = document.createElement(tag)
+const create = (tag = 'div', className) => {
+  const element = document.createElement(tag)
   css.add(element, className)
-
   return element
 }
 

package/src/element/event.js

@@ -12,7 +12,7 @@ export default {
     // avoid memory overhead of new anonymous functions for every event handler that's installed
     // by using local functions
     function listenHandler (e) {
-      var ret = fn.apply(this, arguments)
+      const ret = fn.apply(this, arguments)
       if (ret === false) {
         e.stopPropagation()
         e.preventDefault()
@@ -23,7 +23,7 @@ export default {
     function attachHandler () {
       // set the this pointer same as addEventListener when fn is called
       // and make sure the event is passed to the fn also so that works the same too
-      var ret = fn.call(element, window.event)
+      const ret = fn.call(element, window.event)
       if (ret === false) {
         window.event.returnValue = false
         window.event.cancelBubble = true