material 0.4.2 → 0.5.0

package/src/list/render.js

@@ -8,6 +8,10 @@ export default {
   render (list, option) {
     // console.log('render', list)
     this.virtual.set(list)
+
+    if (this.status && this.options.count !== true) {
+      this.status('count', list.length)
+    }
   },
 
   /**
@@ -16,7 +20,7 @@ export default {
    * @param {[type]} context [description]
    */
   renderItem (info, context) {
-    // console.log('renderItem', context, this.options.layout.item)
+    // console.log('renderItem', info)
     info = info || {}
 
     var container = this.ui.body
@@ -25,29 +29,44 @@ export default {
       container.scrolltop = 0
     }
 
-    if (context === 'search') {
-      container = this.ui['search-list']
-    }
+    // if (context === 'search') {
+    //   container = this.ui['search-list']
+    // }
 
     var element = new Element({
       tag: 'li',
       class: 'item'
     })
 
-    if (this.id && this.id === info._id) {
+    // console.log('---', this.id)
+
+    if (this.id && this.id === info[this.dataId]) {
       element.classList.add('selected')
     }
 
-    element.dataset.id = info._id
+    element.dataset.id = info[this.dataId]
     element.dataset.info = this.options.info
 
     var layout = null
 
     if (this.options.itemSwitch) {
       var item = info[this.options.itemSwitch]
-      layout = new Layout(this.options.layout.item[item], element)
+
+      if (this.options.layout.item[item]) {
+        layout = new Layout(this.options.layout.item[item], element)
+      } else {
+        layout = new Layout(this.options.layout.item.base, element)
+      }
     } else {
-      layout = new Layout(this.options.layout.item, element)
+      var itemName = this.options.itemName || 'item'
+      layout = new Layout(this.options.layout[itemName], element)
+    }
+
+    // console.log('translate', layout)
+
+    if (this.translate && this.options.item && this.options.item.translate) {
+      // console.log('----')
+      this.translate(layout)
     }
 
     this.renderInfo(layout, info)
@@ -59,6 +78,8 @@ export default {
       container.appendChild(element)
     }
 
+    this.emit('infoRendered', info, element)
+
     return element
   },
 
@@ -92,7 +113,9 @@ export default {
     var value = Object.assign({}, object)
 
     for (var i = 0; i < keys.length; i++) {
-      value = value[keys[i]]
+      if (value !== undefined) {
+        value = value[keys[i]]
+      }
     }
 
     return value

package/src/list/request.js

@@ -0,0 +1,182 @@
+export default {
+  request (page, size, more, cb) {
+    // console.log('request', page, size, more, cb)
+    if (more !== true) {
+      this.ui.body.innerHTML = ''
+      this.virtual.reset()
+      this.dataList = []
+      this.data = []
+      this.page = 1
+      this.stop = true
+    } else {
+      if (this.dataList.length < size) {
+        // console.log('no more request needed, data ', this.dataList.length)
+        return
+      }
+    }
+
+    this.data = this.data || []
+    var signal = null
+
+    if (this.abortController) {
+      // console.log('abort')
+      this.abortController.abort()
+      this.abortController = null
+    }
+
+    if (more !== true && window.AbortController) {
+      this.abortController = new AbortController()
+      signal = this.abortController.signal
+    }
+
+    page = page || 1
+    size = size || this.options.list.size
+    // console.log('size', this.options.name, size)
+
+    if (page === 1) {
+      this.ui.body.scrolltop = 0
+    }
+
+    var route = this.buildRoute(page, size)
+
+    if (more !== true && this.options.count) {
+      this.requestCount(route)
+    }
+
+    // console.log('route - ', this.rand, route)
+
+    fetch(route, {signal}).then((resp) => {
+      return resp.json()
+    }).then((data) => {
+      if (this.options.debug) {
+        console.log('data', route, data.length, data)
+      }
+
+      // console.log('route', route);
+
+      data = data || []
+
+      if (data.error) {
+        console.log('error', data.error)
+        return
+      }
+
+      if (data.length < this.size && more) {
+        this.stop = true
+      } else {
+        this.stop = false
+      }
+
+      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)
+      }
+
+      if (cb) cb()
+
+      this.emit('fetched', data)
+
+      this.loaded = true
+
+      if (page === 1 && data.length < 1) {
+        this.emit('empty')
+      }
+    }).catch(function (e) {
+      // console.log('error', e.message)
+    })
+  },
+
+  requestCount (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, path)
+    }
+
+    if (this.params && this.params()) {
+      // console.log('params', route, this.params())
+      route = this.addParams(route, this.params())
+    } else {
+
+    }
+
+    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]
+    }
+  }
+}

package/src/list/search.js

