material 0.6.1 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "A lightweight implementation of Material Design Components - ES6",
   "main": "index.js",
   "repository": {

package/src/component/emitter.js

@@ -0,0 +1,23 @@
+class EventEmitter {
+  constructor () {
+    this.events = {}
+  }
+
+  on (event, listener) {
+    if (!this.events[event]) {
+      this.events[event] = []
+    }
+    this.events[event].push(listener)
+
+    return this
+  }
+
+  emit (event, ...args) {
+    if (this.events[event]) {
+      this.events[event].forEach(listener => listener.apply(this, args))
+    }
+    return this
+  }
+}
+
+export default EventEmitter

package/src/control/button.js

@@ -56,6 +56,10 @@ class Button {
   build () {
     this.root = document.createElement(this.options.tag)
 
+    this.element = this.root
+
+    // console.log('class', this.options.class)
+
     if (this.options.class !== 'button') {
       this.root.setAttribute('class', 'button ' + this.options.class)
     } else {

package/src/control/dialog.js

@@ -1,5 +1,3 @@
-'use strict'
-
 // dialog related modules
 import emitter from '../module/emitter'
 import attach from '../module/attach'
@@ -27,7 +25,7 @@ let defaults = {
     ]
   ],
   events: [
-    ['root.click', 'onClickRoot'],
+    ['element.click', 'onClickRoot'],
     ['surface.click', 'onClick'],
     ['ui.ok.click', 'ok'],
     ['ui.cancel.click', 'cancel'],
@@ -62,6 +60,8 @@ class Dialog {
     this.root = document.createElement('div')
     this.root.classList.add('dialog')
 
+    this.element = this.root
+
     if (this.options.class !== 'dialog') {
       this.root.classList.add(this.options.class)
     }
@@ -149,6 +149,7 @@ class Dialog {
   }
 
   onClickRoot (e) {
+    console.log('onClickRoot')
     e.stopPropagation()
     if (!this.options.modal) {
       this.destroy()

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
@@ -68,6 +56,8 @@ class List {
     }
   }
 
+  select()
+
   setText (text) {
     // console.log('setText', text)
     this.root.innerHTML = text

package/src/control/menu.js

@@ -0,0 +1,85 @@
+import EventEmitter from '../component/emitter'
+// menu related modules
+import build from '../module/build'
+import bindEvents from '../module/events'
+import display from '../module/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/snackbar.js

@@ -0,0 +1,89 @@
+// base class
+import EventEmitter from '../component/emitter'
+// related modules
+import build from '../module/build'
+import bindEvents from '../module/events'
+import display from '../module/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 () {
+    this.emit('action')
+    this.destroy()
+  }
+
+  close() {
+    // console.log('close')
+    this.destroy()
+  }
+}
+
+export default Snackbar

package/src/control/text.js

@@ -50,7 +50,11 @@ class Text {
 
     var label = this.options.label || ''
 
-    this.root.innerHTML = label + text
+    if (this.options.textFirst) {
+      this.root.innerHTML = text + label
+    } else {
+      this.root.innerHTML = label + text
+    }
 
     if (this.options.spaceAfter) {
       this.root.innerHTML = this.root.innerHTML + ' '

package/src/element.js

@@ -1,46 +1,21 @@
-
-/**
- * Class Element
- * @class
- * @since 0.0.1
- * @example
- * var div = new Element({
- *   tag: 'div',
- *   class: 'mydiv',
- * })
- */
-
 class Element {
   static isElement () {
     return true
   }
 
-  /**
-   * The init method of the Button class
-   * @param  {Object} The element attributes
-   * @private
-   * @return {DOMElement} The dom element
-   */
   constructor (options) {
     this.options = Object.assign({}, options || {})
     // console.log('element options', options)
     var element = document.createElement(this.options.tag || 'div')
+    delete this.options.tag
 
-    if (options.html) {
-      element.innerHTML = this.options.html
-    }
-
-    if (options.text) {
-      element.textContent = this.options.text
-    }
-
-    if (options.id) {
-      element.setAttribute('id', options.id)
-    }
+    if (options.html) element.innerHTML = this.options.html
+    delete this.options.html
 
-    delete this.options.tag
+    if (options.text) element.textContent = this.options.text
     delete this.options.text
-    delete this.options.html
+
+    if (options.id) element.setAttribute('id', options.id)
 
     for (var property in this.options) {
       if (this.options.hasOwnProperty(property)) {

package/src/module/build.js

@@ -0,0 +1,43 @@
+import dataset from './dataset'
+import Layout from '../layout'
+
+export default {
+  build () {
+    this.element = document.createElement(this.options.tag || 'div')
+    // for backward compatibility
+    this.root = this.element
+
+    const defaults = this.constructor.defaults || {}
+
+    this.element.classList.add(defaults.class)
+
+    if (this.options.class !== defaults.class) {
+      this.addClass(this.options.class)
+    }
+
+    if (this.options.data) {
+      dataset(this.root, this.options.data)
+    }
+
+    this.container = this.options.container
+
+    if (this.container) this.appendTo(this.container)
+
+    if (this.options.layout) {
+      this.layout = new Layout(this.options.layout, this.element)
+      this.ui = this.layout.component
+    }
+
+    if (this.options.show === true && this.show) this.show()
+  },
+
+  appendTo (container) {
+    container.appendChild(this.element)
+  },
+
+  addClass  (c) {
+    const list = c.split(' ')
+    list.forEach(item => this.element.classList.add(item))
+  }
+
+}

package/src/module/dataset.js

@@ -0,0 +1,12 @@
+
+function dataset (element, data) {
+  if (data) {
+    for (var property in data) {
+      if (data.hasOwnProperty(property)) {
+        element.dataset[property] = data[property]
+      }
+    }
+  }
+}
+
+export default dataset

package/src/module/display.js

@@ -0,0 +1,88 @@
+
+export default {
+  toggle () {
+    this.visible ? this.hide() : this.show()
+
+    this.emit?.('toggle')
+    return this
+  },
+
+  show () {
+    console.log('show', this.visible)
+
+    // if (this.options.transition) {
+    //   this.element.style.display = 'initial'
+    // }
+
+    this.element.getBoundingClientRect()
+
+    this.element.classList.add('show')
+    this.visible = true
+
+    if (this.underlay) {
+      this.underlay.classList.add('show')
+    }
+
+    this.emit?.('show')
+    return this
+  },
+
+  hide () {
+    console.log('hide')
+    // if (this.element.style.display === 'none') return
+    // clearTimeout(this.displayTimeout)
+    // this._display = getComputedStyle(this.root).display
+
+    if (!this.root) return
+
+    this.element.classList.remove('show')
+    this.visible = false
+
+    if (this.underlay) {
+      this.underlay.classList.remove('show')
+    }
+
+    // if (this.options.transition) {
+    //   this.displayTimeout = setTimeout(() => {
+    //     console.log('display: none', this._display)
+    //     this.element.style.display = 'none'
+    //   }, this.options.transition)
+    // }
+
+    this.emit?.('hide')
+    return this
+  },
+
+  destroy () {
+    // console.log('destroy', this.options.transition, this.root)
+    if (this.options.transition && this.root) {
+      this.element.classList.remove('show')
+
+      if (this.underlay) {
+        this.underlay.classList.remove('show')
+      }
+
+      setTimeout(() => {
+        this.removeChild()
+      }, this.options.transition)
+    } else {
+      this.removeChild()
+    }
+
+   this.emit?.('destroy')
+  },
+
+  removeChild () {
+    if (this.root && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.root)
+      this.root = null
+    }
+
+    if (this.underlay && this.underlay.parentNode) {
+      this.underlay.parentNode.removeChild(this.underlay)
+    }
+
+    this.emit?.('remove')
+    return this
+  }
+}

package/src/module/events.js

@@ -0,0 +1,55 @@
+import extract from './extract'
+
+export default {
+  bindEvents: function (events) {
+    console.log('bindEvents', events)
+    events = events || this.options.events
+    if (!events) return
+
+    console.log('attach', events, this)
+    var instance = this
+    events.map((def) => {
+      var e = extract.e(instance, def[0])
+      var f = extract.f(instance, def[1])
+      var option = def[2]
+
+      var keys = def[1].split('.')
+
+      keys.pop()
+      var bound = this.last(keys.join('.'))
+
+      if (f && bound && e && e.element && e.element.addEventListener) {
+        if (!f) { console.log('error') }
+
+        if (option) {
+          e.element.addEventListener(e.name, f.bind(bound), option)
+        } else {
+          e.element.addEventListener(e.name, f.bind(bound))
+        }
+      } else if (e && e.element && e.element.on && f && bound) {
+        e.element.on(e.name, f.bind(bound))
+      } else {
+        // console.log('can\'t attach', def[0])
+      }
+    })
+
+    return this
+  },
+
+  last: function (str) {
+    // console.log('_path', str)
+    if (!str) return this
+    else if (!str.match(/\./)) return this[str]
+    var last
+
+    var keys = str.split('.')
+    for (var i = 0, l = keys.length; i < l; i++) {
+      var key = keys[i]
+
+      last = last || this
+      last = last[key]
+    }
+
+    return last
+  }
+}

package/src/module/jsontohtml.js

@@ -0,0 +1,20 @@
+export default function jsonToHTML (obj) {
+  // Start an HTML string
+  let html = '<div>'
+
+  // Loop through each property of the object
+  for (const [key, value] of Object.entries(obj)) {
+    // If the value is an object, call the function recursively
+    if (typeof value === 'object' && value !== null) {
+      html += `<div class="${key}">${key}${jsonToHTML(value)}</div>`
+    } else if (Array.isArray(value)) {
+      html += `<div class="${key}">${key}<ul>${value.map(item => `<li>${item}</li>`).join('')}</ul></div>`
+    } else {
+      html += `<p>${key}: ${value || 'N/A'}</p>`
+    }
+  }
+
+  // Close the HTML string
+  html += '</div>'
+  return html
+}

package/src/skin/material/control/menu.sass

@@ -0,0 +1,29 @@
+.menu
+  //display: none
+  &.show
+    //display: block
+  .surface
+    background: rgba(0,0,0,.05)
+    .list
+      background: white
+      .item
+        color: rgba(0,0,0,.87)
+
+  &.floating
+    position: fixed
+    top: 0
+    left: 0
+    bottom: 0
+    right: 0
+    background-color: rgba(0, 0, 0, 0.5)
+    display: flex
+    align-items: center
+    justify-content: center
+    overflow: hidden
+    opacity: 0
+    transition: 0.2s
+    .surface
+      position: absolute
+      background-color: white
+
+

package/src/skin/material/control/snackbar.sass

@@ -0,0 +1,65 @@
+$width: 500px
+
+.snackbars
+  position: absolute
+  z-index: 300
+  display: flex
+  width: $width
+  flex-direction: column
+  background-color: rgba(0,0,0,.1)
+  bottom: 160px
+  width: 100%
+  .snackbar
+    overflow: hidden
+    display: flex
+    opacity: 0
+    height: 2px
+    flex-direction: row
+    padding: 0
+    margin: 2px
+    background-color: #322F35
+    border-radius: 4px
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)
+    transition: 225ms opacity cubic-bezier(.4,0,.2,1), 225ms height cubic-bezier(.4,0,.2,1), 225ms padding cubic-bezier(.4,0,.2,1)
+    &.show
+      opacity: 1
+      padding: 8px
+      height: initial
+      transition: 225ms opacity cubic-bezier(.4,0,.2,1), 225ms height cubic-bezier(.4,0,.2,1), 225ms padding cubic-bezier(.4,0,.2,1)
+    .text
+      line-height: 2em
+      padding-left: 8px
+      flex: 1
+      color: rgba(255,255,255,.87)
+    button.action
+      flex:none
+      display: none
+      color: green
+      .show
+        display: inline-block
+    .close
+      flex: none
+      display: none
+      width: 24px
+      height: 24px
+      min-width: 24px
+      background-image: url('../../theme/common/icon/dark/close.svg')
+      background-color: transparent
+      &:hover, &:active
+        background-color: transparent
+      &.show
+        display: inline-block
+
+
+@media only screen and (min-width: $desktop_switch)
+  .snackbars
+    left: 50%
+    bottom: 200px
+    margin-left: -$width / 2
+    width: $width
+    transition: 195ms bottom cubic-bezier(0.4, 0, 0.2, 1)
+    &.up
+      bottom: 500px
+      transition: 225ms bottom cubic-bezier(0.4, 0, 0.2, 1)
+
+      

package/src/view/build.js

@@ -1,5 +1,5 @@
 import scrollbar from '../module/scrollbar'
-import dataset from './dataset'
+import dataset from '../module/dataset'
 import Layout from '../layout'
 
 export default {

package/src/view/display.js

@@ -31,7 +31,7 @@ export default {
   },
 
   hide () {
-    // console.log('hide', this.root.style.display)
+    // console.log('hide')
     // if (this.root.style.display === 'none') return
     // clearTimeout(this.displayTimeout)
     // this._display = getComputedStyle(this.root).display