Add more examples

index.html

@@ -88,7 +88,6 @@
 
       .buttons {
         display: flex;
-        margin-top: 20px;
         gap: 10px;
         max-width: 500px;
         flex-wrap: wrap;
@@ -129,6 +128,8 @@
         <p>Rewritten and enhanced version of driver.js</p>
       </div>
 
+      <h2>Highlight Feature</h2>
+      <p>given below are the examples of simple `highlight`</p>
       <div class="buttons">
         <button id="highlight-btn">Animated Highlight</button>
         <button id="simple-highlight-btn">Simple Highlight</button>
@@ -143,15 +144,23 @@
         <button id="activate-check-btn">Activate and Check</button>
         <button id="backdrop-color-btn">Backdrop Color</button>
         <button id="hooks">Hooks</button>
-
+        <button id="destroy-btn" style="border-color: red; background: red; color: white">Destroy</button>
+      </div>
+      <br>
+      <p>given below are the examples of simple `highlight`</p>
+      <div class="buttons">
         <button id="no-buttons">No Buttons</button>
-        <button id="all-buttons">All Buttons</button>
-        <button id="next-button">Next Buttons</button>
-        <button id="prev-button">Previous Buttons</button>
+        <button id="buttons-from-popover">Selected Buttons</button>
+        <button id="next-button">Next Button</button>
+        <button id="previous-button">Previous Buttons</button>
         <button id="next-prev-button">Next Previous Buttons</button>
         <button id="close-button">Close Buttons</button>
+      </div>
 
-        <button id="destroy-btn">Destroy</button>
+      <br>
+      <p>You can Attach events to buttons.</p>
+      <div class="buttons">
+        <button id="button-config-events">Global Button Listeners</button>
       </div>
 
       <ul>
@@ -298,23 +307,72 @@ npm install driver.js</pre
         });
       });
 
