material 0.6.2 → 0.7.1

package/src/image.js

@@ -1,124 +1,57 @@
-'use strict'
+import build from './module/build'
 
-// import insert from './component/insert'
-import css from './module/css'
-import insert from './element/insert'
-import control from './component/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 = Object.assign({}, 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.root = document.createElement(tag)
-
-    // if (options.src) {
-    //   this.root.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.root)
-    }
-
-    this.info = document.createElement('span')
-    css.add(this.info, this.options.class + '-info')
-
-    insert(this.info, this.root)
-
-    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.root)
-    // }
-
-    css.add(this.root, this.options.prefix + '-' + this.options.class)
-
-    if (options.css) { css.add(this.root, options.css) }
-    // css.add(this.root, 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.root, 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.root.innerText) {
-        this.root.innerText = value
+  set (src) {
+    // console.log('set', src)
+    if (!src) {
+      this.element.style.backgroundImage = ''
+    } else {
+      var url = null
+
+      if (src.format) {
+        var format = this.sanitize(src.format)
+
+        if (format.length > 0) {
+          var index = format.indexOf(this.options.format)
+          if (index === -1) {
+            format = src.format[0] + '/'
+          } else {
+            format = this.options.format + '/'
+          }
+        }
+
+        url = src.url + format
       } else {
-        this.root.textContent = value
+        url = src.url
       }
 
-      return this
+      this.element.style.backgroundImage = 'url(' + url + src.filename + ')'
     }
+  }
 
-    return this
+  sanitize (formats) {
+    var a = []
+    for (var i = 0; i < formats.length; i++) {
+      var format = formats[i].replace(/\/$/, '')
+      a.push(format)
+    }
+    return a
   }
 }
 

package/src/item.js

@@ -1,9 +1,7 @@
-'use strict'
-
 import Layout from './layout'
 
