material 0.7.1 → 0.7.4

package/src/module/extract.js

@@ -13,14 +13,14 @@ function e (instance, ev) {
     }
   }
 
-  var iteration
-  var obj = {}
-  var element
+  let iteration
+  const obj = {}
+  let element
 
-  var keys = ev.split('.')
+  const keys = ev.split('.')
 
-  for (var i = 0, l = keys.length; i <= l; i++) {
-    var key = keys[i]
+  for (let i = 0, l = keys.length; i <= l; i++) {
+    const key = keys[i]
     iteration = iteration || instance
     iteration = iteration[key]
 
@@ -45,11 +45,11 @@ function f (instance, func) {
   if (typeof func === 'function') {
     return func
   } else if (!func.match(/\./)) return instance[func]
-  var iteration
+  let iteration
 
-  var keys = func.split('.')
-  for (var i = 0, l = keys.length; i < l; i++) {
-    var key = keys[i]
+  const keys = func.split('.')
+  for (let i = 0, l = keys.length; i < l; i++) {
+    const key = keys[i]
 
     iteration = iteration || instance
     iteration = iteration[key]

package/src/module/last.js

@@ -0,0 +1,18 @@
+export default {
+  (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/mediator.js

@@ -1,10 +1,4 @@
 const mediator = ((() => {
-  /**
-   * @description Subscribe to an event, supply a callback to be executed when that event is broadcast
-   * @param store {string}
-   * @param fn {function}
-   * @returns {subscribe} {object}
-   */
   const subscribe = function (store, fn) {
     if (!mediator.stores[store]) {
       mediator.stores[store] = []
@@ -18,19 +12,13 @@ const mediator = ((() => {
     return this
   }
 
-  /**
-   * @description Publish/broadcast an event to the rest of the application
-   * @param store {string}
-   * @param args {object}
-   * @returns {*||boolean}
-   */
   const publish = function (store, ...args) {
     // console.log('publish', store, args)
     if (!mediator.stores[store]) {
       return false
     }
 
-    for (let value of mediator.stores[store]) {
+    for (const value of mediator.stores[store]) {
       const subscription = value
       subscription.callback.apply(subscription.context, args)
     }

package/src/module/object.js

@@ -7,10 +7,10 @@ function is (object) {
 
 function byString (o, s) {
   s = s.replace(/\[(\w+)\]/g, '.$1') // convert indexes to properties
-  s = s.replace(/^\./, '')           // strip a leading dot
-  var a = s.split('.')
-  for (var i = 0, n = a.length; i < n; ++i) {
-    var k = a[i]
+  s = s.replace(/^\./, '') // strip a leading dot
+  const a = s.split('.')
+  for (let i = 0, n = a.length; i < n; ++i) {
+    const k = a[i]
     if (k in o) {
       o = o[k]
     } else {

package/src/module/observer.js

@@ -1,23 +1,50 @@
+const observer = (() => {
+  const watch = function (event, fn, context = this) {
+    if (typeof event !== 'string' || typeof fn !== 'function') {
+      throw new Error('Invalid arguments. Event must be a string and callback must be a function.')
+    }
 
-const observer = {
-  insert: (element, cb) => {
-    var observer = new MutationObserver((mutations) => {
-      if (document.contains(element)) {
-        if (typeof cb === 'function' && !element.classList.contains('inserted')) {
-          cb()
-        }
+    if (!observer.events[event]) {
+      observer.events[event] = []
+    }
 
-        observer.disconnect()
-      }
+    observer.events[event].push({
+      context,
+      callback: fn
     })
 
-    observer.observe(document, {
-      attributes: false,
-      childList: true,
-      characterData: false,
-      subtree: true
-    })
+    return this
+  }
+
+  const unwatch = function (event, fn) {
+    if (!observer.events[event]) return this
+
+    observer.events[event] = observer.events[event].filter(subscriber => subscriber.callback !== fn)
+
+    return this
+  }
+
+  const notify = function (event, ...args) {
+    if (!observer.events[event]) return this
+
+    for (const { context, callback } of observer.events[event]) {
+      callback.apply(context, args)
+    }
+
+    return this
+  }
+
+  return {
+    events: {},
+    watch,
+    unwatch,
+    notify,
+    init: function (obj) {
+      obj.watch = watch
+      obj.unwatch = unwatch
+      obj.notify = notify
+    }
   }
-}
+})()
 
 export default observer

package/src/module/remove.js

@@ -19,16 +19,16 @@ export default {
     if (!events) return
 
     // console.log('attach', events, this)
-    var instance = this
+    const instance = this
     events.map((def) => {
-      var e = extract.e(instance, def[0])
-      var f = extract.f(instance, def[1])
-      var option = def[2]
+      const e = extract.e(instance, def[0])
+      const f = extract.f(instance, def[1])
+      const option = def[2]
 
-      var keys = def[1].split('.')
+      const keys = def[1].split('.')
 
       keys.pop()
-      var bound = this.last(keys.join('.'))
+      const bound = this.last(keys.join('.'))
 
       if (f && bound && e && e.element && e.element.addEventListener) {
         if (!f) { console.log('error') }
@@ -59,11 +59,11 @@ export default {
     // console.log('_path', str)
     if (!str) return this
     else if (!str.match(/\./)) return this[str]
-    var last
+    let last
 
-    var keys = str.split('.')
-    for (var i = 0, l = keys.length; i < l; i++) {
-      var key = keys[i]
+    const keys = str.split('.')
+    for (let i = 0, l = keys.length; i < l; i++) {
+      const key = keys[i]
 
       last = last || this
       last = last[key]

package/src/module/request.js

@@ -0,0 +1,33 @@
+// request.js
+const request = async (url, method = 'GET', body = null, headers = {}, signal = null) => {
+  const defaultHeaders = {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+
+  const options = {
+    method,
+    headers: { ...defaultHeaders, ...headers },
+    signal
+  }
+
+  if (body) {
+    options.body = JSON.stringify(body)
+  }
+
+  try {
+    const response = await fetch(url, options)
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    const data = await response.json()
+
+    return data
+  } catch (error) {
+    // Handle fetch or data processing errors
+    // console.log('error', error)
+    return { error }
+  }
+}
+
+export default request

package/src/module/ripple.js

@@ -6,41 +6,36 @@ const defaults = {
   opacity: ['1', '.3']
 }
 
-function init (container) {
-  console.log('set', container)
+const init = (container) => {
   container.addEventListener('mousedown', (e) => {
-    console.log('mousedown')
     show(e)
   })
 }
 
-function show (e) {
-  console.log('show', e)
-  var container = e.target
-  var offs = offset(container)
+const show = (e) => {
+  const container = e.target
+  const offs = offset(container)
 
-  let ripple = document.createElement('div')
+  const ripple = document.createElement('div')
   ripple.classList.add('ripple')
-  let end = coordinate(offs)
-  let initial = {
-    left: (e.offsetX || offs.width / 2) + 'px',
-    top: (e.offsetY || offs.height / 2) + 'px'
+
+  const end = coordinate(offs)
+  const initial = {
+    left: `${e.offsetX || offs.width / 2}px`,
+    top: `${e.offsetY || offs.height / 2}px`
   }
 
   ripple.style.left = initial.left
   ripple.style.top = initial.top
-  // ripple.style.opacity = defaults.opacity[1]
   ripple.style.transition = defaults.transition
 
   insert(ripple, container, 'top')
 
   setTimeout(() => {
-    // console.log('style coord', end);
     ripple.style.left = end.left
     ripple.style.top = end.top
     ripple.style.width = end.size
     ripple.style.height = end.size
-    // ripple.style.opacity = defaults.opacity[1]
   }, 1)
 
   document.body.onmouseup = () => {
@@ -48,9 +43,9 @@ function show (e) {
   }
 }
 
-function coordinate (o) {
-  var size = o.height
-  var top = -o.height / 2
+const coordinate = (o) => {
+  let size = o.height
+  let top = -o.height / 2
 
   if (o.width > o.height) {
     top = -(o.width - o.height / 2)
@@ -58,19 +53,19 @@ function coordinate (o) {
   }
 
   return {
-    size: (size * 2) + 'px',
-    top: top + 'px',
-    left: (size / -2) + 'px'
+    size: `${size * 2}px`,
+    top: `${top}px`,
+    left: `${size / -2}px`
   }
 }
 
-function destroy (ripple) {
-  if (ripple.parentNode) { ripple.style.opacity = '0' }
+const destroy = (ripple) => {
+  if (ripple.parentNode) ripple.style.opacity = '0'
 
   document.body.onmouseup = null
 
   setTimeout(() => {
-    if (ripple.parentNode) { ripple.parentNode.removeChild(ripple) }
+    if (ripple.parentNode) ripple.parentNode.removeChild(ripple)
   }, 1000)
 }
 

package/src/module/scrollbar.js

@@ -1,42 +1,38 @@
-
 window._scrollbar = {}
 
-function scrollbar () {
+const scrollbar = () => {
   // if (window._scrollbar.checked) return
 
-  var list = document.createElement('div')
+  const list = document.createElement('div')
   list.classList.add('list')
-  list.style['z-index'] = '1000'
+  list.style.zIndex = '1000'
   list.style.display = 'block'
   list.style.width = '300px'
-  list.style['minWidth'] = '300px'
+  list.style.minWidth = '300px'
   list.style.height = '20px'
   list.style.position = 'absolute'
   list.style.top = '-200px'
   list.style.right = 'initial'
   list.style.bottom = 'initial'
   list.style.left = '200px'
-  list.style['overflowY'] = 'hidden'
+  list.style.overflowY = 'hidden'
   document.body.appendChild(list)
 
-  var body = document.createElement('div')
+  const body = document.createElement('div')
   body.classList.add('body')
-  body.style['overflowY'] = 'scroll'
+  body.style.overflowY = 'scroll'
   list.appendChild(body)
 
-  var item = document.createElement('div')
+  const item = document.createElement('div')
   item.classList.add('item')
   item.style.height = '40px'
   item.style.margin = '0'
   item.style.padding = '0'
   item.style.border = '0'
-  item.style['backgroundColor'] = 'green'
+  item.style.backgroundColor = 'green'
   body.appendChild(item)
 
-  var info = item.getBoundingClientRect()
-  // console.log('width', 300 - info.width)
-
-  // console.log('list', list)
+  const info = item.getBoundingClientRect()
 
   document.body.removeChild(list)
 

package/src/module/smoothscroll.js

@@ -1,19 +1,15 @@
-function smoothscroll (e, top, time) {
-  // console.log('smoothscroll', top, e.scrollTop)
+const smoothscroll = (e, top, time = 275) => {
+  const start = top - e.scrollTop
+  const step = start / 100
+  let current = 0
 
-  var start = top - e.scrollTop
-
-  time = time || 275
-  var step = start / 100
-  var current = 0
   while (current <= time) {
     window.setTimeout(scrolling, current, e, step)
     current += time / 100
   }
 }
 
-function scrolling (e, step) {
-  // console.log('scrolling', step, e.scrollTop)
+const scrolling = (e, step) => {
   e.scrollBy(0, step)
 }
 

package/src/module/utils.js

@@ -1,5 +1,3 @@
-'use strict'
-
 /**
  * Utility functions
  * @module module/utils
@@ -9,19 +7,17 @@
  * Checks if given value is an array
  * @param {*} object
  * @returns {boolean}
- * @private
  */
-function _isArray (object) {
+const isArray = (object) => {
   return Object.prototype.toString.call(object) === '[object Array]'
 }
 
 /**
- * Checks if javascript object is plain object
+ * Checks if JavaScript object is a plain object
  * @param {Object} object
  * @returns {*|boolean}
- * @private
  */
-function _isLiteralObject (object) {
+const isLiteralObject = (object) => {
   return object && typeof object === 'object' && Object.getPrototypeOf(object) === Object.getPrototypeOf({})
 }
 
@@ -29,34 +25,30 @@ function _isLiteralObject (object) {
  * Checks if object is iterable
  * @param {Object} object
  * @returns {boolean}
- * @private
  */
-function _isIterable (object) {
-  var r = _isLiteralObject(object) ||
-    _isArray(object) ||
+const isIterable = (object) => {
+  return isLiteralObject(object) ||
+    isArray(object) ||
     (typeof object === 'object' &&
       object !== null &&
       object.length !== undefined)
-
-  return r
 }
 
 /**
  *
  * @param {Object} object
  * @param {Function} callback
- * @private
  */
-function _each (object, callback) {
-  if (_isArray(object) || (typeof object === 'object' && object.length !== undefined)) {
-    for (var i = 0, l = object.length; i < l; i++) {
+const each = (object, callback) => {
+  if (isArray(object) || (typeof object === 'object' && object.length !== undefined)) {
+    for (let i = 0, l = object.length; i < l; i++) {
       callback.apply(object[i], [object[i], i])
     }
     return
   }
 
-  if (_isLiteralObject(object)) {
-    for (var key in object) {
+  if (isLiteralObject(object)) {
+    for (const key in object) {
       callback.apply(object[key], [object[key], key])
     }
   }
@@ -67,13 +59,12 @@ function _each (object, callback) {
  * @param {Array} array
  * @param {*} obj
  * @returns {number}
- * @private
  */
-function _indexOf (array, obj) {
+const indexOf = (array, obj) => {
   if (Array.prototype.indexOf) {
     return Array.prototype.indexOf.call(array, obj)
   }
-  for (var i = 0, j = array.length; i < j; i++) {
+  for (let i = 0, j = array.length; i < j; i++) {
     if (array[i] === obj) {
       return i
     }
@@ -81,4 +72,4 @@ function _indexOf (array, obj) {
   return -1
 }
 
-export { _isArray, _isIterable, _isLiteralObject, _each, _indexOf }
+export { isArray, isIterable, isLiteralObject, each, indexOf }

package/src/module/viewport.js

@@ -2,12 +2,12 @@
 function viewport (el) {
   if (!el) return
 
-  var rect = el.getBoundingClientRect()
+  const rect = el.getBoundingClientRect()
 
-  var top = rect.top
-  var left = rect.left
-  var width = rect.width
-  var height = rect.height
+  const top = rect.top
+  const left = rect.left
+  const width = rect.width
+  const height = rect.height
 
   return (
     top >= window.pageYOffset &&

package/src/navigation.js

@@ -1,3 +1,4 @@
+import * as css from './module/css'
 import build from './module/build'
 
 class Navigation {
@@ -8,12 +9,17 @@ class Navigation {
   constructor (options) {
     this.init(options)
     this.build()
+    this.setup()
   }
 
   init (options) {
-    this.options = Object.assign({}, Navigation.defaults, options || {})
+    this.options = { ...Navigation.defaults, ...options }
     Object.assign(this, build)
   }
+
+  setup() {
+    if (this.options.type) css.add(this.element, 'type-', this.options.type)
+  }
 }
 
 export default Navigation

package/src/progress.js

@@ -1,10 +1,9 @@
 // import Component from './component';
 import create from './element/create'
 import classify from './module/classify'
-import css from './module/css'
 import insert from './element/insert'
 
-var defaults = {
+const defaults = {
   prefix: 'material',
   class: 'progress',
   tag: 'div',
@@ -14,13 +13,6 @@ var defaults = {
     </svg>`
 }
 
-/**
- * The class represents an item ie for list
- *
- * @class
- * @return {Object} The class instance
- * @example new Item(object);
- */
 class Spinner {
   /**
    * init

package/src/search.js

@@ -1,20 +1,24 @@
 import EventEmitter from './mixin/emitter'
 
 import build from './module/build'
+import display from './mixin/display'
 import bindEvents from './module/events'
 
+import Element from './element'
 import Button from './button'
-import cancel from './skin/material/icon/cancel.svg'
 
 class Search extends EventEmitter {
   static defaults = {
     class: 'search-input',
     minChar: 4,
-    iconCancel: cancel,
     timeout: 200,
+    layout: [
+      [Element, 'input', { tag: 'input', class: 'input'} ],
+      [Button, 'clear', { class: 'clear'} ]
+    ],
     events: [
-      ['input.input', 'onInput'],
-      ['input.cancel', 'onCancel']
+      ['ui.input.input', 'onInput'],
+      ['ui.clear.click', 'onClear']
     ]
   }
 
@@ -23,47 +27,38 @@ class Search extends EventEmitter {
 
     this.init(options)
     this.build()
-    this.buildSearch()
     this.bindEvents()
-  }
 
-  init(options) {
-    this.options = Object.assign({}, Search.defaults, options || {})
-    Object.assign(this, build, bindEvents)
+    this.input = this.ui.input
   }
 
-  buildSearch () {
-    if (this.options.icon) {
-      this.icon = document.createElement('i')
-      this.icon.classList.add('icon')
-      this.icon.innerHTML = this.options.icon
-      this.element.appendChild(this.icon)
-    }
+  init (options) {
+    this.options = { ...Search.defaults, ...options }
+    Object.assign(this, build, display, bindEvents)
+  }
 
-    this.input = document.createElement('input')
-    this.input.classList.add('input')
-    this.element.appendChild(this.input)
+  set (value) {
+    if (value) this.input.value = value
+    else this.input.value = ''
+  }
 
-    this.cancel = new Button({
-      container: this.element,
-      class: 'clear',
-      icon: this.options.iconCancel
-    })
+  focus () {
+    this.ui.input.focus()
   }
 
   onInput () {
-    if (this.input.value.length < this.options.minChar) return
+    if (this.ui.input.value.length < this.options.minChar) return
 
     clearTimeout(this.timeout)
 
     this.timeout = setTimeout(() => {
-      this.emit('change', this.input.value)
+      this.emit('change', this.ui.input.value)
     }, this.options.timeout)
   }
 
-  onCancel () {
-    this.input.value = ''
-    this.input.focus()
+  onClear () {
+    this.set(null)
+    this.focus()
     this.emit('cancel')
   }
 }