material 0.6.1 → 0.7.0

package/src/mixin/display.js

@@ -0,0 +1,76 @@
+import dom from '../module/dom'
+
+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.element).display
+
+    if (!this.element) 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.element)
+    if (this.options.transition && this.element) {
+      this.element.classList.remove('show')
+
+      if (this.underlay) {
+        this.underlay.classList.remove('show')
+      }
+
+      setTimeout(() => {
+        dom.destroy(this.element)
+      }, this.options.transition)
+    } else {
+      dom.destroy(this.element)
+    }
+
+
+   this.emit?.('destroy')
+  }
+}

package/src/mixin/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/{component → mixin}/events.js

@@ -6,7 +6,7 @@ export default {
    * @param {Function} fn    [description]
    */
   addEvent (event, fn) {
-    var element = this.root
+    var element = this.element
     // avoid memory overhead of new anonymous functions for every event handler that's installed
     // by using local functions
     function listenHandler (e) {
@@ -45,7 +45,7 @@ export default {
    * @return {Object}         [description]
    */
   removeEvent (event, fn) {
-    var element = this.root
+    var element = this.element
 
     if (element.removeEventListener) {
       element.removeEventListener(event, fn, false)

package/src/{component → mixin}/focus.js

@@ -8,7 +8,7 @@ export default {
   focus () {
     if (this.disabled === true) return this
 
-    css.add(this.root, 'is-focused')
+    css.add(this.element, 'is-focused')
     if (this.element.input !== document.activeElement) { this.element.input.focus() }
     return this
   },
@@ -18,8 +18,7 @@ export default {
    * @return {?} [description]
    */
   blur () {
-    css.remove(this.root, 'is-focused')
+    css.remove(this.element, 'is-focused')
     return this
   }
 }
-

package/src/{component → mixin}/insert.js

@@ -18,7 +18,7 @@ export default {
    * @return {?}           [description]
    */
   insert (container, context) {
-    var element = this.root
+    var element = this.element
 
     this.insertElement(element, container, context)
 

package/src/module/build.js

@@ -0,0 +1,44 @@
+import dataset from './dataset'
+import Layout from '../layout'
+
+export default {
+  build () {
+    this.element = document.createElement(this.options.tag || 'div')
+    // for backward compatibility
+    this.element = 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.element, 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 (clss) {
+    const c = clss.replace(/\s+/g, ' ').trim()
+    const list = c.split(' ')
+    list.forEach(item => this.element.classList.add(item))
+  }
+
+}

package/src/{component → module}/classify.js

@@ -1,18 +1,5 @@
 import css from '../module/css'
 
-/**
- * Classify component related functions
- * @module component/classify
- * @category component
- */
-
-/**
- * Init component class
- * @param  {element} element The component root element
- * @param  {object} options component class options
- * @return {Instance} The Class instance
- *
- */
 function classify (element, options) {
   css.add(element, options.prefix + '-' + options.class)
 

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

@@ -1,98 +1,42 @@
-'use strict'
+// DOM manipulation function
 
-/**
- * Element insertion related methods
- * @module module/dom
- */
-
-/**
- * Inserts content specified by the container argument at the end of HTMLElement
- *
- * @param {HTMLElement} container
- * @param {String|HTMLElement} html
- * @return {HTMLElement} inserted element
- */
 function append (container, element) {
   container.appendChild(element)
   return element
 }
 
-/**
- * Inserts content specified by the html argument at the beginning of HTMLElement
- *
- * @param {HTMLElement} container
- * @param {string|HTMLElement} html
- * @returns {HTMLElement} inserted container
- */
 function prepend (container, element) {
   return container.insertBefore(element, container.firstChild)
 }
 
-/**
- * Inserts content specified by the html argument after the HTMLElement
- *
- * @param {HTMLElement} container
- * @returns {HTMLElement} inserted container
- */
 function after (container, element) {
   return container.parentNode.insertBefore(element, container.nextSibling)
 }
 
-/**
- * Inserts content specified by the html argument before the HTMLElement
- *
- * @param {HTMLElement} container
- * @returns {HTMLElement} inserted container
- */
 function before (container, element) {
   return container.insertBefore(element, container)
 }
 
-/**
- * Replaces given html container with content specified in html parameter
- *
- * @param {HTMLElement} container
- * @param {string|HTMLElement} html
- * @returns {HTMLElement} inserted container
- */
 function replace (container, element) {
   return container.parentNode.replaceChild(element, container)
 }
 
-/**
- * Removes HTMLElement from dom tree
- *
- * @param {HTMLElement} container
- * @returns {HTMLElement} removed container
- */
 function remove (element) {
   var parent = element.parentNode
   return parent.removeChild(element)
 }
 
-/**
- * [dispose description]
- * @return {Object} The class instance
- */
 function dispose (element) {
   var el = element
   return (el.parentNode) ? el.parentNode.removeChild(el) : el
 }
 
-/**
- * empty
- * @return {void}
- */
 function empty (element) {
   while (element.firstChild) {
     element.removeChild(element.firstChild)
   }
 }
 
-/**
- * [destroy description]
- * @return {Object} this class
- */
 function destroy (element) {
   return element.parentNode.removeChild(element)
 }

package/src/module/events.js

@@ -0,0 +1,57 @@
+import extract from './extract'
+
+function last (str) {}
+
+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/{component → module}/ripple.js

@@ -6,40 +6,21 @@ const defaults = {
   opacity: ['1', '.3']
 }
 
-/**
- * init ripple
- * @param  {?} container [description]
- * @return {?}           [description]
- */
-function init (instance) {
-  instance.on('built', (container) => {
-    set(container)
-  })
-}
-
-/**
- * this function set the event listener
- * @param {HTMLElement} container [description]
- */
-function set (container) {
+function init (container) {
+  console.log('set', container)
   container.addEventListener('mousedown', (e) => {
+    console.log('mousedown')
     show(e)
   })
 }
 
-/**
- * show method
- * @param  {event} e The event related to the the touch
- * @param  {Object} coord
- * @return {void}
- */
 function show (e) {
-  // console.log('show', e);
+  console.log('show', e)
   var container = e.target
   var offs = offset(container)
 
   let ripple = document.createElement('div')
-  ripple.classList.add('material-ripple')
+  ripple.classList.add('ripple')
   let end = coordinate(offs)
   let initial = {
     left: (e.offsetX || offs.width / 2) + 'px',
@@ -67,24 +48,6 @@ function show (e) {
   }
 }
 
-/**
- * this method hides the given ripple
- * @return {Object} Size and position
- */
-function destroy (ripple) {
-  if (ripple.parentNode) { ripple.style.opacity = '0' }
-
-  document.body.onmouseup = null
-
-  setTimeout(() => {
-    if (ripple.parentNode) { ripple.parentNode.removeChild(ripple) }
-  }, 1000)
-}
-
-/**
- * Get ripple final coordinates
- * @return {Object} Size and position
- */
 function coordinate (o) {
   var size = o.height
   var top = -o.height / 2
@@ -101,4 +64,14 @@ function coordinate (o) {
   }
 }
 
+function destroy (ripple) {
+  if (ripple.parentNode) { ripple.style.opacity = '0' }
+
+  document.body.onmouseup = null
+
+  setTimeout(() => {
+    if (ripple.parentNode) { ripple.parentNode.removeChild(ripple) }
+  }, 1000)
+}
+
 export default init

package/src/progress.js

@@ -2,7 +2,7 @@
 
 // import Component from './component';
 import create from './element/create'
-import classify from './component/classify'
+import classify from './module/classify'
 import css from './module/css'
 import insert from './element/insert'
 
@@ -55,23 +55,23 @@ class Spinner {
    * @return {Object} This class instance
    */
   build (options) {
-    this.root = create(this.options.tag)
-    classify(this.root, this.options)
+    this.element = create(this.options.tag)
+    classify(this.element, this.options)
 
     if (this.options.type === 'circular') {
-      this.root.innerHTML = this.options.circular
+      this.element.innerHTML = this.options.circular
     } if (this.options.type === 'indeterminate') {
       this.bar = create('div', 'bar')
-      insert(this.bar, this.root)
+      insert(this.bar, this.element)
     } else {
       this.bar = create('div', 'bar')
-      insert(this.bar, this.root)
+      insert(this.bar, this.element)
 
       this.set(this.options.progress)
     }
 
     if (this.options.container) {
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
 
     return this

package/src/select.js

@@ -65,28 +65,28 @@ class Select {
   build () {
     // create a new div as input element
     var tag = this.options.tag || 'div'
-    this.root = document.createElement(tag)
-    this.root.classList.add(this.options.prefix + '-' + this.options.class)
+    this.element = document.createElement(tag)
+    this.element.classList.add(this.options.prefix + '-' + this.options.class)
 
     this.buildLabel()
     this.buildInput()
     this.buildUnderline()
 
     if (this.disabled) {
-      css.add(this.root, 'is-disabled')
+      css.add(this.element, 'is-disabled')
     }
 
     // insert if container this.options is given
     if (this.options.container) {
       // console.log(this.name, opts.container);
-      insert(this.root, this.options.container)
+      insert(this.element, this.options.container)
     }
   }
 
   buildLabel () {
     this.label = document.createElement('label')
     this.label.classList.add(this.options.class + '-label')
-    this.root.appendChild(this.label)
+    this.element.appendChild(this.label)
 
     if (this.options.label !== false) {
       this.setLabel()
@@ -101,14 +101,14 @@ class Select {
     this.input = document.createElement('select')
     this.input.classList.add(this.options.class + '-input')
     // this.input.setAttribute('type', 'text')
-    this.root.appendChild(this.input)
+    this.element.appendChild(this.input)
 
     if (this.options.options) {
       this.setOptions(this.options.options)
     }
 
     // if (!this.options.value) {
-    //   this.root.classList.add('is-empty')
+    //   this.element.classList.add('is-empty')
     // }
 
     if (this.readonly) {
@@ -132,7 +132,7 @@ class Select {
   buildUnderline () {
     this.underline = document.createElement('span')
     this.underline.classList.add(this.options.class + '-underline')
-    this.root.appendChild(this.underline)
+    this.element.appendChild(this.underline)
   }
 
   /**
@@ -185,7 +185,7 @@ class Select {
     this.disabled = true
 
     this.input.setAttribute('disabled', 'disabled')
-    this.root.classList.add('is-disabled')
+    this.element.classList.add('is-disabled')
     return this
   }
 
@@ -193,7 +193,7 @@ class Select {
     this.disabled = false
 
     this.element.input.removeAttribute('disabled')
-    this.root.classList.remove('is-disabled')
+    this.element.classList.remove('is-disabled')
     return this
   }
 
@@ -237,9 +237,9 @@ class Select {
     this.input.value = value
 
     if (value) {
-      this.root.classList.remove('is-empty')
+      this.element.classList.remove('is-empty')
     } else {
-      this.root.classList.add('is-empty')
+      this.element.classList.add('is-empty')
     }
 
     this.emit('change', value)
@@ -272,9 +272,9 @@ class Select {
     // console.log('_handleInputKeyPress', e);
 
     if (this.get('value') === '') {
-      this.root.classList.add('is-empty')
+      this.element.classList.add('is-empty')
     } else {
-      this.root.classList.remove('is-empty')
+      this.element.classList.remove('is-empty')
     }
 
     this.emit('change', this.getValue())
@@ -293,7 +293,7 @@ class Select {
   focus () {
     if (this.disabled === true) return this
 
-    this.root.classList.add('is-focused')
+    this.element.classList.add('is-focused')
     if (this.input !== document.activeElement) { this.input.focus() }
     return this
   }
@@ -303,7 +303,7 @@ class Select {
    * @return {?} [description]
    */
   blur () {
-    this.root.classList.remove('is-focused')
+    this.element.classList.remove('is-focused')
     return this
   }
   /**