material 0.7.0 → 0.7.2

package/src/form/verify.js

@@ -1,17 +1,17 @@
 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.root.classList.add('textfield-error')
+        field.element.classList.add('textfield-error')
         ok = false
       } else {
-        field.root.classList.remove('textfield-error')
+        field.element.classList.remove('textfield-error')
       }
     }
 

package/src/form.js

@@ -1,7 +1,5 @@
-'use strict'
-
 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'
@@ -70,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)
@@ -101,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
@@ -128,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
@@ -181,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,7 +1,5 @@
-'use strict'
-
 import insert from './mixin/insert'
-import css from './module/css'
+import * as css from './module/css'
 
 var defaults = {
   prefix: 'material',
@@ -56,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

@@ -1,124 +1,57 @@
-'use strict'
+import build from './module/build'
 
-// import insert from './mixin/insert'
-import css from './module/css'
-import insert from './element/insert'
-import control from './mixin/control'
-
-var defaults = {
-  prefix: 'material',
-  class: 'image',
-  tag: 'div'
-}
-
-/**
- * The item class is used for example as item list
- *
- * @class
- * @extends {Component}
- * @return {Object} The class instance
- * @example new Item(object);
- */
 class Image {
-  /**
-   * init
-   * @return {Object} The class options
-   */
+  static defaults = {
+    class: 'image',
+    tag: 'div',
+    format: 'thumb'
+  }
+
   constructor (options) {
     this.init(options)
     this.build()
-
-    return this
   }
 
-  /**
-   * [init description]
-   * @param  {?} options [description]
-   * @return {?}         [description]
-   */
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, control)
+    this.options = { ...Image.defaults, ...options }
+    Object.assign(this, build)
   }
 
