Query element by selector later if it's not exists during configuration

.jshintrc

@@ -9,6 +9,7 @@
     "exports": true,
     "define": true,
     "SVGElement": true,
+    "MutationObserver": true,
     "Element": true,
     "module": true,
     "console": true,

src/core/fetchIntroSteps.js

@@ -26,14 +26,37 @@ export default function fetchIntroSteps(targetElm) {
       //use querySelector function only when developer used CSS selector
       if (typeof currentItem.element === "string") {
         //grab the element with given selector from the page
-        currentItem.element = document.querySelector(currentItem.element);
-      }
-
-      //intro without element
-      if (
+        const el = document.querySelector(currentItem.element);
+        if (el !== null) {
+          currentItem.element = el;
+        } else {
+          // If element is not exists yet, we'll get it on step
+          const elSelector = currentItem.element;
+          Object.defineProperty(currentItem, "element", {
+            get() {
+              if (typeof this._element === "string") {
+                const result = document.querySelector(this._element);
+                if (result === null)
+                  throw new Error(
+                    "There is no element with given selector: " + this._element
+                  );
+                return result;
+              } else {
+                return this._element;
+              }
+            },
+            set(value) {
+              this._element = value;
+            },
+            enumerable: true,
+          });
+          currentItem.element = elSelector;
+        }
+      } else if (
         typeof currentItem.element === "undefined" ||
         currentItem.element === null
       ) {
+        //intro without element
         let floatingElementQuery = document.querySelector(
           ".introjsFloatingElement"
         );
@@ -58,7 +81,7 @@ export default function fetchIntroSteps(targetElm) {
         currentItem.disableInteraction = this._options.disableInteraction;
       }
 
-      if (currentItem.element !== null) {
+      if (currentItem._element !== null || currentItem.element !== null) {
         introItems.push(currentItem);
       }
     });

src/core/steps.js

@@ -1,6 +1,7 @@
 import forEach from "../util/forEach";
 import showElement from "./showElement";
 import exitIntro from "./exitIntro";
+import waitForElement from "../util/waitForElement";
 
 /**
  * Go to specific step of introduction
@@ -37,6 +38,7 @@ export function goToStepNumber(step) {
  */
 export function nextStep() {
   this._direction = "forward";
+  if (this._waitingNextElement) return;
 
   if (typeof this._currentStepNumber !== "undefined") {
     forEach(this._introItems, ({ step }, i) => {
@@ -59,7 +61,8 @@ export function nextStep() {
   if (typeof this._introBeforeChangeCallback !== "undefined") {
     continueStep = this._introBeforeChangeCallback.call(
       this,
-      nextStep && nextStep.element
+      nextStep &&
+        (elementBySelectorNotExists(nextStep) ? undefined : nextStep.element)
     );
   }
 
@@ -79,7 +82,25 @@ export function nextStep() {
     return;
   }
 
-  showElement.call(this, nextStep);
+  if (elementBySelectorNotExists(nextStep)) {
+    this._waitingNextElement = true;
+    waitForElement(nextStep._element, () => {
+      this._waitingNextElement = false;
+      showElement.call(this, nextStep);
+    });
+  } else {
+    showElement.call(this, nextStep);
+  }
+}
+
+/**
+ * Return true if element locates by selector and doesn't exists yet
+ */
+function elementBySelectorNotExists(step) {
+  return (
+    typeof step._element === "string" &&
+    document.querySelector(step._element) === null
+  );
 }
 
 /**

src/util/waitForElement.js

@@ -0,0 +1,62 @@
+/**
+ * Waits until Element will appear
+ *
+ * @api private
+ * @method _waitForElement
+ * @param {string} elSelector Selector to locate Element
+ * @param {() => void} callback Callback to be called after Element appearance
+ */
+export default function _waitForElement(elSelector, callback) {
+  if (document.querySelector(elSelector) !== null) {
+    callback();
+    return;
+  }
+
+  if (typeof MutationObserver !== "undefined") {
+    const observer = new MutationObserver(() => {
+      if (document.querySelector(elSelector) !== null) {
+        observer.disconnect();
+        callback();
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: false,
+      characterData: false,
+    });
+  } else {
+    // Old browsers will wait by timeout
+    _waitForElementByTimeout(elSelector, callback, 1000, 10000);
+  }
+}
+
+/**
+ * @param {string} elSelector
+ * @param {() => void} callback
+ * @param {number} checkInterval In milliseconds
+ * @param {number} maxTimeout In milliseconds
+ */
+export function _waitForElementByTimeout(
+  elSelector,
+  callback,
+  checkInterval,
+  maxTimeout
+) {
+  let startTimeInMs = Date.now();
+  (function loopSearch() {
+    if (document.querySelector(elSelector) !== null) {
+      callback();
+      return;
+    } else {
+      setTimeout(function () {
+        if (Date.now() - startTimeInMs > maxTimeout) {
+          callback();
+          return;
+        }
+        loopSearch();
+      }, checkInterval);
+    }
+  })();
+}

tests/core/fetchIntroSteps.test.js

@@ -10,6 +10,7 @@ describe("fetchIntroSteps", () => {
           steps: [
             {
               element: "#element_does_not_exist",
+              position: "top",
               intro: "hello world",
             },
             {
@@ -23,7 +24,7 @@ describe("fetchIntroSteps", () => {
 
     expect(steps.length).toBe(2);
 
-    expect(steps[0].position).toBe("floating");
+    expect(steps[0].position).toBe("top");
     expect(steps[0].intro).toBe("hello world");
     expect(steps[0].step).toBe(1);
 
@@ -80,11 +81,44 @@ describe("fetchIntroSteps", () => {
     expect(steps[1].intro).toBe("second");
     expect(steps[1].step).toBe(2);
 
-    expect(steps[2].position).toBe("floating");
+    expect(steps[2].position).toBe("bottom");
     expect(steps[2].intro).toBe("third");
     expect(steps[2].step).toBe(3);
   });
 
+  test("should throw an error on calling step.element if it is not exists yet and return element after adding", () => {
+    const targetElement = document.createElement("div");
+    const elId = "later_added";
+    const steps = fetchIntroSteps.call(
+      {
+        _options: {
+          tooltipPosition: "bottom",
+          steps: [
+            {
+              element: "#" + elId,
+            },
+          ],
+        },
+      },
+      targetElement
+    );
+
+    expect(steps.length).toBe(1);
+
+    try {
+      const element = steps[0].element; // jshint ignore:line
+    } catch (e) {
+      if (!e.message.includes("There is no element with given selector:"))
+        throw e;
+    }
+
+    const laterAdded = document.createElement("div");
+    laterAdded.setAttribute("id", elId);
+    document.body.appendChild(laterAdded);
+
+    expect(steps[0].element).toBe(laterAdded);
+  });
+
   test("should find the data-* elements from the DOM", () => {
     const targetElement = document.createElement("div");
 

tests/cypress/integration/tour/added-later-element.js

@@ -0,0 +1,47 @@
+context("Added later element", () => {
+  const addedLaterElId = "later_added";
+  const stepOneText = "step one";
+  const stepTwoText = "step two, click on create btn";
+  const stepThreeText = "added later element";
+  const createDivBtnSelector = "#create-div-button";
+  beforeEach(() => {
+    cy.visit("./cypress/setup/create_div_btn.html").then((window) => {
+      window
+        .introJs()
+        .setOptions({
+          disableInteraction: false,
+          steps: [
+            {
+              intro: stepOneText,
+            },
+            {
+              intro: stepTwoText,
+              element: createDivBtnSelector,
+            },
+            {
+              intro: stepThreeText,
+              element: "#" + addedLaterElId,
+            },
+          ],
+        })
+        .start();
+    });
+  });
+
+  it("should find by selector and highlight added later element", () => {
+    cy.get(".introjs-tooltiptext").contains(stepOneText);
+    cy.nextStep();
+    cy.get(".introjs-tooltiptext").contains(stepTwoText);
+    cy.wait(500);
+    cy.get(createDivBtnSelector).click();
+    cy.nextStep();
+    cy.wait(500);
+    cy.get("#" + addedLaterElId)
+      .filter(".introjs-showElement")
+      .contains("Later added div");
+    cy.wait(2000);
+    cy.compareSnapshot("added-later-element-end", 0.05);
+    cy.doneButton();
+    cy.get(".introjs-showElement").should("not.exist");
+  });
+});

tests/cypress/integration/tour/navigation.js

@@ -47,6 +47,14 @@ context("Navigation", () => {
     cy.get(".introjs-showElement").should("not.exist");
   });
 
+  it("should exit the tour after right btn pressed at the end", () => {
+    cy.get(".introjs-tooltiptext").contains("step one");
+    cy.nextStep();
+    cy.get(".introjs-tooltiptext").contains("step two");
+    cy.realPress("ArrowRight");
+    cy.get(".introjs-showElement").should("not.exist");
+  });
+
   it("should close the tour after clicking on the exit button", () => {
     cy.get(".introjs-showElement").should("exist");
     cy.get(".introjs-skipbutton").click();