@@ -1,30 +1,89 @@
 export default {
-  /**
-   * [search description]
-   * @param  {[type]} ev [description]
-   * @return {[type]}    [description]
-   */
-  search (ev) {
-    // console.log('search', ev)
-    var keywords = ev.target.value
-    if (keywords.length < 4) return
+  search (keywords, page, size, more) {
+    // console.log('search', keywords, page, size, more)
+
+    this.emit('searching')
+
+    if (more !== true) {
+      this.ui.body.innerHTML = ''
+      this.virtual.reset()
+      this.data = []
+      this.dataList = []
+      this.data = []
+      this.page = 1
+      this.stop = false
+    }
+
+    this.data = this.data || []
+    var signal = null
+
+    if (this.abortController) {
+      this.abortController.abort()
+      this.abortController = null
+    }
+
+    if (more !== true) {
+      this.abortController = new AbortController()
+      signal = this.abortController.signal
+    }
 
-    fetch(this.options.route.search + '?search=' + keywords).then((resp) => {
+    page = page || 1
+    size = size || this.options.list.size
+
+    if (page === 1) {
+      this.ui.body.scrolltop = 0
+    }
+
+    var route = this.buildRoute(page, size, 'search')
+
+    route = this.addParams(route, 'search=' + keywords)
+
+    // console.log('route', route)
+
+    if (more !== true && this.options.count) {
+      this.requestCount(route)
+    }
+
+    fetch(route, {signal}).then((resp) => {
       return resp.json()
-    }).then((list) => {
+    }).then((data) => {
+      // console.log('data', data)
+      this.storeData(data)
+
+      this.data = data || []
+
       // console.log('list', list)
-      this.store(list)
-      this.ui['search-list'].innerHTML = ''
-      this.renderSearch(list)
+
+      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)
     })
   },
 
-  renderSearch (list) {
-    console.log('render', list.length, list)
-    for (var i = 0; i < list.length; i++) {
-      var info = list[i]
-      this.renderItem(info, 'search')
-    }
+  cancelSearch () {
+    // console.log('cancel search')
+    this.ui.body.innerHTML = ''
   },
 
   /**
@@ -34,12 +93,10 @@ export default {
   toggleSearch (e) {
     e.stopPropagation()
     // console.log('toggle search', this.ui.body)
-    if (!this.ui['search-input'].classList.contains('show')) {
+    if (!this.ui['search-input'].root.classList.contains('show')) {
       this.showSearch()
-      if (this.ui.delete) { this.ui.delete.disable() }
     } else {
       this.hideSearch()
-      if (this.ui.delete) { this.ui.delete.enable() }
     }
   },
 
@@ -48,25 +105,51 @@ export default {
    * @return {[type]} [description]
    */
   showSearch () {
+    if (this.hideFilter) {
+      this.hideFilter()
+    }
+
     // console.log('showSearch')
+    this.mode = 'search'
+    this.root.classList.add('search-mode')
+
+    if (this.ui.search) {
+      this.ui.search.root.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'].input.focus()
+    }
 
-    this.ui['search'].root.classList.add('selected')
-    this.ui['search-input'].classList.add('show')
-    this.ui['search-list'].classList.add('show')
-    this.ui.body.classList.add('hide')
-    this.ui['search-input'].focus()
+    this.ui.body.innerHTML = ''
+
+    // this.ui['search-list'].classList.add('show')
+    // this.ui.body.classList.add('hide')
   },
 
   /**
    * [hideSearch description]
    * @return {[type]} [description]
    */
-  hideSearch () {
-    // console.log('hideSearch')
-    this.ui['search'].root.classList.remove('selected')
-    this.ui['search-input'].classList.remove('show')
-    this.ui['search-list'].classList.remove('show')
-    this.ui.body.classList.remove('hide')
-  }
+  hideSearch (notfetch) {
+    // console.log('hideSearch', notfetch)
+    this.mode = 'standard'
+    this.root.classList.remove('search-mode')
 
+    if (this.ui.search) {
+      this.ui.search.root.classList.remove('selected')
+    }
+    if (this.ui['search-input']) {
+      this.ui['search-input'].root.classList.remove('show')
+      this.ui['search-input'].input.value = ''
+    }
+    // this.ui['search-list'].classList.remove('show')
+    // this.ui.body.classList.remove('hide')
+    // console.log('request', notfetch)
+    if (!notfetch) {
+      this.request()
+    }
+  }
 }

package/src/list/select.js

@@ -1,62 +1,183 @@
 export default {
-  select (item) {
-    console.log('select', this.mode)
-
-    if (!item.dataset.id) return
+  select (item, silent) {
+    // console.log('select', item.dataset.id)
+    if (!item || !item.dataset.id) return
 
     var id = item.dataset.id
 
+    this.index = this.dataList.indexOf(id)
+    this.info = this.dataStore[id]
+
     if (this.options.preventSelectAgain && this.id === id) {
       return
     }
 
-    if (this.mode === 'create') {
-      // console.log('cancel create', this.newItem)
-      if (this.newItem) {
-        this.ui.body.removeChild(this.newItem)
-        this.newItem = null
-      }
-      this.mode = null
-    }
+    var selected = this.ui.body.querySelector('.selected')
+    if (selected) selected.classList.remove('selected')
 
     if (id) {
       this.highlight(item)
       this.item = item
       this.id = id
-      if (this.ui.delete) { this.ui.delete.enable() }
-      this.emit('select', id)
+
+      if (silent !== true) {
+        this.emit('select', id)
+        this.emit('selectItem', item)
+      }
     } else {
       this.id = null
-      if (this.item) {
-        this.item.classList.remove('selected')
-      }
-      this.ui.delete.disable()
+      this.item = null
     }
   },
 
   unselect () {
+    // console.log('unselect')
+    var item = this.ui.body.querySelector('[data-id="' + this.id + '"]') || this.item
     this.id = null
-    if (this.item) {
-      this.item.classList.remove('selected')
+    if (item) {
+      item.classList.remove('selected')
     }
+    this.index = null
     this.item = null
   },
 
-  next () {
-    // console.log('next', this.item)
-    if (this.item && this.item.nextSibling) {
-      this.select(this.item.nextSibling)
+  getItemById (id, silent) {
+    // console.log('selectItemById', id)
+    var item = this.ui.body.querySelector('[data-id="' + id + '"]')
+
+    if (!item) {
+      return null
     } else {
-      if (!this.item && this.ui.body.firstChild) {
-        this.select(this.ui.body.firstChild)
+      return item
+    }
+  },
+
+  selectById (id, silent) {
+    // console.log('selectById', id)
+
+    if (!this.dataList) {
+      return false
+    }
+
+    var index = this.dataList.indexOf(id)
+    if (index < 0) {
+      // console.log('can\'t selectid, not in the list')
+      return false
+    }
+
+    this.index = index
+    this.id = id
+
+    this.selectItemById(id, 'down')
+
+    return id
+  },
+
+  selectItemById (id, direction) {
+    // console.log('selectItemById', id)
+    var item = this.ui.body.querySelector('[data-id="' + id + '"]')
+
+    this.id = id
+
+    if (!item) {
+      var index = this.dataList.indexOf(id)
+      // console.log('not found in DOM, check in dataList', index)
+      if (index > -1) {
+        var listSize = this.options.list.size
+        var slice = listSize * index / listSize
+        // console.log('getSlice', slice)
       }
+
+      return
+    }
+
+    // console.log('item found', item)
+
+    // if (this.item) this.item.classList.remove('selected')
+
+    var selected = this.ui.body.querySelector('.selected')
+    if (selected) selected.classList.remove('selected')
+
+    this.item = item
+    item.classList.add('selected')
+
+    if (this.options.updatePosition === true) {
+      this.selectPosition(item, direction)
+    }
+
+    return item
+  },
+
+  selectPosition (item, direction) {
+    var offsetY = this.options.item.height
+    direction = direction || 'down'
+    // console.log('selectPosition', this.ui.body, direction)
+
+    this.coord = this.ui.body.getBoundingClientRect()
+
+    // console.log('coord', this.coord)
+
+    var itemTop = item.offsetTop + this.coord.top - this.ui.body.scrollTop
+
+    if (direction === 'down' && itemTop + this.options.item.height + offsetY - this.coord.y > this.coord.height) {
+      var top = this.ui.body.scrollTop + itemTop - this.coord.height - this.coord.y + this.options.item.height + offsetY
+      this.ui.body.scrollTo({
+        top: top,
+        left: 0
+        // behavior: 'smooth'
+      })
+    }
+
+    if (direction === 'up' && itemTop - offsetY < this.coord.top + this.coord.y) {
+      var top = this.ui.body.scrollTop + itemTop - this.coord.top - offsetY
+      // console.lof('scrollTo', top, item)
+      this.ui.body.scrollTo({
+        left: 0,
+        top: top
+        // behavior: 'smooth'
+      })
+    }
+  },
+
+  selectNext (silent) {
+    // console.log('selectNext', this.id)
+    var idx = this.dataList.indexOf(this.id)
+
+    var id = this.dataList[idx + 1]
+
+    // console.log('id', id)
+
+    if (id) {
+      this.id = id
+      // console.log('item', item)
+      this.selectItemById(id, 'down')
+
+      if (silent !== true) {
+        this.emit('select', id)
+      }
+      return id
+    } else {
+      return false
     }
   },
 
-  previous () {
-    // console.log('previous', this.item)
-    if (this.item && this.item.previousSibling) {
-      this.select(this.item.previousSibling)
+  selectPrevious (silent) {
+    // console.log('selectPrevious', this.id)
+    var idx = this.dataList.indexOf(this.id)
+
+    var id = this.dataList[idx - 1]
+
+    if (id) {
+      this.id = id
+      // console.log('item', item)
+      this.selectItemById(id, 'up')
+
+      if (silent !== true) {
+        this.emit('select', id)
+      }
+      return id
+    } else {
+      return false
     }
   },
 

package/src/list/status.js

@@ -1,14 +1,21 @@
 export default {
 
-  status (prop, info) {
+  statusDisplay (prop, info) {
+    // console.log('status', prop, info)
     if (prop === 'count') {
       this.statusCount(info)
     }
   },
 
-  statusCount (info) {
+  statusCount (count) {
+    // console.log('statusCount', count)
+    var items = 'items'
+    if (this.status && this.status.count && this.status.count.name) {
+      items = this.status.count.name
+    }
+
     if (this.ui.count) {
-      this.ui.count.innerHTML = info
+      this.ui.count.innerHTML = '<span class="number">' + count + '</span> ' + items
     }
   }
 }