material 0.4.2 → 0.5.0

package/src/list/build.js

@@ -1,21 +1,31 @@
-import observer from '../module/observer'
+import scrollbar from '../module/scrollbar'
 import dataset from '../view/dataset'
 
 import Layout from '../layout'
 import Virtual from './virtual'
+import Loading from '../control/loading'
 
 export default {
   build (data) {
-    // console.log('options', this.options.layout)
+    // console.log('options', this.options.name)
+
+    this.dataId = this.options.dataId || '_id'
 
     this.root = document.createElement('div')
     this.root.classList.add('list')
-    this.root.classList.add(this.options.class)
+
+    if (this.options.class) {
+      this.addClass(this.options.class)
+    }
 
     this.root.addEventListener('click', (e) => {
       e.stopPropagation()
     })
 
+    if (this.options.name) {
+      this.name = this.options.name
+    }
+
     if (this.options.data) {
       dataset(this.root, this.options.data)
     }
@@ -23,25 +33,109 @@ export default {
     this.layout = new Layout(this.options.layout.main, this.root)
     this.ui = this.layout.component
 
-    observer.insert(this.root, () => {
-      this.buildVirtual()
-    })
+    // prepare loading
+    // this.ui.loading = new Loading()
+
+    if (this.options.container) {
+      this.options.container.appendChild(this.root)
+    }
+
+    var 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.classList.add('offset' + scrollbarOffset)
+    }
+
+    this.buildVirtual()
+  },
+
+  addClass (c) {
+    var list = c.split(' ')
+
+    for (var i = 0; i < list.length; i++) {
+      this.root.classList.add(list[i])
+    }
   },
 
   buildVirtual () {
+    // console.log('buildVirtual', this.options.class)
     var height = 80
+    this.size = this.options.list.size
+    this.stop = false
 
     if (this.options.item && this.options.item.height) {
       height = this.options.item.height
     }
 
     this.virtual = new Virtual({
+      view: this.options.name,
       container: this.ui.body,
       itemHeight: height,
+      size: this.size,
       render: (i) => {
         // console.log('render', this.data[i])
         return this.renderItem(this.data[i])
       }
     })
+
+    // console.log('dynamic')
+    this.virtual.on('next', (total) => {
+      // console.log('next', total)
+      if (this.stop) return
+
+      // console.log('next', total, this.page, this.size)
+      this.page = this.page || 1
+      // console.log('slide', total, this.options.list.size)
+      // var page = Math.ceil(total / this.size) + 1
+
+      this.page++
+
+      if (this.mode === 'search') {
+        this.search(this.ui['search-input'].input.value, this.page, this.size, true)
+      } else {
+        // console.log('request', this.page, this.size, true)
+        this.request(this.page, this.size, true)
+      }
+    }).on('progress', (progress) => {
+      // console.log('progress', progress, this.count)
+
+      if (this.statusDisplay) {
+        var 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
+    // })
+  },
+
+  onProgress (value) {
+    // console.log('progress', value, this._value)
+
+    if (this.ui.head) {
+      if (this.ui.body.scrollTop > 0 && this.ui.head) {
+        this.ui.head.classList.add('scrolled')
+      } else if (this.ui.head) {
+        this.ui.head.classList.remove('scrolled')
+      }
+    }
+
+    if (value > this._value) {
+      // console.log('scrolling down')
+      this.emit('scrolling', 'down')
+    } else if (value < this._value) {
+      // console.log('scrolling up')
+      this.emit('scrolling', 'up')
+    }
+
+    this._value = value
+
+    this.scrollTop = this.ui.body.scrollTop
   }
 }

package/src/list/click.js

@@ -1,7 +1,8 @@
 
 export default {
   click (e) {
-    // e.stopPropagation()
+    // console.log('click', e.target)
+    e.stopPropagation()
 
     if (e.target === e.currentTarget) {
       return
@@ -21,15 +22,19 @@ export default {
       i++
     }
 
-    if (this.select) {
-      this.select(item)
-    }
-
     if (e.target.matches('BUTTON') && e.target.dataset.name && item.dataset.id) {
       // console.log('button', e.target.dataset.name)
       this.emit(e.target.dataset.name, item.dataset.id)
+      return this
     }
 
+    if (this.select) {
+      this.select(item)
+    }
+
+    // console.log('item', item, e.target.dataset.name)
+
+    return this
     // console.log(item)
   }
 }

package/src/list/collection.js

@@ -0,0 +1,187 @@
+
+import emitter from 'material/src/module/emitter'
+
+const defaults = {
+  size: 25,
+  count: true
+}
+
+class Collection {
+  /**
+   * Constructor
+   * @param  {Object} options - Component options
+   * @return {Object} Class instance
+   */
+  constructor (options) {
+    this.options = Object.assign({}, defaults, options || {})
+    Object.assign(this, emitter)
+
+    return this
+  }
+
+  get (page, size, more) {
+    7
+   // console.log('fetch', page, size, more)
+    if (more !== true) {
+      this.page = 1
+      this.stop = false
+    }
+
+    this.data = this.data || []
+    var signal = null
+
+    if (this.abortController) {
+      // console.log('abort')
+      this.abortController.abort()
+      this.abortController = null
+    }
+
+    if (more !== true) {
+      this.abortController = new AbortController()
+      signal = this.abortController.signal
+    }
+
+    page = page || 1
+    size = size || this.options.list.size
+    // console.log('fetch')
+
+    if (page === 1) {
+      this.ui.body.scrolltop = 0
+    }
+
+    var route = this.buildRoute(page, size)
+
+    if (more !== true && this.options.count) {
+      this.fetchCount(route)
+    }
+
+    fetch(route, {signal}).then((resp) => {
+      return resp.json()
+    }).then((data) => {
+      if (this.options.debug) {
+        console.log('data', route, data.length, data)
+      }
+
+      data = data || []
+
+      if (data.error) {
+        console.log('error', data.error)
+        return
+      }
+
+      if (data.length < this.size && more) {
+        this.stop = true
+      }
+
+      if (more === true) {
+        var a = this.data.concat(data)
+        this.data = a
+        this.storeData(data, more)
+        this.virtual.add(this.data)
+      } else {
+        this.data = []
+        this.data = data
+        this.storeData(data)
+        this.render(data)
+      }
+
+      this.emit('fetched', data)
+    }).catch(function (e) {
+      // console.log('error', e.message)
+    })
+  }
+
+  fetchCount (route, signal) {
+    // console.log('fetchCount', route)
+    fetch(route + '&count=1', {signal}).then((resp) => {
+      return resp.json()
+    }).then((data) => {
+      // console.log('data', data.count)
+      this.count = data.count
+      this.statusDisplay('count', data.count)
+    }).catch(function (e) {
+      // console.log('error', e.message)
+    })
+  }
+
+  addParams (route, params) {
+    // console.log('addParams', route, params)
+
+    if (!route) {
+      console.log('error: no route specified!')
+
+      return
+    }
+
+    if (route.indexOf('?') > -1) {
+      // console.log('?', route, route.length, route[route.length - 1])
+      if (route[route.length - 1] === '&' || route[route.length - 1] === '?') {
+        route = route + params
+      } else {
+        route = route + '&' + params
+      }
+    } else {
+      // console.log('add ?')
+      route = route + '?' + params
+    }
+
+    return route
+  }
+
+  buildRoute (page, size, path) {
+    // console.log('buildroute', this.options.route, path)
+    path = path || 'list'
+
+    page = page || 1
+    size = size || this.options.list.size
+
+    var route = this.options.route
+
+    if (path) {
+      route = this.options.route[path]
+    }
+
+    if (this.routeAddOn) {
+      route = this.routeAddOn(route)
+    }
+
+    if (this.params) {
+      // console.log('params', route, this.params())
+      route = this.addParams(route, this.params())
+    }
+
+    if (this.ui.filter && this.ui.filter.root.classList.contains('selected')) {
+      route = this.addParams(route, this.getFilter())
+    }
+
+    if (this.options.pagination) {
+      route = this.addParams(route, 'page=' + page + '&size=' + size)
+    }
+
+    return route
+  }
+
+  storeData (list, more) {
+    // console.log('storeData', list.length, more)
+    if (more !== true) {
+      this.dataList = []
+    }
+
+    // console.log('storeData', this.dataStore)
+    this.dataStore = this.dataStore || {}
+    for (var i = 0; i < list.length; i++) {
+      this.dataList.push(list[i]this.dataId)
+      this.dataStore[list[i]this.dataId] = list[i]
+    }
+  }
+
+  set () {
+
+  }
+
+  setRoute (route) {
+    this.route = route
+  }
+}
+
+export default Collection

package/src/list/create.js

@@ -1,31 +1,41 @@
 export default {
   create () {
-    console.log('create', this.mode, this.options.item.new)
+    // console.log('create', this.mode, this.options.item.new)
     // console.log('selected', this.info, this.item)
 
     if (this.mode === 'create') return
 
     this.mode = 'create'
 
-    if (this.options.item) {
-      this.newItem = this.renderItem(this.options.item.new, 'create')
+    if (this.options.virtual === true) {
+      this.data.unshift(this.options.item.new)
+      this.render(this.data)
+    } else {
+      if (this.options.item) {
+        this.newItem = this.renderItem(this.options.item.new, 'create')
+      }
     }
 
     this.emit('create', this.options.item.new)
   },
 
   created (data) {
-    console.log('created', data)
-    this.mode = null
-    this.info = data
-    this.ui.body.removeChild(this.newItem)
-    this.item = this.renderItem(data, 'top')
+    // console.log('created', this.data.length, data)
+    if (this.options.virtual === true) {
+      this.data[0] = data
+      this.render(this.data)
+    } else {
+      this.mode = null
+      this.info = data
+      this.ui.body.removeChild(this.newItem)
+      this.item = this.renderItem(data, 'top')
+    }
   },
 
   createCancel () {
-    console.log('createCancel', this.newItem)
-    console.log('remove')
-    console.log('prepare reselect', this.info, this.item)
+    // console.log('createCancel', this.newItem)
+    // console.log('remove')
+    // console.log('prepare reselect', this.info, this.item)
     this.ui.body.removeChild(this.newItem)
     this.mode = null
     if (this.item && this.info) {

package/src/list/display.js

@@ -0,0 +1,78 @@
+
+export default {
+  toggle () {
+    this.visible ? this.hide() : this.show()
+
+    this.emit('toggle')
+    return this
+  },
+
+  show () {
+    // console.log('show', this.visible)
+
+    this.root.getBoundingClientRect()
+
+    this.root.classList.add('show')
+    this.visible = true
+
+    if (this.underlay) {
+      this.underlay.classList.add('show')
+    }
+
+    this.virtual.setOffset('onShow')
+
+    this.emit('show')
+    return this
+  },
+
+  hide () {
+    // console.log('hide', this.root.style.display)
+
+    if (!this.root) return
+
+    this.root.classList.remove('show')
+    this.visible = false
+
+    if (this.underlay) {
+      this.underlay.classList.remove('show')
+    }
+
+    this.emit('hide')
+    return this
+  },
+
+  destroy () {
+    // console.log('destroy', this.options.transition)
+    if (this.options.transition && this.root) {
+      this.root.classList.remove('show')
+
+      if (this.underlay) {
+        this.underlay.classList.remove('show')
+      }
+
+      setTimeout(() => {
+        this.removeChild()
+      }, this.options.transition)
+    } else {
+      this.removeChild()
+    }
+
+    this.emit('destroy')
+
+    return this
+  },
+
+  removeChild () {
+    if (this.root && this.root.parentNode) {
+      this.root.parentNode.removeChild(this.root)
+      this.root = null
+    }
+
+    if (this.underlay && this.underlay.parentNode) {
+      this.underlay.parentNode.removeChild(this.underlay)
+    }
+
+    this.emit('remove')
+    return this
+  }
+}

package/src/list/empty.js

@@ -1,6 +1,9 @@
 export default {
   empty () {
-  	console.log('empty')
+    // console.log('empty')
     this.ui.body.innerHTML = ''
+    this.data = []
+    this.dataList = []
+    this.dataStore = {}
   }
 }

package/src/list/filter.js

@@ -0,0 +1,114 @@
+
+export default {
+  initFilter () {
+    this.filter = this.extractFilter(this.ui)
+
+    for (var name in this.filter) {
+      if (this.filter.hasOwnProperty(name)) {
+        this.filter[name].on('change', () => {
+          this.request()
+        })
+      }
+    }
+
+    this.ui['filter-clear'].on('click', () => {
+      this.clearFilter()
+    })
+
+    this.ui['filter'].on('click', () => {
+      this.toggleFilter()
+    })
+  },
+
+  getFilter () {
+    // console.log('getFilter')
+    var filter = null
+    for (var 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() !== []) {
+          if (filter) {
+            filter = filter + '&' + name + '=' + this.filter[name].get()
+          } else {
+            filter = name + '=' + this.filter[name].get()
+          }
+        }
+      }
+    }
+
+    // console.log('filter', filter)
+
+    return filter
+  },
+
+  toggleFilter () {
+    // console.log('toggleFilter', this.ui['filter-input'])
+
+    if (this.ui['filter-input'].classList.contains('show')) {
+      this.hideFilter()
+    } else {
+      this.showFilter()
+    }
+  },
+
+  /**
+   * [showSearch description]
+   * @return {[type]} [description]
+   */
+  showFilter () {
+    if (this.hideSearch) {
+      this.hideSearch()
+    }
+
+    // console.log('showSearch')
+    this.ui['filter'].root.classList.add('selected')
+    this.ui['filter-input'].classList.add('show')
+
+    // this.ui['search-list'].classList.add('show')
+    // this.ui.body.classList.add('hide')
+  },
+
+  /**
+   * [hideSearch description]
+   * @return {[type]} [description]
+   */
+  hideFilter () {
+    // console.log('hideSearch')
+    this.ui['filter'].root.classList.remove('selected')
+    this.ui['filter-input'].classList.remove('show')
+    // this.ui['search-list'].classList.remove('show')
+    // this.ui.body.classList.remove('hide')
+    this.clearFilter()
+    this.request()
+  },
+
+  clearFilter () {
+    for (var name in this.filter) {
+      if (this.filter.hasOwnProperty(name)) {
+        this.filter[name].set('')
+      }
+    }
+
+    this.request()
+  },
+
+  extractFilter (object) {
+    // console.log('extractField', object)
+
+    var filter = {}
+
+    for (var property in object) {
+      if (object.hasOwnProperty(property)) {
+        var str = property.split(/\./)
+
+        if (str[0] === 'filter' && str[1] !== undefined) {
+          var name = property.substr(7, property.length)
+
+          filter[name] = object[property]
+        }
+      }
+    }
+
+    return filter
+  }
+}

package/src/list/load.js

@@ -1,8 +1,8 @@
 
 export default {
   load () {
-  	this.page = this.page || 2
+    this.page = this.page || 2
     this.page++
-    this.fetch(this.page)
+    this.request(this.page)
   }
 }

package/src/list/remove.js

@@ -1,9 +1,22 @@
 export default {
   remove (id) {
-    // console.log('remove', id, this.ui.body)
+    // console.log('remove', id, this.dataList)
+    // console.log('datalist', this.dataList)
 
-    var item = this.ui.body.querySelector('[data-id="' + id + '"]')
-    // console.log('item', item)
-    this.ui.body.removeChild(item)
+    if (!id) return
+
+    if (!this.dataStore[id]) {
+      // console.log('not in the list')
+      return
+    }
+
+    this.dataList.splice(this.dataList.indexOf(id), 1)
+
+    // remove id from the list
+    this.data = this.data.filter((info) => { return info[this.dataId] !== id })
+
+    // console.log('data', this.data)
+
+    this.virtual.update(this.data)
   }
 }