+
+
{{ page }} / {{ numPages }}
+
+
+
@@ -56,7 +67,12 @@ export default {
page: 1,
numPages: 0,
pdfDocInitParams: null,
- isRefreshing: false
+ isRefreshing: false,
+ zoomLevel: '1',
+ editingPage: false,
+ pageInput: 1,
+ viewMode: 'single', // 'single' or 'continuous'
+ scrollPosition: 0
}
},
computed: {
@@ -76,6 +92,15 @@ export default {
if (this.windowHeight < 400 || !this.playerOpen) return this.windowHeight - 120
return this.windowHeight - 284
},
+ fitToWidth() {
+ return (this.windowWidth - 40) / this.fitToPageWidth
+ },
+ fitToPage() {
+ return Math.min(this.fitToWidth, (this.pdfHeight - 40) / (this.fitToPageWidth * 1.4))
+ },
+ showContinuousView() {
+ return this.viewMode === 'continuous'
+ },
maxScale() {
return Math.floor((this.windowWidth * 10) / this.fitToPageWidth) / 10
},
@@ -86,7 +111,7 @@ export default {
return this.page > 1
},
canScaleUp() {
- return this.scale < this.maxScale
+ return this.scale < 2
},
canScaleDown() {
return this.scale > 1
@@ -109,12 +134,47 @@ export default {
return `/api/items/${this.libraryItemId}/ebook`
}
},
+ watch: {
+ page(newVal) {
+ this.pageInput = newVal
+ },
+ scale(newVal) {
+ // Update zoom level dropdown when scale changes
+ if (newVal >= 1 && newVal <= 2) {
+ this.zoomLevel = newVal.toString()
+ }
+ }
+ },
methods: {
zoomIn() {
- this.scale += 0.1
+ if (this.scale < 2) {
+ this.scale = Math.min(2, this.scale + 0.25)
+ this.updateZoomLevel()
+ }
+ },
+ setZoomLevel() {
+ switch (this.zoomLevel) {
+ case 'fit-width':
+ this.scale = this.fitToWidth
+ break
+ case 'fit-page':
+ this.scale = this.fitToPage
+ break
+ default:
+ this.scale = parseFloat(this.zoomLevel)
+ }
},
zoomOut() {
- this.scale -= 0.1
+ if (this.scale > 1) {
+ this.scale = Math.max(1, this.scale - 0.25)
+ this.updateZoomLevel()
+ }
+ },
+ updateZoomLevel() {
+ // Update the dropdown to show current zoom percentage
+ if (this.scale >= 1 && this.scale <= 2) {
+ this.zoomLevel = this.scale.toString()
+ }
},
updateProgress() {
if (!this.keepProgress) return
@@ -146,11 +206,13 @@ export default {
prev() {
if (this.page <= 1) return
this.page--
+ this.pageInput = this.page
this.updateProgress()
},
next() {
if (this.page >= this.numPages) return
this.page++
+ this.pageInput = this.page
this.updateProgress()
},
async refreshToken() {
@@ -187,6 +249,91 @@ export default {
this.windowWidth = window.innerWidth
this.windowHeight = window.innerHeight
},
+ toggleViewMode() {
+ this.viewMode = this.viewMode === 'single' ? 'continuous' : 'single'
+ },
+
+ handleScroll(e) {
+ if (this.viewMode === 'continuous') {
+ const container = e.target
+ const scrollPercent = container.scrollTop / (container.scrollHeight - container.clientHeight)
+ const newPage = Math.ceil(scrollPercent * this.numPages) || 1
+ if (newPage !== this.page) {
+ this.page = newPage
+ this.updateProgress()
+ }
+ }
+ },
+ startPageEdit() {
+ this.editingPage = true
+ this.pageInput = this.page
+ this.$nextTick(() => {
+ this.$refs.pageInputField?.focus()
+ this.$refs.pageInputField?.select()
+ })
+ },
+ goToPage() {
+ const targetPage = parseInt(this.pageInput)
+ if (targetPage >= 1 && targetPage <= this.numPages) {
+ this.page = targetPage
+ this.updateProgress()
+ } else {
+ this.pageInput = this.page
+ }
+ this.editingPage = false
+ },
+
+ cancelPageEdit() {
+ this.pageInput = this.page
+ this.editingPage = false
+ },
+ keyboardHandler(e) {
+ if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return
+
+ switch (e.key) {
+ case 'ArrowLeft':
+ case 'ArrowUp':
+ case 'PageUp':
+ e.preventDefault()
+ e.stopPropagation()
+ this.prev()
+ break
+ case 'ArrowRight':
+ case 'ArrowDown':
+ case 'PageDown':
+ case ' ':
+ e.preventDefault()
+ e.stopPropagation()
+ this.next()
+ break
+ case 'Home':
+ e.preventDefault()
+ this.page = 1
+ this.pageInput = 1
+ this.updateProgress()
+ break
+ case 'End':
+ e.preventDefault()
+ this.page = this.numPages
+ this.pageInput = this.numPages
+ this.updateProgress()
+ break
+ case '+':
+ case '=':
+ e.preventDefault()
+ if (this.canScaleUp) this.zoomIn()
+ break
+ case '-':
+ e.preventDefault()
+ if (this.canScaleDown) this.zoomOut()
+ break
+ case '0':
+ e.preventDefault()
+ this.scale = 1
+ this.updateZoomLevel()
+ break
+ }
+ },
init() {
this.pdfDocInitParams = {
url: this.ebookUrl,
@@ -194,17 +341,22 @@ export default {
Authorization: `Bearer ${this.userToken}`
}
}
+ // Initialize zoom level to match default scale
+ this.zoomLevel = this.scale.toString()
}
},
mounted() {
this.windowWidth = window.innerWidth
this.windowHeight = window.innerHeight
window.addEventListener('resize', this.resize)
+ document.removeEventListener('keydown', this.keyboardHandler)
+ document.addEventListener('keydown', this.keyboardHandler)
this.init()
},
beforeDestroy() {
window.removeEventListener('resize', this.resize)
+ document.removeEventListener('keydown', this.keyboardHandler)
}
}
diff --git a/client/components/stats/PreviewIcons.vue b/client/components/stats/PreviewIcons.vue
index 18cd1daba..fc14fd90a 100644
--- a/client/components/stats/PreviewIcons.vue
+++ b/client/components/stats/PreviewIcons.vue
@@ -6,7 +6,7 @@
{{ $formatNumber(totalItems) }}
-
{{ $strings.LabelStatsItemsInLibrary }}
+
{{ $strings.LabelStatsItemsInLibrary }}