material 0.7.0 → 0.7.2

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

@@ -0,0 +1,19 @@
+import build from './module/build'
+
+class Navigation {
+  static defaults = {
+    class: 'navigation'
+  }
+
+  constructor (options) {
+    this.init(options)
+    this.build()
+  }
+
+  init (options) {
+    this.options = Object.assign({}, Navigation.defaults, options || {})
+    Object.assign(this, build)
+  }
+}
+
+export default Navigation

package/src/progress.js

@@ -1,12 +1,9 @@
-'use strict'
-
 // 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',
@@ -16,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

@@ -0,0 +1,66 @@
+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'
+
+class Search extends EventEmitter {
+  static defaults = {
+    class: 'search-input',
+    minChar: 4,
+    timeout: 200,
+    layout: [
+      [Element, 'input', { tag: 'input', class: 'input'} ],
+      [Button, 'clear', { class: 'clear'} ]
+    ],
+    events: [
+      ['ui.input.input', 'onInput'],
+      ['ui.clear.click', 'onClear']
+    ]
+  }
+
+  constructor (options) {
+    super()
+
+    this.init(options)
+    this.build()
+    this.bindEvents()
+
+    this.input = this.ui.input
+  }
+
+  init (options) {
+    this.options = { ...Search.defaults, ...options }
+    Object.assign(this, build, display, bindEvents)
+  }
+
+  set (value) {
+    if (value) this.input.value = value
+    else this.input.value = ''
+  }
+
+  focus () {
+    this.ui.input.focus()
+  }
+
+  onInput () {
+    if (this.ui.input.value.length < this.options.minChar) return
+
+    clearTimeout(this.timeout)
+
+    this.timeout = setTimeout(() => {
+      this.emit('change', this.ui.input.value)
+    }, this.options.timeout)
+  }
+
+  onClear () {
+    this.set(null)
+    this.focus()
+    this.emit('cancel')
+  }
+}
+
+export default Search