Add reached-start and reached-end CustomEvents

fixed-layout.js

@@ -293,13 +293,21 @@ export class FixedLayout extends HTMLElement {
         const { index, side } = this.getSpreadOf(section)
         await this.goToSpread(index, side)
     }
+    get atStart() {
+        return this.#index === 0
+    }
+    get atEnd() {
+        return this.#index === this.#spreads.length - 1
+    }
     async next() {
         const s = this.rtl ? this.#goLeft() : this.#goRight()
+        if (!s && this.atEnd) this.dispatchEvent(new Event("reached-end"));
         if (s) this.#reportLocation('page')
         else return this.goToSpread(this.#index + 1, this.rtl ? 'right' : 'left', 'page')
     }
     async prev() {
         const s = this.rtl ? this.#goRight() : this.#goLeft()
+        if (!s && this.atStart) this.dispatchEvent(new Event("reached-start"));
         if (s) this.#reportLocation('page')
         else return this.goToSpread(this.#index - 1, this.rtl ? 'left' : 'right', 'page')
     }

paginator.js

@@ -1023,7 +1023,10 @@ export class Paginator extends HTMLElement {
                 Math.max(0, this.start - (distance ?? this.size)), null, true)
             return true
         }
-        if (this.atStart) return
+        if (this.atStart) {
+            this.dispatchEvent(new Event('reached-start'))
+            return
+        }
         const page = this.page - 1
         return this.#scrollToPage(page, 'page', true).then(() => page <= 0)
     }
@@ -1034,7 +1037,10 @@ export class Paginator extends HTMLElement {
                 Math.min(this.viewSize, distance ? this.start + distance : this.end), null, true)
             return true
         }
-        if (this.atEnd) return
+        if (this.atEnd) {
+            this.dispatchEvent(new Event('reached-end'))
+            return
+        }
         const page = this.page + 1
         const pages = this.pages
         return this.#scrollToPage(page, 'page', true).then(() => page >= pages - 1)

view.js

@@ -259,6 +259,8 @@ export class View extends HTMLElement {
         this.renderer.setAttribute('exportparts', 'head,foot,filter')
         this.renderer.addEventListener('load', e => this.#onLoad(e.detail))
         this.renderer.addEventListener('relocate', e => this.#onRelocate(e.detail))
+        this.renderer.addEventListener('reached-start', () => this.#onReachedStart())
+        this.renderer.addEventListener('reached-end', () => this.#onReachedEnd())
         this.renderer.addEventListener('create-overlayer', e =>
             e.detail.attach(this.#createOverlayer(e.detail)))
         this.renderer.open(book)
@@ -345,6 +347,12 @@ export class View extends HTMLElement {
 
         this.#emit('load', { doc, index })
     }
+    #onReachedStart() {
+        this.#emit('reached-start')
+    }
+    #onReachedEnd() {
+        this.#emit('reached-end')
+    }
     #handleLinks(doc, index) {
         const { book } = this
         const section = book.sections[index]