helperLayer

src/packages/tour/addOverlayLayer.ts

@@ -25,7 +25,7 @@ export default function addOverlayLayer(tour: Tour) {
     }),
   });
 
-  tour.appendToRoot(overlayLayer);
+  van.add(tour.getRoot(), overlayLayer);
 
   if (exitOnOverlayClick) {
     overlayLayer.onclick = async () => {

src/packages/tour/helperLayer.ts

@@ -0,0 +1,77 @@
+import { style } from "../../util/style";
+import van, { State } from "../dom/van";
+import { helperLayerClassName } from "./classNames";
+import { setPositionRelativeToStep } from "./position";
+import { TourStep } from "./steps";
+
+const { div } = van.tags;
+
+const getClassName = ({
+  step,
+  tourHighlightClass,
+}: {
+  step: TourStep;
+  tourHighlightClass: string;
+}) => {
+  let highlightClass = helperLayerClassName;
+
+  // check for a current step highlight class
+  if (typeof step.highlightClass === "string") {
+    highlightClass += ` ${step.highlightClass}`;
+  }
+
+  // check for options highlight class
+  if (typeof tourHighlightClass === "string") {
+    highlightClass += ` ${tourHighlightClass}`;
+  }
+
+  return highlightClass;
+};
+
+export type HelperLayerProps = {
+  currentStep: State<number>;
+  steps: TourStep[];
+  targetElement: HTMLElement;
+  tourHighlightClass: string;
+  overlayOpacity: number;
+  helperLayerPadding: number;
+};
+
+export const HelperLayer = ({
+  currentStep,
+  steps,
+  targetElement,
+  tourHighlightClass,
+  overlayOpacity,
+  helperLayerPadding
+}: HelperLayerProps) => {
+  const step = van.derive(() =>
+    currentStep.val !== undefined ? steps[currentStep.val] : null
+  );
+
+  return () => {
+    if (!step.val) {
+      return null;
+    }
+
+    const className = getClassName({ step: step.val, 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`,
+      }),
+    });
+
+    setPositionRelativeToStep(
+      targetElement,
+      helperLayer,
+      step.val,
+      helperLayerPadding
+    );
+
+    return helperLayer;
+  };
+};

src/packages/tour/showElement.ts

@@ -4,8 +4,6 @@ import { addClass, setClass } from "../../util/className";
 import { TourStep, nextStep, previousStep } from "./steps";
 import removeShowElement from "./removeShowElement";
 import createElement from "../../util/createElement";
-import setStyle, { style } from "../../util/style";
-import appendChild from "../../util/appendChild";
 import {
   disableInteractionClassName,
   doneButtonClassName,
@@ -22,6 +20,7 @@ import { setPositionRelativeToStep } from "./position";
 import getPropValue from "../../util/getPropValue";
 import { TourTooltip } from "./tourTooltip";
 import van from "../dom/van";
+import { HelperLayer } from "./helperLayer";
 
 const { div } = van.tags;
 
@@ -150,16 +149,15 @@ export default async function _showElement(tour: Tour, step: TourStep) {
 
     // end of old element if-else condition
   } else {
-    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 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 = div({
       className: tooltipReferenceLayerClassName,
     });
@@ -172,12 +170,6 @@ export default async function _showElement(tour: Tour, step: TourStep) {
 
     //set new position to helper layer
     const helperLayerPadding = tour.getOption("helperElementPadding");
-    setPositionRelativeToStep(
-      tour.getTargetElement(),
-      helperLayer,
-      step,
-      helperLayerPadding
-    );
     setPositionRelativeToStep(
       tour.getTargetElement(),
       referenceLayer,
@@ -186,7 +178,7 @@ export default async function _showElement(tour: Tour, step: TourStep) {
     );
 
     //add helper layer to target element
-    tour.appendToRoot(helperLayer, true);
+    van.add(tour.getRoot(), helperLayer);
     tour.appendToRoot(referenceLayer);
 
     const tooltip = TourTooltip({

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 "src/util/appendChild";
+import appendChild from "../../util/appendChild";
 
 /**
  * Intro.js Tour class
@@ -377,6 +377,9 @@ export class Tour implements Package<TourOptions> {
     }
   }
 
+  // temporary
+  public getRoot = () => this._root;
+
   public appendToRoot(element: HTMLElement, animate = false) {
     appendChild(this._root, element, animate);
   }