mirror of
				https://github.com/advplyr/audiobookshelf.git
				synced 2025-10-27 11:18:14 +01:00 
			
		
		
		
	Remove now-unsued slider components
This commit is contained in:
		
							parent
							
								
									e06ab594e1
								
							
						
					
					
						commit
						2819317924
					
				| @ -1,112 +0,0 @@ | |||||||
| <template> |  | ||||||
|   <div class="w-full"> |  | ||||||
|     <div class="flex items-center py-3"> |  | ||||||
|       <slot /> |  | ||||||
|       <div class="flex-grow" /> |  | ||||||
|       <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft"> |  | ||||||
|         <span class="material-icons text-2xl">chevron_left</span> |  | ||||||
|       </button> |  | ||||||
|       <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight"> |  | ||||||
|         <span class="material-icons text-2xl">chevron_right</span> |  | ||||||
|       </button> |  | ||||||
|     </div> |  | ||||||
|     <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled"> |  | ||||||
|       <div class="flex space-x-4" :style="{ height: height + 'px' }"> |  | ||||||
|         <template v-for="(item, index) in items"> |  | ||||||
|           <cards-author-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :author="item" :height="cardHeight" :width="cardWidth" class="relative" @edit="editAuthor" @hook:updated="setScrollVars" /> |  | ||||||
|         </template> |  | ||||||
|       </div> |  | ||||||
|     </div> |  | ||||||
|   </div> |  | ||||||
| </template> |  | ||||||
| 
 |  | ||||||
