68 lines
2.0 KiB
JavaScript
68 lines
2.0 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
import { nextFrame } from "helpers/timing_helpers"
|
|
import { getReadingProgress, storeReadingProgress } from "helpers/reading_progress_helpers"
|
|
|
|
export default class extends Controller {
|
|
static values = { bookId: Number, leafId: Number }
|
|
|
|
async connect() {
|
|
this.paragraphs = Array.from(document.querySelectorAll("main p"))
|
|
|
|
this.visibleParagraphs = new Set()
|
|
this.lastReadParagraphIndex = 0
|
|
|
|
await nextFrame()
|
|
this.#scrollToLastReadParagraph()
|
|
|
|
await nextFrame()
|
|
this.#observeReadingProgress()
|
|
this.#storeProgress()
|
|
}
|
|
|
|
disconnect() {
|
|
this.observer.disconnect()
|
|
}
|
|
|
|
#scrollToLastReadParagraph() {
|
|
const [ leafId, lastReadParagraphIndex ] = getReadingProgress(this.bookIdValue)
|
|
|
|
if (leafId === this.leafIdValue && lastReadParagraphIndex > 0) {
|
|
const lastReadParagraph = this.paragraphs[lastReadParagraphIndex]
|
|
lastReadParagraph?.scrollIntoView({ behavior: "instant", block: "end" })
|
|
}
|
|
}
|
|
|
|
#observeReadingProgress() {
|
|
this.observer = new IntersectionObserver(this.#intersectionChange, { threshold: 0.5 })
|
|
this.paragraphs.forEach(p => this.observer.observe(p))
|
|
}
|
|
|
|
#intersectionChange = (entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
this.visibleParagraphs.add(entry.target)
|
|
} else {
|
|
this.visibleParagraphs.delete(entry.target)
|
|
}
|
|
})
|
|
|
|
this.#updateLastReadParagraph()
|
|
this.#storeProgress()
|
|
}
|
|
|
|
#updateLastReadParagraph() {
|
|
const sortedVisibleParagraphs = Array.from(this.visibleParagraphs).sort((p1, p2) => {
|
|
return this.paragraphs.indexOf(p1) - this.paragraphs.indexOf(p2)
|
|
})
|
|
|
|
if (sortedVisibleParagraphs.length > 0) {
|
|
const lastVisibleParagraph = sortedVisibleParagraphs[sortedVisibleParagraphs.length - 1]
|
|
this.lastReadParagraphIndex = this.paragraphs.indexOf(lastVisibleParagraph)
|
|
}
|
|
}
|
|
|
|
#storeProgress() {
|
|
storeReadingProgress(this.bookIdValue, this.leafIdValue, this.lastReadParagraphIndex)
|
|
}
|
|
}
|