add TourRoot

src/packages/tour/addOverlayLayer.ts

@@ -8,16 +8,16 @@ import { OverlayLayer } from "./overlayLayer";
  * @api private
  */
 export default function addOverlayLayer(tour: Tour) {
-  const exitOnOverlayClick = tour.getOption("exitOnOverlayClick") === true;
+  //const exitOnOverlayClick = tour.getOption("exitOnOverlayClick") === true;
 
-  const overlayLayer = OverlayLayer({
-    exitOnOverlayClick,
-    onExitTour: async () => {
-      return tour.exit();
-    },
-  });
+  //const overlayLayer = OverlayLayer({
+  //  exitOnOverlayClick,
+  //  onExitTour: async () => {
+  //    return tour.exit();
+  //  },
+  //});
 
-  van.add(tour.getRoot(), overlayLayer);
+  //van.add(tour.getRoot(), overlayLayer);
 
   return true;
 }

src/packages/tour/helperLayer.ts

@@ -1,5 +1,5 @@
 import { style } from "../../util/style";
-import van, { State } from "../dom/van";
+import van from "../dom/van";
 import { helperLayerClassName } from "./classNames";
 import { setPositionRelativeToStep } from "./position";
 import { TourStep } from "./steps";
@@ -29,49 +29,41 @@ const getClassName = ({
 };
 
 export type HelperLayerProps = {
-  currentStep: State<number>;
-  steps: TourStep[];
+  step: TourStep;
   targetElement: HTMLElement;
   tourHighlightClass: string;
   overlayOpacity: number;
   helperLayerPadding: number;
 };
 
 export const HelperLayer = ({
-  currentStep,
-  steps,
+  step,
   targetElement,
   tourHighlightClass,
   overlayOpacity,
-  helperLayerPadding
+  helperLayerPadding,
 }: HelperLayerProps) => {
-  const step = van.derive(() =>
-    currentStep.val !== undefined ? steps[currentStep.val] : null
-  );
-
-  return () => {
-    if (!step.val) {
-      return null;
-    }
+  if (!step) {
+    return null;
+  }
 
-    const className = getClassName({ step: step.val, tourHighlightClass });
+  const className = getClassName({ step: step, tourHighlightClass });
 
-    const helperLayer = div({
-      className,
-      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, ${overlayOpacity.toString()}) 0 0 0 5000px`,
-      }),
-    });
+  const helperLayer = div({
+    className,
+    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, ${overlayOpacity.toString()}) 0 0 0 5000px`,
+    }),
+  });
 
-    setPositionRelativeToStep(
-      targetElement,
-      helperLayer,
-      step.val,
-      helperLayerPadding
-    );
+  setPositionRelativeToStep(
+    targetElement,
+    helperLayer,
+    step,
+    helperLayerPadding
+  );
 
-    return helperLayer;
-  };
+  return helperLayer;
 };

src/packages/tour/referenceLayer.ts

@@ -0,0 +1,36 @@
+import van from "../dom/van";
+import { tooltipReferenceLayerClassName } from "./classNames";
+import { setPositionRelativeToStep } from "./position";
+import { TourStep } from "./steps";
+import { TourTooltip, TourTooltipProps } from "./tourTooltip";
+
+const { div } = van.tags;
+
+export type ReferenceLayerProps = TourTooltipProps & {
+  step: TourStep;
+  targetElement: HTMLElement;
+  helperElementPadding: number;
+};
+
+export const ReferenceLayer = ({
+  step,
+  targetElement,
+  helperElementPadding,
+  ...props
+}: ReferenceLayerProps) => {
+  const referenceLayer = div(
+    {
+      className: tooltipReferenceLayerClassName,
+    },
+    TourTooltip(props)
+  );
+
+  setPositionRelativeToStep(
+    targetElement,
+    referenceLayer,
+    step,
+    helperElementPadding
+  );
+
+  return referenceLayer;
+};

src/packages/tour/showElement.ts

@@ -1,22 +1,8 @@
 import { addClass } from "../../util/className";
 import { TourStep } from "./steps";
 import removeShowElement from "./removeShowElement";
-import createElement from "../../util/createElement";
-import {
-  disableInteractionClassName,
-  helperLayerClassName,
-} from "./classNames";
 import { Tour } from "./tour";
-import {
-  queryElementByClassName,
-} from "../../util/queryElement";
-import { setPositionRelativeToStep } from "./position";
 import getPropValue from "../../util/getPropValue";
