From 59a5aa22a098129b09596b706489926e6c8ac68b Mon Sep 17 00:00:00 2001
From: John Factotum <50942278+johnfactotum@users.noreply.github.com>
Date: Tue, 24 Sep 2024 11:54:47 +0800
Subject: [PATCH] Paginator: respond to selection change

The view follows caret when using caret browsing (F7). Also allows
selecting across pages. And if you click on or select some text and
resize the window, the caret/selection always stays visible.

Some quirks regarding caret browsing:
- In Chromium, in paginated mode, it scrolls when changing selection
  (https://issues.chromium.org/issues/40889650)
- In WebKitGTK, in scrolled mode, the view doesn't follow the caret
  (which would be a WebKit bug)
---
 paginator.js | 45 +++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/paginator.js b/paginator.js
index 3e21920..f236876 100644
--- a/paginator.js
+++ b/paginator.js
@@ -138,6 +138,13 @@ const getVisibleRange = (doc, start, end, mapRect) => {
     return range
 }
 
+const selectionIsBackward = sel => {
+    const range = document.createRange()
+    range.setStart(sel.anchorNode, sel.anchorOffset)
+    range.setEnd(sel.focusNode, sel.focusOffset)
+    return range.collapsed
+}
+
 const setSelectionTo = (target, collapse) => {
     let range
     if (target.startContainer) range = target.cloneRange()
@@ -427,6 +434,7 @@ export class Paginator extends HTMLElement {
     #scrollBounds
     #touchState
     #touchScrolled
+    #lastVisibleRange
     constructor() {
         super()
         this.#root.innerHTML = `<style>
@@ -550,11 +558,8 @@ export class Paginator extends HTMLElement {
             doc.addEventListener('touchstart', this.#onTouchStart.bind(this), opts)
             doc.addEventListener('touchmove', this.#onTouchMove.bind(this), opts)
             doc.addEventListener('touchend', this.#onTouchEnd.bind(this))
-
-            doc.addEventListener('focusin', e => this.scrolled ? null :
-                // NOTE: `requestAnimationFrame` is needed in WebKit
-                requestAnimationFrame(() => this.#scrollToAnchor(e.target)))
         })
+
         this.addEventListener('relocate', ({ detail }) => {
             if (detail.reason === 'selection') setSelectionTo(this.#anchor, 0)
             else if (detail.reason === 'navigation') {
@@ -564,6 +569,37 @@ export class Paginator extends HTMLElement {
                 else setSelectionTo(this.#anchor, -1)
             }
         })
+        const checkPointerSelection = debounce((range, sel) => {
+            const selRange = sel.getRangeAt(0)
+            const backward = selectionIsBackward(sel)
+            if (backward && selRange.compareBoundaryPoints(Range.START_TO_START, range) < 0)
+                this.prev()
+            else if (!backward && selRange.compareBoundaryPoints(Range.END_TO_END, range) > 0)
+                this.next()
+        }, 700)
+        this.addEventListener('load', ({ detail: { doc } }) => {
+            let isPointerSelecting = false
+            doc.addEventListener('pointerdown', () => isPointerSelecting = true)
+            doc.addEventListener('pointerup', () => isPointerSelecting = false)
+            doc.addEventListener('selectionchange', () => {
+                if (this.scrolled) return
+                const range = this.#lastVisibleRange
+                if (!range) return
+                const sel = doc.getSelection()
+                if (!sel.rangeCount) return
+                if (isPointerSelecting && sel.type === 'Range')
+                    checkPointerSelection(range, sel)
+                else {
+                    const selRange = sel.getRangeAt(0).cloneRange()
+                    const backward = selectionIsBackward(sel)
+                    if (!backward) selRange.collapse()
+                    this.#scrollToAnchor(selRange)
+                }
+            })
+            doc.addEventListener('focusin', e => this.scrolled ? null :
+                // NOTE: `requestAnimationFrame` is needed in WebKit
+                requestAnimationFrame(() => this.#scrollToAnchor(e.target)))
+        })
 
         this.#mediaQueryListener = () => {
             if (!this.#view) return
@@ -881,6 +917,7 @@ export class Paginator extends HTMLElement {
     }
     #afterScroll(reason) {
         const range = this.#getVisibleRange()
+        this.#lastVisibleRange = range
         // don't set new anchor if relocation was to scroll to anchor
         if (reason !== 'selection' && reason !== 'navigation' && reason !== 'anchor')
             this.#anchor = range