material 0.9.12 → 0.9.14

package/src/list.new/select.js

@@ -0,0 +1,221 @@
+import clone from '../module/clone'
+
+export default {
+  select (item, silent) {
+    // console.log('select', item.dataset.id)
+    if (!item || !item.dataset.id) return
+
+    const id = item.dataset.id
+
+    this.index = this.dataList.indexOf(id)
+    this.info = this.dataStore[id]
+
+    if (this.options.preventSelectAgain && this.id === id) {
+      return
+    }
+
+    const selected = this.ui.body.querySelector('.selected')
+    if (selected) selected.classList.remove('selected')
+
+    if (id) {
+      this.highlight(item)
+      this.item = item
+      this.id = id
+
+      if (silent !== true) {
+        this.emit('select', id)
+        this.emit('selectItem', item)
+      }
+    } else {
+      this.id = null
+      this.item = null
+    }
+  },
+
+  unselect () {
+    // console.log('unselect')
+    const item = this.ui.body.querySelector('[data-id="' + this.id + '"]') || this.item
+    this.id = null
+    if (item) {
+      item.classList.remove('selected')
+    }
+    this.index = null
+    this.item = null
+  },
+
+  getInfoById (id) {
+    return clone(this.dataStore[id])
+  },
+
+  getSelectedInfo () {
+    return clone(this.dataStore[this.id])
+  },
+
+  getItemById (id, silent) {
+    // console.log('selectItemById', id)
+    const item = this.ui.body.querySelector('[data-id="' + id + '"]')
+
+    if (!item) {
+      return null
+    } else {
+      return item
+    }
+  },
+
+  selectById (id, silent) {
+    // console.log('selectById', id)
+
+    if (!this.dataList) {
+      return false
+    }
+
+    const 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)
+    const item = this.ui.body.querySelector('[data-id="' + id + '"]')
+
+    this.id = id
+
+    if (!item) {
+      const index = this.dataList.indexOf(id)
+      // console.log('not found in DOM, check in dataList', index)
+      if (index > -1) {
+        const listSize = this.options.list.size
+        const slice = listSize * index / listSize
+        // console.log('getSlice', slice)
+      }
+
+      return
+    }
+
+    // console.log('item found', item)
+
+    // if (this.item) this.item.classList.remove('selected')
+
+    const selected = this.ui.body.querySelector('.selected')
+    if (selected) selected.classList.remove('selected')
+
+    this.item = item
+    item.classList.add('selected')
+
+    if (this.options.updatePosition === true) {
+      // console.log('selectPosition', item)
+      this.selectPosition(item, direction)
+    }
+
+    return item
+  },
+
+  selectPosition (item, direction) {
+    const 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)
+
+    const 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,
+        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
+        // behavior: 'smooth'
+      })
+    }
+  },
+
+  selectNext (silent) {
+    // console.log('selectNext', this.id)
+    const idx = this.dataList.indexOf(this.id)
+
+    const 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
+    }
+  },
+
+  selectPrevious (silent) {
+    // console.log('selectPrevious', this.id)
+    const idx = this.dataList.indexOf(this.id)
+
+    const 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
+    }
+  },
+
+  scrollIntoView (item) {
+    // console.log('selectPrevious', this.id)
+    item = item || this.item
+
+    if (item) {
+      item.scrollIntoView({ behavior: 'instant', block: 'end', inline: 'nearest' })
+    }
+  },
+
+  highlight (item) {
+    if (this.item) {
+      this.item.classList.remove('selected')
+    }
+    item.classList.add('selected')
+  },
+
+  selectCreated (info, item) {
+    // console.log('select create', info, this.item)
+    if (this.item) {
+      this.item.classList.remove('selected')
+    }
+
+    item.classList.add('selected')
+
+    this.emit('selectCreate', info)
+  }
+}

package/src/list.new/status.js

@@ -0,0 +1,21 @@
+export default {
+
+  statusDisplay (prop, info) {
+    // console.log('status', prop, info)
+    if (prop === 'count') {
+      this.statusCount(info)
+    }
+  },
+
+  statusCount (count) {
+    // console.log('statusCount', count)
+    let 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 = '<span class="number">' + count + '</span> ' + items
+    }
+  }
+}

package/src/list.new/update.js

