@vdegenne/highlight-manager 0.1.11 → 0.1.12

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { IsInViewportPartCheck } from './utils.js';
+import { VisibilityCheck } 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 'top'
      */
-    whenWhatPartIsHidden: IsInViewportPartCheck;
+    visibilityCheck: VisibilityCheck;
     /**
      * @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',
+    visibilityCheck: 'top',
     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.visibilityCheck)) {
             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,4 @@
 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' | 'center' | 'bounding-rect' | 'bottom' | 'fully-visible' | 'not-fully-visible';
+export declare function checkVisibility(el: HTMLElement, visibilityCheck?: VisibilityCheck): boolean;
 //# sourceMappingURL=utils.d.ts.map

package/lib/utils.js

@@ -1,11 +1,11 @@
 export function sleep(milli = 1000) {
     return new Promise((r) => setTimeout(r, milli));
 }
-export function isInViewport(el, partCheck = 'center') {
+export function checkVisibility(el, visibilityCheck = 'top') {
     const rect = el.getBoundingClientRect();
     const viewHeight = window.innerHeight || document.documentElement.clientHeight;
     const viewWidth = window.innerWidth || document.documentElement.clientWidth;
-    switch (partCheck) {
+    switch (visibilityCheck) {
         case 'top':
             return rect.top >= 0 && rect.top <= viewHeight;
         case 'bottom':
@@ -18,6 +18,16 @@ export function isInViewport(el, partCheck = 'center') {
                 centerX >= 0 &&
                 centerX <= viewWidth);
         }
+        case 'fully-visible':
+            return (rect.top >= 0 &&
+                rect.left >= 0 &&
+                rect.bottom <= viewHeight &&
+                rect.right <= viewWidth);
+        case 'not-fully-visible':
+            return (rect.top < 0 ||
+                rect.left < 0 ||
+                rect.bottom > viewHeight ||
+                rect.right > viewWidth);
         case 'bounding-rect':
         default:
             return (rect.bottom > 0 &&

package/package.json

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