@vdegenne/highlight-manager 0.1.3 → 0.1.5

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 = [];
@@ -175,7 +176,7 @@ export class HighLightManager {
         if (elementsToHighlight.length === 0) {
             return false;
         }
-        if (this.#options.scrollWhenOffscreen ||
+        if (this.#options.scrollWhenOffscreen &&
             !isInViewport(elementsToHighlight[0])) {
             elementsToHighlight[0]?.scrollIntoView({
                 behavior: 'smooth',
@@ -197,12 +198,36 @@ 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;
+        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) {
+            for (let i = currIndex - 1; i >= 0; i--) {
+                const el = elements[i];
+                if (el && isInViewport(el)) {
+                    prevIndex = i;
+                    break;
+                }
+            }
+        }
+        if (prevIndex === -1) {
+            const base = highlightIndexStart !== highlightIndexEnd
+                ? highlightIndexStart
+                : highlightIndexStart;
+            if (this.#options.loop) {
+                prevIndex = (base - step + len) % len;
+            }
+            else {
+                prevIndex = Math.max(0, base - step);
+            }
+        }
+        this.highlight(prevIndex, prevIndex, true, cache);
     }
     next(step = 1, cache = false) {
         const { elements, highlightIndexStart, highlightIndexEnd } = this.getInfo(cache);
@@ -211,11 +236,35 @@ 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;
+        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) {
+            for (let i = currIndex + 1; i < len; i++) {
+                const el = elements[i];
+                if (el && isInViewport(el)) {
+                    nextIndex = i;
+                    break;
+                }
+            }
+        }
+        if (nextIndex === -1) {
+            const base = highlightIndexStart !== highlightIndexEnd
+                ? highlightIndexEnd
+                : highlightIndexEnd;
+            if (this.#options.loop) {
+                nextIndex = (base + step) % len;
+            }
+            else {
+                nextIndex = Math.min(len - 1, base + 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.3",
+	"version": "0.1.5",
 	"description": "helper to navigate/highlight elements in a page based on a css selector",
 	"type": "module",
 	"exports": {