Add:Lazy bookshelf

2026-08-27 22:04:08 +02:00 · 2021-12-04 19:56:29 -06:00
parent 446c6756ed
commit 37d3021302
43 changed files with 2264 additions and 666 deletions
@@ -0,0 +1,87 @@
+import Vue from 'vue'
+import LazyBookCard from '@/components/cards/LazyBookCard'
+import LazySeriesCard from '@/components/cards/LazySeriesCard'
+import LazyCollectionCard from '@/components/cards/LazyCollectionCard'
+
+export default {
+  data() {
+    return {
+      cardsHelpers: {
+        mountEntityCard: this.mountEntityCard
+      }
+    }
+  },
+  methods: {
+    getComponentClass() {
+      if (this.entityName === 'series') return Vue.extend(LazySeriesCard)
+      if (this.entityName === 'collections') return Vue.extend(LazyCollectionCard)
+      return Vue.extend(LazyBookCard)
+    },
+    async mountEntityCard(index) {
+      var shelf = Math.floor(index / this.entitiesPerShelf)
+      var shelfEl = document.getElementById(`shelf-${shelf}`)
+      if (!shelfEl) {
+        console.error('invalid shelf', shelf, 'book index', index)
+        return
+      }
+      this.entityIndexesMounted.push(index)
+      if (this.entityComponentRefs[index]) {
+        var bookComponent = this.entityComponentRefs[index]
+        shelfEl.appendChild(bookComponent.$el)
+        if (this.isSelectionMode) {
+          bookComponent.setSelectionMode(true)
+          if (this.selectedAudiobooks.includes(bookComponent.audiobookId) || this.isSelectAll) {
+            bookComponent.selected = true
+          } else {
+            bookComponent.selected = false
+          }
+        } else {
+          bookComponent.setSelectionMode(false)
+        }
+        bookComponent.isHovering = false
+        return
+      }
+      var shelfOffsetY = this.isBookEntity ? 24 : 16
+      var row = index % this.entitiesPerShelf
+      var shelfOffsetX = row * this.totalEntityCardWidth + this.bookshelfMarginLeft
+
+      var ComponentClass = this.getComponentClass()
+      var props = {
+        index,
+        width: this.entityWidth,
+        height: this.entityHeight,
+        bookCoverAspectRatio: this.bookCoverAspectRatio
+      }
+      if (this.entityName === 'series-books') props.showVolumeNumber = true
+
+      var _this = this
+      var instance = new ComponentClass({
+        propsData: props,
+        created() {
+          // this.$on('edit', (entity) => {
+          //   if (_this.editEntity) _this.editEntity(entity)
+          // })
+          // this.$on('select', (entity) => {
+          //   if (_this.selectEntity) _this.selectEntity(entity)
+          // })
+        }
+      })
+      this.entityComponentRefs[index] = instance
+
+      instance.$mount()
+      instance.$el.style.transform = `translate3d(${shelfOffsetX}px, ${shelfOffsetY}px, 0px)`
+      instance.$el.classList.add('absolute', 'top-0', 'left-0', 'mx-3')
+      shelfEl.appendChild(instance.$el)
+
+      if (this.entities[index]) {
+        instance.setEntity(this.entities[index])
+      }
+      if (this.isSelectionMode) {
+        instance.setSelectionMode(true)
+        if (instance.audiobookId && this.selectedAudiobooks.includes(instance.audiobookId) || this.isSelectAll) {
+          instance.selected = true
+        }
+      }
+    },
+  }
+}