From 718c4fd94b3cf6dcb6a859cc568a01438b3587ee Mon Sep 17 00:00:00 2001
From: binrysearch <me@binarysearch.dev>
Date: Wed, 4 Sep 2024 10:15:52 +0100
Subject: [PATCH] disableInteraction

---
 src/packages/tour/disableInteraction.ts | 43 ++++++++++++++++++++
 src/packages/tour/exitIntro.ts          | 36 ++++++++---------
 src/packages/tour/showElement.ts        | 54 +++++++------------------
 3 files changed, 75 insertions(+), 58 deletions(-)
 create mode 100644 src/packages/tour/disableInteraction.ts

diff --git a/src/packages/tour/disableInteraction.ts b/src/packages/tour/disableInteraction.ts
new file mode 100644
index 000000000..1b747105b
--- /dev/null
+++ b/src/packages/tour/disableInteraction.ts
@@ -0,0 +1,43 @@
+import van, { State } from "../dom/van";
+import { disableInteractionClassName } from "./classNames";
+import { setPositionRelativeToStep } from "./position";
+import { TourStep } from "./steps";
+
+const { div } = van.tags;
+
+export type HelperLayerProps = {
+  currentStep: State<number>;
+  steps: TourStep[];
+  targetElement: HTMLElement;
+  helperElementPadding: number;
+};
+
+export const DisableInteraction = ({
+  currentStep,
+  steps,
+  targetElement,
+  helperElementPadding,
+}: HelperLayerProps) => {
+  const step = van.derive(() =>
+    currentStep.val !== undefined ? steps[currentStep.val] : null
+  );
+
+  return () => {
+    if (!step.val) {
+      return null;
+    }
+
+    const disableInteraction = div({
+      className: disableInteractionClassName,
+    });
+
+    setPositionRelativeToStep(
+      targetElement,
+      disableInteraction,
+      step.val,
+      helperElementPadding
+    );
+
+    return disableInteraction;
+  };
+};
diff --git a/src/packages/tour/exitIntro.ts b/src/packages/tour/exitIntro.ts
index d9f6eb1e2..125f5eb6e 100644
--- a/src/packages/tour/exitIntro.ts
+++ b/src/packages/tour/exitIntro.ts
@@ -36,15 +36,15 @@ export default async function exitIntro(
   if (!force && continueExit === false) return false;
 
   // remove overlay layers from the page
-  const overlayLayers = Array.from(
-    queryElementsByClassName(overlayClassName, targetElement)
-  );
+  // const overlayLayers = Array.from(
+  //   queryElementsByClassName(overlayClassName, targetElement)
+  // );
 
-  if (overlayLayers && overlayLayers.length) {
-    for (const overlayLayer of overlayLayers) {
-      removeChild(overlayLayer);
-    }
-  }
+  // if (overlayLayers && overlayLayers.length) {
+  //   for (const overlayLayer of overlayLayers) {
+  //     removeChild(overlayLayer);
+  //   }
+  // }
 
   //const referenceLayer = queryElementByClassName(
   //  tooltipReferenceLayerClassName,
@@ -53,11 +53,11 @@ export default async function exitIntro(
   //removeChild(referenceLayer);
 
   //remove disableInteractionLayer
-  const disableInteractionLayer = queryElementByClassName(
-    disableInteractionClassName,
-    targetElement
-  );
-  removeChild(disableInteractionLayer);
+  // const disableInteractionLayer = queryElementByClassName(
+  //   disableInteractionClassName,
+  //   targetElement
+  // );
+  // removeChild(disableInteractionLayer);
 
   //remove intro floating element
   const floatingElement = queryElementByClassName(
@@ -69,11 +69,11 @@ export default async function exitIntro(
   removeShowElement();
 
   //remove all helper layers
-  const helperLayer = queryElementByClassName(
-    helperLayerClassName,
-    targetElement
-  );
-  await removeAnimatedChild(helperLayer);
+  // const helperLayer = queryElementByClassName(
+  //   helperLayerClassName,
+  //   targetElement
+  // );
+  // await removeAnimatedChild(helperLayer);
 
   //check if any callback is defined
   await tour.callback("exit")?.call(tour);
diff --git a/src/packages/tour/showElement.ts b/src/packages/tour/showElement.ts
index ec33b1fa0..871da80ee 100644
--- a/src/packages/tour/showElement.ts
+++ b/src/packages/tour/showElement.ts
@@ -15,32 +15,7 @@ import getPropValue from "../../util/getPropValue";
 import van from "../dom/van";
 import { HelperLayer } from "./helperLayer";
 import { ReferenceLayer } from "../tooltip/referenceLayer";
-
-/**
- * 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")
-    );
-  };
+import { DisableInteraction } from "./disableInteraction";
 
 /**
  * To set the show element
@@ -88,29 +63,28 @@ export default async function _showElement(tour: Tour, step: TourStep) {
     });
 
     const referenceLayer = ReferenceLayer({
-      tour
+      tour,
     });
 
     //add helper layer to target element
     van.add(tour.getRoot(), helperLayer);
     van.add(tour.getRoot(), referenceLayer);
-  }
 
-  // removing previous disable interaction layer
-  const disableInteractionLayer = queryElementByClassName(
-    disableInteractionClassName,
-    tour.getTargetElement()
-  );
-  if (disableInteractionLayer && disableInteractionLayer.parentNode) {
-    disableInteractionLayer.parentNode.removeChild(disableInteractionLayer);
+    // 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);
 
-  //disable interaction
-  if (step.disableInteraction) {
-    _disableInteraction(tour, step);
-  }
-
   await tour.callback("afterChange")?.call(tour, step.element);
 }