material 0.7.0 → 0.7.2

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) {
+const insert = (element, container, context = 'bottom') => {
   if (!element || !container) return
 
   element = element.root || element
   container = container.root || container
 
-  context = context || 'bottom'
-
-  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/field/email.js

@@ -1,53 +1,18 @@
-'use strict'
+import build from '../module/build'
 
-const defaults = {
-  prefix: 'material',
-  class: 'email'
-}
-
-/**
- * Base class for all ui components
- * @class
- * @param {Object} options - The component options
- * @return {Object} The class Instance
- */
-
-/**
- * Class representing a UI Container. Can add components.
- *
- * @extends Component
- * @return {parent} The class instance
- * @example new Container({
- *   container: document.body
- * });
- */
 class EmailLink {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
+  static defaults = {
+    class: 'email'
+  }
 
+  constructor (options) {
+    this.init(options)
     this.build()
-
-    return this
   }
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.element = document.createElement('a')
-    this.element.classList.add('email')
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.element)
-    }
-
-    return this
+  init (options) {
+    this.options = { ...Button.defaults, ...options }
+    Object.assign(this, build)
   }
 
   set (email) {

package/src/field/image.js

@@ -1,71 +1,37 @@
-'use strict'
+import build from '../module/build'
 
-const defaults = {
-  class: 'image',
-  format: 'thumb'
-}
-
-/**
- * Class representing an image.
- *
- * @extends Image
- * @return {parent} The class instance
- * @example new Image({
- *   src: {
- *     filename: 'image.png',
- *     url: 'exmaple.com/image/'
- *     format: ['thumbs/', 'medium/', 'large/'],
- *   },
- *   container: document.body
- * });
- */
 class Image {
   static isImage () {
     return true
   }
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    // console.log('options', options)
-    this.options = Object.assign({}, defaults, options || {})
 
-    this.build()
-
-    return this
+  static defaults = {
+    class: 'image',
+    format: 'thumb'
   }
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.element = document.createElement('div')
-    this.element.classList.add(this.options.class)
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.element)
-    }
+  constructor (options) {
+    this.init(options)
+    this.build()
+  }
 
-    return this
+  init (options) {
+    this.options = { ...Image.defaults, ...options }
+    Object.assign(this, build)
   }
 
   set (src, asset) {
-    console.log('set', src, asset)
-
     asset = asset || {}
 
     if (!src) return
 
-    var url = src.url
+    let url = src.url
 
     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 {
@@ -80,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)
     }
 

package/src/{control/file.js → file.js}

@@ -1,56 +1,26 @@
-import emitter from '../module/emitter'
-import dataset from '../view/dataset'
-import attributes from './module/attributes'
+import EventEmitter from './mixin/emitter'
 
-const defaults = {
-  class: 'file',
-  attributes: ['name', 'accept', 'required', 'disabled', 'multiple']
-}
+import build from './module/build'
+import dataset from './module/dataset'
+import attributes from './module/attributes'
 
 class File {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter)
-
-    this.build()
-    this.attach()
-
-    return this
+  static defaults = {
+    class: 'file',
+    attributes: ['name', 'accept', 'required', 'disabled', 'multiple']
   }
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.element = document.createElement('div')
-    this.element.classList.add('file')
-
-    if (this.options.class !== 'file') {
-      this.element.classList.add(this.options.class)
-    }
-
+  constructor (options) {
+    this.init(options)
+    this.build()
     this.buildLabel()
     this.buildInput()
+    this.attach()
+  }
 
-    if (this.options.data) {
-      dataset(this.element, this.options.data)
-    }
-
-    if (this.options.focus) {
-      this.input.focus()
-    }
-
-    if (this.options.container) {
-      this.options.container.appendChild(this.element)
-    }
-
-    return this
+  init (options) {
+    this.options = Object.assign({}, File.defaults, options || {})
+    Object.assign(this, build)
   }
 
   buildLabel () {

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)