-import van from "../dom/van";
-import { HelperLayer } from "./helperLayer";
-import { ReferenceLayer } from "../tooltip/referenceLayer";
-import { DisableInteraction } from "./disableInteraction";
-
 /**
  * To set the show element
  * This function set a relative (in most cases) position and changes the z-index
@@ -46,44 +32,9 @@ function setShowElement(targetElement: HTMLElement) {
 export default async function _showElement(tour: Tour, step: TourStep) {
   tour.callback("change")?.call(tour, step.element);
 
-  const oldHelperLayer = queryElementByClassName(helperLayerClassName);
-
   //remove old classes if the element still exist
   removeShowElement();
 
-  // TODO: replace with hasStarted()
-  if (oldHelperLayer === null) {
-    const helperLayer = HelperLayer({
-      currentStep: tour.currentStepSignal,
-      steps: tour.getSteps(),
-      targetElement: tour.getTargetElement(),
-      tourHighlightClass: tour.getOption("highlightClass"),
-      overlayOpacity: tour.getOption("overlayOpacity"),
-      helperLayerPadding: tour.getOption("helperElementPadding"),
-    });
-
-    const referenceLayer = ReferenceLayer({
-      tour,
-    });
-
-    //add helper layer to target element
-    van.add(tour.getRoot(), helperLayer);
-    van.add(tour.getRoot(), referenceLayer);
-
-    // disable interaction
-    if (step.disableInteraction) {
-      van.add(
-        tour.getRoot(),
-        DisableInteraction({
-          currentStep: tour.currentStepSignal,
-          steps: tour.getSteps(),
-          targetElement: tour.getTargetElement(),
-          helperElementPadding: tour.getOption("helperElementPadding"),
-        })
-      );
-    }
-  }
-
   setShowElement(step.element as HTMLElement);
 
   await tour.callback("afterChange")?.call(tour, step.element);

src/packages/tour/start.ts

@@ -1,4 +1,3 @@
-import addOverlayLayer from "./addOverlayLayer";
 import { nextStep } from "./steps";
 import { fetchSteps } from "./steps";
 import { Tour } from "./tour";
@@ -30,13 +29,8 @@ export const start = async (tour: Tour): Promise<Boolean> => {
 
   tour.setSteps(steps);
 
-  //add overlay layer to the page
-  if (addOverlayLayer(tour)) {
-    //then, start the show
-    await nextStep(tour);
+  //then, start the show
+  await nextStep(tour);
 
-    return true;
-  }
-
-  return false;
+  return true;
 };

src/packages/tour/tour.ts

@@ -22,7 +22,7 @@ import DOMEvent from "../../util/DOMEvent";
 import onKeyDown from "./onKeyDown";
 import onResize from "./onResize";
 import van from "../dom/van";
-import appendChild from "../../util/appendChild";
+import { TourRoot } from "./tourRoot";
 
 /**
  * Intro.js Tour class
@@ -34,7 +34,6 @@ 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;
@@ -377,28 +376,16 @@ export class Tour implements Package<TourOptions> {
     }
   }
 
-  // temporary
-  public getRoot = () => this._root;
-
-  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);
-    }
+    van.add(this.getTargetElement(), TourRoot({ tour: this }));
   }
 
   /**
    * Starts the tour and shows the first step
    */
   async start() {
-    this.createRoot();
-
     if (await start(this)) {
+      this.createRoot();
       this.enableKeyboardNavigation();
       this.enableRefreshOnResize();
     }

src/packages/tooltip/referenceLayer.ts → src/packages/tour/tourRoot.ts

@@ -1,24 +1,21 @@
 import van from "../dom/van";
-import { Tour } from "../tour";
-import { doneButtonClassName, tooltipReferenceLayerClassName } from "../tour/classNames";
-import { setPositionRelativeToStep } from "../tour/position";
-import { nextStep, previousStep } from "../tour/steps";
-import { TourTooltip } from "../tour/tourTooltip";
+import { ReferenceLayer } from "./referenceLayer";
+import { HelperLayer } from "./helperLayer";
+import { Tour } from "./tour";
+import { DisableInteraction } from "./disableInteraction";
+import { OverlayLayer } from "./overlayLayer";
+import { nextStep, previousStep } from "./steps";
+import { doneButtonClassName } from "./classNames";
 
 const { div } = van.tags;
 
-export type ReferenceLayerProps = {
-    tour: Tour
+export type TourRootProps = {
+  tour: Tour;
 };
 
-export const ReferenceLayer = ({
-    tour
-}: ReferenceLayerProps) => {
+export const TourRoot = ({ tour }: TourRootProps) => {
   const currentStep = tour.currentStepSignal;
   const steps = tour.getSteps();
-  const targetElement = tour.getTargetElement();
-  const helperElementPadding = tour.getOption("helperElementPadding");
-
   const step = van.derive(() =>
     currentStep.val !== undefined ? steps[currentStep.val] : null
   );
@@ -28,9 +25,27 @@ export const ReferenceLayer = ({
       return null;
     }
 
-    const referenceLayer = div({
-      className: tooltipReferenceLayerClassName,
-    }, TourTooltip({
+    const exitOnOverlayClick = tour.getOption("exitOnOverlayClick") === true;
+    const overlayLayer = OverlayLayer({
+      exitOnOverlayClick,
+      onExitTour: async () => {
+        return tour.exit();
+      },
+    });
+
+    const helperLayer = HelperLayer({
+      step: step.val,
+      targetElement: tour.getTargetElement(),
+      tourHighlightClass: tour.getOption("highlightClass"),
+      overlayOpacity: tour.getOption("overlayOpacity"),
+      helperLayerPadding: tour.getOption("helperElementPadding"),
+    });
+
+    const referenceLayer = ReferenceLayer({
+      step: step.val,
+      targetElement: tour.getTargetElement(),
+      helperElementPadding: tour.getOption("helperElementPadding"),
+
       positionPrecedence: tour.getOption("positionPrecedence"),
       autoPosition: tour.getOption("autoPosition"),
       showStepNumbers: tour.getOption("showStepNumbers"),
@@ -99,15 +114,23 @@ export const ReferenceLayer = ({
         tour.setDontShowAgain((<HTMLInputElement>e.target).checked);
       },
       dontShowAgainLabel: tour.getOption("dontShowAgainLabel"),
-    }));
-
-    setPositionRelativeToStep(
-      targetElement,
+    });
+
+    const disableInteraction = step.val.disableInteraction
+      ? DisableInteraction({
+          currentStep: tour.currentStepSignal,
+          steps: tour.getSteps(),
+          targetElement: tour.getTargetElement(),
+          helperElementPadding: tour.getOption("helperElementPadding"),
+        })
+      : null;
+
+    return div(
+      { className: "introjs-tour" },
+      overlayLayer,
+      helperLayer,
       referenceLayer,
-      step.val,
-      helperElementPadding
+      disableInteraction
     );
-
-    return referenceLayer;
   };
 };