Add disallow close functionality

index.html

@@ -57,6 +57,8 @@
         display: flex;
         margin-top: 20px;
         gap: 10px;
+        max-width: 500px;
+        flex-wrap: wrap;
       }
 
       button {
@@ -75,7 +77,10 @@
       <p>Rewritten and enhanced version of driver.js</p>
 
       <div class="buttons">
-        <button id="highlight-btn">Simple Highlight</button>
+        <button id="highlight-btn">Animated Highlight</button>
+        <button id="simple-highlight-btn">Simple Highlight</button>
+        <button id="transition-highlight-btn">Multiple Highlight Calls</button>
+        <button id="disallow-close">Disallow Close</button>
         <button id="tour-btn">Start Tour</button>
         <button id="destroy-btn">Destroy</button>
       </div>
@@ -90,24 +95,43 @@
     <script type="module">
       import { driver } from "./src/driver.ts";
 
-      const driverObj = driver({
-        animate: true,
+      document.getElementById("highlight-btn").addEventListener("click", () => {
+        driver({ animate: true }).highlight({ element: "h1" });
       });
 
-      document.getElementById("highlight-btn").addEventListener("click", () => {
-        driverObj.highlight({
-          element: "h1",
+      document
+        .getElementById("simple-highlight-btn")
+        .addEventListener("click", () => {
+          driver({ animate: false }).highlight({ element: "ul" });
+        });
+
+      document
+        .getElementById("transition-highlight-btn")
+        .addEventListener("click", () => {
+          const driverObj = driver({ animate: true });
+
+          driverObj.highlight({ element: "h1" });
+
+          window.setTimeout(() => {
+            driverObj.highlight({ element: ".buttons" });
+          }, 1000);
         });
 
-        window.setTimeout(() => {
+      document
+        .getElementById("disallow-close")
+        .addEventListener("click", () => {
+          const driverObj = driver({
+            animate: true,
+            allowClose: false,
+          });
+
           driverObj.highlight({
             element: ".buttons",
           });
-        }, 1000);
-      });
+        });
 
       document.getElementById("destroy-btn").addEventListener("click", () => {
-        driverObj.destroy();
+        driver().destroy();
       });
     </script>
   </body>

src/config.ts

@@ -1,5 +1,6 @@
 export type Config = {
   animate?: boolean;
+  allowClose?: boolean;
 };
 
 let currentConfig: Config = {};
@@ -7,6 +8,7 @@ let currentConfig: Config = {};
 export function configure(config: Config = {}) {
   currentConfig = {
     animate: true,
+    allowClose: true,
     ...config,
   };
 }

src/driver.ts

@@ -10,26 +10,40 @@ export type DriveStep = {
   element?: string | Element;
 };
 
+let isInitialized = false;
+
 export function driver(options: Config = {}) {
   configure(options);
 
-  const shouldAnimate = getConfig("animate");
-
   function init() {
+    // Avoid multiple initialization
+    if (isInitialized) {
+      return;
+    }
+
+    isInitialized = true;
     document.body.classList.add(
       "driver-active",
-      shouldAnimate ? "driver-fade" : "driver-simple"
+      getConfig("animate") ? "driver-fade" : "driver-simple"
     );
 
     initEvents();
 
-    register("overlayClick", destroy);
+    // Register hooks
+    register("overlayClick", () => {
+      if (!getConfig("allowClose")) {
+        return;
+      }
+
+      destroy();
+    });
   }
 
   function destroy() {
+    isInitialized = false;
     document.body.classList.remove(
       "driver-active",
-      shouldAnimate ? "driver-fade" : "driver-simple"
+      getConfig("animate") ? "driver-fade" : "driver-simple"
     );
 
     destroyEvents();

src/highlight.ts

@@ -4,7 +4,7 @@ import { getConfig } from "./config";
 
 let previousHighlight: Element | undefined;
 let activeHighlight: Element | undefined;
-let isTransitioning = false;
+let currentTransitionCallback: undefined | (() => void);
 
 export function highlight(step: DriveStep) {
   const { element } = step;
@@ -34,10 +34,11 @@ function transferHighlight(from: Element, to: Element) {
   const duration = 400;
   const start = Date.now();
 
-  isTransitioning = true;
-
   const animate = () => {
-    if (!isTransitioning) {
+    // This makes sure that the repeated calls to transferHighlight
+    // don't interfere with each other. Only the last call will be
+    // executed.
+    if (currentTransitionCallback !== animate) {
       return;
     }
 
@@ -47,25 +48,23 @@ function transferHighlight(from: Element, to: Element) {
       transitionStage(elapsed, duration, from, to);
     } else {
       trackActiveElement(to);
-
-      isTransitioning = false;
+      currentTransitionCallback = undefined;
     }
 
     refreshStage();
     window.requestAnimationFrame(animate);
   };
 
+  currentTransitionCallback = animate;
   window.requestAnimationFrame(animate);
 
   from.classList.remove("driver-active-element");
   to.classList.add("driver-active-element");
-
-  isTransitioning = true;
 }
 
 export function destroyHighlight() {
   activeHighlight = undefined;
-  isTransitioning = false;
+  currentTransitionCallback = undefined;
   previousHighlight = undefined;
   activeHighlight = undefined;