material 0.6.2 → 0.7.1

package/src/dialog.js

@@ -1,213 +1,166 @@
-'use strict'
-
 // dialog related modules
-import events from './component/events'
 import emitter from './module/emitter'
-import controller from './component/controller'
 import attach from './module/attach'
-import insert from './component/insert'
-import event from './element/event.js'
-import css from './module/css'
+import display from './view/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.root.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
+  init(options) {
+    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.root = document.createElement('div')
+    this.element = document.createElement('div')
+    this.element.classList.add('dialog')
 
-    css.add(this.root, 'material-dialog')
+    this.element = this.element
 
-    if (this.options.name) {
-      css.add(this.root, 'dialog-' + this.options.name)
+    if (this.options.class !== 'dialog') {
+      this.element.classList.add(this.options.class)
     }
 
-    if (this.options.css) {
-      css.add(this.root, this.options.css)
-    }
-
-    if (this.options.theme) {
-      css.add(this.root, 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.root)
+    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 () {
+    var coord = this.options.target.getBoundingClientRect()
+    var 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.root, 'dialog-closing')
-
-    var delayMillis = 200 // 1 second
-    setTimeout(() => {
-      this.root.style.display = 'none'
-      css.remove(this.root, 'dialog-closing')
-      css.remove(this.root, 'dialog-show')
-    }, delayMillis)
+    // this.hide()
 
-    this.previousActive.focus()
-
-    return this
+    if (this.options.close) {
+      this.destroy()
+    }
   }
 
-  show () {
-    this.previousActive = document.activeElement
-
-    this.root.style.display = 'flex'
-    // css.add(this.root, 'dialog-showing');
-
-    var delayMillis = 100 // 1 second
-
-    setTimeout(() => {
-      css.add(this.root, 'dialog-show')
-      // css.remove(this.root, '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.root.querySelector('button')
+  emphase () {
+    this.element.classList.add('emphase')
+    var 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,7 +1,5 @@
-'use strict'
-
-import create from './component/create'
-import insert from './component/insert'
+import create from './mixin/create'
+import insert from './mixin/insert'
 
 var defaults = {
   prefix: 'material',
@@ -45,10 +43,10 @@ class Divider {
    * @return {Object} This class instance
    */
   build () {
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     if (this.options.text) {
-      this.root.textContent = this.options.text
+      this.element.textContent = this.options.text
     }
 
     if (this.options.container) {

package/src/drawer.js

@@ -1,10 +1,8 @@
-'use strict'
-
-import init from './component/init'
+import init from './mixin/init'
 import insert from './element/insert'
-import classify from './component/classify'
+import classify from './module/classify'
 import css from './module/css'
-import events from './component/events'
+import events from './mixin/events'
 import create from './element/create'
 import emitter from './module/emitter'
 
@@ -57,14 +55,14 @@ class Drawer {
 
     classify(this.wrapper, this.options)
 
-    this.root = create('aside')
+    this.element = create('aside')
 
-    css.add(this.root, 'drawer-panel')
+    css.add(this.element, 'drawer-panel')
 
-    insert(this.root, this.wrapper)
+    insert(this.element, this.wrapper)
 
     if (this.options.position) {
-      css.add(this.root, 'position-' + this.options.position)
+      css.add(this.element, 'position-' + this.options.position)
     }
 
     if (this.options.fixed) {
@@ -73,9 +71,9 @@ class Drawer {
 
     if (this.options.size) {
       if (this.options.position === 'top' || this.options.position === 'bottom') {
-        this.root.style = 'height: ' + this.options.size + 'px;'
+        this.element.style = 'height: ' + this.options.size + 'px;'
       } else {
-        this.root.style = 'width: ' + this.options.size + 'px;'
+        this.element.style = 'width: ' + this.options.size + 'px;'
       }
     }
 
@@ -85,7 +83,7 @@ class Drawer {
 
     if (this.options.container) { insert(this.wrapper, this.options.container) }
 
-    this.emit('built', this.root)
+    this.emit('built', this.element)
 
     return this
   }
@@ -109,7 +107,7 @@ class Drawer {
    */
 
   toggle () {
-    // console.log('toggle', this.root);
+    // console.log('toggle', this.element);
     if (this.wrapper.classList.contains('show')) {
       this.close()
     } else {

package/src/field/email.js

@@ -40,19 +40,19 @@ class EmailLink {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement('a')
-    this.root.classList.add('email')
+    this.element = document.createElement('a')
+    this.element.classList.add('email')
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     return this
   }
 
   set (email) {
-    this.root.innerHTML = email
-    this.root.setAttribute('href', 'mailto:' + email)
+    this.element.innerHTML = email
+    this.element.setAttribute('href', 'mailto:' + email)
   }
 }
 

package/src/field/image.js

@@ -42,11 +42,11 @@ class Image {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement('div')
-    this.root.classList.add(this.options.class)
+    this.element = document.createElement('div')
+    this.element.classList.add(this.options.class)
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     return this
@@ -76,7 +76,7 @@ class Image {
       url = url + format
     }
 
-    this.root.style.backgroundImage = 'url(' + asset.url + src.path + 'thumb/' + src.filename + ')'
+    this.element.style.backgroundImage = 'url(' + asset.url + src.path + 'thumb/' + src.filename + ')'
   }
 
   sanitize (formats) {

package/src/{control/file.js → file.js}

@@ -1,56 +1,26 @@
-import emitter from '../module/emitter'
-import dataset from '../view/dataset'
-import attributes from './module/attributes'
+import EventEmitter from './mixin/emitter'
 
-const defaults = {
-  class: 'file',
-  attributes: ['name', 'accept', 'required', 'disabled', 'multiple']
-}
+import build from './module/build'
+import dataset from './module/dataset'
+import attributes from './module/attributes'
 
 class File {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter)
-
-    this.build()
-    this.attach()
-
-    return this
+  static defaults = {
+    class: 'file',
+    attributes: ['name', 'accept', 'required', 'disabled', 'multiple']
   }
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.root = document.createElement('div')
-    this.root.classList.add('file')
-
-    if (this.options.class !== 'file') {
-      this.root.classList.add(this.options.class)
-    }
-
+  constructor (options) {
+    this.init(options)   
+    this.build()
     this.buildLabel()
     this.buildInput()
+    this.attach()
+  }
 
-    if (this.options.data) {
-      dataset(this.root, this.options.data)
-    }
-
-    if (this.options.focus) {
-      this.input.focus()
-    }
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.root)
-    }
-
-    return this
+  init (options) {
+    this.options = Object.assign({}, File.defaults, options || {})
+    Object.assign(this, build)
   }
 
   buildLabel () {
@@ -58,18 +28,18 @@ class File {
       this.label = document.createElement('label')
       this.label.classList.add('label')
       this.label.innerHTML = this.options.label
-      this.root.appendChild(this.label)
+      this.element.appendChild(this.label)
     }
   }
 
   buildInput () {
     this.field = document.createElement('div')
     this.field.classList.add('field')
-    this.root.appendChild(this.field)
+    this.element.appendChild(this.field)
 
     this.input = document.createElement('input')
     this.input.setAttribute('type', 'file')
-    this.root.appendChild(this.input)
+    this.element.appendChild(this.input)
 
     attributes(this.input, this.options)
 

package/src/form/build.js

@@ -5,19 +5,19 @@ import Layout from '../layout'
 export default {
   build () {
     // console.log('build', this.options.layout)
-    this.root = document.createElement('div')
-    this.root.classList.add('form')
+    this.element = document.createElement('div')
+    this.element.classList.add('form')
 
     if (this.options.class !== 'form') {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
 
     if (this.options.form) {
-      this.root.classList.add(this.options.form)
+      this.element.classList.add(this.options.form)
     }
 
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     this.buildForm(this.options.form)
@@ -25,13 +25,13 @@ export default {
     this.buildLayout()
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
   },
 
   buildForm (form) {
     this.form = document.createElement('form')
-    this.root.appendChild(this.form)
+    this.element.appendChild(this.form)
 
     if (form && form.method) {
       this.form.setAttribute('method', form.method)

package/src/form/verify.js

@@ -8,10 +8,10 @@ export default {
       var field = this.ui['info.' + list[i]]
 
       if (!this.layout.get(list[i]).get()) {
-        field.root.classList.add('textfield-error')
+        field.element.classList.add('textfield-error')
         ok = false
       } else {
-        field.root.classList.remove('textfield-error')
+        field.element.classList.remove('textfield-error')
       }
     }
 

package/src/form.js

@@ -1,10 +1,8 @@
-'use strict'
-
 import insert from './element/insert'
 import css from './module/css'
 import emitter from './module/emitter'
 import attach from './module/attach'
-import controller from './component/controller'
+import controller from './mixin/controller'
 
 // import component
 import Layout from './layout'
@@ -72,13 +70,13 @@ class Form {
   build () {
     var tag = this.options.tag || 'div'
 
-    this.root = document.createElement(tag)
-    css.add(this.root, this.options.prefix + '-' + this.options.class)
+    this.element = document.createElement(tag)
+    css.add(this.element, this.options.prefix + '-' + this.options.class)
 
     // complete layout options
-    this.options.root = this.root
+    this.options.root = this.element
 
-    this.layout = new Layout(this.options.layout, this.root)
+    this.layout = new Layout(this.options.layout, this.element)
 
     this._initControls(this.layout.controls)
 
@@ -86,7 +84,7 @@ class Form {
   }
 
   insert (container, context) {
-    insert(this.root, container, context)
+    insert(this.element, container, context)
 
     return this
   }

package/src/icon.js

@@ -1,6 +1,4 @@
-'use strict'
-
-import insert from './component/insert'
+import insert from './mixin/insert'
 import css from './module/css'
 
 var defaults = {
@@ -55,11 +53,11 @@ class Icon {
 
     this.element = this.element || {}
 
-    this.root = document.createElement(tag)
-    css.add(this.root, this.options.prefix + '-' + this.options.class)
+    this.element = document.createElement(tag)
+    css.add(this.element, this.options.prefix + '-' + this.options.class)
 
-    if (options.css) { css.add(this.root, options.css) }
-    // css.add(this.root, this.options.class + '-adjust');
+    if (options.css) { css.add(this.element, options.css) }
+    // css.add(this.element, this.options.class + '-adjust');
 
     if (this.options.container) {
       this.insert(this.options.container)
@@ -73,10 +71,10 @@ class Icon {
    */
   set (value) {
     if (value) {
-      if (this.root.innerText) {
-        this.root.innerText = value
+      if (this.element.innerText) {
+        this.element.innerText = value
       } else {
-        this.root.textContent = value
+        this.element.textContent = value
       }
 
       return this