Add FloatingElement

src/packages/tour/components/FloatingElement.ts

@@ -0,0 +1,23 @@
+import van, { State } from "../../dom/van";
+import { floatingElementClassName } from "../classNames";
+
+const { div } = van.tags;
+
+export type FloatingElementProps = {
+ currentStep: State<number | undefined>;
+};
+
+export const FloatingElement = ({ currentStep }: FloatingElementProps) => {
+ const floatingElement = div({
+ className: floatingElementClassName,
+ });
+
+ van.derive(() => {
+ // meaning the tour has ended so we should remove the floating element
+ if (currentStep.val === undefined) {
+ floatingElement.remove();
+ }
+ });
+
+ return floatingElement;
+};

src/packages/tour/exitIntro.ts

@@ -1,8 +1,5 @@
 import removeShowElement from "./removeShowElement";
-import { removeChild } from "../../util/removeChild";
 import { Tour } from "./tour";
-import { floatingElementClassName } from "./classNames";
-import { queryElementByClassName } from "../../util/queryElement";
 
 /**
  * Exit from intro
@@ -25,13 +22,6 @@ export default async function exitIntro(
  // otherwise, if `onBeforEexit` returned `false`, don't exit the intro
  if (!force && continueExit === false) return false;
 
- //remove intro floating element
- const floatingElement = queryElementByClassName(
- floatingElementClassName,
- targetElement
- );
- removeChild(floatingElement);
-
  removeShowElement();
 
  //check if any callback is defined

src/packages/tour/steps.ts

@@ -1,14 +1,8 @@
 import { TooltipPosition } from "../../packages/tooltip";
 import showElement from "./showElement";
-import {
- queryElement,
- queryElementByClassName,
- queryElements,
-} from "../../util/queryElement";
+import { queryElement, queryElements } from "../../util/queryElement";
 import cloneObject from "../../util/cloneObject";
-import createElement from "../../util/createElement";
 import { Tour } from "./tour";
-import { floatingElementClassName } from "./classNames";
 import {
  dataDisableInteraction,
  dataHighlightClass,
@@ -143,19 +137,7 @@ export const fetchSteps = (tour: Tour) => {
 
  // tour without element
  if (!step.element) {
- let floatingElementQuery = queryElementByClassName(
- floatingElementClassName
- );
-
- if (!floatingElementQuery) {
- floatingElementQuery = createElement("div", {
- className: floatingElementClassName,
- });
-
- document.body.appendChild(floatingElementQuery);
- }
-
- step.element = floatingElementQuery;
+ step.element = tour.appendFloatingElement();
  step.position = "floating";
  }
 

src/packages/tour/tour.ts

@@ -23,6 +23,7 @@ import onKeyDown from "./onKeyDown";
 import onResize from "./onResize";
 import van from "../dom/van";
 import { TourRoot } from "./components/TourRoot";
+import { FloatingElement } from "./components/FloatingElement";
 
 /**
  * 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 _floatingElement: Element | undefined;
 
  private readonly callbacks: {
  beforeChange?: introBeforeChangeCallback;
@@ -388,6 +390,27 @@ export class Tour implements Package<TourOptions> {
  }
  }
 
+ /**
+ * Append the floating element to the target element.
+ * Floating element is a helper element that is used when the step does not have a target element.
+ * For internal use only.
+ */
+ appendFloatingElement() {
+ if (!this._floatingElement) {
+ this._floatingElement = FloatingElement({
+ currentStep: this.getCurrentStepSignal(),
+ });
+
+ // only add the floating element once per tour instance
+ van.add(this.getTargetElement(), this._floatingElement);
+ }
+
+ return this._floatingElement;
+ }
+
+ /**
+ * Create the root element for the tour
+ */
  private createRoot() {
  van.add(this.getTargetElement(), TourRoot({ tour: this }));
  }