-
-      document.getElementById("all-buttons").addEventListener("click", () => {
-        const driverObj = driver({
-          showButtons: ['next', 'previous', 'done']
-        });
+      document.getElementById("buttons-from-popover").addEventListener("click", () => {
+        const driverObj = driver();
 
         driverObj.highlight({
-          element: "#no-buttons",
+          element: "#buttons-from-popover",
           popover: {
             title: "No Buttons",
-            showButtons: ['done', 'previous', 'next'],
+            showButtons: ["close"],
             description:
               "No buttons are shown by default for highlight. You can pass in the option to show the buttons you want.",
           },
         });
       });
 
+      document.getElementById("next-button").addEventListener("click", () => {
+        const driverObj = driver();
+
+        driverObj.highlight({
+          element: "#next-button",
+          popover: {
+            title: "Next and Close",
+            showButtons: ["close", "next"],
+            description: "This one only has next and close buttons, nothing else.",
+          },
+        });
+      });
+
+      document.getElementById("previous-button").addEventListener("click", () => {
+        const driverObj = driver();
+
+        driverObj.highlight({
+          element: "#previous-button",
+          popover: {
+            title: "Previous and Close",
+            showButtons: ["close", "previous"],
+            description: "This one only has previous and close buttons, nothing else.",
+          },
+        });
+      });
+
+      document.getElementById("next-prev-button").addEventListener("click", () => {
+        const driverObj = driver();
+
+        driverObj.highlight({
+          element: "#next-prev-button",
+          popover: {
+            title: "Next and Previous Only",
+            showButtons: ["next", "previous"],
+            description: "This one only has next and previous buttons.",
+          },
+        });
+      });
+
+      document.getElementById("close-button").addEventListener("click", () => {
+        const driverObj = driver();
+
+        driverObj.highlight({
+          element: "#close-button",
+          popover: {
+            title: "Close Only",
+            showButtons: ["close"],
+            description: "This one only has close button.",
+          },
+        });
+      });
+
       document.getElementById("is-active-btn").addEventListener("click", () => {
         alert(driver().isActive());
       });
@@ -456,31 +514,32 @@ npm install driver.js</pre
 
       document.getElementById("hooks").addEventListener("click", () => {
         const hooksEl = document.getElementById("hooks-list");
+        hooksEl.innerHTML = '';
 
         const driverObj = driver({
           animate: true,
           onDeselected: (element, step) => {
             const li = document.createElement("li");
             // prettier-ignore
-            li.innerHTML = `Deselected: ${element.textContent?.slice(0, 10)}..<br> ${JSON.stringify(step)}..`;
+            li.innerHTML = `Deselected: ${element?.textContent?.slice(0, 10)}..<br> ${JSON.stringify(step)}..`;
             hooksEl.append(li);
           },
           onHighlightStarted: (element, step) => {
             const li = document.createElement("li");
             // prettier-ignore
-            li.innerHTML = `Highlight Started: ${element.textContent?.slice(0, 10)}..<br> ${JSON.stringify(step)}..`;
+            li.innerHTML = `Highlight Started: ${element?.textContent?.slice(0, 10) || 'None'}..<br> ${JSON.stringify(step)}..`;
             hooksEl.append(li);
           },
           onHighlighted: (element, step) => {
             const li = document.createElement("li");
             // prettier-ignore
-            li.innerHTML = `Highlighted: ${element.textContent?.slice(0, 10)}..<br> ${JSON.stringify(step)}..`;
+            li.innerHTML = `Highlighted: ${element?.textContent?.slice(0, 10) || 'None'}..<br> ${JSON.stringify(step)}..`;
             hooksEl.append(li);
           },
           onClose: (element, step) => {
             const li = document.createElement("li");
             // prettier-ignore
-            li.innerHTML = `Closed: ${element.textContent?.slice(0, 10)}..<br> ${JSON.stringify(step)}..`;
+            li.innerHTML = `Closed: ${element?.textContent?.slice(0, 10) || 'None'}..<br> ${JSON.stringify(step)}..`;
             hooksEl.append(li);
           },
         });
@@ -493,6 +552,15 @@ npm install driver.js</pre
           },
         });
 
+        window.setTimeout(() => {
+          driverObj.highlight({
+            popover: {
+              title: "Popup Hook",
+              description: "There is no element below this popover",
+            },
+          });
+        }, 1000);
+
         window.setTimeout(() => {
           driverObj.highlight({
             element: "#hooks-list",
@@ -500,7 +568,7 @@ npm install driver.js</pre
               description: "Here are all the hooks",
             },
           });
-        }, 1000);
+        }, 2000);
       });
 
       document.getElementById("scrollable-area-btn").addEventListener("click", () => {

src/config.ts

@@ -12,12 +12,16 @@ export type Config = {
   popoverOffset?: number;
   showButtons?: AllowedButtons[];
 
+  // State based callbacks, called upon state changes
   onHighlightStarted?: (element: Element | undefined, step: DriveStep) => void;
   onHighlighted?: (element: Element | undefined, step: DriveStep) => void;
-
   onDeselected?: (element: Element | undefined, step: DriveStep) => void;
-
   onClose?: (element: Element | undefined, step: DriveStep) => void;
+
+  // Event based callbacks, called upon events
+  onNextClick?: (element: Element | undefined, step: DriveStep) => void;
+  onPreviousClick?: (element: Element | undefined, step: DriveStep) => void;
+  onCloseClick?: (element: Element | undefined, step: DriveStep) => void;
 };
 
 let currentConfig: Config = {};
@@ -31,7 +35,7 @@ export function configure(config: Config = {}) {
     stagePadding: 10,
     stageRadius: 5,
     popoverOffset: 10,
-    showButtons: ["next", "previous", "done"],
+    showButtons: ["next", "previous", "close"],
     backdropColor: "#000",
     ...config,
   };

src/driver.ts

@@ -74,6 +74,7 @@ export function driver(options: Config = {}) {
     },
     drive: (steps: DriveStep[]) => console.log(steps),
     highlight: (step: DriveStep) => {
+      console.log(step.popover?.showButtons);
       init();
       highlight({
         ...step,

src/popover.ts

@@ -5,7 +5,7 @@ import { DriveStep } from "./driver";
 
 export type Side = "top" | "right" | "bottom" | "left" | "over";
 export type Alignment = "start" | "center" | "end";
-export type AllowedButtons = "next" | "previous" | "done";
+export type AllowedButtons = "next" | "previous" | "close";
 
 export type Popover = {
   title?: string;
@@ -79,7 +79,7 @@ export function renderPopover(element: Element, step: DriveStep) {
 
   const showButtonsConfig: AllowedButtons[] = popoverShowButtons !== undefined ? popoverShowButtons : getConfig("showButtons")!;
 
-  console.log(showButtonsConfig);
+  console.log(popoverShowButtons);
   if (showButtonsConfig?.length! > 0) {
     popover.footer.style.display = "flex";
 
@@ -91,7 +91,7 @@ export function renderPopover(element: Element, step: DriveStep) {
       popover.previousButton.style.display = "none";
     }
 
-    if (!showButtonsConfig.includes('done')) {
+    if (!showButtonsConfig.includes('close')) {
       popover.closeButton.style.display = "none";
     }
   } else {