Package basics

src/core/DOMEvent.ts

@@ -1,4 +1,3 @@
-import { IntroJs } from "../intro";
 import stamp from "../util/stamp";
 
 /**
@@ -16,21 +15,21 @@ class DOMEvent {
   /**
    * Gets a unique ID for an event listener
    */
-  private _id(type: string, listener: Function, context: IntroJs) {
+  private _id<T>(type: string, listener: Function, context: T) {
     return type + stamp(listener) + (context ? `_${stamp(context)}` : "");
   }
 
   /**
    * Adds event listener
    */
-  public on(
+  public on<T>(
     obj: EventTarget,
     type: string,
     listener: (
-      context: IntroJs | EventTarget,
+      context: T | EventTarget,
       e: Event
     ) => void | undefined | string | Promise<string | void>,
-    context: IntroJs,
+    context: T,
     useCapture: boolean
   ) {
     const id = this._id(type, listener, context);
@@ -52,14 +51,14 @@ class DOMEvent {
   /**
    * Removes event listener
    */
-  public off(
+  public off<T>(
     obj: EventTarget,
     type: string,
     listener: (
-      context: IntroJs | EventTarget,
+      context: T | EventTarget,
       e: Event
     ) => void | undefined | string | Promise<string | void>,
-    context: IntroJs,
+    context: T,
     useCapture: boolean
   ) {
     const id = this._id(type, listener, context);

src/core/addOverlayLayer.ts

@@ -1,4 +1,4 @@
-import exitIntro from "./exitIntro";
+import exitIntro from "../packages/tour/exitIntro";
 import createElement from "../util/createElement";
 import setStyle from "../util/setStyle";
 import { IntroJs } from "../intro";

src/core/onKeyDown.ts

@@ -1,7 +1,8 @@
 import { nextStep, previousStep } from "./steps";
-import exitIntro from "./exitIntro";
+import exitIntro from "../packages/tour/exitIntro";
 import { IntroJs } from "../intro";
 import isFunction from "../util/isFunction";
+import { Tour } from "src/packages/tour/tour";
 
 /**
  * on keyCode:
@@ -18,18 +19,18 @@ import isFunction from "../util/isFunction";
  *   (3) e.keyCode
  * https://github.com/jquery/jquery/blob/a6b0705294d336ae2f63f7276de0da1195495363/src/event.js#L638
  */
-export default async function onKeyDown(intro: IntroJs, e: KeyboardEvent) {
+export default async function onKeyDown(tour: Tour, e: KeyboardEvent) {
   let code = e.code === undefined ? e.which : e.code;
 
   // if e.which is null
   if (code === null) {
     code = e.charCode === null ? e.keyCode : e.charCode;
   }
 
-  if ((code === "Escape" || code === 27) && intro._options.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(intro, intro._targetElement);
+    await exitIntro(tour, tour.getTargetElement());
   } else if (code === "ArrowLeft" || code === 37) {
     //left arrow
     await previousStep(intro);

src/core/showElement.ts

@@ -2,7 +2,7 @@ import setShowElement from "../util/setShowElement";
 import scrollParentToElement from "../util/scrollParentToElement";
 import addClass from "../util/addClass";
 import scrollTo from "../util/scrollTo";
-import exitIntro from "./exitIntro";
+import exitIntro from "../packages/tour/exitIntro";
 import setAnchorAsButton from "../util/setAnchorAsButton";
 import { IntroStep, nextStep, previousStep } from "./steps";
 import setHelperLayerPosition from "./setHelperLayerPosition";

src/core/steps.ts

@@ -1,5 +1,5 @@
 import isFunction from "../util/isFunction";
-import exitIntro from "./exitIntro";
+import exitIntro from "../packages/tour/exitIntro";
 import showElement from "./showElement";
 import { IntroJs } from "../intro";
 

src/intro.ts

@@ -1,5 +1,5 @@
 import { getDontShowAgain, setDontShowAgain } from "./core/dontShowAgain";
-import exitIntro from "./core/exitIntro";
+import exitIntro from "./packages/tour/exitIntro";
 import {
   hideHint,
   hideHints,
@@ -10,7 +10,7 @@ import {
   showHintDialog,
   showHints,
 } from "./core/hint";
-import introForElement from "./core/introForElement";
+import introForElement from "./packages/tour/introForElement";
 import refresh from "./core/refresh";
 import {
   HintStep,
@@ -167,11 +167,6 @@ export class IntroJs {
     return this._currentStep;
   }
 
-  async exit(force: boolean) {
-    await exitIntro(this, this._targetElement, force);
-    return this;
-  }
-
   refresh(refreshSteps?: boolean) {
     refresh(this, refreshSteps);
     return this;

src/option.ts

@@ -138,21 +138,18 @@ export function getDefaultOptions(): Options {
   };
 }
 
-export function setOption<K extends keyof Options>(
-  options: Options,
+export function setOption<T, K extends keyof T>(
+  options: T,
   key: K,
-  value: Options[K]
-): Options {
+  value: T[K]
+): T {
   options[key] = value;
   return options;
 }
 
-export function setOptions(
-  options: Options,
-  partialOptions: Partial<Options>
-): Options {
+export function setOptions<T>(options: T, partialOptions: Partial<T>): T {
   for (const [key, value] of Object.entries(partialOptions)) {
-    options = setOption(options, key as keyof Options, value);
+    options = setOption(options, key as keyof T, value as T[keyof T]);
   }
   return options;
 }

src/packages/package.ts

@@ -0,0 +1,8 @@
+export interface Package<TOption> {
+  getOption<K extends keyof TOption>(key: K): TOption[K];
+  setOptions(partialOptions: Partial<TOption>): this;
+  setOption<K extends keyof TOption>(key: K, value: TOption[K]): this;
+  clone(): ThisType<this>;
+  isActive(): boolean;
+  render(): this;
+}

src/packages/tour/callback.ts

@@ -0,0 +1,43 @@
+import { Tour } from "./tour";
+
+export type introBeforeChangeCallback = (
+  this: Tour,
+  targetElement: HTMLElement,
+  currentStep: number,
+  direction: "backward" | "forward"
+) => Promise<boolean> | boolean;
+
+export type introChangeCallback = (
+  this: Tour,
+  targetElement: HTMLElement
+) => void | Promise<void>;
+
+export type introAfterChangeCallback = (
+  this: Tour,
+  targetElement: HTMLElement
+) => void | Promise<void>;
+
+export type introCompleteCallback = (
+  this: Tour,
+  currentStep: number,
+  reason: "skip" | "end" | "done"
+) => void | Promise<void>;
+
+export type introStartCallback = (
+  this: Tour,
+  targetElement: HTMLElement
+) => void | Promise<void>;
+
+export type introExitCallback = (this: Tour) => void | Promise<void>;
+
+export type introSkipCallback = (
+  this: Tour,
+  currentStep: number
+) => void | Promise<void>;
+
+export type introBeforeExitCallback = (
+  this: Tour,
+  targetElement: HTMLElement
+) => boolean | Promise<boolean>;
+
+export type hintsAddedCallback = (this: Tour) => void | Promise<void>;

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

@@ -1,10 +1,14 @@
-import DOMEvent from "./DOMEvent";
-import onKeyDown from "./onKeyDown";
+import DOMEvent from "../../core/DOMEvent";
+import onKeyDown from "../../core/onKeyDown";
 import onResize from "./onResize";
-import removeShowElement from "./removeShowElement";
-import removeChild from "../util/removeChild";
-import { IntroJs } from "../intro";
-import isFunction from "../util/isFunction";
+import removeShowElement from "../../core/removeShowElement";
+import removeChild from "../../util/removeChild";
+import isFunction from "../../util/isFunction";
+import { Tour } from "./tour";
+import {
+  introBeforeExitCallback,
+  introExitCallback,
+} from "./callback";
 
 /**
  * Exit from intro
@@ -13,20 +17,19 @@ import isFunction from "../util/isFunction";
  * @param {Boolean} force - Setting to `true` will skip the result of beforeExit callback
  */
 export default async function exitIntro(
-  intro: IntroJs,
+  tour: Tour,
   targetElement: HTMLElement,
+  beforeExitCallback?: introBeforeExitCallback,
+  exitCallback?: introExitCallback,
   force: boolean = false
 ) {
   let continueExit = true;
 
   // calling onbeforeexit callback
   //
   // If this callback return `false`, it would halt the process
-  if (intro._introBeforeExitCallback !== undefined) {
-    continueExit = await intro._introBeforeExitCallback.call(
-      intro,
-      targetElement
-    );
+  if (isFunction(beforeExitCallback)) {
+    continueExit = await beforeExitCallback.call(tour, targetElement);
   }
 
   // skip this check if `force` parameter is `true`
@@ -70,14 +73,14 @@ export default async function exitIntro(
   removeShowElement();
 
   //clean listeners
-  DOMEvent.off(window, "keydown", onKeyDown, intro, true);
-  DOMEvent.off(window, "resize", onResize, intro, true);
+  DOMEvent.off(window, "keydown", onKeyDown, tour, true);
+  DOMEvent.off(window, "resize", onResize, tour, true);
 
   //check if any callback is defined
-  if (isFunction(intro._introExitCallback)) {
-    await intro._introExitCallback.call(intro);
+  if (isFunction(exitCallback)) {
+    await exitCallback.call(tour);
   }
 
   // set the step to default
-  intro._currentStep = -1;
+  tour.setCurrentStep(-1);
 }

src/packages/tour/introForElement.ts

@@ -0,0 +1,50 @@
+import addOverlayLayer from "../../core/addOverlayLayer";
+import DOMEvent from "../../core/DOMEvent";
+import { nextStep } from "../../core/steps";
+import onKeyDown from "../../core/onKeyDown";
+import onResize from "./onResize";
+import fetchIntroSteps from "../../core/fetchIntroSteps";
+import isFunction from "../../util/isFunction";
+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> {
+  // 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);
+  }
+
+  //set it to the introJs object
+  const steps = fetchIntroSteps(tour, targetElm);
+
+  if (steps.length === 0) {
+    return false;
+  }
+
+  tour.setSteps(steps);
+
+  //add overlay layer to the page
+  if (addOverlayLayer(tour, targetElm)) {
+    //then, start the show
+    await nextStep(tour);
+
+    targetElm.addEventListener;
+    if (tour.getOption("keyboardNavigation")) {
+      DOMEvent.on(window, "keydown", onKeyDown, tour, true);
+    }
+
+    //for window resize
+    DOMEvent.on(window, "resize", onResize, tour, true);
+  }
+
+  return false;
+}

src/packages/tour/onResize.ts

@@ -0,0 +1,6 @@
+import refresh from "../../core/refresh";
+import { Tour } from "./tour";
+
+export default function onResize(tour: Tour) {
+  refresh(tour);
+}