material 0.7.1 → 0.7.4

package/src/element/create.js

@@ -1,11 +1,8 @@
-import css from '../module/css'
+import * as css from '../module/css'
 
-function create (tag, className) {
-  tag = tag || 'div'
-
-  var element = document.createElement(tag)
+const create = (tag = 'div', className) => {
+  const element = document.createElement(tag)
   css.add(element, className)
-
   return element
 }
 

package/src/element/event.js

@@ -12,7 +12,7 @@ export default {
     // avoid memory overhead of new anonymous functions for every event handler that's installed
     // by using local functions
     function listenHandler (e) {
-      var ret = fn.apply(this, arguments)
+      const ret = fn.apply(this, arguments)
       if (ret === false) {
         e.stopPropagation()
         e.preventDefault()
@@ -23,7 +23,7 @@ export default {
     function attachHandler () {
       // set the this pointer same as addEventListener when fn is called
       // and make sure the event is passed to the fn also so that works the same too
-      var ret = fn.call(element, window.event)
+      const ret = fn.call(element, window.event)
       if (ret === false) {
         window.event.returnValue = false
         window.event.cancelBubble = true

package/src/element/insert.js

@@ -1,33 +1,22 @@
-'use strict'
-
 import dom from '../module/dom'
 
-/**
- * insert element into dom
- * @param  {HTMLElement} element   [description]
- * @param  {HTMLElement} container [description]
- * @param  {string} context   [description]
- * @return {?}           [description]
- */
-function insert (element, container, context) {
-  if (!element || !container) return
-
-  element = element.root || element
-  container = container.root || container
+const insert = (component, container, context = 'bottom') => {
+  if (!component || !container) return
 
-  context = context || 'bottom'
+  element = component.element || component
+  container = container.element || container
 
-  var contexts = ['top', 'bottom', 'after', 'before']
-  var methods = ['prepend', 'append', 'after', 'before']
+  const contexts = ['top', 'bottom', 'after', 'before']
+  const methods = ['prepend', 'append', 'after', 'before']
 
-  var index = contexts.indexOf(context)
+  const index = contexts.indexOf(context)
   if (index === -1) {
     return
   }
 
-  var method = methods[index]
+  const method = methods[index]
 
-  // insert component element to the dom tree using dom
+  // Insert component element to the DOM tree using dom
   dom[method](container, element)
 
   return element

package/src/element/observer.js

@@ -0,0 +1,22 @@
+const observer = {
+  insert: (element, cb) => {
+    var observer = new MutationObserver((mutations) => {
+      if (document.contains(element)) {
+        if (typeof cb === 'function' && !element.classList.contains('inserted')) {
+          cb()
+        }
+
+        observer.disconnect()
+      }
+    })
+
+    observer.observe(document, {
+      attributes: false,
+      childList: true,
+      characterData: false,
+      subtree: true
+    })
+  }
+}
+
+export default observer

package/src/element/offset.js

@@ -7,9 +7,9 @@
 import style from './style'
 
 function offset (element, prop) {
-  var rect = element.getBoundingClientRect()
+  const rect = element.getBoundingClientRect()
 
-  var offset = {
+  const offset = {
     top: Math.round(rect.top),
     right: Math.round(rect.right),
     bottom: Math.round(rect.bottom),

package/src/element/style.js

@@ -3,10 +3,10 @@
  * @module component/style
  */
 import {
-  _isIterable,
-  _isLiteralObject,
-  _isArray,
-  _each
+  isIterable,
+  isLiteralObject,
+  isArray,
+  each
 } from '../module/utils'
 
 /**
@@ -18,14 +18,14 @@ import {
 function get (element, style) {
   // console.log('get', element, style);
   // get array of elements
-  if (_isArray(style)) {
-    var css = {}
-    for (var i in list) {
+  if (isArray(style)) {
+    const css = {}
+    for (const i in list) {
       css[list[i]] = this.get(element, list[i])
     }
     return css
   } else {
-    var computedStyle
+    let computedStyle
 
     if (typeof window.getComputedStyle === 'function') { // normal browsers
       computedStyle = window.getComputedStyle(element)
@@ -49,16 +49,16 @@ function get (element, style) {
  * @param {?} style   [description]
  */
 function set (element, style) {
-  if (_isIterable(element) && _isLiteralObject(style)) {
-    _each(element, function (e) {
+  if (isIterable(element) && _isLiteralObject(style)) {
+    each(element, function (e) {
       set(e, style)
     })
     return element
   }
 
-  if (_isLiteralObject(style)) {
+  if (isLiteralObject(style)) {
     // console.log('style', element, style);
-    for (var i in style) {
+    for (const i in style) {
       element.style[i] = style[i]
     }
     return style

package/src/element.js

@@ -6,7 +6,7 @@ class Element {
   constructor (options) {
     this.options = Object.assign({}, options || {})
     // console.log('element options', options)
-    var element = document.createElement(this.options.tag || 'div')
+    const element = document.createElement(this.options.tag || 'div')
     delete this.options.tag
 
     if (options.html) element.innerHTML = this.options.html
@@ -17,7 +17,7 @@ class Element {
 
     if (options.id) element.setAttribute('id', options.id)
 
-    for (var property in this.options) {
+    for (const property in this.options) {
       if (this.options.hasOwnProperty(property)) {
         element.setAttribute(property, this.options[property])
       }

package/src/file.js

@@ -11,7 +11,7 @@ class File {
   }
 
   constructor (options) {
-    this.init(options)   
+    this.init(options)
     this.build()
     this.buildLabel()
     this.buildInput()

package/src/form/build.js

@@ -71,11 +71,11 @@ export default {
   extractFile (object) {
     this.file = {}
 
-    for (var property in object) {
+    for (const property in object) {
       if (object.hasOwnProperty(property)) {
-        var files = property.split(/\./)
+        const files = property.split(/\./)
         if (files[0] === 'file' && files[1] !== undefined) {
-          var name = property.substr(5, property.length)
+          const name = property.substr(5, property.length)
 
           this.file[name] = object[property]
         }
@@ -89,12 +89,12 @@ export default {
     this.field = {}
     this.fields = []
 
-    for (var property in object) {
+    for (const property in object) {
       if (object.hasOwnProperty(property)) {
-        var infos = property.split(/\./)
+        const infos = property.split(/\./)
 
         if (infos[0] === 'info' && infos[1] !== undefined) {
-          var name = property.substr(5, property.length)
+          const name = property.substr(5, property.length)
           // console.log('field', name, property)
           this.fields.push(name)
           this.field[name] = object[property]
@@ -105,7 +105,7 @@ export default {
 
   clean () {
     // console.log('clean', this.info)
-    for (var member in this.info) {
+    for (const member in this.info) {
       delete this.info[member]
     }
 

package/src/form/controller.js

@@ -6,13 +6,13 @@ export default {
 
     this.disableControls()
 
-    for (var field in this.field) {
+    for (const field in this.field) {
       if (this.field.hasOwnProperty(field)) {
         this.bindControl(this.field[field])
       }
     }
 
-    for (var file in this.file) {
+    for (const file in this.file) {
       if (this.file.hasOwnProperty(file)) {
         this.bindControl(this.file[file])
       }
@@ -29,9 +29,9 @@ export default {
   },
 
   updateClassMode (mode) {
-    var modes = ['read', 'create', 'update']
+    const modes = ['read', 'create', 'update']
 
-    for (var i = 0; i < modes.length; i++) {
+    for (let i = 0; i < modes.length; i++) {
       this.form.classList.remove(modes[i] + '-mode')
     }
 
@@ -64,11 +64,11 @@ export default {
 
   enableControls () {
     // console.log('enableControls')
-    var controls = this.options.controls || ['submit', 'cancel']
+    const controls = this.options.controls || ['submit', 'cancel']
 
     if (controls === null) return
 
-    for (var i = 0; i < controls.length; i++) {
+    for (let i = 0; i < controls.length; i++) {
       if (this.ui[controls[i]] && this.ui[controls[i]].enable) {
         this.ui[controls[i]].enable()
       }
@@ -77,11 +77,11 @@ export default {
 
   disableControls () {
     // console.log('disableControls')
-    var controls = this.options.controls || ['submit', 'cancel']
+    const controls = this.options.controls || ['submit', 'cancel']
 
     if (controls === null) return
 
-    for (var i = 0; i < controls.length; i++) {
+    for (let i = 0; i < controls.length; i++) {
       if (this.ui[controls[i]] && this.ui[controls[i]].disable) {
         this.ui[controls[i]].disable()
       }

package/src/form/create.js

@@ -6,7 +6,7 @@ export default {
 
     this.clean()
 
-    var info = this.options.create.info || { name: 'New Item' }
+    const info = this.options.create.info || { name: 'New Item' }
 
     console.log('info', info)
 

package/src/form/data.js

@@ -5,7 +5,7 @@ export default {
   initData () {
     // console.log('submit', this.mode)
 
-    var data = new FormData()
+    const data = new FormData()
 
     if (this.mode !== 'create') {
       this.appendSysinfo(data)
@@ -18,10 +18,10 @@ export default {
   },
 
   appendSysinfo (data) {
-    var sys = this.options.sysinfo
-    for (var i = 0; i < sys.length; i++) {
+    const sys = this.options.sysinfo
+    for (let i = 0; i < sys.length; i++) {
       // console.log('sys', sys[i], this.info[sys[i]])
-      var name = sys[i]
+      let name = sys[i]
       if (sys[i] === '_id') name = 'id'
 
       data.append(name, this.info[sys[i]])
@@ -31,14 +31,14 @@ export default {
   },
 
   appendFields (data) {
-    for (var field in this.field) {
+    for (const field in this.field) {
       // console.log('field', field)
       if (this.field.hasOwnProperty(field)) {
         // console.log('check field', field)
-        var value = this.field[field].get()
+        const value = this.field[field].get()
         if (value !== null) {
           if (this.mode === 'update' && this.options.update && this.options.update.modifiedOnly) {
-            var modified = this.isModified(field, value)
+            const modified = this.isModified(field, value)
             if (modified) {
               data.append(field, value)
             }
@@ -54,7 +54,7 @@ export default {
 
   appendFiles (data) {
     // console.log('appendFiles', this.file)
-    for (var file in this.file) {
+    for (const file in this.file) {
       // console.log('this file', this.file, this.file[file].input)
       // console.log('file', file, this.file[file])
       if (this.file.hasOwnProperty(file) && this.file[file].input && this.file[file].input.value) {
@@ -66,7 +66,7 @@ export default {
   },
 
   isModified (field, value) {
-    var initial = byString(this.info, field)
+    const initial = byString(this.info, field)
 
     if (typeof initial === 'number') {
       value = Number(value)

package/src/form/delete.js

@@ -20,7 +20,7 @@ export default {
     this.setMode('delete')
     fetch(this.options.action, {
       headers: {
-        'Accept': 'application/json',
+        Accept: 'application/json',
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({

package/src/form/render.js

@@ -4,9 +4,9 @@ export default {
   render (object, option) {
     // console.log('render', object)
 
-    var info = dot(object)
+    const info = dot(object)
 
-    for (var file in this.file) {
+    for (const file in this.file) {
       if (this.file.hasOwnProperty(file)) {
         this.file[file].reset()
       }
@@ -16,12 +16,12 @@ export default {
 
     if (!info) return
 
-    for (var field in this.field) {
+    for (const field in this.field) {
       if (this.field.hasOwnProperty(field)) {
         // console.log('field type', field, this.field[field])
         if (this.field[field] &&
             this.field[field].set) {
-          var value = this.objectValueByDotKey(object, field)
+          const value = this.objectValueByDotKey(object, field)
           // console.log('value', value)
           this.field[field].set(value, true)
         }
@@ -31,18 +31,18 @@ export default {
     this.emit('rendered')
 
     // won't stay here
-    if (option === 'create' && this.field['name']) {
-      this.focusNameOnRender(this.field['name'])
+    if (option === 'create' && this.field.name) {
+      this.focusNameOnRender(this.field.name)
     }
   },
 
   objectValueByDotKey (object, dotkey) {
     // console.log('objectValueByDotKey', object, dotkey)
-    var keys = dotkey.split(/\./)
+    const keys = dotkey.split(/\./)
 
-    var value = Object.assign({}, object)
+    let value = Object.assign({}, object)
 
-    for (var i = 0; i < keys.length; i++) {
+    for (let i = 0; i < keys.length; i++) {
       if (value !== undefined) {
         value = value[keys[i]]
       }

package/src/form/set.js

@@ -13,7 +13,7 @@ export default {
     // this.render(info)
     fetch(this.options.action + id, {
       headers: {
-        'Accept': 'application/json'
+        Accept: 'application/json'
       },
       method: 'GET'
     }).then((resp) => {

package/src/form/submit.js

@@ -4,7 +4,7 @@ export default {
     ev.preventDefault()
     // console.log('submit', this.mode)
 
-    var data = this.initData()
+    const data = this.initData()
 
     // console.log('data', data)
 
@@ -18,7 +18,7 @@ export default {
   },
 
   setMethod (formData) {
-    var method = 'PUT'
+    let method = 'PUT'
     if (this.mode === 'create') {
       method = 'POST'
     }
@@ -26,15 +26,15 @@ export default {
     if (this.fetch) {
       // console.log('formData', formData.keys())
       this.fetch({
-        method: method,
-        formData: formData
+        method,
+        formData
       })
     }
 
     if (this.action) {
       this.action({
-        method: method,
-        formData: formData
+        method,
+        formData
       })
     }
   }

package/src/form/update.js

@@ -5,11 +5,11 @@ export default {
     options = options || {}
 
     // console.log('mode', this.mode)
-    var method = options.method ||
+    const method = options.method ||
         this.options[this.mode].method ||
         'put'
 
-    var action = options.action ||
+    const action = options.action ||
         this.options[this.mode].action ||
         this.options.action
 
@@ -18,7 +18,7 @@ export default {
     }
 
     fetch(action, {
-      method: method,
+      method,
       body: data
     }).then((resp) => {
       // console.log('resp', resp)

package/src/form/verify.js

@@ -1,11 +1,11 @@
 export default {
   verify () {
-    var list = this.options.require
+    const list = this.options.require
 
-    var ok = true
+    let ok = true
 
-    for (var i = 0; i < list.length; i++) {
-      var field = this.ui['info.' + list[i]]
+    for (let i = 0; i < list.length; i++) {
+      const field = this.ui['info.' + list[i]]
 
       if (!this.layout.get(list[i]).get()) {
         field.element.classList.add('textfield-error')

package/src/form.js

@@ -1,5 +1,5 @@
 import insert from './element/insert'
-import css from './module/css'
+import * as css from './module/css'
 import emitter from './module/emitter'
 import attach from './module/attach'
 import controller from './mixin/controller'
@@ -68,7 +68,7 @@ class Form {
    * @return {Object} This class instance
    */
   build () {
-    var tag = this.options.tag || 'div'
+    const tag = this.options.tag || 'div'
 
     this.element = document.createElement(tag)
     css.add(this.element, this.options.prefix + '-' + this.options.class)
@@ -99,8 +99,8 @@ class Form {
 
     this.key = this.key || {}
 
-    for (var i = 0; i < controls.length; i++) {
-      var control = controls[i]
+    for (let i = 0; i < controls.length; i++) {
+      const control = controls[i]
       // control.setAttribute('data-key', control.name);
 
       this.key[control.name] = control
@@ -126,9 +126,9 @@ class Form {
    * @return {?}         [description]
    */
   initControl (key, section) {
-    var name = key.name || 'undefined'
+    const name = key.name || 'undefined'
 
-    var control = this.render(key)
+    const control = this.render(key)
 
     if (control) {
       this.key[name] = control
@@ -179,15 +179,15 @@ class Form {
    */
   parseInfo (obj, name, i) {
     // console.log('parseInfo', obj, name, 'level ' + i);
-    var level = i || 0
+    let level = i || 0
     level = level + 1
-    var key
+    let key
 
     if (obj instanceof Object) {
       for (key in obj) {
         if (obj.hasOwnProperty(key)) {
           // recursive call to scan property
-          var n = null
+          let n = null
           if (name) {
             n = name + '.' + key
           } else {

package/src/icon.js

@@ -1,5 +1,5 @@
 import insert from './mixin/insert'
-import css from './module/css'
+import * as css from './module/css'
 
 var defaults = {
   prefix: 'material',
@@ -54,10 +54,10 @@ class Icon {
     this.element = this.element || {}
 
     this.element = document.createElement(tag)
-    css.add(this.element, this.options.prefix + '-' + this.options.class)
+    { add }.add(this.element, this.options.prefix + '-' + this.options.class)
 
-    if (options.css) { css.add(this.element, options.css) }
-    // css.add(this.element, this.options.class + '-adjust');
+    if (options.{ add }) { { add }.add(this.element, options.{ add }) }
+    // { add }.add(this.element, this.options.class + '-adjust');
 
     if (this.options.container) {
       this.insert(this.options.container)

package/src/image.js

@@ -13,7 +13,7 @@ class Image {
   }
 
   init (options) {
-    this.options = Object.assign({}, Image.defaults, options || {})
+    this.options = { ...Image.defaults, ...options }
     Object.assign(this, build)
   }
 
@@ -22,13 +22,13 @@ class Image {
     if (!src) {
       this.element.style.backgroundImage = ''
     } else {
-      var url = null
+      let url = null
 
       if (src.format) {
-        var format = this.sanitize(src.format)
+        let format = this.sanitize(src.format)
 
         if (format.length > 0) {
-          var index = format.indexOf(this.options.format)
+          const index = format.indexOf(this.options.format)
           if (index === -1) {
             format = src.format[0] + '/'
           } else {
@@ -46,9 +46,9 @@ class Image {
   }
 
   sanitize (formats) {
-    var a = []
-    for (var i = 0; i < formats.length; i++) {
-      var format = formats[i].replace(/\/$/, '')
+    const a = []
+    for (let i = 0; i < formats.length; i++) {
+      const format = formats[i].replace(/\/$/, '')
       a.push(format)
     }
     return a

package/src/item.js

@@ -3,7 +3,7 @@ import Layout from './layout'
 import create from './mixin/create'
 import insert from './mixin/insert'
 
-var defaults = {
+const defaults = {
   prefix: 'material',
   class: 'item',
   type: 'default',