@vdegenne/highlight-manager 0.1.8 → 0.1.10

package/lib/index.d.ts

@@ -20,9 +20,13 @@ interface ScrollStrategy {
      */
     behavior: ScrollBehavior;
     /**
-     * @default 'start'
+     * @default undefined
      */
-    logicalPosition: ScrollLogicalPosition;
+    block: ScrollLogicalPosition | undefined;
+    /**
+     * @default undefined
+     */
+    inline: ScrollLogicalPosition | undefined;
 }
 interface Options {
     css: string;
@@ -47,9 +51,11 @@ interface Options {
      */
     applyStyleSheetTo: Document | HTMLElement | ShadowRoot;
     /**
+     * Set to at least `{}` to activate scrolling when offscreen
+     *
      * @default undefined
      */
-    scrollStrategy: ScrollStrategy | undefined;
+    scrollStrategy: Partial<ScrollStrategy> | undefined;
     /**
      * If true, will select the next visible candidate if the highlight is offscreen.
      *
@@ -59,7 +65,7 @@ interface Options {
 }
 export declare function setGlobalBeforeHighlight(fct: () => void): void;
 interface HighlightOptions {
-    scrollStrategy: ScrollStrategy | undefined;
+    scrollStrategy: Partial<ScrollStrategy> | undefined;
 }
 export declare class HighLightManager {
     #private;
@@ -78,7 +84,7 @@ export declare class HighLightManager {
     /**
      * @returns {boolean} true if the highlight succeeded, false otherwise.
      */
-    highlight(start: number, end?: number, unhighlightAll?: boolean, cache?: boolean, options?: HighlightOptions): boolean;
+    highlight(start: number, end?: number, unhighlightAll?: boolean, cache?: boolean, options?: Partial<HighlightOptions>): boolean;
     previous(step?: number, cache?: boolean): void;
     next(step?: number, cache?: boolean): void;
     extendLeftHighlight(step?: number, cache?: boolean): void;

package/lib/index.js

@@ -3,7 +3,8 @@ import { isInViewport, sleep } from './utils.js';
 const scrollStrategyDefaults = {
     whenWhatPartIsHidden: 'center',
     behavior: 'smooth',
-    logicalPosition: 'start',
+    block: undefined,
+    inline: undefined,
 };
 const defaults = {
     atomicSelection(_element) {
@@ -155,7 +156,7 @@ export class HighLightManager {
     /**
      * @returns {boolean} true if the highlight succeeded, false otherwise.
      */
-    highlight(start, end, unhighlightAll = true, cache = false, options) {
+    highlight(start, end, unhighlightAll = true, cache = false, options = {}) {
         if (end === undefined) {
             end = start;
         }
@@ -172,11 +173,13 @@ export class HighLightManager {
         }
         // console.log(highlightIndexStart, highlightIndexEnd, start, end)
         const _options = {
-            scrollStrategy: {
-                ...scrollStrategyDefaults,
-                ...this.#options.scrollStrategy,
-                ...options?.scrollStrategy,
-            },
+            scrollStrategy: options?.scrollStrategy || this.#options.scrollStrategy
+                ? {
+                    ...scrollStrategyDefaults,
+                    ...this.#options.scrollStrategy,
+                    ...options?.scrollStrategy,
+                }
+                : undefined,
         };
         globalBeforeHighlight?.();
         this.#options.beforeHighlight?.();
@@ -192,8 +195,8 @@ export class HighLightManager {
             !isInViewport(elementsToHighlight[0], _options.scrollStrategy.whenWhatPartIsHidden)) {
             elementsToHighlight[0]?.scrollIntoView({
                 behavior: _options.scrollStrategy.behavior,
-                block: _options.scrollStrategy.logicalPosition,
-                inline: _options.scrollStrategy.logicalPosition,
+                block: _options.scrollStrategy.block,
+                inline: _options.scrollStrategy.block,
             });
         }
         elementsToHighlight.forEach((el) => el.setAttribute(`highlight${this.#id}`, ''));

package/package.json

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