material 0.9.11 → 0.9.13

package/src/module/freeze.js

@@ -0,0 +1,15 @@
+// Recursively freeze an object to prevent mutation
+
+const isObject = item => {
+  return item && typeof item === 'object' && !Array.isArray(item)
+}
+
+const freeze = obj => {
+  if (isObject(obj)) {
+    Object.freeze(obj)
+    Object.keys(obj).forEach(key => freeze(obj[key]))
+  }
+  return obj
+}
+
+export default freeze

package/src/module/mutation.js

@@ -0,0 +1,16 @@
+const insertion = (element, callback) => {
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node === element || node.contains(element)) {
+          callback()
+          observer.disconnect()
+        }
+      })
+    })
+  })
+
+  observer.observe(document.body, { childList: true, subtree: true })
+}
+
+export { insertion }

package/src/module/object.js

@@ -1,4 +1,3 @@
-
 const is = (object) => {
   return object &&
     typeof object === 'object' &&

package/src/skin/material/view/list.sass

@@ -34,7 +34,6 @@
     // overscroll-behavior: none
     // height: 100%
     .item
-      user-select: none
       width: 100%
       display: flex
       flex-direction: row

package/src/snackbar.js

@@ -1,17 +1,13 @@
-// base class
-import EventEmitter from './mixin/emitter'
-// related modules
-import build from './mixin/build'
-import events from './module/events'
+import Control from './class/control'
 import display from './mixin/display'
-// ui element
 import Element from './element'
 import Text from './text'
 import Button from './button'
 
-class Snackbar extends EventEmitter {
+class Snackbar extends Control {
   static defaults = {
     class: 'snackbar',
+    mixins: [display],
     transition: 225,
     duration: 4000,
     stack: false,
@@ -30,12 +26,9 @@ class Snackbar extends EventEmitter {
   }
 
   constructor (options) {
-    super()
-
+    super(options)
     this.init(options)
-    this.build(this.constructor)
     this.render()
-    events.attach(this.options.events, this)
     this.show()
 
     if (this.options.duration) {
@@ -46,19 +39,12 @@ class Snackbar extends EventEmitter {
   }
 
   init (options) {
-    this.options = Object.assign({}, Snackbar.defaults, options || {})
-    Object.assign(this, build, display)
-
     this.buildSnackbarContainer(this.options.container)
   }
 
   buildSnackbarContainer (container = document.body) {
-    // console.log('buildSnackbarContainer', container)
-
     const snackbarContainer = container.querySelector('.snackbars')
 
-    // console.log('snackbarContainer', snackbarContainer)
-
     if (!snackbarContainer) {
       this.options.container = document.createElement('div')
       this.options.container.classList.add('snackbars')
@@ -67,31 +53,46 @@ class Snackbar extends EventEmitter {
       if (this.options.stack === false) snackbarContainer.innerHTML = ''
       this.options.container = snackbarContainer
     }
+
+    this.options.container.appendChild(this.element)
   }
 
   render () {
-    this.ui.message.set(this.options.message)
+    if (!this.ui) {
+      console.error('UI elements not initialized properly.')
+      return
+    }
+
+    const { message, callback, close, action } = this.ui
+
+    if (message) {
+      message.set(this.options.message)
+    } else {
+      console.error('Message UI element not initialized.')
+    }
 
-    if (this.options.action) {
-      this.ui.callback.set(this.options.action)
-      this.ui.callback.element.classList.add('show')
-      this.ui.action.classList.add('show')
+    if (this.options.action && callback && callback.element) {
+      callback.set(this.options.action)
+      callback.element.classList.add('show')
+      if (action) {
+        action.classList.add('show')
+      }
     }
 
-    if (this.options.close) {
-      this.ui.close.element.classList.add('show')
-      this.ui.action.classList.add('show')
+    if (this.options.close && close && close.element) {
+      close.element.classList.add('show')
+      if (action) {
+        action.classList.add('show')
+      }
     }
   }
 
   action () {
-    // console.log('action')
     this.emit('action')
     this.destroy()
   }
 
   close () {
-    // console.log('close')
     this.destroy()
   }
 }

package/src/switch.js

@@ -110,7 +110,7 @@ class Switch extends EventEmitter {
         }
         break
       default:
-        this.setValue(prop, value)
+        this.setValue(prop, silent)
     }
 
     return this

package/src/tabs.js

@@ -1,99 +1,88 @@
-import create from './mixin/create'
-import insert from './mixin/insert'
-import emitter from './module/emitter'
-
+// modules
+import { insertion } from './module/mutation.js'
+import display from './mixin/display'
 import offset from './element/offset'
 
-import List from './list'
+// ui
+import Control from './class/control'
 import Button from './button'
-import Element from './element'
 
-class Tabs {
+class Tabs extends Control {
   static defaults = {
-    prefix: 'material',
     class: 'tabs',
-    tag: 'div',
+    mixins: [display],
+    show: true,
+    style: 'primary',
     indicator: {
-      prefix: 'material',
-      class: 'indicator',
-      tag: 'div'
+      size: 30
     }
   }
 
   constructor (options) {
-    this.init(options)
-    this.build()
+    super(options)
 
-    return this
+    insertion(this.element, () => this.setup())
   }
 
-  init (options) {
-    this.options = { ...Tabs.defaults, ...options }
-    Object.assign(this, insert, emitter)
-  }
+  setup () {
+    this.items = Array.from(this.element.childNodes).filter(node => node.nodeType === Node.ELEMENT_NODE)
+    this.item = {}
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.element = create(this.options)
-    this.tab = { }
-    if (this.options.list) {
-      this.list = new List({
-        tag: 'div',
-        container: this.element,
-        list: this.options.list,
-        target: '.material-button',
-        height: 600,
-        label: 'Flat',
-
-        render: (info) => {
-          let item
-          if (info.type === 'divider') {
-            item = new Element({ class: 'divider' })
-          } else {
-            item = new Button({
-              name: info.name,
-              text: info.text || info.name,
-              tooltip: info.tootip
-            })
-          }
-
-          this.tab[info.name] = item
-
-          return item
-        },
-        select: (item) => {
-          this.selected = item
-          this.click(item)
-        }
-      })
-    }
+    this.items.forEach(item => {
+      this.item[item.name] = item
+      this.addListener(item)
+    })
+
+    this.indicator = document.createElement('div')
+    this.indicator.classList.add('indicator')
+    this.element.appendChild(this.indicator)
 
-    this.indicator = create(this.options.indicator)
-    this.insertElement(this.indicator, this.element)
+    if (this.options.show) this.show()
 
-    if (this.options.container) {
-      this.insert(this.options.container)
+    if (this.options.selected && this.item[this.options.selected]) {
+      this.select(this.options.selected, true)
     }
 
-    return this
+    this.emit('ready')
   }
 
-  select (tab) {
-    // console.log('select', tab, this.tab)
-    this.selected = this.tab[tab]
-    this.click(this.selected.element, true)
+  select (name, silent = false) {
+    this.items.forEach(item => {
+      item.classList.toggle('selected', name === item.name)
+    })
+
+    this.selectedName = name
+
+    if (!silent) this.emit('select', name)
+    this.updateIndicator(name)
   }
 
-  click (item, silent) {
-    // console.log('clickitem', item, this.element);
-    const or = offset(this.element)
-    const o = offset(item)
-    this.indicator.setAttribute('style', 'width: ' + o.width + 'px; left: ' + (o.left - or.left) + 'px;')
+  updateIndicator (name) {
+    name = name ?? this.selectedName
+
+    const item = this.item[name]
+
+    if (!item) return
+
+    this.selected = item
+    const oElement = offset(this.element)
+    const oItem = offset(item)
+
+    const label = item.querySelector('label')
+    const oLabel = label ? offset(label) : null
+    const width = oLabel?.width ?? this.options.indicator.size
+
+    const style = this.options.style === 'secondary'
+      ? `width: ${oItem.width}px; left: ${oItem.left - oElement.left}px;`
+      : `width: ${width}px; left: ${oItem.left - oElement.left + (oItem.width / 2) - (width / 2)}px;`
+
+    this.indicator.setAttribute('style', style)
+  }
 
-    if (!silent) { this.emit('select', item.dataset.name) }
+  addListener (item) {
+    item.addEventListener('click', (ev) => {
+      this.select(item.name)
+    })
   }
 }