@@ -0,0 +1,75 @@
+import { create } from '../module/layout'
+
+export default {
+  update (info) {
+    // console.log('update', info)
+
+    this.getUpdatedInfo(info[this.dataId])
+  },
+
+  updateInfo (info) {
+    // console.log('update', info)
+    this.dataStore[info._id] = info
+
+    // update item in the list if visible
+    const item = this.ui.body.querySelector('[data-id="' + info[this.dataId] + '"]')
+    if (item) {
+      item.innerHTML = ''
+      const layout = create(this.options.layout.item, item)
+
+      this.renderInfo(layout, info)
+    }
+  },
+
+  getUpdatedIndex (id) {
+    // console.log('getUpdatedIndex', id)
+    let index = null
+    for (let i = 0; i < this.data.length; i++) {
+      // console.log('--', this.data[i][this.dataId], id)
+      if (this.data[i][this.dataId] === id) {
+        index = i
+        break
+      }
+    }
+
+    return index
+  },
+
+  getUpdatedInfo (id) {
+    // console.log('getUpdatedInfo', id)
+    const index = this.getUpdatedIndex(id)
+    // console.log('index', index)
+    const route = this.buildRoute(index + 1, 1)
+    // console.log('roote', route)
+    fetch(route).then((resp) => {
+      return resp.json()
+    }).then((data) => {
+      // console.log('info', data)
+      this.updateUpdatedInfo(data[0], index, id)
+    })
+  },
+
+  updateUpdatedInfo (info, index, id) {
+    // console.log('updateUpdatedInfo', info, index)
+
+    if (!info) return
+    if (info[this.dataId] !== id) return
+
+    this.info = info
+
+    // update datalist
+    this.data[index] = info
+
+    // update datastore
+    this.dataStore[info[this.dataId]] = info
+
+    // update item if on the screen
+    const item = this.ui.body.querySelector('[data-id="' + info[this.dataId] + '"]')
+    if (item) {
+      item.innerHTML = ''
+      const layout = create(this.options.layout.item, item)
+
+      this.renderInfo(layout, info)
+    }
+  }
+}

package/src/list.new/virtual.js

