fix: allow disabling scrollIntoView via "no-scroll" option (step-lvl …

…and/or top-lvl)

index.html

@@ -524,7 +524,9 @@ <h4>Boarding Definition</h4>
   prevBtnText: 'Previous', // Previous button text for this step
   showButtons: false, // Do not show control buttons in footer
   keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move)
-  scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
+  scrollIntoViewOptions: {
+    behaviour: "smooth",
+  }, // We use `scrollIntoView()` when possible, pass here the options for it if you want any. Alternatively, you can also disable this functionallity by setting scrollIntoViewOptions to "no-scroll"
   onBeforeHighlighted: (Element) {}, // Called when element is about to be highlighted
   onHighlighted: (Element) {}, // Called when element is fully highlighted
   onDeselected: (Element) {}, // Called when element has been deselected

readme.md

@@ -266,7 +266,9 @@ const boarding = new Boarding({
   prevBtnText: "Previous", // Previous button text for this step
   showButtons: false, // Do not show control buttons in footer
   keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move)
-  scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
+  scrollIntoViewOptions: {
+    behaviour: "smooth",
+  }, // We use `scrollIntoView()` when possible, pass here the options for it if you want any. Alternatively, you can also disable this functionallity by setting scrollIntoViewOptions to "no-scroll"
   onBeforeHighlighted: (HighlightElement) => {}, // Called when element is about to be highlighted
   onHighlighted: (HighlightElement) => {}, // Called when element is fully highlighted
   onDeselected: (HighlightElement) => {}, // Called when element has been deselected

src/lib/boarding-types.ts

@@ -22,7 +22,7 @@ export interface BoardingSharedOptions {
    * Options to be passed to scrollIntoView if supported by browser
    * @default { behavior: 'instant', block: 'center' }
    */
-  scrollIntoViewOptions: ScrollIntoViewOptions;
+  scrollIntoViewOptions: ScrollIntoViewOptions | "no-scroll";
   /**
    * Distance of elements corner from the edges of the overlay
    * @default 10

src/lib/boarding.ts

@@ -645,7 +645,10 @@ class Boarding {
         padding: this.options.padding,
         offset: this.options.offset,
         animate: this.options.animate,
-        scrollIntoViewOptions: this.options.scrollIntoViewOptions,
+        scrollIntoViewOptions:
+          currentStep.scrollIntoViewOptions === undefined
+            ? this.options.scrollIntoViewOptions
+            : currentStep.scrollIntoViewOptions,
         // popover options
         title: currentStep.popover.title,
         description: currentStep.popover.description,
@@ -693,7 +696,10 @@ class Boarding {
     return new HighlightElement({
       highlightDomElement: domElement,
       options: {
-        scrollIntoViewOptions: this.options.scrollIntoViewOptions,
+        scrollIntoViewOptions:
+          currentStep.scrollIntoViewOptions === undefined
+            ? this.options.scrollIntoViewOptions
+            : currentStep.scrollIntoViewOptions,
         onBeforeHighlighted:
           currentStep.onBeforeHighlighted || this.options.onBeforeHighlighted,
         onHighlighted: currentStep.onHighlighted || this.options.onHighlighted,

src/lib/core/cutout.ts

@@ -61,7 +61,7 @@ export function createSvgCutout({
   svg.setAttribute("viewBox", `0 0 ${windowX} ${windowY}`);
   svg.setAttribute("xmlSpace", "preserve");
   svg.setAttribute("xmlnsXlink", "http://www.w3.org/1999/xlink");
-  svg.setAttribute("version", "version");
+  svg.setAttribute("version", "1.1");
   svg.style.fillRule = "evenodd";
   svg.style.clipRule = "evenodd";
   svg.style.strokeLinejoin = "round";

src/lib/core/highlight-element.ts

@@ -3,16 +3,13 @@ import { CLASS_ACTIVE_HIGHLIGHTED_ELEMENT } from "../common/constants";
 import { bringInView } from "../common/utils";
 import Popover from "./popover";
 
-/** The top-level options that are shared between multiple classes that popover supports */
-type HighlightElementSupportedSharedOptions = Pick<
-  BoardingSharedOptions,
-  "scrollIntoViewOptions"
->;
-
 /** The options of popover that will come from the top-level but can also be overwritten */
 export interface HighlightElementHybridOptions
   extends Partial<
-    Pick<BoardingSharedOptions, "padding" | "radius" | "strictClickHandling">
+    Pick<
+      BoardingSharedOptions,
+      "padding" | "radius" | "strictClickHandling" | "scrollIntoViewOptions"
+    >
   > {
   /**
    * Callback to be called when element is about to be highlighted
@@ -35,9 +32,7 @@ export interface HighlightElementHybridOptions
    */
   onPrevious?: (element: HighlightElement) => void;
 }
-interface HighlightElementOptions
-  extends HighlightElementHybridOptions,
-    HighlightElementSupportedSharedOptions {}
+interface HighlightElementOptions extends HighlightElementHybridOptions {}
 
 /**
  * Wrapper around DOMElements to enrich them
@@ -118,7 +113,9 @@ class HighlightElement {
    * Is called when the element has been successfully highlighted
    */
   public onHighlighted() {
-    bringInView(this.highlightDomElement, this.options.scrollIntoViewOptions);
+    if (this.options.scrollIntoViewOptions !== "no-scroll") {
+      bringInView(this.highlightDomElement, this.options.scrollIntoViewOptions);
+    }
 
     // Show the popover once the item has been
     // brought in the view, this would allow us to handle

src/lib/core/popover.ts

@@ -210,10 +210,13 @@ export default class Popover {
     this.renderFooter();
 
     this.setPosition();
-    bringInView(
-      this.popover.popoverWrapper,
-      this.options.scrollIntoViewOptions
-    );
+
+    if (this.options.scrollIntoViewOptions !== "no-scroll") {
+      bringInView(
+        this.popover.popoverWrapper,
+        this.options.scrollIntoViewOptions
+      );
+    }
   }
 
   /**

src/main.ts

@@ -113,6 +113,7 @@ document.addEventListener("DOMContentLoaded", function () {
         description:
           "Have a look at the usage examples and see how you can use it.",
       },
+      scrollIntoViewOptions: "no-scroll",
     },
     {
       element: "#boarding-demo-head",
@@ -121,6 +122,7 @@ document.addEventListener("DOMContentLoaded", function () {
         description:
           "This was just a sneak peak, have a look at the API section and examples to learn more!",
       },
+      scrollIntoViewOptions: "no-scroll",
     },
   ];