material 0.6.1 → 0.7.0

package/src/control/list.js

@@ -1,9 +1,22 @@
-import addClass from './module/addclass'
+// menu related modules
+import emitter from '../module/emitter'
+import attach from '../module/attach'
+import build from '../module/build'
+import display from '../module/display'
+
+import Layout from '../layout'
+import Element from '../element'
+import Button from './text'
 
 const defaults = {
-  class: 'text',
-  tag: 'span',
-  seprator: ' | '
+  class: 'list',
+  layout: [
+    [Element, 'main', { tag: 'ul' }]
+  ],
+  item: [Text, { tag: 'li' }],
+  events: [
+    ['ui.main.click', 'select']
+  ]
 }
 
 class List {
@@ -14,40 +27,15 @@ class List {
    */
   constructor (options) {
     this.options = Object.assign({}, defaults, options || {})
-
-    // console.log('options', this.options)
+    // implement modules
+    Object.assign(this, emitter, build, attach, display)
 
     this.build()
 
     return this
   }
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.root = document.createElement(this.options.tag)
-    addClass(this.root, this.options.class)
-
-    if (this.options.class !== 'text') {
-      this.root.classList.add('text')
-    }
-
-    if (this.options.list) {
-      this.set(this.options.list)
-    }
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.root)
-    }
-
-    return this
-  }
-
-  set (list) {
-    var text = ''
-
+  add (items) {
     for (var i = 0; i < list.length; i++) {
       if (i < list.length - 1) {
         text = text + list[i] + this.options.seprator
@@ -61,16 +49,18 @@ class List {
 
     var label = this.options.label || ''
 
-    this.root.innerHTML = label + text
+    this.element.innerHTML = label + text
 
     if (this.options.spaceAfter) {
-      this.root.innerHTML = this.root.innerHTML + ' '
+      this.element.innerHTML = this.element.innerHTML + ' '
     }
   }
 
+  select()
+
   setText (text) {
     // console.log('setText', text)
-    this.root.innerHTML = text
+    this.element.innerHTML = text
   }
 }
 

package/src/control/loading.js

@@ -62,16 +62,16 @@ class Loading {
    * @return {Object} This class instance
    */
   build (options) {
-    this.root = document.createElement(this.options.tag)
+    this.element = document.createElement(this.options.tag)
     this.classify()
 
     if (this.options.type === 'circular') {
-      this.root.innerHTML = this.options.circular
+      this.element.innerHTML = this.options.circular
     } if (this.options.type === 'indeterminate') {
       this.bar = document.createElement(this.options.tag)
       this.bar.classList.add('bar')
-      this.root.classList.add('type-indeterminate')
-      this.root.appendChild(this.bar)
+      this.element.classList.add('type-indeterminate')
+      this.element.appendChild(this.bar)
     }
 
     return this
@@ -79,16 +79,16 @@ class Loading {
 
   classify () {
     if (this.options.class !== 'loading') {
-      this.root.setAttribute('class', this.options.class + ' ' + this.options.class)
+      this.element.setAttribute('class', this.options.class + ' ' + this.options.class)
     } else {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
   }
 
   append (container) {
     container = container || this.options.container
     if (this.options.container) {
-      container.appendChild(this.root)
+      container.appendChild(this.element)
     }
   }
 
@@ -101,7 +101,7 @@ class Loading {
 
     clearTimeout(this.showTimeout)
     this.showTimeout = setTimeout(() => {
-      this.root.classList.add('show')
+      this.element.classList.add('show')
     }, this.options.delay)
 
     this.visible = true
@@ -110,7 +110,7 @@ class Loading {
   }
 
   showNow () {
-    this.root.classList.add('show')
+    this.element.classList.add('show')
 
     this.visible
 
@@ -119,7 +119,7 @@ class Loading {
 
   hide () {
     clearTimeout(this.showTimeout)
-    this.root.classList.remove('show')
+    this.element.classList.remove('show')
     this.visible = false
     return this
   }

package/src/control/menu.js

@@ -0,0 +1,85 @@
+import EventEmitter from '../mixin/emitter'
+// menu related modules
+import build from '../module/build'
+import bindEvents from '../module/events'
+import display from '../mixin/display'
+
+import Element from '../element'
+import Button from './button'
+
+class Menu extends EventEmitter {
+  static defaults = {
+    class: 'menu',
+    transition: 200,
+    modal: false,
+    layout: [
+      [Element, 'surface', { class: 'surface' },
+        [Element, 'list', { tag: 'ul', class: 'items' }]
+      ]
+    ],
+    events: [
+      ['element.click', 'close']
+    ]
+  };
+
+  constructor (options) {
+    super()
+    
+    this.init(options)
+    this.build(this.constructor)    
+    this.bindEvents()
+
+    this.render(this.options.items)
+  }
+
+  init(options) {
+    this.options = Object.assign({}, Menu.defaults, options || {})
+    Object.assign(this, build, bindEvents, display)
+  }
+
+  render (items) {
+      if (items && Array.isArray(items)) {
+      for (var i = 0; i < items.length; i++) {
+        this.add(items[i])
+      }
+    }
+
+    return this
+  }
+
+  add (obj) {
+    if (typeof obj !== 'object') return this;
+    let item;
+    if (obj.type === 'divider') {
+      item = new Element({ tag: 'li', class: 'divider' })
+    } else {
+      obj.container = this.ui.list
+      obj.class = 'item'
+      item = new Button(obj).on('click', (ev) => {
+        // console.log('select', ev.target.name)
+        this.emit('select', ev.target.name)
+      })
+    }
+
+    return this
+  }
+
+  position(target) {
+    if (!target) return
+    var offs = target.getBoundingClientRect()
+
+    var offsw = this.offset = this.ui.surface.getBoundingClientRect()
+
+    this.ui.surface.style.top = (offs.top - 4) + 'px'
+    this.ui.surface.style.left = offs.left - offsw.width + offs.width + 'px'
+
+    return this
+  }
+
+  close() {
+    // console.log('close')
+    this.destroy()
+  }
+}
+
+export default Menu

package/src/control/search.js

@@ -40,32 +40,32 @@ class Search {
    * @return {Object} This class instance
    */
   build () {
-    this.root = document.createElement('div')
-    this.root.classList.add('search')
+    this.element = document.createElement('div')
+    this.element.classList.add('search')
 
     if (this.options.class !== 'search') {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
 
     if (this.options.icon) {
       this.icon = document.createElement('i')
       this.icon.classList.add('icon')
       this.icon.innerHTML = this.options.icon
-      this.root.appendChild(this.icon)
+      this.element.appendChild(this.icon)
     }
 
     this.input = document.createElement('input')
     this.input.classList.add('input')
-    this.root.appendChild(this.input)
+    this.element.appendChild(this.input)
 
     this.cancel = new Button({
-      container: this.root,
+      container: this.element,
       class: 'clear',
       icon: this.options.iconCancel
     })
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     return this
@@ -90,8 +90,8 @@ class Search {
   }
 
   set (email) {
-    this.root.innerHTML = email
-    this.root.setAttribute('href', 'mailto:' + email)
+    this.element.innerHTML = email
+    this.element.setAttribute('href', 'mailto:' + email)
   }
 }
 

package/src/control/select.js

@@ -32,18 +32,18 @@ class Select {
    */
   build () {
     var tag = this.options.tag || 'span'
-    this.root = document.createElement(tag)
-    this.root.classList.add('select')
+    this.element = document.createElement(tag)
+    this.element.classList.add('select')
 
     if (this.options.class !== 'select') {
-      this.root.classList.add(this.options.class)
+      this.element.classList.add(this.options.class)
     }
 
     this.buildLabel()
     this.buildInput()
 
     if (this.container) {
-      this.container.appendChild(this.root)
+      this.container.appendChild(this.element)
     }
 
     return this
@@ -54,14 +54,14 @@ class Select {
       this.label = document.createElement('span')
       this.label.classList.add('label')
       this.label.innerHTML = this.options.label
-      this.root.appendChild(this.label)
+      this.element.appendChild(this.label)
     }
   }
 
   buildInput () {
     this.input = document.createElement('select')
     this.input.classList.add('input')
-    this.root.appendChild(this.input)
+    this.element.appendChild(this.input)
 
     this.input.addEventListener('change', () => {
       // console.log('change', this.input[this.input.selectedIndex].value)

package/src/control/selecter.js

@@ -51,7 +51,7 @@ class Selecter {
 
   setup () {
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     // console.log('attribute', this.ui.input, this.options)
@@ -62,7 +62,7 @@ class Selecter {
     }
 
     if (this.options.tooltip) {
-      this.root.setAttribute('data-tooltip', this.options.tooltip)
+      this.element.setAttribute('data-tooltip', this.options.tooltip)
     }
 
     if (this.options.label) {
@@ -72,7 +72,7 @@ class Selecter {
     this.ui.input.setAttribute('aria-label', this.options.name)
 
     if (this.options.case) {
-      this.root.classList.add(this.options.case + '-case')
+      this.element.classList.add(this.options.case + '-case')
     }
   }
   /**
@@ -81,14 +81,14 @@ class Selecter {
    */
   build () {
     var tag = this.options.tag || 'span'
-    this.root = document.createElement(tag)
-    this.root.classList.add('selecter')
+    this.element = document.createElement(tag)
+    this.element.classList.add('selecter')
 
     if (this.options.class !== 'selecter') {
-      addClass(this.root, this.options.class)
+      addClass(this.element, this.options.class)
     }
 
-    this.layout = new Layout(this.options.layout, this.root)
+    this.layout = new Layout(this.options.layout, this.element)
     this.ui = this.layout.component
 
     // console.log('ui', this.ui)
@@ -99,7 +99,7 @@ class Selecter {
     this.setList(this.options.list)
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
   }
 
@@ -110,13 +110,13 @@ class Selecter {
     this.ui.icon.classList.add('icon')
     this.ui.icon.innerHTML = this.options.icon
 
-    this.root.insertBefore(this.ui.icon, this.ui.input)
+    this.element.insertBefore(this.ui.icon, this.ui.input)
   }
 
   buildInput () {
     this.input = document.createElement('select')
     this.input.classList.add('input')
-    this.root.appendChild(this.input)
+    this.element.appendChild(this.input)
 
     this.input.addEventListener('change', () => {
       // console.log('change', this.input[this.input.selectedIndex].value)
@@ -154,19 +154,19 @@ class Selecter {
 
   styleAttributes () {
     if (this.options.style) {
-      this.root.classList.add('style-' + this.options.style)
+      this.element.classList.add('style-' + this.options.style)
     }
 
     if (this.options.size) {
-      this.root.classList.add(this.options.size + '-size')
+      this.element.classList.add(this.options.size + '-size')
     }
 
     if (this.options.color) {
-      this.root.classList.add('color-' + this.options.color)
+      this.element.classList.add('color-' + this.options.color)
     }
 
     if (this.options.bold) {
-      this.root.classList.add('bold')
+      this.element.classList.add('bold')
     }
   }
   showList () {
@@ -216,7 +216,7 @@ class Selecter {
       this.ui.value.innerHTML = this.values[value]
     }
 
-    this.selected = this.root.querySelector('[data-value=' + value + ']')
+    this.selected = this.element.querySelector('[data-value=' + value + ']')
 
     // console.log('item', this.selected)
     if (this.selected) {

package/src/control/snackbar.js

@@ -0,0 +1,91 @@
+// base class
+import EventEmitter from '../mixin/emitter'
+// related modules
+import build from '../module/build'
+import bindEvents from '../module/events'
+import display from '../mixin/display'
+// ui element
+import Text from './text'
+import Button from './button'
+
+class Snackbar extends EventEmitter {
+  static defaults = {
+    class: 'snackbar',
+    transition: 225,
+    duration: 4000,
+    close: false,
+    layout: [
+      [Text, 'text', { tag: 'span', class: 'text' }],
+      [Button, 'action', { class: 'action', type: 'link' }],
+      [Button, 'close', { class: 'close', type: 'action' }]
+    ],
+    events: [
+      ['ui.action.click', 'action'],
+      ['ui.close.click', 'destroy']
+    ]
+  };
+
+  constructor (options) {
+    super()
+
+    this.init(options)
+    this.build(this.constructor)
+    this.render()    
+    this.bindEvents()
+    this.show()
+
+    if (this.options.duration)
+      setTimeout(()=>{
+        this.destroy()
+      }, this.options.duration)
+  }
+
+  init(options) {
+    this.options = Object.assign({}, Snackbar.defaults, options || {})
+    Object.assign(this, build, bindEvents, display)
+
+    this.buildSnackbarContainer(this.options.container)
+  }
+
+  buildSnackbarContainer (container = document.body) {
+    // console.log('buildSnackbarContainer', container)
+
+    let snackbarContainer = container.querySelector('.snackbars')
+
+    // console.log('snackbarContainer', snackbarContainer)
+
+    if (!snackbarContainer) {
+      this.options.container = document.createElement('div')
+      this.options.container.classList.add('snackbars')
+      container.appendChild(this.options.container)
+    } else {
+      this.options.container = snackbarContainer
+    }
+  }
+
+  render () {
+    this.ui.text.set(this.options.text)
+
+    if (this.options.action) {
+      this.ui.action.set(this.options.action)
+      this.ui.action.element.classList.add('show')
+    }
+
+    if (this.options.close) this.ui.close.element.classList.add('show')
+
+    return this
+  }
+
+  action () {
+    // console.log('action')
+    this.emit('action')
+    this.destroy()
+  }
+
+  close() {
+    // console.log('close')
+    this.destroy()
+  }
+}
+
+export default Snackbar

package/src/control/switch.js

@@ -50,14 +50,14 @@ class Switch {
    */
   build () {
     var tag = this.options.tag || 'span'
-    this.root = document.createElement(tag)
-    this.root.classList.add('switch')
+    this.element = document.createElement(tag)
+    this.element.classList.add('switch')
 
     if (this.options.class !== 'switch') {
-      addClass(this.root, this.options.class)
+      addClass(this.element, this.options.class)
     }
 
-    this.layout = new Layout(this.options.layout, this.root)
+    this.layout = new Layout(this.options.layout, this.element)
     this.ui = this.layout.component
 
     // console.log('ui', this.ui)
@@ -68,13 +68,13 @@ class Switch {
     this.buildLabel()
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
   }
 
   setup () {
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     // console.log('attribute', this.ui.input, this.options)
@@ -89,13 +89,13 @@ class Switch {
     }
 
     if (this.options.tooltip) {
-      this.root.setAttribute('data-tooltip', this.options.tooltip)
+      this.element.setAttribute('data-tooltip', this.options.tooltip)
     }
 
     this.ui.input.setAttribute('aria-label', this.options.name)
 
     if (this.options.case) {
-      this.root.classList.add(this.options.case + '-case')
+      this.element.classList.add(this.options.case + '-case')
     }
   }
 
@@ -111,7 +111,7 @@ class Switch {
       this.ui.label.setAttribute('for', this.options.name)
     }
 
-    this.root.insertBefore(this.ui.label, this.ui.input)
+    this.element.insertBefore(this.ui.label, this.ui.input)
   }
 
   buildIcon () {
@@ -121,24 +121,24 @@ class Switch {
     this.ui.icon.classList.add('icon')
     this.ui.icon.innerHTML = this.options.icon
 
-    this.root.insertBefore(this.ui.icon, this.ui.input)
+    this.element.insertBefore(this.ui.icon, this.ui.input)
   }
 
   styleAttributes () {
     if (this.options.style) {
-      this.root.classList.add('style-' + this.options.style)
+      this.element.classList.add('style-' + this.options.style)
     }
 
     if (this.options.size) {
-      this.root.classList.add(this.options.size + '-size')
+      this.element.classList.add(this.options.size + '-size')
     }
 
     if (this.options.color) {
-      this.root.classList.add('color-' + this.options.color)
+      this.element.classList.add('color-' + this.options.color)
     }
 
     if (this.options.bold) {
-      this.root.classList.add('bold')
+      this.element.classList.add('bold')
     }
   }
 
@@ -228,7 +228,7 @@ class Switch {
   check (checked, silent) {
     // console.log('check', checked, silent)
     if (checked === true) {
-      this.root.classList.add('is-checked')
+      this.element.classList.add('is-checked')
       this.ui.input.checked = true
       this.checked = true
       this.value = true
@@ -236,7 +236,7 @@ class Switch {
         this.emit('change', this.checked)
       }
     } else {
-      this.root.classList.remove('is-checked')
+      this.element.classList.remove('is-checked')
       this.ui.input.checked = false
       this.checked = false
       this.value = false
@@ -254,7 +254,7 @@ class Switch {
   focus () {
     if (this.disabled === true) return this
 
-    this.root.classList.add('is-focused')
+    this.element.classList.add('is-focused')
     if (this.ui.input !== document.activeElement) { this.ui.input.focus() }
     return this
   }
@@ -264,7 +264,7 @@ class Switch {
    * @return {?} [description]
    */
   blur () {
-    this.root.classList.remove('is-focused')
+    this.element.classList.remove('is-focused')
     return this
   }
 }