add root

src/packages/hint/tooltip.ts

@@ -9,7 +9,7 @@ import { Hint } from "./hint";
 import createElement from "../../util/createElement";
 import { setClass } from "../../util/className";
 import { hideHint } from "./hide";
-import { setPositionRelativeTo } from "../../util/setPositionRelativeTo";
+import { setPositionRelativeTo } from "../../util/positionRelativeTo";
 import DOMEvent from "../../util/DOMEvent";
 import getOffset from "../../util/getOffset";
 import { HintTooltip } from "./hintTooltip";

src/packages/tour/addOverlayLayer.ts

@@ -1,33 +1,33 @@
-import createElement from "../../util/createElement";
-import setStyle from "../../util/setStyle";
+import { style } from "../../util/style";
 import { Tour } from "./tour";
 import { overlayClassName } from "./classNames";
+import van from "../dom/van";
+
+const { div } = van.tags;
 
 /**
  * Add overlay layer to the page
  *
  * @api private
  */
 export default function addOverlayLayer(tour: Tour) {
-  const overlayLayer = createElement("div", {
-    className: overlayClassName,
-  });
+  const exitOnOverlayClick = tour.getOption("exitOnOverlayClick") === true;
 
-  setStyle(overlayLayer, {
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    position: "fixed",
+  const overlayLayer = div({
+    className: overlayClassName,
+    style: style({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      position: "fixed",
+      cursor: exitOnOverlayClick ? "pointer" : "auto",
+    }),
   });
 
-  tour.getTargetElement().appendChild(overlayLayer);
-
-  if (tour.getOption("exitOnOverlayClick") === true) {
-    setStyle(overlayLayer, {
-      cursor: "pointer",
-    });
+  tour.appendToRoot(overlayLayer);
 
+  if (exitOnOverlayClick) {
     overlayLayer.onclick = async () => {
       await tour.exit();
     };

src/packages/tour/exitIntro.ts

@@ -46,11 +46,11 @@ export default async function exitIntro(
     }
   }
 
-  const referenceLayer = queryElementByClassName(
-    tooltipReferenceLayerClassName,
-    targetElement
-  );
-  removeChild(referenceLayer);
+  //const referenceLayer = queryElementByClassName(
+  //  tooltipReferenceLayerClassName,
+  //  targetElement
+  //);
+  //removeChild(referenceLayer);
 
   //remove disableInteractionLayer
   const disableInteractionLayer = queryElementByClassName(

src/packages/tour/position.ts

@@ -1,4 +1,4 @@
-import { setPositionRelativeTo } from "../../util/setPositionRelativeTo";
+import { setPositionRelativeTo } from "../../util/positionRelativeTo";
 import { TourStep } from "./steps";
 
 /**

src/packages/tour/showElement.ts

@@ -4,7 +4,7 @@ import { addClass, setClass } from "../../util/className";
 import { TourStep, nextStep, previousStep } from "./steps";
 import removeShowElement from "./removeShowElement";
 import createElement from "../../util/createElement";
-import setStyle from "../../util/setStyle";
+import setStyle, { style } from "../../util/style";
 import appendChild from "../../util/appendChild";
 import {
   disableInteractionClassName,
@@ -21,6 +21,35 @@ import {
 import { setPositionRelativeToStep } from "./position";
 import getPropValue from "../../util/getPropValue";
 import { TourTooltip } from "./tourTooltip";
+import van from "../dom/van";
+
+const { div } = van.tags;
+
+/**
+ * Add disableinteraction layer and adjust the size and position of the layer
+ *
+ * @api private
+ */
+export const _disableInteraction = (tour: Tour, step: TourStep) => {
+    let disableInteractionLayer = queryElementByClassName(
+      disableInteractionClassName
+    );
+
+    if (disableInteractionLayer === null) {
+      disableInteractionLayer = createElement("div", {
+        className: disableInteractionClassName,
+      });
+
+      tour.getTargetElement().appendChild(disableInteractionLayer);
+    }
+
+    setPositionRelativeToStep(
+      tour.getTargetElement(),
+      disableInteractionLayer,
+      step,
+      tour.getOption("helperElementPadding")
+    );
+  };
 
 /**
  * To set the show element
@@ -76,7 +105,6 @@ export default async function _showElement(tour: Tour, step: TourStep) {
       oldReferenceLayer
     );
 
-
     //update or reset the helper highlight class
     setClass(oldHelperLayer, highlightClass);
 
@@ -122,21 +150,20 @@ export default async function _showElement(tour: Tour, step: TourStep) {
 
     // end of old element if-else condition
   } else {
-    const helperLayer = createElement("div", {
+    const helperLayer = div({
       className: highlightClass,
+      style: style({
+        // the inner box shadow is the border for the highlighted element
+        // the outer box shadow is the overlay effect
+        "box-shadow": `0 0 1px 2px rgba(33, 33, 33, 0.8), rgba(33, 33, 33, ${tour
+          .getOption("overlayOpacity")
+          .toString()}) 0 0 0 5000px`,
+      }),
     });
-    const referenceLayer = createElement("div", {
+    const referenceLayer = div({
       className: tooltipReferenceLayerClassName,
     });
 
-    setStyle(helperLayer, {
-      // the inner box shadow is the border for the highlighted element
-      // the outer box shadow is the overlay effect
-      "box-shadow": `0 0 1px 2px rgba(33, 33, 33, 0.8), rgba(33, 33, 33, ${tour
-        .getOption("overlayOpacity")
-        .toString()}) 0 0 0 5000px`,
-    });
-
     // target is within a scrollable element
     scrollParentToElement(
       tour.getOption("scrollToElement"),
@@ -159,8 +186,8 @@ export default async function _showElement(tour: Tour, step: TourStep) {
     );
 
     //add helper layer to target element
-    appendChild(tour.getTargetElement(), helperLayer, true);
-    appendChild(tour.getTargetElement(), referenceLayer);
+    tour.appendToRoot(helperLayer, true);
+    tour.appendToRoot(referenceLayer);
 
     const tooltip = TourTooltip({
       positionPrecedence: tour.getOption("positionPrecedence"),
@@ -230,7 +257,8 @@ export default async function _showElement(tour: Tour, step: TourStep) {
       dontShowAgainLabel: tour.getOption("dontShowAgainLabel"),
     });
 
-    referenceLayer.appendChild(tooltip);
+    van.add(referenceLayer, tooltip);
+    //referenceLayer.appendChild(tooltip);
 
     // change the scroll of the window, if needed
     scrollTo(
@@ -255,5 +283,10 @@ export default async function _showElement(tour: Tour, step: TourStep) {
 
   setShowElement(step.element as HTMLElement);
 
+  //disable interaction
+  if (step.disableInteraction) {
+    _disableInteraction(tour, step);
+  }
+
   await tour.callback("afterChange")?.call(tour, step.element);
 }

src/packages/tour/tour.ts

@@ -22,6 +22,7 @@ import DOMEvent from "../../util/DOMEvent";
 import onKeyDown from "./onKeyDown";
 import onResize from "./onResize";
 import van from "../dom/van";
+import appendChild from "src/util/appendChild";
 
 /**
  * Intro.js Tour class
@@ -33,6 +34,7 @@ export class Tour implements Package<TourOptions> {
   private _direction: "forward" | "backward";
   private readonly _targetElement: HTMLElement;
   private _options: TourOptions;
+  private _root: HTMLElement;
 
   private readonly callbacks: {
     beforeChange?: introBeforeChangeCallback;
@@ -375,10 +377,24 @@ export class Tour implements Package<TourOptions> {
     }
   }
 
+  public appendToRoot(element: HTMLElement, animate = false) {
+    appendChild(this._root, element, animate);
+  }
+
+  private createRoot() {
+    if (!this._root) {
+      const { div } = van.tags;
+      this._root = div({ className: "introjs" });
+      this.getTargetElement().appendChild(this._root);
+    }
+  }
+
   /**
    * Starts the tour and shows the first step
    */
   async start() {
+    this.createRoot();
+
     if (await start(this)) {
       this.enableKeyboardNavigation();
       this.enableRefreshOnResize();

src/packages/tour/tourTooltip.ts

@@ -425,66 +425,77 @@ export const TourTooltip = ({
   dontShowAgainLabel,
   ...props
 }: TourTooltipProps) => {
-  const children = [];
+  const step = van.derive(() =>
+    currentStep.val !== undefined ? steps[currentStep.val] : null
+  );
 
-  const step = van.derive(() => steps[currentStep.val!]);
-  const title = van.derive(() => step.val!.title);
-  const text = van.derive(() => step.val!.intro);
-  const position = van.derive(() => step.val!.position);
-  const targetOffset = van.derive(() => getOffset(step.val!.element as HTMLElement));
+  return () => {
+    // there is nothing to be shown if the step is not defined
+    if (!step.val) {
+      return null;
+    }
+
+    const children = [];
+    const title = van.derive(() => step.val!.title);
+    const text = van.derive(() => step.val!.intro);
+    const position = van.derive(() => step.val!.position);
+    const targetOffset = van.derive(() =>
+      getOffset(step.val!.element as HTMLElement)
+    );
 
-  children.push(Header({ title: title.val!, skipLabel, onSkipClick }));
+    children.push(Header({ title: title.val!, skipLabel, onSkipClick }));
 
-  children.push(
-      div({ className: tooltipTextClassName }, p(text)),
-);
+    children.push(div({ className: tooltipTextClassName }, p(text)));
 
-  if (dontShowAgain) {
-    children.push(DontShowAgain({ dontShowAgainLabel, onDontShowAgainChange }));
-  }
+    if (dontShowAgain) {
+      children.push(
+        DontShowAgain({ dontShowAgainLabel, onDontShowAgainChange })
+      );
+    }
 
-  if (bullets) {
-    children.push(Bullets({ steps, currentStep, onBulletClick }));
-  }
+    if (bullets) {
+      children.push(Bullets({ steps, currentStep, onBulletClick }));
+    }
 
-  if (progress) {
-    children.push(
-      ProgressBar({ steps, currentStep, progressBarAdditionalClass })
-    );
-  }
-
-  if (stepNumbers) {
-    children.push(StepNumber({ step: step.val!, steps, stepNumbersOfLabel }));
-  }
-
-  if (buttons) {
-    children.push(
-      Buttons({
-        steps,
-        currentStep,
-
-        nextLabel: nextLabel,
-        onNextClick: onNextClick,
-
-        prevLabel: prevLabel,
-        onPrevClick: onPrevClick,
-
-        buttonClass,
-        nextToDone,
-        doneLabel,
-        hideNext,
-        hidePrev,
-      })
+    if (progress) {
+      children.push(
+        ProgressBar({ steps, currentStep, progressBarAdditionalClass })
+      );
+    }
+
+    if (stepNumbers) {
+      children.push(StepNumber({ step: step.val!, steps, stepNumbersOfLabel }));
+    }
+
+    if (buttons) {
+      children.push(
+        Buttons({
+          steps,
+          currentStep,
+
+          nextLabel: nextLabel,
+          onNextClick: onNextClick,
+
+          prevLabel: prevLabel,
+          onPrevClick: onPrevClick,
+
+          buttonClass,
+          nextToDone,
+          doneLabel,
+          hideNext,
+          hidePrev,
+        })
+      );
+    }
+
+    return Tooltip(
+      {
+        ...props,
+        hintMode: false,
+        position,
+        targetOffset,
+      },
+      children
     );
-  }
-
-  return Tooltip(
-    {
-      ...props,
-      hintMode: false,
-      position,
-      targetOffset
-    },
-    children
-  );
+  };
 };

src/util/appendChild.ts

@@ -1,4 +1,4 @@
-import setStyle from "./setStyle";
+import setStyle from "./style";
 
 /**
  * Appends `element` to `parentElement`

src/util/createElement.ts

@@ -1,4 +1,4 @@
-import setStyle from "./setStyle";
+import setStyle from "./style";
 
 /**
  * Create a DOM element with various attributes

src/util/setPositionRelativeTo.test.ts → src/util/positionRelativeTo.test.ts

@@ -1,4 +1,4 @@
-import { setPositionRelativeTo } from "./setPositionRelativeTo";
+import { setPositionRelativeTo } from "./positionRelativeTo";
 import createElement from "./createElement";
 import { getBoundingClientRectSpy } from "../../tests/jest/helper";