@@ -0,0 +1,186 @@
+// based on https://sergimansilla.com/blog/virtual-scrolling/
+
+// Import necessary modules
+import passiveEvents from '../module/passive' // Import the passiveEvents utility.
+import emitter from '../module/emitter' // Import the emitter module.
+
+// Define the VirtualList class
+class VirtualList {
+  constructor (options) {
+    // Initialize the class with options passed to the constructor.
+    this.options = { ...(options || {}) } // Spread operator to merge options with default values.
+    Object.assign(this, emitter) // Assign emitter methods to the instance.
+
+    // Destructure options for easier access to properties.
+    const { itemHeight = 0, size = 0, items = [], render, container } = options
+
+    // Initialize instance variables with default or provided values.
+    this.itemHeight = itemHeight
+    this.next = false
+    this.size = size
+    this.chunkSize = size
+    this.items = items
+    this.render = render
+    this.scroller = VirtualList.createScroller()
+    this.container = container
+
+    // Add 'virtual' class to the container element.
+    this.container.classList.add('virtual')
+  }
+
+  // Method to render a chunk of items within the visible range.
+  renderChunk (node, from, number) {
+    console.error('renderChunck', from, number)
+    const fragment = document.createDocumentFragment()
+    fragment.appendChild(this.scroller)
+
+    let last = from + number
+    if (last > this.count) last = this.count
+
+    for (let i = from; i < last; i++) {
+      const item = this.render(i)
+
+      // Position the item absolutely based on its index and item height.
+      item.style.position = 'absolute'
+      item.style.top = i * this.itemHeight + 'px'
+      if (i === last) item.classList.add('last')
+      fragment.appendChild(item)
+    }
+
+    node.innerHTML = ''
+    node.appendChild(fragment)
+
+    // Emit 'next' event if applicable.
+    // console.log('last', last)
+    // console.log('count', this.count)
+    // console.log('next', this.next)
+    // console.log('size', this.size)
+
+    if (this.next && last && last > (this.count - this.size / 2)) {
+      this.emit('next', this.count)
+    }
+
+    this.next = true
+  }
+
+  // Method to set the items and render the initial chunk.
+  set (items, info) {
+    console.error('set', items, info.page, info.size)
+
+    this.next = false
+    this.items = items
+    this.count = items.length
+
+    if (this.count < 1 || this.count === undefined) return
+
+    // this.container.innerHTML = ''
+    // this.container.scrollTop = 0
+
+    this.itemsByScreen = info.size / 2
+
+    let size = this.itemsByScreen * 4
+    this.renderChunk(this.container, (info.page - 1) * size, size)
+
+    this.size = size
+
+    this.emit('size', size)
+
+    let lastRepaintY
+    const maxBuffer = this.itemsByScreen * this.itemHeight
+
+    // Add a scroll event listener to render items dynamically.
+    const onScroll = (e) => {
+      const scrollTop = e.target.scrollTop
+      console.log('scrollTop', scrollTop)
+      const first = parseInt(scrollTop / this.itemHeight) - this.itemsByScreen
+
+      size = this.itemsByScreen * 4
+
+      if (!lastRepaintY || Math.abs(scrollTop - lastRepaintY) > maxBuffer) {
+        this.renderChunk(this.container, first, size)
+        lastRepaintY = scrollTop
+      }
+
+      const progress = Math.ceil((scrollTop / this.itemHeight) + this.itemsByScreen) - 1
+      this.emit('progress', progress)
+    }
+
+    if (!this.scrollEvents) {
+      // Add scroll event listener with passive option if supported.
+      this.container.addEventListener(
+        'scroll',
+        onScroll,
+        passiveEvents() ? { passive: true } : false
+      )
+      this.scrollEvents = true
+    }
+  }
+
+  // Method to add items and update the container height.
+  add (items, info) {
+    console.error('add', items.length, info)
+    this.items = items || this.items
+
+    if (!this.items) return
+
+    this.count = this.items.length
+  }
+
+  // Method to update the items and re-render the visible chunk.
+  update (items) {
+    console.error('update', items.length)
+    this.items = items || this.items
+
+    if (!this.items) return
+
+    this.count = this.items.length
+    const cachedItemsLen = this.itemsByScreen * 4
+    const scrollTop = this.container.scrollTop
+    const height = this.itemHeight * this.count
+
+    // this.scroller.style.height = height + 'px'
+
+    let first = parseInt(scrollTop / this.itemHeight) - this.itemsByScreen
+    first = first < 0 ? 0 : first
+
+    this.renderChunk(this.container, first, cachedItemsLen)
+  }
+
+  // Method to reset the items and container to an initial state.
+  reset () {
+    console.log('reset')
+    this.items = []
+    this.count = 0
+
+    this.container.scrollTop = 0
+
+    this.scroller.style.height = '0'
+  }
+
+  setCount (count) {
+    console.log('setCount', count, this.itemHeight)
+    this.totalCount = count
+    const height = this.itemHeight * count
+
+    this.container.height = height + 'px'
+
+    console.log('scroller height', height)
+    this.scroller.style.height = height + 'px'
+  }
+
+  // Method to get the total count of items.
+  getCount () {
+    console.log('getCount', this.totalCount)
+    return this.totalCount
+  }
+
+  // Static method to create a scroller element.
+  static createScroller () {
+    const scroller = document.createElement('div')
+    scroller.classList.add('scroller')
+    return scroller
+  }
+}
+
+// Export the VirtualList class as the default export.
+export default VirtualList

package/src/list.new/virtual.new.js