-import create from './component/create'
-import insert from './component/insert'
+import create from './mixin/create'
+import insert from './mixin/insert'
 
 var defaults = {
   prefix: 'material',
@@ -70,14 +68,14 @@ class Item {
 
     this.options.tag = this.options.tag
 
-    this.root = create(this.options)
+    this.element = create(this.options)
 
     if (this.options.text) {
       this.set(this.options.text)
     }
 
     if (this.options.layout) {
-      this.layout = new Layout(this.options.layout, this.root)
+      this.layout = new Layout(this.options.layout, this.element)
     } else {
       if (this.options.container) {
         this.insert(this.options.container)
@@ -92,10 +90,10 @@ class Item {
    */
   set (value) {
     if (value) {
-      if (this.root.innerText) {
-        this.root.innerText = value
+      if (this.element.innerText) {
+        this.element.innerText = value
       } else {
-        this.root.textContent = value
+        this.element.textContent = value
       }
 
       return this

package/src/layout.js

@@ -37,10 +37,10 @@ class Layout {
         }
 
         component = new schema[i](options)
-        var element = component.root || component
+        var element = component.element || component
 
         if (level === 1) {
-          structure.root = element
+          structure.element = element
         }
 
         if (name) {
@@ -57,7 +57,7 @@ class Layout {
           if (component.insert) {
             component.insert(container)
           } else {
-            var wrapper = container.root || container
+            var wrapper = container.element || container
 
             wrapper.appendChild(element)
 
@@ -98,30 +98,30 @@ class Layout {
     // console.log('component', component);
 
     if (options.flex) {
-      css.add(component.root, 'flex-' + options.flex)
+      css.add(component.element, 'flex-' + options.flex)
     } else {
       var size = options.size
       if (options.size && options.width) {
-        component.root.width = size + 'px'
+        component.element.width = size + 'px'
       } else if (options.size && options.height) {
-        component.root.height = size + 'px'
+        component.element.height = size + 'px'
       }
     }
 
     if (options.position) {
-      component.root.position = options.position
+      component.element.position = options.position
     }
 
     if (options.bottom) {
-      component.root.bottom = options.bottom
+      component.element.bottom = options.bottom
     }
 
     if (options.hide) {
-      component.root.display = 'none'
+      component.element.display = 'none'
     }
 
     if (options.theme) {
-      css.add(component.root, 'theme' + '-' + options.theme)
+      css.add(component.element, 'theme' + '-' + options.theme)
     }
   }
 

package/src/link.js

@@ -0,0 +1,50 @@
+import build from './module/build'
+
+class Link {
+  static defaults = {
+    class: 'link',
+    tag: 'a'
+  }
+
+  constructor (options) {
+    this.init(options)
+    this.build()
+    this.setup()
+  }
+
+  init (options) {
+    this.options = Object.assign({}, Link.defaults, options || {})
+    Object.assign(this, build)
+  }
+
+  setup () {
+    if (this.options.link) {
+      this.set(this.options.link)
+    }
+
+    if (this.options.target !== 'blank') {
+      this.element.target = this.options.target
+    }
+
+    if (this.options.text) {
+      this.element.innerHTML = this.options.text
+    }
+  }
+
+  set (link) {
+    // console.log('set', text)
+    if (link === undefined) return
+
+    if (this.options.target === 'blank') {
+      this.element.href = '#'
+      this.element.addEventListener('click', () => {
+        window.open(link)
+        return false
+      })
+    } else {
+      this.element.href = link
+    }
+  }
+}
+
+export default Link

package/src/list/add.js

@@ -24,7 +24,7 @@ export default {
     this.dataStore[info[this.dataId]] = info
     // console.log('data', this.data.length, this.data)
 
-    if (window.getComputedStyle(this.root, null).display === 'none') {
+    if (window.getComputedStyle(this.element, null).display === 'none') {
       this.virtual.items = this.data
     } else {
       this.virtual.update(this.data)

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) {
@@ -11,14 +11,14 @@ export default {
 
     this.dataId = this.options.dataId || '_id'
 
-    this.root = document.createElement('div')
-    this.root.classList.add('list')
+    this.element = document.createElement('div')
+    this.element.classList.add('list')
 
     if (this.options.class) {
       this.addClass(this.options.class)
     }
 
-    this.root.addEventListener('click', (e) => {
+    this.element.addEventListener('click', (e) => {
       e.stopPropagation()
     })
 
@@ -27,17 +27,17 @@ export default {
     }
 
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
-    this.layout = new Layout(this.options.layout.main, this.root)
+    this.layout = new Layout(this.options.layout.main, this.element)
     this.ui = this.layout.component
 
     // prepare loading
     // this.ui.loading = new Loading()
 
     if (this.options.container) {
-      this.options.container.appendChild(this.root)
+      this.options.container.appendChild(this.element)
     }
 
     var scrollbarOffset = scrollbar()
@@ -56,7 +56,7 @@ export default {
     var list = c.split(' ')
 
     for (var i = 0; i < list.length; i++) {
-      this.root.classList.add(list[i])
+      this.element.classList.add(list[i])
     }
   },
 

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/display.js

@@ -10,9 +10,9 @@ export default {
   show () {
     // console.log('show', this.visible)
 
-    this.root.getBoundingClientRect()
+    this.element.getBoundingClientRect()
 
-    this.root.classList.add('show')
+    this.element.classList.add('show')
     this.visible = true
 
     if (this.underlay) {
@@ -26,11 +26,11 @@ export default {
   },
 
   hide () {
-    // console.log('hide', this.root.style.display)
+    // console.log('hide', this.element.style.display)
 
-    if (!this.root) return
+    if (!this.element) return
 
-    this.root.classList.remove('show')
+    this.element.classList.remove('show')
     this.visible = false
 
     if (this.underlay) {
@@ -43,8 +43,8 @@ export default {
 
   destroy () {
     // console.log('destroy', this.options.transition)
-    if (this.options.transition && this.root) {
-      this.root.classList.remove('show')
+    if (this.options.transition && this.element) {
+      this.element.classList.remove('show')
 
       if (this.underlay) {
         this.underlay.classList.remove('show')
@@ -63,9 +63,9 @@ export default {
   },
 
   removeChild () {
-    if (this.root && this.root.parentNode) {
-      this.root.parentNode.removeChild(this.root)
-      this.root = null
+    if (this.element && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element)
+      this.element = null
     }
 
     if (this.underlay && this.underlay.parentNode) {

package/src/list/filter.js

@@ -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')

package/src/list/request.js

@@ -154,7 +154,7 @@ export default {
 
     }
 
-    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/search.js

@@ -93,7 +93,7 @@ export default {
   toggleSearch (e) {
     e.stopPropagation()
     // console.log('toggle search', this.ui.body)
-    if (!this.ui['search-input'].root.classList.contains('show')) {
+    if (!this.ui['search-input'].element.classList.contains('show')) {
       this.showSearch()
     } else {
       this.hideSearch()
@@ -111,15 +111,15 @@ export default {
 
     // console.log('showSearch')
     this.mode = 'search'
-    this.root.classList.add('search-mode')
+    this.element.classList.add('search-mode')
 
     if (this.ui.search) {
-      this.ui.search.root.classList.add('selected')
+      this.ui.search.element.classList.add('selected')
     }
 
     if (this.ui['search-input']) {
       this.ui['search-input'].input.value = ''
-      this.ui['search-input'].root.classList.add('show')
+      this.ui['search-input'].element.classList.add('show')
       this.ui['search-input'].input.focus()
     }
 
@@ -136,13 +136,13 @@ export default {
   hideSearch (notfetch) {
     // console.log('hideSearch', notfetch)
     this.mode = 'standard'
-    this.root.classList.remove('search-mode')
+    this.element.classList.remove('search-mode')
 
     if (this.ui.search) {
-      this.ui.search.root.classList.remove('selected')
+      this.ui.search.element.classList.remove('selected')
     }
     if (this.ui['search-input']) {
-      this.ui['search-input'].root.classList.remove('show')
+      this.ui['search-input'].element.classList.remove('show')
       this.ui['search-input'].input.value = ''
     }
     // this.ui['search-list'].classList.remove('show')