| <script> |  | ||||||
| export default { |  | ||||||
|   props: { |  | ||||||
|     items: { |  | ||||||
|       type: Array, |  | ||||||
|       default: () => [] |  | ||||||
|     }, |  | ||||||
|     height: { |  | ||||||
|       type: Number, |  | ||||||
|       default: 192 |  | ||||||
|     }, |  | ||||||
|     bookshelfView: { |  | ||||||
|       type: Number, |  | ||||||
|       default: 1 |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   data() { |  | ||||||
|     return { |  | ||||||
|       isScrollable: false, |  | ||||||
|       canScrollLeft: false, |  | ||||||
|       canScrollRight: false, |  | ||||||
|       clientWidth: 0 |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   computed: { |  | ||||||
|     bookCoverAspectRatio() { |  | ||||||
|       return this.$store.getters['libraries/getBookCoverAspectRatio'] |  | ||||||
|     }, |  | ||||||
|     cardScaleMulitiplier() { |  | ||||||
|       return this.height / 192 |  | ||||||
|     }, |  | ||||||
|     cardHeight() { |  | ||||||
|       return this.height |  | ||||||
|     }, |  | ||||||
|     cardWidth() { |  | ||||||
|       return this.cardHeight / this.bookCoverAspectRatio / 1.25 |  | ||||||
|     }, |  | ||||||
|     booksPerPage() { |  | ||||||
|       return Math.floor(this.clientWidth / (this.cardWidth + 16)) |  | ||||||
|     }, |  | ||||||
|     isSelectionMode() { |  | ||||||
|       return this.$store.getters['globals/getIsBatchSelectingMediaItems'] |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   methods: { |  | ||||||
|     editAuthor(author) { |  | ||||||
|       this.$store.commit('globals/showEditAuthorModal', author) |  | ||||||
|     }, |  | ||||||
|     scrolled() { |  | ||||||
|       this.setScrollVars() |  | ||||||
|     }, |  | ||||||
|     scrollRight() { |  | ||||||
|       if (!this.canScrollRight) return |  | ||||||
|       const slider = this.$refs.slider |  | ||||||
|       if (!slider) return |  | ||||||
|       const scrollAmount = this.booksPerPage * this.cardWidth |  | ||||||
|       const maxScrollLeft = slider.scrollWidth - slider.clientWidth |  | ||||||
| 
 |  | ||||||
|       const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount) |  | ||||||
|       slider.scrollLeft = newScrollLeft |  | ||||||
|     }, |  | ||||||
|     scrollLeft() { |  | ||||||
|       if (!this.canScrollLeft) return |  | ||||||
|       const slider = this.$refs.slider |  | ||||||
|       if (!slider) return |  | ||||||
| 
 |  | ||||||
|       const scrollAmount = this.booksPerPage * this.cardWidth |  | ||||||
| 
 |  | ||||||
|       const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount) |  | ||||||
|       slider.scrollLeft = newScrollLeft |  | ||||||
|     }, |  | ||||||
|     setScrollVars() { |  | ||||||
|       const slider = this.$refs.slider |  | ||||||
|       if (!slider) return |  | ||||||
|       const { scrollLeft, scrollWidth, clientWidth } = slider |  | ||||||
|       const scrollPercent = (scrollLeft + clientWidth) / scrollWidth |  | ||||||
| 
 |  | ||||||
|       this.clientWidth = clientWidth |  | ||||||
|       this.isScrollable = scrollWidth > clientWidth |  | ||||||
|       this.canScrollRight = scrollPercent < 1 |  | ||||||
|       this.canScrollLeft = scrollLeft > 0 |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   updated() { |  | ||||||
|     this.setScrollVars() |  | ||||||
|   }, |  | ||||||
|   mounted() {}, |  | ||||||
|   beforeDestroy() {} |  | ||||||
| } |  | ||||||
| </script> |  | ||||||
| @ -1,161 +0,0 @@ | |||||||
| <template> |  | ||||||
|   <div class="w-full"> |  | ||||||
|     <div class="flex items-center py-3"> |  | ||||||
|       <slot /> |  | ||||||
|       <div class="flex-grow" /> |  | ||||||
|       <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft"> |  | ||||||
|         <span class="material-icons text-2xl">chevron_left</span> |  | ||||||
|       </button> |  | ||||||
|       <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight"> |  | ||||||
|         <span class="material-icons text-2xl">chevron_right</span> |  | ||||||
|       </button> |  | ||||||
|     </div> |  | ||||||
|     <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled"> |  | ||||||
|       <div class="flex space-x-4" :style="{ height: height + 'px' }"> |  | ||||||
|         <template v-for="(item, index) in items"> |  | ||||||
|           <cards-lazy-book-card |  | ||||||
|             :key="item.recentEpisode.id" |  | ||||||
|             :ref="`slider-episode-${item.recentEpisode.id}`" |  | ||||||
|             :index="index" |  | ||||||
|             :book-mount="item" |  | ||||||
|             :height="cardHeight" |  | ||||||
|             :width="cardWidth" |  | ||||||
|             :book-cover-aspect-ratio="bookCoverAspectRatio" |  | ||||||
|             :bookshelf-view="bookshelfView" |  | ||||||
|             :continue-listening-shelf="continueListeningShelf" |  | ||||||
|             class="relative" |  | ||||||
|             @edit="editEpisode" |  | ||||||
|             @editPodcast="editPodcast" |  | ||||||
|             @select="selectItem" |  | ||||||
|             @hook:updated="setScrollVars" |  | ||||||
|           /> |  | ||||||
|         </template> |  | ||||||
|       </div> |  | ||||||
|     </div> |  | ||||||
|   </div> |  | ||||||
| </template> |  | ||||||
| 
 |  | ||||||
| <script> |  | ||||||
| export default { |  | ||||||
|   props: { |  | ||||||
|     items: { |  | ||||||
|       type: Array, |  | ||||||
|       default: () => [] |  | ||||||
|     }, |  | ||||||
|     height: { |  | ||||||
|       type: Number, |  | ||||||
|       default: 192 |  | ||||||
|     }, |  | ||||||
|     bookshelfView: { |  | ||||||
|       type: Number, |  | ||||||
|       default: 1 |  | ||||||
|     }, |  | ||||||
|     continueListeningShelf: Boolean |  | ||||||
|   }, |  | ||||||
|   data() { |  | ||||||
|     return { |  | ||||||
|       isScrollable: false, |  | ||||||
|       canScrollLeft: false, |  | ||||||
|       canScrollRight: false, |  | ||||||
|       clientWidth: 0 |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   computed: { |  | ||||||
|     bookCoverAspectRatio() { |  | ||||||
|       return this.$store.getters['libraries/getBookCoverAspectRatio'] |  | ||||||
|     }, |  | ||||||
|     cardScaleMulitiplier() { |  | ||||||
|       return this.height / 192 |  | ||||||
|     }, |  | ||||||
|     cardHeight() { |  | ||||||
|       return this.height - 40 * this.cardScaleMulitiplier |  | ||||||
|     }, |  | ||||||
|     cardWidth() { |  | ||||||
|       return this.cardHeight / this.bookCoverAspectRatio |  | ||||||
|     }, |  | ||||||
|     booksPerPage() { |  | ||||||
|       return Math.floor(this.clientWidth / (this.cardWidth + 16)) |  | ||||||
|     }, |  | ||||||
|     isSelectionMode() { |  | ||||||
|       return this.$store.getters['globals/getIsBatchSelectingMediaItems'] |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   methods: { |  | ||||||
|     clearSelectedEntities() { |  | ||||||
|       this.updateSelectionMode(false) |  | ||||||
|     }, |  | ||||||
|     editEpisode({ libraryItem, episode }) { |  | ||||||
|       this.$store.commit('setSelectedLibraryItem', libraryItem) |  | ||||||
|       this.$store.commit('globals/setSelectedEpisode', episode) |  | ||||||
|       this.$store.commit('globals/setShowEditPodcastEpisodeModal', true) |  | ||||||
|     }, |  | ||||||
|     editPodcast(libraryItem) { |  | ||||||
|       var itemIds = this.items.map((e) => e.id) |  | ||||||
|       this.$store.commit('setBookshelfBookIds', itemIds) |  | ||||||
|       this.$store.commit('showEditModal', libraryItem) |  | ||||||
|     }, |  | ||||||
|     selectItem(payload) { |  | ||||||
|       this.$emit('selectEntity', payload) |  | ||||||
|     }, |  | ||||||
|     itemSelectedEvt() { |  | ||||||
|       this.updateSelectionMode(this.isSelectionMode) |  | ||||||
|     }, |  | ||||||
|     updateSelectionMode(val) { |  | ||||||
|       const selectedMediaItems = this.$store.state.globals.selectedMediaItems |  | ||||||
| 
 |  | ||||||
|       this.items.forEach((ent) => { |  | ||||||
|         let component = this.$refs[`slider-episode-${ent.recentEpisode.id}`] |  | ||||||
|         if (!component || !component.length) return |  | ||||||
|         component = component[0] |  | ||||||
|         component.setSelectionMode(val) |  | ||||||
|         component.selected = selectedMediaItems.some((i) => i.id === ent.id) |  | ||||||
|       }) |  | ||||||
|     }, |  | ||||||
|     scrolled() { |  | ||||||
|       this.setScrollVars() |  | ||||||
|     }, |  | ||||||
|     scrollRight() { |  | ||||||
|       if (!this.canScrollRight) return |  | ||||||
|       const slider = this.$refs.slider |  | ||||||
|       if (!slider) return |  | ||||||
|       const scrollAmount = this.booksPerPage * this.cardWidth |  | ||||||
|       const maxScrollLeft = slider.scrollWidth - slider.clientWidth |  | ||||||
| 
 |  | ||||||
|       const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount) |  | ||||||
|       slider.scrollLeft = newScrollLeft |  | ||||||
|     }, |  | ||||||
|     scrollLeft() { |  | ||||||
|       if (!this.canScrollLeft) return |  | ||||||
|       const slider = this.$refs.slider |  | ||||||
|       if (!slider) return |  | ||||||
| 
 |  | ||||||
|       const scrollAmount = this.booksPerPage * this.cardWidth |  | ||||||
| 
 |  | ||||||
|       const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount) |  | ||||||
|       slider.scrollLeft = newScrollLeft |  | ||||||
|     }, |  | ||||||
|     setScrollVars() { |  | ||||||
|       const slider = this.$refs.slider |  | ||||||
|       if (!slider) return |  | ||||||
|       const { scrollLeft, scrollWidth, clientWidth } = slider |  | ||||||
|       const scrollPercent = (scrollLeft + clientWidth) / scrollWidth |  | ||||||
| 
 |  | ||||||
|       this.clientWidth = clientWidth |  | ||||||
|       this.isScrollable = scrollWidth > clientWidth |  | ||||||
|       this.canScrollRight = scrollPercent < 1 |  | ||||||
|       this.canScrollLeft = scrollLeft > 0 |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   updated() { |  | ||||||
|     this.setScrollVars() |  | ||||||
|   }, |  | ||||||
|   mounted() { |  | ||||||
|     this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities) |  | ||||||
|     this.$eventBus.$on('item-selected', this.itemSelectedEvt) |  | ||||||
|   }, |  | ||||||
|   beforeDestroy() { |  | ||||||
|     this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities) |  | ||||||
|     this.$eventBus.$off('item-selected', this.itemSelectedEvt) |  | ||||||
|   } |  | ||||||
| } |  | ||||||
| </script> |  | ||||||
| @ -1,100 +0,0 @@ | |||||||
| <template> |  | ||||||
|   <div class="w-full"> |  | ||||||
|     <div class="flex items-center py-3"> |  | ||||||
|       <slot /> |  | ||||||
|       <div class="flex-grow" /> |  | ||||||
|       <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft"> |  | ||||||
|         <span class="material-icons text-2xl">chevron_left</span> |  | ||||||
|       </button> |  | ||||||
|       <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight"> |  | ||||||
|         <span class="material-icons text-2xl">chevron_right</span> |  | ||||||
|       </button> |  | ||||||
|     </div> |  | ||||||
|     <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled"> |  | ||||||
|       <div class="flex space-x-4" :style="{ height: height + 'px' }"> |  | ||||||
|         <template v-for="item in items"> |  | ||||||
|           <cards-narrator-card :key="item.name" :ref="`slider-item-${item.name}`" :narrator="item" :height="cardHeight" :width="cardWidth" class="relative" @hook:updated="setScrollVars" /> |  | ||||||
|         </template> |  | ||||||
|       </div> |  | ||||||
|     </div> |  | ||||||
|   </div> |  | ||||||
| </template> |  | ||||||
| 
 |  | ||||||
| <script> |  | ||||||
| export default { |  | ||||||
|   props: { |  | ||||||
|     items: { |  | ||||||
|       type: Array, |  | ||||||
|       default: () => [] |  | ||||||
|     }, |  | ||||||
|     height: { |  | ||||||
|       type: Number, |  | ||||||
|       default: 192 |  | ||||||
|     }, |  | ||||||
|     bookshelfView: { |  | ||||||
|       type: Number, |  | ||||||
|       default: 1 |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   data() { |  | ||||||
|     return { |  | ||||||
|       isScrollable: false, |  | ||||||
|       canScrollLeft: false, |  | ||||||
|       canScrollRight: false, |  | ||||||
|       clientWidth: 0 |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   computed: { |  | ||||||
|     cardHeight() { |  | ||||||
|       return this.height |  | ||||||
|     }, |  | ||||||
|     cardWidth() { |  | ||||||
|       return this.cardHeight * 1.5 |  | ||||||
|     }, |  | ||||||
|     booksPerPage() { |  | ||||||
|       return Math.floor(this.clientWidth / (this.cardWidth + 16)) |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   methods: { |  | ||||||
|     scrolled() { |  | ||||||
|       this.setScrollVars() |  | ||||||
|     }, |  | ||||||
|     scrollRight() { |  | ||||||
|       if (!this.canScrollRight) return |  | ||||||
|       const slider = this.$refs.slider |  | ||||||
|       if (!slider) return |  | ||||||
|       const scrollAmount = this.booksPerPage * this.cardWidth |  | ||||||
|       const maxScrollLeft = slider.scrollWidth - slider.clientWidth |  | ||||||
| 
 |  | ||||||
|       const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount) |  | ||||||
|       slider.scrollLeft = newScrollLeft |  | ||||||
|     }, |  | ||||||
|     scrollLeft() { |  | ||||||
|       if (!this.canScrollLeft) return |  | ||||||
|       const slider = this.$refs.slider |  | ||||||
|       if (!slider) return |  | ||||||
| 
 |  | ||||||
|       const scrollAmount = this.booksPerPage * this.cardWidth |  | ||||||
| 
 |  | ||||||
|       const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount) |  | ||||||
|       slider.scrollLeft = newScrollLeft |  | ||||||
|     }, |  | ||||||
|     setScrollVars() { |  | ||||||
|       const slider = this.$refs.slider |  | ||||||
|       if (!slider) return |  | ||||||
|       const { scrollLeft, scrollWidth, clientWidth } = slider |  | ||||||
|       const scrollPercent = (scrollLeft + clientWidth) / scrollWidth |  | ||||||
| 
 |  | ||||||
|       this.clientWidth = clientWidth |  | ||||||
|       this.isScrollable = scrollWidth > clientWidth |  | ||||||
|       this.canScrollRight = scrollPercent < 1 |  | ||||||
|       this.canScrollLeft = scrollLeft > 0 |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   updated() { |  | ||||||
|     this.setScrollVars() |  | ||||||
|   }, |  | ||||||
|   mounted() {}, |  | ||||||
|   beforeDestroy() {} |  | ||||||
| } |  | ||||||
| </script> |  | ||||||
| @ -1,109 +0,0 @@ | |||||||
| <template> |  | ||||||
|   <div class="w-full"> |  | ||||||
|     <div class="flex items-center py-3"> |  | ||||||
|       <slot /> |  | ||||||
|       <div class="flex-grow" /> |  | ||||||
|       <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft"> |  | ||||||
|         <span class="material-icons text-2xl">chevron_left</span> |  | ||||||
|       </button> |  | ||||||
|       <button v-if="isScrollable" class="w-8 h-8 mx-1 flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight"> |  | ||||||
|         <span class="material-icons text-2xl">chevron_right</span> |  | ||||||
|       </button> |  | ||||||
|     </div> |  | ||||||
|     <div ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled"> |  | ||||||
|       <div class="flex space-x-4" :style="{ height: height + 'px' }"> |  | ||||||
|         <template v-for="(item, index) in items"> |  | ||||||
|           <cards-lazy-series-card :key="item.id" :ref="`slider-item-${item.id}`" :index="index" :series-mount="item" :height="cardHeight" :width="cardWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" :bookshelf-view="$constants.BookshelfView.DETAIL" class="relative" @hook:updated="setScrollVars" /> |  | ||||||
|         </template> |  | ||||||
|       </div> |  | ||||||
|     </div> |  | ||||||
|   </div> |  | ||||||
| </template> |  | ||||||
| 
 |  | ||||||
| <script> |  | ||||||
| export default { |  | ||||||
|   props: { |  | ||||||
|     items: { |  | ||||||
|       type: Array, |  | ||||||
|       default: () => [] |  | ||||||
|     }, |  | ||||||
|     height: { |  | ||||||
|       type: Number, |  | ||||||
|       default: 192 |  | ||||||
|     }, |  | ||||||
|     bookshelfView: { |  | ||||||
|       type: Number, |  | ||||||
|       default: 1 |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   data() { |  | ||||||
|     return { |  | ||||||
|       isScrollable: false, |  | ||||||
|       canScrollLeft: false, |  | ||||||
|       canScrollRight: false, |  | ||||||
|       clientWidth: 0 |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   computed: { |  | ||||||
|     bookCoverAspectRatio() { |  | ||||||
|       return this.$store.getters['libraries/getBookCoverAspectRatio'] |  | ||||||
|     }, |  | ||||||
|     cardScaleMulitiplier() { |  | ||||||
|       return this.height / 192 |  | ||||||
|     }, |  | ||||||
|     cardHeight() { |  | ||||||
|       return this.height - 40 * this.cardScaleMulitiplier |  | ||||||
|     }, |  | ||||||
|     cardWidth() { |  | ||||||
|       return 2 * (this.cardHeight / this.bookCoverAspectRatio) |  | ||||||
|     }, |  | ||||||
|     booksPerPage() { |  | ||||||
|       return Math.floor(this.clientWidth / (this.cardWidth + 16)) |  | ||||||
|     }, |  | ||||||
|     isSelectionMode() { |  | ||||||
|       return this.$store.getters['globals/getIsBatchSelectingMediaItems'] |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   methods: { |  | ||||||
|     scrolled() { |  | ||||||
|       this.setScrollVars() |  | ||||||
|     }, |  | ||||||
|     scrollRight() { |  | ||||||
|       if (!this.canScrollRight) return |  | ||||||
|       const slider = this.$refs.slider |  | ||||||
|       if (!slider) return |  | ||||||
|       const scrollAmount = this.booksPerPage * this.cardWidth |  | ||||||
|       const maxScrollLeft = slider.scrollWidth - slider.clientWidth |  | ||||||
| 
 |  | ||||||
|       const newScrollLeft = Math.min(maxScrollLeft, slider.scrollLeft + scrollAmount) |  | ||||||
|       slider.scrollLeft = newScrollLeft |  | ||||||
|     }, |  | ||||||
|     scrollLeft() { |  | ||||||
|       if (!this.canScrollLeft) return |  | ||||||
|       const slider = this.$refs.slider |  | ||||||
|       if (!slider) return |  | ||||||
| 
 |  | ||||||
|       const scrollAmount = this.booksPerPage * this.cardWidth |  | ||||||
| 
 |  | ||||||
|       const newScrollLeft = Math.max(0, slider.scrollLeft - scrollAmount) |  | ||||||
|       slider.scrollLeft = newScrollLeft |  | ||||||
|     }, |  | ||||||
|     setScrollVars() { |  | ||||||
|       const slider = this.$refs.slider |  | ||||||
|       if (!slider) return |  | ||||||
|       const { scrollLeft, scrollWidth, clientWidth } = slider |  | ||||||
|       const scrollPercent = (scrollLeft + clientWidth) / scrollWidth |  | ||||||
| 
 |  | ||||||
|       this.clientWidth = clientWidth |  | ||||||
|       this.isScrollable = scrollWidth > clientWidth |  | ||||||
|       this.canScrollRight = scrollPercent < 1 |  | ||||||
|       this.canScrollLeft = scrollLeft > 0 |  | ||||||
|     } |  | ||||||
|   }, |  | ||||||
|   updated() { |  | ||||||
|     this.setScrollVars() |  | ||||||
|   }, |  | ||||||
|   mounted() {}, |  | ||||||
|   beforeDestroy() {} |  | ||||||
| } |  | ||||||
| </script> |  | ||||||
		Loading…
	
		Reference in New Issue
	
	Block a user