feat: dontShowAgain checkbox and module

Author: afshinm

src/core/dontShowAgain.js

@@ -0,0 +1,33 @@
+import { deleteCookie, getCookie, setCookie } from "../util/cookie";
+
+const dontShowAgainCookieValue = "true";
+
+/**
+ * Set the "Don't show again" state
+ *
+ * @api private
+ * @param {Boolean} dontShowAgain
+ * @method setDontShowAgain
+ */
+export function setDontShowAgain(dontShowAgain) {
+  if (dontShowAgain) {
+    setCookie(
+      this._options.dontShowAgainCookie,
+      dontShowAgainCookieValue,
+      this._options.dontShowAgainCookieDays
+    );
+  } else {
+    deleteCookie(this._options.dontShowAgainCookie);
+  }
+}
+
+/**
+ * Get the "Don't show again" state from cookies
+ *
+ * @api private
+ * @method getDontShowAgain
+ */
+export function getDontShowAgain() {
+  const dontShowCookie = getCookie(this._options.dontShowAgainCookie);
+  return dontShowCookie && dontShowCookie === dontShowAgainCookieValue;
+}

src/core/showElement.js

@@ -356,6 +356,30 @@ export default function _showElement(targetElement) {
     tooltipHeaderLayer.appendChild(tooltipTitleLayer);
     tooltipLayer.appendChild(tooltipHeaderLayer);
     tooltipLayer.appendChild(tooltipTextLayer);
+
+    // "Do not show again" checkbox
+    if (this._options.dontShowAgain) {
+      const dontShowAgainWrapper = createElement("div", {
+        className: "introjs-dontShowAgain",
+      });
+      const dontShowAgainCheckbox = createElement("input", {
+        type: "checkbox",
+        id: "introjs-dontShowAgain",
+        name: "introjs-dontShowAgain",
+      });
+      dontShowAgainCheckbox.onchange = (e) => {
+        this.setDontShowAgain(e.target.checked);
+      };
+      const dontShowAgainCheckboxLabel = createElement("label", {
+        htmlFor: "introjs-dontShowAgain",
+      });
+      dontShowAgainCheckboxLabel.innerText = this._options.dontShowAgainLabel;
+      dontShowAgainWrapper.appendChild(dontShowAgainCheckbox);
+      dontShowAgainWrapper.appendChild(dontShowAgainCheckboxLabel);
+
+      tooltipLayer.appendChild(dontShowAgainWrapper);
+    }
+
     tooltipLayer.appendChild(_createBullets.call(this, targetElement));
     tooltipLayer.appendChild(_createProgressBar.call(this));
 

src/index.js

@@ -3,6 +3,7 @@ import stamp from "./util/stamp";
 import exitIntro from "./core/exitIntro";
 import refresh from "./core/refresh";
 import introForElement from "./core/introForElement";
+import { getDontShowAgain, setDontShowAgain } from "./core/dontShowAgain";
 import { version } from "../package.json";
 import {
   populateHints,
@@ -88,6 +89,12 @@ function IntroJs(obj) {
     positionPrecedence: ["bottom", "top", "right", "left"],
     /* Disable an interaction with element? */
     disableInteraction: false,
+    /* To display the "Don't show again" checkbox in the tour */
+    dontShowAgain: false,
+    dontShowAgainLabel: "Don't show this again",
+    /* "Don't show again" cookie name and expiry (in days) */
+    dontShowAgainCookie: "introjs-dontShowAgain",
+    dontShowAgainCookieDays: 365,
     /* Set how much padding to be used around helper element */
     helperElementPadding: 10,
     /* Default hint position */
@@ -152,6 +159,10 @@ introJs.instances = {};
 //Prototype
 introJs.fn = IntroJs.prototype = {
   isActive() {
+    if (this._options.dontShowAgain && getDontShowAgain.call(this)) {
+      return false;
+    }
+
     return this._options.isActive;
   },
   clone() {
@@ -215,6 +226,10 @@ introJs.fn = IntroJs.prototype = {
     refresh.call(this, refreshSteps);
     return this;
   },
+  setDontShowAgain(dontShowAgain) {
+    setDontShowAgain.call(this, dontShowAgain);
+    return this;
+  },
   onbeforechange(providedCallback) {
     if (typeof providedCallback === "function") {
       this._introBeforeChangeCallback = providedCallback;

src/styles/introjs.scss

@@ -175,6 +175,32 @@ tr.introjs-showElement {
   padding: 20px;
 }
 
+.introjs-dontShowAgain {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.introjs-dontShowAgain input {
+  padding: 0;
+  margin: 0;
+  margin-bottom: 2px;
+  display: inline;
+  width: 10px;
+  height: 10px;
+}
+
+.introjs-dontShowAgain label {
+  font-size: 14px;
+  display: inline-block;
+  font-weight: normal;
+  display: inline-block;
+  margin: 0 0 0 5px;
+  padding: 0;
+  background-color: $white;
+  color: $black600;
+  user-select: none;
+}
+
 .introjs-tooltip-title {
   font-size: 18px;
   margin: 0;

tests/core/dontShowAgain.test.js

@@ -0,0 +1,69 @@
+import * as cookie from "../../src/util/cookie";
+import {
+  setDontShowAgain,
+  getDontShowAgain,
+} from "../../src/core/dontShowAgain";
+
+describe("dontShowAgain", () => {
+  test("should call set cookie", () => {
+    const setCookieMock = jest.spyOn(cookie, "setCookie");
+
+    setDontShowAgain.call(
+      {
+        _options: {
+          dontShowAgainCookie: "cookie-name",
+          dontShowAgainCookieDays: 7,
+        },
+      },
+      true
+    );
+
+    expect(setCookieMock).toBeCalledTimes(1);
+    expect(setCookieMock).toBeCalledWith("cookie-name", "true", 7);
+  });
+
+  test("should call delete cookie", () => {
+    const setCookieMock = jest.spyOn(cookie, "setCookie");
+    const deleteCookieMock = jest.spyOn(cookie, "deleteCookie");
+
+    setDontShowAgain.call(
+      {
+        _options: {
+          dontShowAgainCookie: "cookie-name",
+          dontShowAgainCookieDays: 7,
+        },
+      },
+      false
+    );
+
+    expect(setCookieMock).toBeCalledTimes(0);
+    expect(deleteCookieMock).toBeCalledTimes(1);
+    expect(deleteCookieMock).toBeCalledWith("cookie-name");
+  });
+
+  test("should return true when cookie is valid", () => {
+    jest.spyOn(cookie, "getCookie").mockReturnValue("true");
+
+    expect(
+      getDontShowAgain.call({
+        _options: {
+          dontShowAgainCookie: "cookie-name",
+          dontShowAgainCookieDays: 7,
+        },
+      })
+    ).toBe(true);
+  });
+
+  test("should return false when cookie is invalid", () => {
+    jest.spyOn(cookie, "getCookie").mockReturnValue("invalid-state");
+
+    expect(
+      getDontShowAgain.call({
+        _options: {
+          dontShowAgainCookie: "cookie-name",
+          dontShowAgainCookieDays: 7,
+        },
+      })
+    ).toBe(false);
+  });
+});

tests/index.test.js

@@ -1,5 +1,6 @@
 import introJs from "../src";
 import {
+  find,
   content,
   className,
   skipButton,
@@ -10,6 +11,10 @@ import {
   appendDummyElement,
 } from "./helper";
 
+jest.mock("../src/core/dontShowAgain");
+
+import { getDontShowAgain, setDontShowAgain } from "../src/core/dontShowAgain";
+
 describe("intro", () => {
   beforeEach(() => {
     document.getElementsByTagName("html")[0].innerHTML = "";
@@ -241,4 +246,85 @@ describe("intro", () => {
     expect(intro1["introjs-instance"]).not.toBe(intro2["introjs-instance"]);
     expect(intro2["introjs-instance"]).not.toBe(intro3["introjs-instance"]);
   });
+
+  test("should not append the dontShowAgain checkbox when its inactive", () => {
+    introJs()
+      .setOptions({
+        dontShowAgain: false,
+        steps: [
+          {
+            intro: "hello world",
+          },
+        ],
+      })
+      .start();
+
+    expect(find(".introjs-dontShowAgain")).toBeNull();
+  });
+
+  test("should append the dontShowAgain checkbox", () => {
+    introJs()
+      .setOptions({
+        dontShowAgain: true,
+        steps: [
+          {
+            intro: "hello world",
+          },
+        ],
+      })
+      .start();
+
+    expect(find(".introjs-dontShowAgain")).not.toBeNull();
+  });
+
+  test("should call setDontShowAgain when then checkbox is clicked", () => {
+    introJs()
+      .setOptions({
+        dontShowAgain: true,
+        steps: [
+          {
+            intro: "hello world",
+          },
+        ],
+      })
+      .start();
+
+    const checkbox = find(".introjs-dontShowAgain input");
+
+    checkbox.click();
+
+    expect(setDontShowAgain).toBeCalledTimes(1);
+    expect(setDontShowAgain).toBeCalledWith(true);
+  });
+
+  describe("isActive", () => {
+    test("should be false if isActive flag is false", () => {
+      const intro = introJs().setOptions({
+        isActive: false,
+      });
+
+      expect(intro.isActive()).toBeFalsy();
+    });
+    test("should be true if dontShowAgain is active but cookie is missing", () => {
+      getDontShowAgain.mockReturnValueOnce(false);
+
+      const intro = introJs().setOptions({
+        isActive: true,
+        dontShowAgain: true,
+      });
+
+      expect(intro.isActive()).toBeTruthy();
+    });
+
+    test("should be false if dontShowAgain is active but isActive is true", () => {
+      getDontShowAgain.mockReturnValueOnce(true);
+
+      const intro = introJs().setOptions({
+        isActive: true,
+        dontShowAgain: true,
+      });
+
+      expect(intro.isActive()).toBeFalsy();
+    });
+  });
 });

tests/util/cookie.test.js

@@ -0,0 +1,48 @@
+import {
+  getAllCookies,
+  getCookie,
+  setCookie,
+  deleteCookie,
+} from "../../src/util/cookie";
+
+describe("cookie", () => {
+  let _cookie = "";
+
+  beforeAll(() => {
+    Object.defineProperty(window.document, "cookie", {
+      get: () => _cookie,
+      set: (v) => (_cookie = v),
+      split: (s) => _cookie.split(s),
+    });
+  });
+
+  beforeEach(() => {
+    _cookie = "hello=world;abc=bar";
+  });
+
+  test("should return undefined when cookie doesnt exist", () => {
+    expect(getCookie("doesntExist")).toBe(undefined);
+  });
+
+  test("should return the cookie name", () => {
+    expect(getCookie("abc")).toBe("bar");
+  });
+
+  test("should return all cookies", () => {
+    expect(getAllCookies()).toEqual({
+      abc: "bar",
+      hello: "world",
+    });
+  });
+
+  test("should set cookie", () => {
+    setCookie("new", "foo");
+    expect(getCookie("new")).toEqual("foo");
+  });
+
+  test("should delete cookie", () => {
+    expect(getCookie("hello")).toEqual("world");
+    deleteCookie("hello");
+    expect(getCookie("hello")).toEqual("");
+  });
+});