@vdegenne/highlight-manager 0.1.11 → 0.1.13

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { IsInViewportPartCheck } from './utils.js';
+import { CheckIf } from './utils.js';
 interface Info {
     elements: HTMLElement[];
     highlightIndexStart: number;
@@ -12,9 +12,12 @@ interface Info {
 }
 interface ScrollStrategy {
     /**
-     * @default 'center'
+     * The visibility check to use to determine
+     * whether or not the scroll should be issued.
+     *
+     * @default when top is not visible
      */
-    whenWhatPartIsHidden: IsInViewportPartCheck;
+    when: CheckIf;
     /**
      * @default 'smooth'
      */

package/lib/index.js

@@ -1,7 +1,7 @@
 import { querySelectorAll } from 'html-vision';
-import { isInViewport, sleep } from './utils.js';
+import { checkVisibility, sleep } from './utils.js';
 const scrollStrategyDefaults = {
-    whenWhatPartIsHidden: 'center',
+    when: (is) => !is('top-visible'),
     behavior: 'smooth',
     block: undefined,
     inline: undefined,
@@ -192,7 +192,7 @@ export class HighLightManager {
             return false;
         }
         if (_options.scrollStrategy &&
-            !isInViewport(elementsToHighlight[0], _options.scrollStrategy.whenWhatPartIsHidden)) {
+            !checkVisibility(elementsToHighlight[0], _options.scrollStrategy.when)) {
             elementsToHighlight[0]?.scrollIntoView({
                 behavior: _options.scrollStrategy.behavior,
                 block: _options.scrollStrategy.block,
@@ -218,7 +218,7 @@ export class HighLightManager {
             : highlightIndexStart;
         if (currIndex === -1) {
             if (this.#options.fastTravel) {
-                const found = [...elements].reverse().find((el) => isInViewport(el));
+                const found = [...elements].reverse().find((el) => checkVisibility(el));
                 if (found) {
                     const i = elements.indexOf(found);
                     this.highlight(i, i, true, cache);
@@ -229,7 +229,7 @@ export class HighLightManager {
             return;
         }
         const currEl = elements[currIndex];
-        const currIsVisible = currEl ? isInViewport(currEl) : false;
+        const currIsVisible = currEl ? checkVisibility(currEl) : false;
         const currIsBelow = currEl
             ? currEl.getBoundingClientRect().top > window.innerHeight
             : false;
@@ -238,7 +238,7 @@ export class HighLightManager {
             const found = elements
                 .slice(0, currIndex)
                 .reverse()
-                .find((el) => isInViewport(el));
+                .find((el) => checkVisibility(el));
             if (found) {
                 prevIndex = elements.indexOf(found);
             }
@@ -262,7 +262,7 @@ export class HighLightManager {
             : highlightIndexEnd;
         if (currIndex === -1) {
             if (this.#options.fastTravel) {
-                const found = elements.find((el) => isInViewport(el));
+                const found = elements.find((el) => checkVisibility(el));
                 if (found) {
                     const i = elements.indexOf(found);
                     this.highlight(i, i, true, cache);
@@ -273,13 +273,15 @@ export class HighLightManager {
             return;
         }
         const currEl = elements[currIndex];
-        const currIsVisible = currEl ? isInViewport(currEl) : false;
+        const currIsVisible = currEl ? checkVisibility(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));
+            const found = elements
+                .slice(currIndex + 1)
+                .find((el) => checkVisibility(el));
             if (found) {
                 nextIndex = elements.indexOf(found);
             }

package/lib/utils.d.ts

@@ -1,4 +1,9 @@
 export declare function sleep(milli?: number): Promise<unknown>;
-export type IsInViewportPartCheck = 'top' | 'center' | 'bounding-rect' | 'bottom';
-export declare function isInViewport(el: HTMLElement, partCheck?: IsInViewportPartCheck): boolean;
+export type VisibilityCheck = 'top-visible' | 'center-visible' | 'bottom-visible' | 'partially-visible' | 'fully-visible';
+export type CheckIf = (is: (visibility: VisibilityCheck) => boolean) => boolean;
+export declare function checkVisibility(el: HTMLElement, 
+/**
+ * @default top is not visible
+ */
+checkIf?: CheckIf): boolean;
 //# sourceMappingURL=utils.d.ts.map

package/lib/utils.js

@@ -1,29 +1,41 @@
 export function sleep(milli = 1000) {
     return new Promise((r) => setTimeout(r, milli));
 }
-export function isInViewport(el, partCheck = 'center') {
+export function checkVisibility(el, 
+/**
+ * @default top is not visible
+ */
+checkIf = (is) => !is('top-visible')) {
     const rect = el.getBoundingClientRect();
     const viewHeight = window.innerHeight || document.documentElement.clientHeight;
     const viewWidth = window.innerWidth || document.documentElement.clientWidth;
-    switch (partCheck) {
-        case 'top':
-            return rect.top >= 0 && rect.top <= viewHeight;
-        case 'bottom':
-            return rect.bottom >= 0 && rect.bottom <= viewHeight;
-        case 'center': {
-            const centerY = rect.top + rect.height / 2;
-            const centerX = rect.left + rect.width / 2;
-            return (centerY >= 0 &&
-                centerY <= viewHeight &&
-                centerX >= 0 &&
-                centerX <= viewWidth);
+    function is(visibilityCheck) {
+        switch (visibilityCheck) {
+            case 'top-visible':
+                return rect.top >= 0 && rect.top <= viewHeight;
+            case 'center-visible': {
+                const centerY = rect.top + rect.height / 2;
+                const centerX = rect.left + rect.width / 2;
+                return (centerY >= 0 &&
+                    centerY <= viewHeight &&
+                    centerX >= 0 &&
+                    centerX <= viewWidth);
+            }
+            case 'bottom-visible':
+                return rect.bottom >= 0 && rect.bottom <= viewHeight;
+            case 'fully-visible':
+                return (rect.top >= 0 &&
+                    rect.left >= 0 &&
+                    rect.bottom <= viewHeight &&
+                    rect.right <= viewWidth);
+            case 'partially-visible':
+            default:
+                return (rect.bottom > 0 &&
+                    rect.right > 0 &&
+                    rect.top < viewHeight &&
+                    rect.left < viewWidth);
         }
-        case 'bounding-rect':
-        default:
-            return (rect.bottom > 0 &&
-                rect.right > 0 &&
-                rect.top < viewHeight &&
-                rect.left < viewWidth);
     }
+    return checkIf(is);
 }
 //# sourceMappingURL=utils.js.map

package/package.json

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