material 0.5.3 → 0.6.2

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "material",
-  "version": "0.5.3",
+  "version": "0.6.2",
   "description": "A lightweight implementation of Material Design Components - ES6",
   "main": "index.js",
   "repository": {
     "type": "git",
-    "url": "git@gitlab.com:alkaloid/material.git"
+    "url": "git+ssh://git@gitlab.com/alkaloid/material.git"
   },
   "author": "Jérôme Vial <jerome.vial@gmail.com>",
   "license": "MIT",
@@ -14,7 +14,7 @@
   },
   "homepage": "https://gitlab.com/alkaloid/material",
   "keywords": [
-    "lightweight material design component es6 es2015 vanilla javascript"
+    "lightweight material design ui component es6 vanilla javascript"
   ],
   "devDependencies": {
     "babel-core": "^6.26.0",

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/link.js

@@ -35,7 +35,7 @@ class Link {
       this.set(this.options.link)
     }
 
-    if (this.options.target) {
+    if (this.options.target !== 'blank') {
       this.root.target = this.options.target
     }
 
@@ -54,7 +54,15 @@ class Link {
     // console.log('set', text)
     if (link === undefined) return
 
-    this.root.href = link
+    if (this.options.target === 'blank') {
+      this.root.href = '#'
+      this.root.addEventListener('click', () => {
+        window.open(link)
+        return false
+      })
+    } else {
+      this.root.href = link
+    }
   }
 }
 

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/control/textfield.js

@@ -109,7 +109,7 @@ class Text {
   }
 
   onClick (ev) {
-    console.log('click')
+    // console.log('click')
     this.emit('click', ev)
   }
 

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/layout.js

@@ -1,33 +1,14 @@
-
 import { is as isObject } from './module/object'
 import css from './module/css'
 
-/**
- *
- */
 class Layout {
-  /**
-   * [constructor description]
-   * @param  {?} schema    [description]
-   * @param  {?} container [description]
-   * @return {?}           [description]
-   */
   constructor (schema, container) {
     this.components = []
     this.component = this.create(schema, container)
 
-    // console.log('this', this)
-
     return this
   }
 
-  /**
-   * [create description]
-   * @param  {?} schema    [description]
-   * @param  {?} container [description]
-   * @param  {?} structure [description]
-   * @return {?}           [description]
-   */
   create (schema, container, structure, level) {
     level = level || 0
     level++
@@ -79,6 +60,10 @@ class Layout {
             var wrapper = container.root || container
 
             wrapper.appendChild(element)
+
+            if (component.onInserted) {
+              component.onInserted(wrapper)
+            }
           }
           component._container = container
         }
@@ -94,11 +79,6 @@ class Layout {
     return structure
   }
 
-  /**
-   * [_initFlexDirection description]
-   * @param  {Element} container Init direction for the given container
-   * @param  {string} direction (horizontal,vertical)
-   */
   display (element, options) {
     var display = options.display
     var direction = options.direction || 'horizontal'
@@ -112,11 +92,6 @@ class Layout {
     }
   }
 
-  /**
-   * [style description]
-   * @param  {?} component [description]
-   * @return {?}           [description]
-   */
   style (component) {
     var options = component.options || {}
 
@@ -166,16 +141,9 @@ class Layout {
       }
     }
 
-    // console.log('--- field', field)
-
     return field
   }
 
-  /**
-   * [get description]
-   * @param  {?} name [description]
-   * @return {?}      [description]
-   */
   get (name) {
     if (name) return this.component[name]
     else return this.component

package/src/list/build.js

@@ -79,10 +79,7 @@ export default {
         // console.log('render', this.data[i])
         return this.renderItem(this.data[i])
       }
-    })
-
-    // console.log('dynamic')
-    this.virtual.on('next', (total) => {
+    }).on('next', (total) => {
       // console.log('next', total)
       if (this.stop) return
 
@@ -113,6 +110,7 @@ export default {
       // console.log('!!!!size', size)
       // this.size = size
     // })
+    //
   },
 
   onProgress (value) {

package/src/list/select.js

@@ -41,6 +41,14 @@ export default {
     this.item = null
   },
 
+  getInfoById (id) {
+    return this.dataStore[id]
+  },
+
+  getSelectedInfo () {
+    return this.dataStore[this.id]
+  },
+
   getItemById (id, silent) {
     // console.log('selectItemById', id)
     var item = this.ui.body.querySelector('[data-id="' + id + '"]')
@@ -102,6 +110,7 @@ export default {
     item.classList.add('selected')
 
     if (this.options.updatePosition === true) {
+      // console.log('selectPosition', item)
       this.selectPosition(item, direction)
     }
 
@@ -181,6 +190,15 @@ export default {
     }
   },
 
+  scrollIntoView (item) {
+    // console.log('selectPrevious', this.id)
+    item = item || this.item
+
+    if (item) {
+      item.scrollIntoView({ behavior: 'instant', block: 'end', inline: 'nearest' })
+    }
+  },
+
   highlight (item) {
     if (this.item) {
       this.item.classList.remove('selected')

package/src/list/virtual.new.js

@@ -0,0 +1,202 @@
+// based on https://sergimansilla.com/blog/virtual-scrolling/
+
+// Import necessary modules
+import passiveEvents from '../module/passive'  // Import the passiveEvents utility.
+import emitter from '../module/emitter'        // Import the emitter module.
+
+// Define the VirtualList class
+class VirtualList {
+  constructor (options) {
+    // Initialize the class with options passed to the constructor.
+    this.options = { ...(options || {}) }  // Spread operator to merge options with default values.
+    Object.assign(this, emitter)           // Assign emitter methods to the instance.
+
+    // Destructure options for easier access to properties.
+    const { itemHeight = 0, size = 0, items = [], render, container } = options
+
+    // Initialize instance variables with default or provided values.
+    this.itemHeight = itemHeight
+    this.next = false
+    this.size = size
+    this.chunkSize = size
+    this.items = items
+    this.render = render
+    this.scroller = VirtualList.createScroller()
+    this.container = container
+
+    // Get the offset height of the container.
+    this.setOffset()
+
+    // Add a window resize event listener to update the offset height.
+    window.addEventListener('resize', () => {
+      clearTimeout(this.resizeTimeout)
+
+      this.resizeTimeout = setTimeout(() => {
+        this.setOffset()
+      }, 50)
+    })
+
+    // Add 'virtual' class to the container element.
+    this.container.classList.add('virtual')
+  }
+
+  // Method to render a chunk of items within the visible range.
+  renderChunk (node, from, number) {
+    const fragment = document.createDocumentFragment()
+    fragment.appendChild(this.scroller)
+
+    let last = from + number
+    if (last > this.count) last = this.count
+
+    for (let i = from; i < last; i++) {
+      const item = this.render(i)
+
+      // Position the item absolutely based on its index and item height.
+      item.style.position = 'absolute'
+      item.style.top = i * this.itemHeight + 'px'
+      fragment.appendChild(item)
+    }
+
+    node.innerHTML = ''
+    node.appendChild(fragment)
+
+    // Emit 'next' event if applicable.
+    console.log('last', last)
+    console.log('count', this.count)
+    console.log('next', this.next)
+    console.log('size', this.size)
+
+    if (this.next && last && last > (this.count - this.size / 2)) {
+      this.emit('next', this.count)
+    }
+
+    this.next = true
+  }
+
+  // Method to set the items and render the initial chunk.
+  set (items) {
+    this.next = false
+    this.items = items
+    this.count = items.length
+
+    if (this.count < 1 || this.count === undefined) return
+
+    this.container.innerHTML = ''
+    this.container.scrollTop = 0
+
+    const height = this.itemHeight * this.count
+
+    this.scroller.style.height = height + 'px'
+
+    this.itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+
+    let size = this.itemsByScreen * 4
+    this.renderChunk(this.container, 0, size)
+
+    this.size = size
+
+    this.emit('size', size)
+
+    let lastRepaintY
+    const maxBuffer = this.itemsByScreen * this.itemHeight
+
+    // Add a scroll event listener to render items dynamically.
+    const onScroll = (e) => {
+      const scrollTop = e.target.scrollTop
+      let first = parseInt(scrollTop / this.itemHeight) - this.itemsByScreen
+
+      size = this.itemsByScreen * 4
+
+      if (!lastRepaintY || Math.abs(scrollTop - lastRepaintY) > maxBuffer) {
+        this.renderChunk(this.container, first, size)
+        lastRepaintY = scrollTop
+      }
+
+      const progress = Math.ceil((scrollTop / this.itemHeight) + this.itemsByScreen) - 1
+      this.emit('progress', progress)
+    }
+
+    if (!this.scrollEvents) {
+      // Add scroll event listener with passive option if supported.
+      this.container.addEventListener(
+        'scroll',
+        onScroll,
+        passiveEvents() ? { passive: true } : false
+      )
+      this.scrollEvents = true
+    }
+  }
+
+  // Method to update the items and re-render the visible chunk.
+  update (items) {
+    this.items = items || this.items
+
+    if (!this.items) return
+
+    this.count = this.items.length
+    const cachedItemsLen = this.itemsByScreen * 4
+    const scrollTop = this.container.scrollTop
+    const height = this.itemHeight * this.count
+
+    this.scroller.style.height = height + 'px'
+
+    let first = parseInt(scrollTop / this.itemHeight) - this.itemsByScreen
+    first = first < 0 ? 0 : first
+
+    this.renderChunk(this.container, first, cachedItemsLen)
+  }
+
+  // Method to add items and update the container height.
+  add (items) {
+    this.items = items || this.items
+
+    if (!this.items) return
+
+    this.count = this.items.length
+    const height = this.itemHeight * this.count
+
+    this.scroller.style.height = height + 'px'
+  }
+
+  // Method to reset the items and container to an initial state.
+  reset () {
+    this.items = []
+    this.count = 0
+
+    this.container.scrollTop = 0
+
+    this.scroller.style.height = '0'
+  }
+
+  // Method to set the offset height of the container.
+  setOffset (info) {
+    this.offsetHeight = this.container.offsetHeight
+    if (this.offsetHeight < 1) {
+      this.offsetHeight = window.innerHeight ||
+        document.documentElement.clientHeight ||
+        document.body.clientHeight
+    }
+
+    this.itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+
+    const itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+    const size = itemsByScreen * 4
+
+    return size
+  }
+
+  // Method to get the total count of items.
+  getCount () {
+    return this.count
+  }
+
+  // Static method to create a scroller element.
+  static createScroller () {
+    const scroller = document.createElement('div')
+    scroller.classList.add('scroller')
+    return scroller
+  }
+}
+
+// Export the VirtualList class as the default export.
+export default VirtualList

package/src/module/attach.js

@@ -41,7 +41,6 @@ export default {
       } else if (e && e.element && e.element.on && f && bound) {
         e.element.on(e.name, f.bind(bound))
       } else {
-        // console.trace('can\'t attach', def[0])
         // console.log('can\'t attach', def[0])
       }
     })

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/module/passive.js

@@ -1,17 +1,22 @@
+function passiveEvents () {
+  let supportsPassive = false
 
-function passive () {
-  var supportsPassive = false
   try {
-    var opts = Object.defineProperty({}, 'passive', {
-      get: function () {
+    const opts = Object.defineProperty({}, 'passive', {
+      get () {
         supportsPassive = true
       }
     })
+
+    // Test if the browser supports passive event listeners
     window.addEventListener('testPassive', null, opts)
     window.removeEventListener('testPassive', null, opts)
-  } catch (e) {}
+  } catch (e) {
+    // If there was an error, it's safe to assume that passive event listeners are not supported
+    supportsPassive = false
+  }
 
   return supportsPassive
 }
 
-export default passive
+export default passiveEvents

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