material 0.7.0 → 0.7.1

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 './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.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
+  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.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 () {
+    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.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')
+    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,5 +1,3 @@
-'use strict'
-
 import create from './mixin/create'
 import insert from './mixin/insert'
 

package/src/drawer.js

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

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.element = document.createElement('div')
-    this.element.classList.add('file')
-
-    if (this.options.class !== 'file') {
-      this.element.classList.add(this.options.class)
-    }
-
+  constructor (options) {
+    this.init(options)   
+    this.build()
     this.buildLabel()
     this.buildInput()
+    this.attach()
+  }
 
-    if (this.options.data) {
-      dataset(this.element, this.options.data)
-    }
-
-    if (this.options.focus) {
-      this.input.focus()
-    }
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.element)
-    }
-
-    return this
+  init (options) {
+    this.options = Object.assign({}, File.defaults, options || {})
+    Object.assign(this, build)
   }
 
   buildLabel () {

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,5 +1,3 @@
-'use strict'
-
 import insert from './element/insert'
 import css from './module/css'
 import emitter from './module/emitter'

package/src/icon.js

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

package/src/image.js

@@ -1,124 +1,57 @@
-'use strict'
+import build from './module/build'
 
-// import insert from './mixin/insert'
-import css from './module/css'
-import insert from './element/insert'
-import control from './mixin/control'
-
-var defaults = {
-  prefix: 'material',
-  class: 'image',
-  tag: 'div'
-}
-
-/**
- * The item class is used for example as item list
- *
- * @class
- * @extends {Component}
- * @return {Object} The class instance
- * @example new Item(object);
- */
 class Image {
-  /**
-   * init
-   * @return {Object} The class options
-   */
+  static defaults = {
+    class: 'image',
+    tag: 'div',
+    format: 'thumb'
+  }
+
   constructor (options) {
     this.init(options)
     this.build()
-
-    return this
   }
 
-  /**
-   * [init description]
-   * @param  {?} options [description]
-   * @return {?}         [description]
-   */
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, control)
+    this.options = Object.assign({}, Image.defaults, options || {})
+    Object.assign(this, build)
   }
 
-  /**
-   * Build function for item
-   * @return {Object} This class instance
-   */
-  build (options) {
-    options = options || this.options
-
-    var tag = options.tag || 'div'
-    var text = options.text || options.label
-    this.element = document.createElement(tag)
-
-    // if (options.src) {
-    //   this.element.setAttribute('style', 'background-image: url(' + options.src + ')')
-
-    if (options.src) {
-      this.image = document.createElement('img')
-      this.image.setAttribute('src', options.src)
-      css.add(this.image, this.options.class + '-image')
-      insert(this.image, this.element)
-    }
-
-    this.info = document.createElement('span')
-    css.add(this.info, this.options.class + '-info')
-
-    insert(this.info, this.element)
-
-    this.label(text, this.info)
-
-    // this.label = this.element.label
-
-    this.icon(this.options.icon, this.info, 'bottom')
-
-    // if (text) {
-    //   this.label = document.createElement('span')
-    //   this.label.innerText = text
-    //   css.add(this.label, this.options.class + '-label')
-    //   insert(this.label, this.element)
-    // }
-
-    css.add(this.element, this.options.prefix + '-' + this.options.class)
-
-    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)
-    }
-  }
-
-  /**
-   * [insert description]
-   * @param  {?} container [description]
-   * @param  {?} context   [description]
-   * @return {?}           [description]
-   */
-  insert (container, context) {
-    insert(this.element, container, context)
-
-    return this
-  }
-
-  /**
-   * Get or set text value of the element
-   * @param {string} value The text to set
-   * @returns {*}
-   */
-  set (value) {
-    if (value) {
-      if (this.element.innerText) {
-        this.element.innerText = value
+  set (src) {
+    // console.log('set', src)
+    if (!src) {
+      this.element.style.backgroundImage = ''
+    } else {
+      var url = null
+
+      if (src.format) {
+        var format = this.sanitize(src.format)
+
+        if (format.length > 0) {
+          var index = format.indexOf(this.options.format)
+          if (index === -1) {
+            format = src.format[0] + '/'
+          } else {
+            format = this.options.format + '/'
+          }
+        }
+
+        url = src.url + format
       } else {
-        this.element.textContent = value
+        url = src.url
       }
 
-      return this
+      this.element.style.backgroundImage = 'url(' + url + src.filename + ')'
     }
+  }
 
-    return this
+  sanitize (formats) {
+    var a = []
+    for (var i = 0; i < formats.length; i++) {
+      var format = formats[i].replace(/\/$/, '')
+      a.push(format)
+    }
+    return a
   }
 }
 

package/src/item.js

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

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

@@ -1,36 +1,23 @@
-'use strict'
-
-const defaults = {
-  class: 'link',
-  tag: 'a'
-}
+import build from './module/build'
 
 class Link {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
+  static defaults = {
+    class: 'link',
+    tag: 'a'
+  }
 
+  constructor (options) {
+    this.init(options)
     this.build()
-
-    return this
+    this.setup()
   }
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.element = document.createElement(this.options.tag)
-    this.element.classList.add(this.options.class)
-
-    if (this.options.class !== 'link') {
-      this.element.classList.add('link')
-    }
+  init (options) {
+    this.options = Object.assign({}, Link.defaults, options || {})
+    Object.assign(this, build)
+  }
 
+  setup () {
     if (this.options.link) {
       this.set(this.options.link)
     }
@@ -39,15 +26,9 @@ class Link {
       this.element.target = this.options.target
     }
 
-    if (this.options.container) {
-      this.options.container.appendChild(this.element)
-    }
-
     if (this.options.text) {
       this.element.innerHTML = this.options.text
     }
-
-    return this
   }
 
   set (link) {

package/src/list/build.js

@@ -1,9 +1,9 @@
 import scrollbar from '../module/scrollbar'
-import dataset from '../view/dataset'
+import dataset from '../module/dataset'
 
 import Layout from '../layout'
 import Virtual from './virtual'
-import Loading from '../control/loading'
+import Loading from '../loading'
 
 export default {
   build (data) {