@vdegenne/highlight-manager 0.1.2 → 0.1.4

package/lib/index.d.ts

@@ -36,6 +36,7 @@ interface Options {
      */
     scrollWhenOffscreen: boolean;
 }
+export declare function setGlobalBeforeHighlight(fct: () => void): void;
 export declare class HighLightManager {
     #private;
     protected selector: string;

package/lib/index.js

@@ -18,6 +18,10 @@ const defaults = {
 };
 // Local array of all declared highlighters for id control.
 const highlighters = [];
+let globalBeforeHighlight;
+export function setGlobalBeforeHighlight(fct) {
+    globalBeforeHighlight = fct;
+}
 export class HighLightManager {
     #cache;
     #options;
@@ -161,6 +165,7 @@ export class HighLightManager {
             return false;
         }
         // console.log(highlightIndexStart, highlightIndexEnd, start, end)
+        globalBeforeHighlight?.();
         this.#options.beforeHighlight?.();
         // playClick()
         if (unhighlightAll) {
@@ -170,7 +175,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',

package/lib/utils.d.ts

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

package/lib/utils.js

@@ -1,8 +1,19 @@
 export function sleep(milli = 1000) {
     return new Promise((r) => setTimeout(r, milli));
 }
+// export function isInViewport(el: Element) {
+// 	return (
+// 		el.getBoundingClientRect().top >= 0 &&
+// 		el.getBoundingClientRect().bottom <= window.innerHeight
+// 	)
+// }
 export function isInViewport(el) {
-    return (el.getBoundingClientRect().top >= 0 &&
-        el.getBoundingClientRect().bottom <= window.innerHeight);
+    const rect = el.getBoundingClientRect();
+    const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+    const viewWidth = window.innerWidth || document.documentElement.clientWidth;
+    return (rect.bottom > 0 &&
+        rect.right > 0 &&
+        rect.top < viewHeight &&
+        rect.left < viewWidth);
 }
 //# sourceMappingURL=utils.js.map

package/package.json

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