@@ -0,0 +1,213 @@
+// based on https://sergimansilla.com/blog/virtual-scrolling/
+
+// Import necessary modules
+import passiveEvents from '../module/passive' // Import the passiveEvents utility.
+import emitter from '../module/emitter' // Import the emitter module.
+
+// Define the VirtualList class
+class VirtualList {
+  constructor (options) {
+    // Initialize the class with options passed to the constructor.
+    this.options = { ...(options || {}) } // Spread operator to merge options with default values.
+    Object.assign(this, emitter) // Assign emitter methods to the instance.
+
+    // Destructure options for easier access to properties.
+    const { itemHeight = 0, size = 0, items = [], render, container } = options
+
+    // Initialize instance variables with default or provided values.
+    this.itemHeight = itemHeight
+    this.next = false
+    this.size = size
+    this.chunkSize = size
+    this.items = items
+    this.render = render
+    this.scroller = VirtualList.createScroller()
+    this.container = container
+
+    // Get the offset height of the container.
+    this.setOffset()
+
+    // Add a window resize event listener to update the offset height.
+    window.addEventListener('resize', () => {
+      clearTimeout(this.resizeTimeout)
+
+      this.resizeTimeout = setTimeout(() => {
+        this.setOffset()
+      }, 50)
+    })
+
+    // Add 'virtual' class to the container element.
+    this.container.classList.add('virtual')
+  }
+
+  // Method to render a chunk of items within the visible range.
+  renderChunk (node, from, number) {
+    const fragment = document.createDocumentFragment()
+    fragment.appendChild(this.scroller)
+
+    let last = from + number
+    if (last > this.count) last = this.count
+
+    for (let i = from; i < last; i++) {
+      const item = this.render(i)
+
+      // Position the item absolutely based on its index and item height.
+      item.style.position = 'absolute'
+      item.style.top = i * this.itemHeight + 'px'
+      fragment.appendChild(item)
+    }
+
+    node.innerHTML = ''
+    node.appendChild(fragment)
+
+    // Emit 'next' event if applicable.
+    // console.log('last', last)
+    // console.log('count', this.count)
+    // console.log('next', this.next)
+    // console.log('size', this.size)
+
+    if (this.next && last && last > (this.count - this.size / 2)) {
+      this.emit('next', this.count)
+    }
+
+    this.next = true
+  }
+
+  // Method to set the items and render the initial chunk.
+  set (items) {
+    this.next = false
+    this.items = items
+    this.count = items.length
+
+    if (this.count < 1 || this.count === undefined) return
+
+    this.container.innerHTML = ''
+    this.container.scrollTop = 0
+
+    const height = this.itemHeight * this.count
+
+    this.scroller.style.height = height + 'px'
+
+    this.itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+
+    let size = this.itemsByScreen * 4
+    this.renderChunk(this.container, 0, size)
+
+    this.size = size
+
+    this.emit('size', size)
+
+    let lastRepaintY
+    const maxBuffer = this.itemsByScreen * this.itemHeight
+
+    // Add a scroll event listener to render items dynamically.
+    const onScroll = (e) => {
+      const scrollTop = e.target.scrollTop
+      const first = parseInt(scrollTop / this.itemHeight) - this.itemsByScreen
+
+      size = this.itemsByScreen * 4
+
+      if (!lastRepaintY || Math.abs(scrollTop - lastRepaintY) > maxBuffer) {
+        this.renderChunk(this.container, first, size)
+        lastRepaintY = scrollTop
+      }
+
+      const progress = Math.ceil((scrollTop / this.itemHeight) + this.itemsByScreen) - 1
+      this.emit('progress', progress)
+    }
+
+    if (!this.scrollEvents) {
+      // Add scroll event listener with passive option if supported.
+      this.container.addEventListener(
+        'scroll',
+        onScroll,
+        passiveEvents() ? { passive: true } : false
+      )
+      this.scrollEvents = true
+    }
+  }
+
+  // Method to update the items and re-render the visible chunk.
+  update (items) {
+    this.items = items || this.items
+
+    if (!this.items) return
+
+    this.count = this.items.length
+    const cachedItemsLen = this.itemsByScreen * 4
+    const scrollTop = this.container.scrollTop
+    const height = this.itemHeight * this.count
+
+    this.scroller.style.height = height + 'px'
+
+    let first = parseInt(scrollTop / this.itemHeight) - this.itemsByScreen
+    first = first < 0 ? 0 : first
+
+    this.renderChunk(this.container, first, cachedItemsLen)
+  }
+
+  // Method to add items and update the container height.
+  add (items) {
+    this.items = items || this.items
+
+    if (!this.items) return
+
+    this.count = this.items.length
+    const height = this.itemHeight * this.count
+
+    this.scroller.style.height = height + 'px'
+  }
+
+  // Method to reset the items and container to an initial state.
+  reset () {
+    this.items = []
+    this.count = 0
+
+    this.container.scrollTop = 0
+
+    this.scroller.style.height = '0'
+  }
+
+  // Method to set the offset height of the container.
+  setOffset (info) {
+    this.offsetHeight = this.container.offsetHeight
+    if (this.offsetHeight < 1) {
+      this.offsetHeight = window.innerHeight ||
+        document.documentElement.clientHeight ||
+        document.body.clientHeight
+    }
+
+    this.itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+
+    const itemsByScreen = Math.ceil(this.offsetHeight / this.itemHeight)
+    const size = itemsByScreen * 4
+
+    return size
+  }
+
+  setCount = function (count) {
+    console.error('setCount', count)
+    this.count = count
+    const height = this.itemHeight * this.count
+
+    this.container.height = height + 'px'
+
+    // console.log('scroller height', height)
+    this.scroller.style.height = height + 'px'
+  }
+
+  // Method to get the total count of items.
+  getCount () {
+    return this.count
+  }
+
+  // Static method to create a scroller element.
+  static createScroller () {
+    const scroller = document.createElement('div')
+    scroller.classList.add('scroller')
+    return scroller
+  }
+}
+
+// Export the VirtualList class as the default export.
+export default VirtualList