Add support button handling

index.html

@@ -143,6 +143,14 @@
         <button id="activate-check-btn">Activate and Check</button>
         <button id="backdrop-color-btn">Backdrop Color</button>
         <button id="hooks">Hooks</button>
+
+        <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="next-prev-button">Next Previous Buttons</button>
+        <button id="close-button">Close Buttons</button>
+
         <button id="destroy-btn">Destroy</button>
       </div>
 
@@ -277,6 +285,36 @@ npm install driver.js</pre
     <script type="module">
       import { driver } from "./src/driver.ts";
 
+      document.getElementById("no-buttons").addEventListener("click", () => {
+        const driverObj = driver({});
+
+        driverObj.highlight({
+          element: "#no-buttons",
+          popover: {
+            title: "No Buttons",
+            description:
+              "No buttons are shown by default for highlight. You can pass in the option to show the buttons you want.",
+          },
+        });
+      });
+
+
+      document.getElementById("all-buttons").addEventListener("click", () => {
+        const driverObj = driver({
+          showButtons: ['next', 'previous', 'done']
+        });
+
+        driverObj.highlight({
+          element: "#no-buttons",
+          popover: {
+            title: "No Buttons",
+            showButtons: ['done', 'previous', 'next'],
+            description:
+              "No buttons are shown by default for highlight. You can pass in the option to show the buttons you want.",
+          },
+        });
+      });
+
       document.getElementById("is-active-btn").addEventListener("click", () => {
         alert(driver().isActive());
       });
@@ -488,7 +526,7 @@ npm install driver.js</pre
         });
         driverObj.highlight({
           popover: {
-            showButtons: false,
+            showButtons: [],
             description:
               "<div class='gif-popover'><img style='max-width: 100%' src='https://i.imgur.com/EAQhHu5.gif' /><p>Go and build something cool!</p></div>",
           },

src/config.ts

@@ -1,4 +1,5 @@
 import { DriveStep } from "./driver";
+import { AllowedButtons } from "./popover";
 
 export type Config = {
   animate?: boolean;
@@ -9,7 +10,7 @@ export type Config = {
   stagePadding?: number;
   stageRadius?: number;
   popoverOffset?: number;
-  showButtons?: boolean;
+  showButtons?: AllowedButtons[];
 
   onHighlightStarted?: (element: Element | undefined, step: DriveStep) => void;
   onHighlighted?: (element: Element | undefined, step: DriveStep) => void;
@@ -30,7 +31,7 @@ export function configure(config: Config = {}) {
     stagePadding: 10,
     stageRadius: 5,
     popoverOffset: 10,
-    showButtons: true,
+    showButtons: ["next", "previous", "done"],
     backdropColor: "#000",
     ...config,
   };

src/driver.ts

@@ -79,7 +79,7 @@ export function driver(options: Config = {}) {
         ...step,
         popover: step.popover
           ? {
-              showButtons: false,
+              showButtons: [],
               ...step.popover!,
             }
           : undefined,

src/popover.ts

@@ -5,6 +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 Popover = {
   title?: string;
@@ -12,7 +13,7 @@ export type Popover = {
   side?: Side;
   align?: Alignment;
 
-  showButtons?: boolean;
+  showButtons?: AllowedButtons[];
 
   doneBtnText?: string;
   closeBtnText?: string;
@@ -51,7 +52,7 @@ export function renderPopover(element: Element, step: DriveStep) {
   const {
     title,
     description,
-    showButtons = undefined,
+    showButtons: popoverShowButtons = undefined,
     // doneBtnText = 'Done',
     closeBtnText = "Close",
     nextBtnText = "Next →",
@@ -76,15 +77,24 @@ export function renderPopover(element: Element, step: DriveStep) {
     popover.description.style.display = "none";
   }
 
-  if (getConfig("showButtons") === true) {
-    popover.footer.style.display = "flex";
-  } else {
-    popover.footer.style.display = "none";
-  }
+  const showButtonsConfig: AllowedButtons[] = popoverShowButtons !== undefined ? popoverShowButtons : getConfig("showButtons")!;
 
-  if (showButtons === true) {
+  console.log(showButtonsConfig);
+  if (showButtonsConfig?.length! > 0) {
     popover.footer.style.display = "flex";
-  } else if (showButtons === false) {
+
+    if (!showButtonsConfig.includes('next')) {
+      popover.nextButton.style.display = "none";
+    }
+
+    if (!showButtonsConfig.includes('previous')) {
+      popover.previousButton.style.display = "none";
+    }
+
+    if (!showButtonsConfig.includes('done')) {
+      popover.closeButton.style.display = "none";
+    }
+  } else {
     popover.footer.style.display = "none";
   }