material 0.9.12 → 0.9.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.9.12",
+  "version": "0.9.14",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
   "main": "index.js",
   "type": "module",

package/src/class/control.js

@@ -14,18 +14,15 @@ class Control extends Component {
   }
 
   on (event, listener) {
-    if (!this.events[event]) {
-      this.events[event] = []
-    }
+    this.events[event] ??= []
     this.events[event].push(listener)
 
     return this
   }
 
   emit (event, ...args) {
-    if (this.events[event]) {
-      this.events[event].forEach(listener => listener.apply(this, args))
-    }
+    this.events?.[event]?.forEach(listener => listener.apply(this, args))
+
     return this
   }
 }

package/src/list/data.js

@@ -0,0 +1,3 @@
+export default {
+
+}

package/src/list/request.js

@@ -1,4 +1,15 @@
 export default {
+  requestById (id, cb) {
+    // log.error('requestById', id)
+    if (!id) return
+    return this.getPage(id, (data) => {
+      // log.error('getPage', data)
+      const page = data?.page || null
+      if (data?.count) this.virtual.setCount(data?.count)
+      this.request(page, null, null, cb)
+    })
+  },
+
   request (page, size, more, cb) {
     // console.log('request', page, size, more, cb)
     if (more !== true) {

package/src/list/select.js

@@ -44,7 +44,12 @@ export default {
   },
 
   getInfoById (id) {
-    return clone(this.dataStore[id])
+    // console.log('getInfoById', this.dataStore)
+    let info = null
+
+    if (this.dataStore) info = clone(this.dataStore[id])
+
+    return info
   },
 
   getSelectedInfo () {

package/src/list.new/add.js

@@ -0,0 +1,55 @@
+
+export default {
+  add (info, context, silent) {
+  // console.log('list add', info)
+
+    if (this.options.reverse) {
+      context = 'bottom'
+    }
+
+    if (!this.dataStore) return
+    context = context !== undefined ? context : null
+
+    this.dataList = this.dataList || []
+
+    if (typeof context === 'number') {
+      if (this.data) {
+        this.data.splice(context, 0, info)
+      } else {
+        console.log('error no data')
+      }
+
+      if (this.dataList) {
+        this.dataList.splice(context, 0, info[this.dataId])
+      }
+    } else if (context === 'bottom') {
+      if (this.data) { this.data.push(info) }
+      if (this.dataList) { this.dataList.push(info[this.dataId]) }
+    } else {
+      if (this.data) {
+        this.data.unshift(info)
+      } else {
+        console.log('error no data')
+      }
+
+      if (this.dataList) { this.dataList.unshift(info[this.dataId]) }
+    }
+
+    this.dataStore[info[this.dataId]] = info
+    // console.log('data', this.data.length, this.data)
+
+    if (window.getComputedStyle(this.element, null).display === 'none') {
+      this.virtual.items = this.data
+    } else {
+      this.virtual.update(this.data)
+    }
+
+    if (silent !== true) this.emit('added', info, context)
+
+    // this.ui.body.scrollTo(0, this.ui.body.scrollTop + 1)
+    // this.ui.body.scrollTo(0, this.ui.body.scrollTop - 1)
+
+    return info
+  }
+
+}

package/src/list.new/build.js

@@ -0,0 +1,139 @@
+import scrollbar from '../module/scrollbar'
+import dataset from '../module/dataset'
+
+import { create } from '../module/layout'
+import Virtual from './virtual'
+import Loading from '../loading'
+
+export default {
+  build (data) {
+    // console.log('options', this.options.name)
+
+    this.dataId = this.options.dataId || '_id'
+
+    this.element = document.createElement('div')
+    this.element.classList.add('list')
+
+    if (this.options.class) {
+      this.addClass(this.options.class)
+    }
+
+    this.element.addEventListener('click', (e) => {
+      e.stopPropagation()
+    })
+
+    if (this.options.name) {
+      this.name = this.options.name
+    }
+
+    if (this.options.data) {
+      dataset(this.element, this.options.data)
+    }
+
+    this.layout = create(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.element)
+    }
+
+    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.classList.add('offset' + scrollbarOffset)
+    }
+
+    this.buildVirtual()
+  },
+
+  addClass (c) {
+    const list = c.split(' ')
+
+    for (let i = 0; i < list.length; i++) {
+      this.element.classList.add(list[i])
+    }
+  },
+
+  buildVirtual () {
+    // console.log('buildVirtual', this.options.class)
+    let 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])
+      }
+    }).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) {
+        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
+    // })
+    //
+  },
+
+  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.new/click.js

