className and onKeyDown

src/intro.ts

@@ -10,7 +10,7 @@ import {
   showHintDialog,
   showHints,
 } from "./core/hint";
-import introForElement from "./packages/tour/introForElement";
+import introForElement from "./packages/tour/render";
 import refresh from "./packages/tour/refresh";
 import {
   HintStep,

src/packages/tour/addOverlayLayer.ts

@@ -0,0 +1,38 @@
+import exitIntro from "./exitIntro";
+import createElement from "../../util/createElement";
+import setStyle from "../../util/setStyle";
+import { Tour } from "./tour";
+import { overlayClassName } from "./classNames";
+
+/**
+ * Add overlay layer to the page
+ *
+ * @api private
+ */
+export default function addOverlayLayer(tour: Tour) {
+  const overlayLayer = createElement("div", {
+    className: overlayClassName,
+  });
+
+  setStyle(overlayLayer, {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    position: "fixed",
+  });
+
+  tour.getTargetElement().appendChild(overlayLayer);
+
+  if (tour.getOption("exitOnOverlayClick") === true) {
+    setStyle(overlayLayer, {
+      cursor: "pointer",
+    });
+
+    overlayLayer.onclick = async () => {
+      await exitIntro(tour);
+    };
+  }
+
+  return true;
+}

src/packages/tour/classNames.ts

@@ -23,3 +23,4 @@ export const fullButtonClassName = "introjs-fullbutton";
 export const activeClassName = "active";
 export const fixedTooltipClassName = "introjs-fixedTooltip";
 export const floatingElementClassName = "introjsFloatingElement";
+export const showElementClassName = "introjs-showElement";

src/packages/tour/exitIntro.ts

@@ -1,7 +1,7 @@
 import DOMEvent from "../../util/DOMEvent";
-import onKeyDown from "../../core/onKeyDown";
+import onKeyDown from "./onKeyDown";
 import onResize from "./onResize";
-import removeShowElement from "../../core/removeShowElement";
+import removeShowElement from "./removeShowElement";
 import removeChild from "../../util/removeChild";
 import { Tour } from "./tour";
 import {

src/core/onKeyDown.ts → src/packages/tour/onKeyDown.ts

@@ -1,8 +1,8 @@
-import { nextStep, previousStep } from "../packages/tour/steps";
-import exitIntro from "../packages/tour/exitIntro";
-import { IntroJs } from "../intro";
-import isFunction from "../util/isFunction";
-import { Tour } from "src/packages/tour/tour";
+import { nextStep, previousStep } from "./steps";
+import exitIntro from "./exitIntro";
+import { Tour } from "./tour";
+import { previousButtonClassName, skipButtonClassName } from "./classNames";
+import { dataStepNumberAttribute } from "./dataAttributes";
 
 /**
  * on keyCode:
@@ -27,42 +27,40 @@ export default async function onKeyDown(tour: Tour, e: KeyboardEvent) {
     code = e.charCode === null ? e.keyCode : e.charCode;
   }
 
-  if ((code === "Escape" || code === 27) && tour.getOption('exitOnEsc') === true) {
+  if (
+    (code === "Escape" || code === 27) &&
+    tour.getOption("exitOnEsc") === true
+  ) {
     //escape key pressed, exit the intro
     //check if exit callback is defined
-    await exitIntro(tour, tour.getTargetElement());
+    await exitIntro(tour);
   } else if (code === "ArrowLeft" || code === 37) {
     //left arrow
-    await previousStep(intro);
+    await previousStep(tour);
   } else if (code === "ArrowRight" || code === 39) {
     //right arrow
-    await nextStep(intro);
+    await nextStep(tour);
   } else if (code === "Enter" || code === "NumpadEnter" || code === 13) {
     //srcElement === ie
     const target = (e.target || e.srcElement) as HTMLElement;
-    if (target && target.className.match("introjs-prevbutton")) {
+    if (target && target.className.match(previousButtonClassName)) {
       //user hit enter while focusing on previous button
-      await previousStep(intro);
-    } else if (target && target.className.match("introjs-skipbutton")) {
-      //user hit enter while focusing on skip button
-      if (
-        intro._introItems.length - 1 === intro._currentStep &&
-        isFunction(intro._introCompleteCallback)
-      ) {
-        await intro._introCompleteCallback.call(
-          intro,
-          intro._currentStep,
-          "skip"
-        );
+      await previousStep(tour);
+    } else if (target && target.className.match(skipButtonClassName)) {
+      // user hit enter while focusing on skip button
+      if (tour.isEnd()) {
+        await tour
+          .callback("complete")
+          ?.call(tour, tour.getCurrentStep(), "skip");
       }
 
-      await exitIntro(intro, intro._targetElement);
-    } else if (target && target.getAttribute("data-step-number")) {
+      await exitIntro(tour);
+    } else if (target && target.getAttribute(dataStepNumberAttribute)) {
       // user hit enter while focusing on step bullet
       target.click();
     } else {
       //default behavior for responding to enter
-      await nextStep(intro);
+      await nextStep(tour);
     }
 
     //prevent default behaviour on hitting Enter, to prevent steps being skipped in some browsers

src/packages/tour/removeShowElement.ts

@@ -0,0 +1,16 @@
+import { queryElementsByClassName } from "src/util/queryElement";
+import removeClass from "../../util/removeClass";
+import { showElementClassName } from "./classNames";
+
+/**
+ * To remove all show element(s)
+ *
+ * @api private
+ */
+export default function removeShowElement() {
+  const elms = Array.from(queryElementsByClassName(showElementClassName));
+
+  for (const elm of elms) {
+    removeClass(elm, /introjs-[a-zA-Z]+/g);
+  }
+}

src/packages/tour/introForElement.ts → src/packages/tour/render.ts

@@ -1,30 +1,26 @@
-import addOverlayLayer from "../../core/addOverlayLayer";
+import addOverlayLayer from "./addOverlayLayer";
 import DOMEvent from "../../util/DOMEvent";
 import { nextStep } from "./steps";
-import onKeyDown from "../../core/onKeyDown";
+import onKeyDown from "./onKeyDown";
 import onResize from "./onResize";
-import fetchIntroSteps from "./fetchSteps";
-import isFunction from "../../util/isFunction";
+import { fetchSteps } from "./steps";
 import { Tour } from "./tour";
 
 /**
  * Initiate a new introduction/guide from an element in the page
  *
  * @api private
  */
-export default async function introForElement(
-  tour: Tour,
-  targetElm: HTMLElement
-): Promise<Boolean> {
+export const render = async (tour: Tour): Promise<Boolean> => {
   // don't start the tour if the instance is not active
-  if (!tour.isActive()) return false;
-
-  if (isFunction(tour._introStartCallback)) {
-    await tour._introStartCallback.call(tour, targetElm);
+  if (!tour.isActive()) {
+    return false;
   }
 
+  await tour.callback("start")?.call(tour, tour.getTargetElement());
+
   //set it to the introJs object
-  const steps = fetchIntroSteps(tour, targetElm);
+  const steps = fetchSteps(tour);
 
   if (steps.length === 0) {
     return false;
@@ -33,11 +29,10 @@ export default async function introForElement(
   tour.setSteps(steps);
 
   //add overlay layer to the page
-  if (addOverlayLayer(tour, targetElm)) {
+  if (addOverlayLayer(tour)) {
     //then, start the show
     await nextStep(tour);
 
-    targetElm.addEventListener;
     if (tour.getOption("keyboardNavigation")) {
       DOMEvent.on(window, "keydown", onKeyDown, tour, true);
     }
@@ -47,4 +42,4 @@ export default async function introForElement(
   }
 
   return false;
-}
+};

src/packages/tour/setHelperLayerPosition.ts

@@ -1,7 +1,6 @@
 import getOffset from "../../util/getOffset";
 import isFixed from "../../util/isFixed";
-import addClass from "../../util/className";
-import removeClass from "../../util/removeClass";
+import { addClass, removeClass } from "../../util/className";
 import setStyle from "../../util/setStyle";
 import { TourStep } from "./steps";
 import { Tour } from "./tour";

src/packages/tour/showElement.ts

@@ -7,7 +7,7 @@ import setAnchorAsButton from "../../util/setAnchorAsButton";
 import { TourStep, nextStep, previousStep } from "./steps";
 import setHelperLayerPosition from "./setHelperLayerPosition";
 import placeTooltip from "../../core/placeTooltip";
-import removeShowElement from "../../core/removeShowElement";
+import removeShowElement from "./removeShowElement";
 import createElement from "../../util/createElement";
 import setStyle from "../../util/setStyle";
 import appendChild from "../../util/appendChild";

src/packages/tour/steps.test.ts

@@ -1,7 +1,7 @@
 import { fetchSteps, nextStep, previousStep } from "./steps";
 import _showElement from "./showElement";
 import { appendMockSteps, getMockSteps, getMockTour } from "./tests/mock";
-import _createElement from "src/util/createElement";
+import createElement from "../../util/createElement";
 
 jest.mock("./showElement");
 jest.mock("./exitIntro");
@@ -143,7 +143,7 @@ describe("steps", () => {
       // Arrange
       const mockTour = getMockTour();
       mockTour.addStep({
-        element: document.createElement("div"),
+        element: createElement("div"),
         intro: "test step",
       });
 
@@ -164,7 +164,7 @@ describe("steps", () => {
           intro: "first step",
         },
         {
-          element: document.createElement("div"),
+          element: createElement("div"),
           intro: "second step",
         },
       ]);
@@ -203,26 +203,20 @@ describe("steps", () => {
     test("should find and add elements from options.steps to the list", () => {
       // Arrange
       const mockTour = getMockTour();
-
-      const stepOne = document.createElement("div");
-      stepOne.setAttribute("id", "first");
-      const stepTwo = document.createElement("div");
-      stepTwo.setAttribute("id", "second");
-      document.body.appendChild(stepOne);
-      document.body.appendChild(stepTwo);
+      const [mockStepOneElement, mockStepTwoElement, _, __] = appendMockSteps();
 
       // Act
       const steps = fetchSteps(mockTour);
 
       // Assert
       expect(steps.length).toBe(7);
 
-      expect(steps[0].element).toBe(stepOne);
+      expect(steps[0].element).toBe(mockStepOneElement);
       expect(steps[0].position).toBe("bottom");
       expect(steps[0].intro).toBe("first");
       expect(steps[0].step).toBe(1);
 
-      expect(steps[1].element).toBe(stepTwo);
+      expect(steps[1].element).toBe(mockStepTwoElement);
       expect(steps[1].position).toBe("top");
       expect(steps[1].intro).toBe("second");
       expect(steps[1].step).toBe(2);
@@ -234,7 +228,7 @@ describe("steps", () => {
 
     test("should find the data-* elements from the DOM", () => {
       // Arrange
-      const targetElement = document.createElement("div");
+      const targetElement = createElement("div");
       appendMockSteps(targetElement);
       const mockTour = getMockTour(targetElement);
 
@@ -255,19 +249,9 @@ describe("steps", () => {
 
     test("should respect the custom step attribute (DOM)", () => {
       // Arrange
-      const targetElement = document.createElement("div");
-
-      const stepOne = document.createElement("div");
-      stepOne.setAttribute("data-intro", "second");
-      stepOne.setAttribute("data-step", "5");
-
-      const stepTwo = document.createElement("div");
-      stepTwo.setAttribute("data-intro", "first");
-
-      targetElement.appendChild(stepOne);
-      targetElement.appendChild(stepTwo);
+      appendMockSteps();
 
-      const mockTour = getMockTour(targetElement);
+      const mockTour = getMockTour();
 
       // Act
       const steps = fetchSteps(mockTour);

src/packages/tour/tests/mock.ts

@@ -27,6 +27,8 @@ export const appendMockSteps = (targetElement: HTMLElement = document.body) => {
   targetElement.appendChild(mockElementTwo);
   targetElement.appendChild(mockElementThree);
   targetElement.appendChild(mockElementFour);
+
+  return [mockElementOne, mockElementTwo, mockElementThree, mockElementFour];
 };
 
 export const getMockSteps = (): Partial<TourStep>[] => {