-  /**
-   * Build function for item
-   * @return {Object} This class instance
-   */
-  build (options) {
-    options = options || this.options
-
-    var tag = options.tag || 'div'
-    var text = options.text || options.label
-    this.element = document.createElement(tag)
-
-    // if (options.src) {
-    //   this.element.setAttribute('style', 'background-image: url(' + options.src + ')')
-
-    if (options.src) {
-      this.image = document.createElement('img')
-      this.image.setAttribute('src', options.src)
-      css.add(this.image, this.options.class + '-image')
-      insert(this.image, this.element)
-    }
-
-    this.info = document.createElement('span')
-    css.add(this.info, this.options.class + '-info')
-
-    insert(this.info, this.element)
-
-    this.label(text, this.info)
-
-    // this.label = this.element.label
-
-    this.icon(this.options.icon, this.info, 'bottom')
-
-    // if (text) {
-    //   this.label = document.createElement('span')
-    //   this.label.innerText = text
-    //   css.add(this.label, this.options.class + '-label')
-    //   insert(this.label, this.element)
-    // }
-
-    css.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 (this.options.container) {
-      this.insert(this.options.container)
-    }
-  }
-
-  /**
-   * [insert description]
-   * @param  {?} container [description]
-   * @param  {?} context   [description]
-   * @return {?}           [description]
-   */
-  insert (container, context) {
-    insert(this.element, container, context)
-
-    return this
-  }
-
-  /**
-   * Get or set text value of the element
-   * @param {string} value The text to set
-   * @returns {*}
-   */
-  set (value) {
-    if (value) {
-      if (this.element.innerText) {
-        this.element.innerText = value
+  set (src) {
+    // console.log('set', src)
+    if (!src) {
+      this.element.style.backgroundImage = ''
+    } else {
+      let url = null
+
+      if (src.format) {
+        let format = this.sanitize(src.format)
+
+        if (format.length > 0) {
+          const index = format.indexOf(this.options.format)
+          if (index === -1) {
+            format = src.format[0] + '/'
+          } else {
+            format = this.options.format + '/'
+          }
+        }
+
+        url = src.url + format
       } else {
-        this.element.textContent = value
+        url = src.url
       }
 
-      return this
+      this.element.style.backgroundImage = 'url(' + url + src.filename + ')'
     }
+  }
 
-    return this
+  sanitize (formats) {
+    const a = []
+    for (let i = 0; i < formats.length; i++) {
+      const format = formats[i].replace(/\/$/, '')
+      a.push(format)
+    }
+    return a
   }
 }
 

package/src/item.js

@@ -1,11 +1,9 @@
-'use strict'
-
 import Layout from './layout'
 
 import create from './mixin/create'
 import insert from './mixin/insert'
 
-var defaults = {
+const defaults = {
   prefix: 'material',
   class: 'item',
   type: 'default',

package/src/layout.js

@@ -1,5 +1,5 @@
 import { is as isObject } from './module/object'
-import css from './module/css'
+import * as css from './module/css'
 
 class Layout {
   constructor (schema, container) {
@@ -16,10 +16,10 @@ class Layout {
     structure = structure || {}
     let component = null
 
-    for (var i = 0; i < schema.length; i++) {
+    for (let i = 0; i < schema.length; i++) {
       // console.log('index', i, typeof schema[i])
       var name
-      var options = {}
+      let options = {}
 
       if (schema[i] instanceof Object &&
         typeof schema[i] === 'function') {
@@ -37,7 +37,7 @@ class Layout {
         }
 
         component = new schema[i](options)
-        var element = component.element || component
+        const element = component.element || component
 
         if (level === 1) {
           structure.element = element
@@ -49,7 +49,7 @@ class Layout {
         }
 
         // if (component) {
-        //   this.display(component.root, options)
+        //   this.display(component.element, options)
         //   this.style(component, options)
         // }
 
@@ -57,7 +57,7 @@ class Layout {
           if (component.insert) {
             component.insert(container)
           } else {
-            var wrapper = container.element || container
+            const wrapper = container.element || container
 
             wrapper.appendChild(element)
 
@@ -68,7 +68,7 @@ class Layout {
           component._container = container
         }
       } else if (Array.isArray(schema[i])) {
-       // console.log('------', schema[i])
+        // console.log('------', schema[i])
         if (component == null) {
           component = container
         }
@@ -80,8 +80,8 @@ class Layout {
   }
 
   display (element, options) {
-    var display = options.display
-    var direction = options.direction || 'horizontal'
+    const display = options.display
+    const direction = options.direction || 'horizontal'
 
     if (!element || !display) return
 
@@ -93,14 +93,14 @@ class Layout {
   }
 
   style (component) {
-    var options = component.options || {}
+    const options = component.options || {}
 
     // console.log('component', component);
 
     if (options.flex) {
       css.add(component.element, 'flex-' + options.flex)
     } else {
-      var size = options.size
+      const size = options.size
       if (options.size && options.width) {
         component.element.width = size + 'px'
       } else if (options.size && options.height) {
@@ -128,11 +128,11 @@ class Layout {
   extractInfo (object) {
     // console.log('extractField', object)
 
-    var field = {}
+    const field = {}
 
-    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) {
           // console.log('field', infos[0], infos[1])

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

@@ -1,36 +1,23 @@
-'use strict'
-
-const defaults = {
-  class: 'link',
-  tag: 'a'
-}
+import build from './module/build'
 
 class Link {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
+  static defaults = {
+    class: 'link',
+    tag: 'a'
+  }
 
+  constructor (options) {
+    this.init(options)
     this.build()
-
-    return this
+    this.setup()
   }
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.element = document.createElement(this.options.tag)
-    this.element.classList.add(this.options.class)
-
-    if (this.options.class !== 'link') {
-      this.element.classList.add('link')
-    }
+  init (options) {
+    this.options = { ...Link.defaults, ...options }
+    Object.assign(this, build)
+  }
 
+  setup () {
     if (this.options.link) {
       this.set(this.options.link)
     }
@@ -39,15 +26,9 @@ class Link {
       this.element.target = this.options.target
     }
 
-    if (this.options.container) {
-      this.options.container.appendChild(this.element)
-    }
-
     if (this.options.text) {
       this.element.innerHTML = this.options.text
     }
-
-    return this
   }
 
   set (link) {

package/src/list/build.js

@@ -1,9 +1,9 @@
 import scrollbar from '../module/scrollbar'
-import dataset from '../view/dataset'
+import dataset from '../module/dataset'
 
 import Layout from '../layout'
 import Virtual from './virtual'
-import Loading from '../control/loading'
+import Loading from '../loading'
 
 export default {
   build (data) {
@@ -40,12 +40,12 @@ export default {
       this.options.container.appendChild(this.element)
     }
 
-    var scrollbarOffset = scrollbar()
+    const scrollbarOffset = scrollbar()
 
     // console.log('scrollbarOffset', scrollbarOffset)
     if (this.ui && this.ui.body) {
       // console.log('body padding', 11 - scrollbarOffset + 'px')
-      this.ui.body.style['marginRight'] = 11 - scrollbarOffset + 'px'
+      this.ui.body.style.marginRight = 11 - scrollbarOffset + 'px'
       this.ui.body.classList.add('offset' + scrollbarOffset)
     }
 
@@ -53,16 +53,16 @@ export default {
   },
 
   addClass (c) {
-    var list = c.split(' ')
+    const list = c.split(' ')
 
-    for (var i = 0; i < list.length; i++) {
+    for (let i = 0; i < list.length; i++) {
       this.element.classList.add(list[i])
     }
   },
 
   buildVirtual () {
     // console.log('buildVirtual', this.options.class)
-    var height = 80
+    let height = 80
     this.size = this.options.list.size
     this.stop = false
 
@@ -100,15 +100,15 @@ export default {
       // console.log('progress', progress, this.count)
 
       if (this.statusDisplay) {
-        var percent = parseInt(progress / this.count * 100)
+        const percent = parseInt(progress / this.count * 100)
         this.statusDisplay('count', percent + '% | ' + progress + ' / ' + this.count)
       }
 
       this.onProgress(progress)
     })
     // .on('size', (size) => {
-      // console.log('!!!!size', size)
-      // this.size = size
+    // console.log('!!!!size', size)
+    // this.size = size
     // })
     //
   },

package/src/list/click.js

@@ -8,9 +8,9 @@ export default {
       return
     }
 
-    var target = '[data-id]'
-    var item = e.target
-    var i = 0
+    const target = '[data-id]'
+    let item = e.target
+    let i = 0
 
     while (item && !item.matches(target)) {
       // console.log('item', item)

package/src/list/collection.js

@@ -150,7 +150,7 @@ class Collection {
       route = this.addParams(route, this.params())
     }
 
-    if (this.ui.filter && this.ui.filter.root.classList.contains('selected')) {
+    if (this.ui.filter && this.ui.filter.element.classList.contains('selected')) {
       route = this.addParams(route, this.getFilter())
     }
 

package/src/list/filter.js

@@ -3,7 +3,7 @@ export default {
   initFilter () {
     this.filter = this.extractFilter(this.ui)
 
-    for (var name in this.filter) {
+    for (const name in this.filter) {
       if (this.filter.hasOwnProperty(name)) {
         this.filter[name].on('change', () => {
           this.request()
@@ -15,15 +15,15 @@ export default {
       this.clearFilter()
     })
 
-    this.ui['filter'].on('click', () => {
+    this.ui.filter.on('click', () => {
       this.toggleFilter()
     })
   },
 
   getFilter () {
     console.log('getFilter')
-    var filter = null
-    for (var name in this.filter) {
+    let filter = null
+    for (const name in this.filter) {
       if (this.filter.hasOwnProperty(name)) {
         console.log('--', typeof this.filter[name].get(), this.filter[name].get())
         if (this.filter[name].get() !== ''/* && this.filter[name].get() !== [] */) {
@@ -61,7 +61,7 @@ export default {
     }
 
     // console.log('showSearch')
-    this.ui['filter'].root.classList.add('selected')
+    this.ui.filter.element.classList.add('selected')
     this.ui['filter-input'].classList.add('show')
 
     // this.ui['search-list'].classList.add('show')
@@ -74,7 +74,7 @@ export default {
    */
   hideFilter () {
     // console.log('hideSearch')
-    this.ui['filter'].root.classList.remove('selected')
+    this.ui.filter.element.classList.remove('selected')
     this.ui['filter-input'].classList.remove('show')
     // this.ui['search-list'].classList.remove('show')
     // this.ui.body.classList.remove('hide')
@@ -83,7 +83,7 @@ export default {
   },
 
   clearFilter () {
-    for (var name in this.filter) {
+    for (const name in this.filter) {
       if (this.filter.hasOwnProperty(name)) {
         this.filter[name].set('')
       }
@@ -95,14 +95,14 @@ export default {
   extractFilter (object) {
     // console.log('extractField', object)
 
-    var filter = {}
+    const filter = {}
 
-    for (var property in object) {
+    for (const property in object) {
       if (object.hasOwnProperty(property)) {
-        var str = property.split(/\./)
+        const str = property.split(/\./)
 
         if (str[0] === 'filter' && str[1] !== undefined) {
-          var name = property.substr(7, property.length)
+          const name = property.substr(7, property.length)
 
           filter[name] = object[property]
         }

package/src/list/image.js

@@ -1,17 +1,17 @@
 export default {
   image (info, layout) {
     if (info.image) {
-      var format = 'thumb'
+      let format = 'thumb'
       if (this.options.image && this.options.image.format) {
         format = this.options.image.format || format + '/'
       } else {
         format = ''
       }
 
-      var r = Math.floor(Math.random() * 100000) + 1
+      const r = Math.floor(Math.random() * 100000) + 1
 
       if (info.image.filename) {
-        var image = info.image.url + format + info.image.filename
+        const image = info.image.url + format + info.image.filename
         layout.get('image').style.backgroundImage = 'url("' + image + '?' + r + '")'
       }
     }