@@ -0,0 +1,40 @@
+
+export default {
+  click (e) {
+    // console.log('click', e.target)
+    e.stopPropagation()
+
+    if (e.target === e.currentTarget) {
+      return
+    }
+
+    const target = '[data-id]'
+    let item = e.target
+    let i = 0
+
+    while (item && !item.matches(target)) {
+      // console.log('item', item)
+      if (i > 10) {
+        item = null
+        break
+      }
+      item = item.parentNode
+      i++
+    }
+
+    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.new/collection.js

@@ -0,0 +1,30 @@
+class Collection {
+  constructor () {
+    this.items = {}
+    this.ids = []
+  }
+
+  add (item) {
+    const id = item[this.dataId]
+    this.items[id] = item
+    this.ids.push(id)
+  }
+
+  get (id) {
+    return this.items[id] || null
+  }
+
+  getIndex (id) {
+    return this.ids.indexOf(id)
+  }
+
+  getPage (page, pageSize) {
+    const start = (page - 1) * pageSize
+    const end = start + pageSize
+    return this.ids.slice(start, end).map(id => this.items[id])
+  }
+
+  getCount () {
+    return this.ids.length
+  }
+}

package/src/list.new/create.js

@@ -0,0 +1,45 @@
+export default {
+  create () {
+    // 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.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', 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)
+    this.ui.body.removeChild(this.newItem)
+    this.mode = null
+    if (this.item && this.info) {
+      this.select(this.info, this.item)
+    }
+  }
+}

package/src/list.new/data.js

@@ -0,0 +1,16 @@
+export default {
+  storeData (list, more) {
+    console.log('storeData', list.length, more)
+    if (more !== true) {
+      this.dataList = []
+    }
+
+    // console.log('storeData', this.dataStore)
+    this.dataStore = this.dataStore || {}
+
+    for (let i = 0; i < list.length; i++) {
+      this.dataList.push(list[i][this.dataId])
+      this.dataStore[list[i][this.dataId]] = list[i]
+    }
+  }
+}

package/src/list.new/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.element.getBoundingClientRect()
+
+    this.element.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.element.style.display)
+
+    if (!this.element) return
+
+    this.element.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.element) {
+      this.element.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.element && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element)
+      this.element = null
+    }
+
+    if (this.underlay && this.underlay.parentNode) {
+      this.underlay.parentNode.removeChild(this.underlay)
+    }
+
+    this.emit('remove')
+    return this
+  }
+}

package/src/list.new/empty.js

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

package/src/list.new/filter.js

@@ -0,0 +1,114 @@
+
+export default {
+  initFilter () {
+    this.filter = this.extractFilter(this.ui)
+
+    for (const 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')
+    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() !== [] */) {
+          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.element.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.element.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 (const name in this.filter) {
+      if (this.filter.hasOwnProperty(name)) {
+        this.filter[name].set('')
+      }
+    }
+
+    this.request()
+  },
+
+  extractFilter (object) {
+    // console.log('extractField', object)
+
+    const filter = {}
+
+    for (const property in object) {
+      if (object.hasOwnProperty(property)) {
+        const str = property.split(/\./)
+
+        if (str[0] === 'filter' && str[1] !== undefined) {
+          const name = property.substr(7, property.length)
+
+          filter[name] = object[property]
+        }
+      }
+    }
+
+    return filter
+  }
+}

package/src/list.new/image.js

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

package/src/list.new/init.js

@@ -0,0 +1,6 @@
+export default {
+  init () {
+    this.build()
+    events.attach(this.options.events, this)
+  }
+}

package/src/list.new/load.js

@@ -0,0 +1,9 @@
+
+export default {
+  load () {
+    console.error('load', this.page)
+    this.page = this.page || 2
+    this.page++
+    this.request(this.page)
+  }
+}

package/src/list.new/remove.js

@@ -0,0 +1,22 @@
+export default {
+  remove (id) {
+    // console.log('remove', id, this.dataList)
+    // console.log('datalist', this.dataList)
+
+    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)
+  }
+}