overlayLayer

src/packages/tour/addOverlayLayer.ts

@@ -1,9 +1,6 @@
-import { style } from "../../util/style";
 import { Tour } from "./tour";
-import { overlayClassName } from "./classNames";
 import van from "../dom/van";
-
-const { div } = van.tags;
+import { OverlayLayer } from "./overlayLayer";
 
 /**
  * Add overlay layer to the page
@@ -13,25 +10,14 @@ const { div } = van.tags;
 export default function addOverlayLayer(tour: Tour) {
   const exitOnOverlayClick = tour.getOption("exitOnOverlayClick") === true;
 
-  const overlayLayer = div({
-    className: overlayClassName,
-    style: style({
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      position: "fixed",
-      cursor: exitOnOverlayClick ? "pointer" : "auto",
-    }),
+  const overlayLayer = OverlayLayer({
+    exitOnOverlayClick,
+    onExitTour: async () => {
+      return tour.exit();
+    },
   });
 
   van.add(tour.getRoot(), overlayLayer);
 
-  if (exitOnOverlayClick) {
-    overlayLayer.onclick = async () => {
-      await tour.exit();
-    };
-  }
-
   return true;
 }

src/packages/tour/overlayLayer.ts

@@ -0,0 +1,36 @@
+import { style } from "../../util/style";
+import { overlayClassName } from "./classNames";
+import van from "../dom/van";
+import { Tour } from "./tour";
+
+const { div } = van.tags;
+
+export type OverlayLayerProps = {
+  exitOnOverlayClick: boolean;
+  onExitTour: () => Promise<Tour>;
+};
+
+export const OverlayLayer = ({
+  exitOnOverlayClick,
+  onExitTour,
+}: OverlayLayerProps) => {
+  const overlayLayer = div({
+    className: overlayClassName,
+    style: style({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      position: "fixed",
+      cursor: exitOnOverlayClick ? "pointer" : "auto",
+    }),
+  });
+
+  if (exitOnOverlayClick) {
+    overlayLayer.onclick = async () => {
+      await onExitTour();
+    };
+  }
+
+  return overlayLayer;
+};