@vdegenne/highlight-manager 0.1.5 → 0.1.7

package/lib/index.d.ts

@@ -9,6 +9,7 @@ interface Info {
     highlightElement: HTMLElement | undefined;
     highlightContent: string | undefined;
 }
+type ScrollWhenOffscreenOption = 'never' | 'bounding-rect' | 'top';
 interface Options {
     css: string;
     highlightTextColor: string;
@@ -32,9 +33,9 @@ interface Options {
      */
     applyStyleSheetTo: Document | HTMLElement | ShadowRoot;
     /**
-     * @default false
+     * @default 'none'
      */
-    scrollWhenOffscreen: boolean;
+    scrollWhenOffscreen: ScrollWhenOffscreenOption;
     /**
      * If true, will select the next visible candidate if the highlight is offscreen.
      *
@@ -43,6 +44,9 @@ interface Options {
     fastTravel: boolean;
 }
 export declare function setGlobalBeforeHighlight(fct: () => void): void;
+interface HighlightOptions {
+    scrollWhenOffscreen: ScrollWhenOffscreenOption;
+}
 export declare class HighLightManager {
     #private;
     protected selector: string;
@@ -60,7 +64,7 @@ export declare class HighLightManager {
     /**
      * @returns {boolean} true if the highlight succeeded, false otherwise.
      */
-    highlight(start: number, end?: number, unhighlightAll?: boolean, cache?: boolean): boolean;
+    highlight(start: number, end?: number, unhighlightAll?: boolean, cache?: boolean, options?: HighlightOptions): boolean;
     previous(step?: number, cache?: boolean): void;
     next(step?: number, cache?: boolean): void;
     extendLeftHighlight(step?: number, cache?: boolean): void;

package/lib/index.js

@@ -14,7 +14,7 @@ const defaults = {
     beforeHighlight: undefined,
     onSelectionChange: undefined,
     applyStyleSheetTo: document,
-    scrollWhenOffscreen: false,
+    scrollWhenOffscreen: 'never',
     fastTravel: false,
 };
 // Local array of all declared highlighters for id control.
@@ -75,7 +75,9 @@ export class HighLightManager {
                 const els = querySelectorAll(this.selector);
                 const el = els[index];
                 if (el) {
-                    this.highlight(index, index, true, false);
+                    this.highlight(index, index, true, false, {
+                        scrollWhenOffscreen: 'never',
+                    });
                     wr.resolve(el);
                     this.#highlightWhenAvailablePromiseWR = undefined;
                     return;
@@ -150,7 +152,7 @@ export class HighLightManager {
     /**
      * @returns {boolean} true if the highlight succeeded, false otherwise.
      */
-    highlight(start, end, unhighlightAll = true, cache = false) {
+    highlight(start, end, unhighlightAll = true, cache = false, options) {
         if (end === undefined) {
             end = start;
         }
@@ -166,6 +168,9 @@ export class HighLightManager {
             return false;
         }
         // console.log(highlightIndexStart, highlightIndexEnd, start, end)
+        const _options = {
+            scrollWhenOffscreen: options?.scrollWhenOffscreen ?? this.#options.scrollWhenOffscreen,
+        };
         globalBeforeHighlight?.();
         this.#options.beforeHighlight?.();
         // playClick()
@@ -176,12 +181,12 @@ export class HighLightManager {
         if (elementsToHighlight.length === 0) {
             return false;
         }
-        if (this.#options.scrollWhenOffscreen &&
-            !isInViewport(elementsToHighlight[0])) {
+        if (_options.scrollWhenOffscreen !== 'never' &&
+            !isInViewport(elementsToHighlight[0], _options.scrollWhenOffscreen === 'top')) {
             elementsToHighlight[0]?.scrollIntoView({
                 behavior: 'smooth',
-                block: 'center',
-                inline: 'center',
+                block: _options.scrollWhenOffscreen === 'top' ? 'start' : 'center',
+                inline: _options.scrollWhenOffscreen === 'top' ? 'start' : 'center',
             });
         }
         elementsToHighlight.forEach((el) => el.setAttribute(`highlight${this.#id}`, ''));
@@ -201,6 +206,18 @@ export class HighLightManager {
         const currIndex = highlightIndexStart !== highlightIndexEnd
             ? highlightIndexStart
             : 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
@@ -208,24 +225,18 @@ export class HighLightManager {
             : 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;
-                }
+            const found = elements
+                .slice(0, currIndex)
+                .reverse()
+                .find((el) => isInViewport(el));
+            if (found) {
+                prevIndex = elements.indexOf(found);
             }
         }
         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);
-            }
+            prevIndex = this.#options.loop
+                ? (currIndex - step + len) % len
+                : Math.max(0, currIndex - step);
         }
         this.highlight(prevIndex, prevIndex, true, cache);
     }
@@ -239,6 +250,18 @@ export class HighLightManager {
         const currIndex = highlightIndexStart !== highlightIndexEnd
             ? highlightIndexEnd
             : 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
@@ -246,24 +269,15 @@ export class HighLightManager {
             : 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;
-                }
+            const found = elements.slice(currIndex + 1).find((el) => isInViewport(el));
+            if (found) {
+                nextIndex = elements.indexOf(found);
             }
         }
         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);
-            }
+            nextIndex = this.#options.loop
+                ? (currIndex + step) % len
+                : Math.min(len - 1, currIndex + step);
         }
         this.highlight(nextIndex, nextIndex, true, cache);
     }

package/lib/utils.d.ts

@@ -1,3 +1,3 @@
 export declare function sleep(milli?: number): Promise<unknown>;
-export declare function isInViewport(el: HTMLElement): boolean;
+export declare function isInViewport(el: HTMLElement, onlyTop?: boolean): boolean;
 //# sourceMappingURL=utils.d.ts.map

package/lib/utils.js

@@ -7,10 +7,13 @@ export function sleep(milli = 1000) {
 // 		el.getBoundingClientRect().bottom <= window.innerHeight
 // 	)
 // }
-export function isInViewport(el) {
+export function isInViewport(el, onlyTop = false) {
     const rect = el.getBoundingClientRect();
     const viewHeight = window.innerHeight || document.documentElement.clientHeight;
     const viewWidth = window.innerWidth || document.documentElement.clientWidth;
+    if (onlyTop) {
+        return rect.top >= 0 && rect.top <= viewHeight;
+    }
     return (rect.bottom > 0 &&
         rect.right > 0 &&
         rect.top < viewHeight &&

package/package.json

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