@vdegenne/highlight-manager 0.1.12 → 0.1.13

package/lib/index.d.ts

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

package/lib/index.js

@@ -1,7 +1,7 @@
 import { querySelectorAll } from 'html-vision';
 import { checkVisibility, sleep } from './utils.js';
 const scrollStrategyDefaults = {
-    visibilityCheck: 'top',
+    when: (is) => !is('top-visible'),
     behavior: 'smooth',
     block: undefined,
     inline: undefined,
@@ -192,7 +192,7 @@ export class HighLightManager {
             return false;
         }
         if (_options.scrollStrategy &&
-            !checkVisibility(elementsToHighlight[0], _options.scrollStrategy.visibilityCheck)) {
+            !checkVisibility(elementsToHighlight[0], _options.scrollStrategy.when)) {
             elementsToHighlight[0]?.scrollIntoView({
                 behavior: _options.scrollStrategy.behavior,
                 block: _options.scrollStrategy.block,

package/lib/utils.d.ts

@@ -1,4 +1,9 @@
 export declare function sleep(milli?: number): Promise<unknown>;
-export type VisibilityCheck = 'top' | 'center' | 'bounding-rect' | 'bottom' | 'fully-visible' | 'not-fully-visible';
-export declare function checkVisibility(el: HTMLElement, visibilityCheck?: VisibilityCheck): 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,39 +1,41 @@
 export function sleep(milli = 1000) {
     return new Promise((r) => setTimeout(r, milli));
 }
-export function checkVisibility(el, visibilityCheck = 'top') {
+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 (visibilityCheck) {
-        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 '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 &&
-                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.12",
+	"version": "0.1.13",
 	"description": "helper to navigate/highlight elements in a page based on a css selector",
 	"type": "module",
 	"exports": {