@vdegenne/highlight-manager 0.1.6 → 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}`, ''));

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.6",
+	"version": "0.1.7",
 	"description": "helper to navigate/highlight elements in a page based on a css selector",
 	"type": "module",
 	"exports": {