@vdegenne/highlight-manager 0.1.4 → 0.1.6

package/lib/index.d.ts

@@ -35,6 +35,12 @@ interface Options {
      * @default false
      */
     scrollWhenOffscreen: boolean;
+    /**
+     * If true, will select the next visible candidate if the highlight is offscreen.
+     *
+     * @default false
+     */
+    fastTravel: boolean;
 }
 export declare function setGlobalBeforeHighlight(fct: () => void): void;
 export declare class HighLightManager {

package/lib/index.js

@@ -15,6 +15,7 @@ const defaults = {
     onSelectionChange: undefined,
     applyStyleSheetTo: document,
     scrollWhenOffscreen: false,
+    fastTravel: false,
 };
 // Local array of all declared highlighters for id control.
 const highlighters = [];
@@ -197,12 +198,42 @@ export class HighLightManager {
             this.highlight(-1, -1, true, cache);
             return;
         }
-        let previousIndex = highlightIndexStart !== highlightIndexEnd
+        const currIndex = highlightIndexStart !== highlightIndexEnd
             ? highlightIndexStart
-            : this.#options.loop
-                ? (highlightIndexStart - step + len) % len
-                : Math.max(0, highlightIndexStart - step);
-        this.highlight(previousIndex, previousIndex, true, cache);
+            : highlightIndexStart;
+        if (currIndex === -1) {
+            if (this.#options.fastTravel) {
+                const found = [...elements].reverse().find((el) => isInViewport(el));
+                if (found) {
+                    const i = elements.indexOf(found);
+                    this.highlight(i, i, true, cache);
+                    return;
+                }
+            }
+            this.highlight(len - 1, len - 1, true, cache);
+            return;
+        }
+        const currEl = elements[currIndex];
+        const currIsVisible = currEl ? isInViewport(currEl) : false;
+        const currIsBelow = currEl
+            ? currEl.getBoundingClientRect().top > window.innerHeight
+            : false;
+        let prevIndex = -1;
+        if (this.#options.fastTravel && !currIsVisible && currIsBelow) {
+            const found = elements
+                .slice(0, currIndex)
+                .reverse()
+                .find((el) => isInViewport(el));
+            if (found) {
+                prevIndex = elements.indexOf(found);
+            }
+        }
+        if (prevIndex === -1) {
+            prevIndex = this.#options.loop
+                ? (currIndex - step + len) % len
+                : Math.max(0, currIndex - step);
+        }
+        this.highlight(prevIndex, prevIndex, true, cache);
     }
     next(step = 1, cache = false) {
         const { elements, highlightIndexStart, highlightIndexEnd } = this.getInfo(cache);
@@ -211,11 +242,38 @@ export class HighLightManager {
             this.highlight(-1, -1, true, cache);
             return;
         }
-        let nextIndex = highlightIndexStart !== highlightIndexEnd
+        const currIndex = highlightIndexStart !== highlightIndexEnd
             ? highlightIndexEnd
-            : this.#options.loop
-                ? (highlightIndexEnd + step) % len
-                : Math.min(len - 1, highlightIndexEnd + step);
+            : highlightIndexEnd;
+        if (currIndex === -1) {
+            if (this.#options.fastTravel) {
+                const found = elements.find((el) => isInViewport(el));
+                if (found) {
+                    const i = elements.indexOf(found);
+                    this.highlight(i, i, true, cache);
+                    return;
+                }
+            }
+            this.highlight(0, 0, true, cache);
+            return;
+        }
+        const currEl = elements[currIndex];
+        const currIsVisible = currEl ? isInViewport(currEl) : false;
+        const currIsAbove = currEl
+            ? currEl.getBoundingClientRect().bottom < 0
+            : false;
+        let nextIndex = -1;
+        if (this.#options.fastTravel && !currIsVisible && currIsAbove) {
+            const found = elements.slice(currIndex + 1).find((el) => isInViewport(el));
+            if (found) {
+                nextIndex = elements.indexOf(found);
+            }
+        }
+        if (nextIndex === -1) {
+            nextIndex = this.#options.loop
+                ? (currIndex + step) % len
+                : Math.min(len - 1, currIndex + step);
+        }
         this.highlight(nextIndex, nextIndex, true, cache);
     }
     extendLeftHighlight(step = 1, cache = false) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vdegenne/highlight-manager",
-	"version": "0.1.4",
+	"version": "0.1.6",
 	"description": "helper to navigate/highlight elements in a page based on a css selector",
 	"type": "module",
 	"exports": {