feat: add footer skip button

docs/src/content/guides/buttons.mdx

@@ -6,7 +6,7 @@ sort: 9
 
 import { CodeSample } from "../../components/CodeSample.tsx";
 
-You can use the `showButtons` option to choose which buttons to show in the popover. The default value is `['next', 'previous', 'close']`.
+You can use the `showButtons` option to choose which buttons to show in the popover. The default value is `['next', 'previous', 'close']`. You can also show a footer skip button by adding `'skip'`.
 
 <div id="driver-note" className="mb-5">
   > **Note:** When using the `highlight` method to highlight a single element, the only button shown is the `close`
@@ -99,6 +99,53 @@ You can use the `showButtons` option to choose which buttons to show in the popo
     ]}
     id={"code-sample"}
     client:load />
+  <CodeSample
+    buttonText="With Skip Button"
+    config={{
+      showButtons: [
+        'skip',
+        'previous',
+        'next',
+      ],
+      skipBtnText: 'Skip tour',
+    }}
+    tour={[
+      {
+        element: '#driver-note',
+        popover: {
+          title: 'Popover Title',
+          description: 'Popover Description'
+        }
+      },
+      {
+        element: '#driver-note code:nth-child(2)',
+        popover: {
+          title: 'Popover Title',
+          description: 'Popover Description'
+        }
+      }
+    ]}
+    id={"code-sample"}
+    client:load>
+    ```js
+    import { driver } from "driver.js";
+    import "driver.js/dist/driver.css";
+
+    const driverObj = driver({
+      showButtons: [
+        'skip',
+        'previous',
+        'next'
+      ],
+      skipBtnText: 'Skip tour',
+      steps: [
+        // ...
+      ]
+    });
+
+    driverObj.drive();
+    ```
+  </CodeSample>
   <CodeSample
     buttonText="No Buttons (Use Arrows)"
     config={{
@@ -128,7 +175,7 @@ You can use the `showButtons` option to choose which buttons to show in the popo
 
 ## Change Button Text
 
-You can also change the text of buttons using `nextBtnText`, `prevBtnText` and `doneBtnText` options.
+You can also change the text of buttons using `nextBtnText`, `prevBtnText`, `doneBtnText` and `skipBtnText` options.
 
 <div className='flex flex-col gap-1'>
   <CodeSample
@@ -179,7 +226,7 @@ You can also change the text of buttons using `nextBtnText`, `prevBtnText` and `
 
 ## Event Handlers
 
-You can use the `onNextClick`, `onPreviousClick` and `onCloseClick` callbacks to implement custom functionality when the user clicks on the next and previous buttons.
+You can use the `onNextClick`, `onPreviousClick`, `onCloseClick` and `onSkipClick` callbacks to implement custom functionality when the user clicks on the footer buttons.
 
 > Please note that when you configure these callbacks, the default functionality of the buttons will be disabled. You will have to implement the functionality yourself.
 

docs/src/content/guides/configuration.mdx

@@ -71,6 +71,7 @@ type Config = {
   nextBtnText?: string;
   prevBtnText?: string;
   doneBtnText?: string;
+  skipBtnText?: string;
 
   // Called after the popover is rendered.
   // PopoverDOM is an object with references to
@@ -111,6 +112,7 @@ type Config = {
   onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
   onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
   onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onSkipClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
 };
 ```
 
@@ -142,17 +144,18 @@ type Popover = {
   // are no buttons by default. When showing
   // a tour, the default buttons are "next",
   // "previous" and "close".
-  showButtons?: ("next" | "previous" | "close")[];
+  showButtons?: ("next" | "previous" | "close" | "skip")[];
   // An array of buttons to disable. This is
   // useful when you want to show some of the
   // buttons, but disable some of them.
-  disableButtons?: ("next" | "previous" | "close")[];
+  disableButtons?: ("next" | "previous" | "close" | "skip")[];
 
   // Text to show in the buttons. `doneBtnText`
   // is used on the last step of a tour.
   nextBtnText?: string;
   prevBtnText?: string;
   doneBtnText?: string;
+  skipBtnText?: string;
 
   // Whether to show the progress text in popover.
   showProgress?: boolean;
@@ -186,6 +189,7 @@ type Popover = {
   onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void
   onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void
   onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void
+  onSkipClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void
 }
 ```
 

docs/src/content/guides/theming.mdx

@@ -49,6 +49,7 @@ Here is the list of classes applied to the popover which you can use in conjunct
 /* Footer of the popover displaying progress and navigation buttons */
 .driver-popover-footer {}
 .driver-popover-progress-text {}
+.driver-popover-skip-btn {}
 .driver-popover-prev-btn {}
 .driver-popover-next-btn {}
 ```
@@ -69,6 +70,7 @@ type PopoverDOM = {
   progress: HTMLElement;
   previousButton: HTMLElement;
   nextButton: HTMLElement;
+  skipButton: HTMLElement;
   closeButton: HTMLElement;
   footerButtons: HTMLElement;
 };
@@ -99,4 +101,4 @@ Whenever an element is highlighted, the following classes are applied to it.
 
 ```css
 .driver-active-element {}
-```
+```

index.html

@@ -212,6 +212,7 @@ <h2>Tour Feature</h2>
       <p>Examples below show the tour usage of driver.js.</p>
       <div class="buttons">
         <button id="basic-tour">Animated Tour</button>
+        <button id="skippable-tour">Skippable Tour</button>
         <button id="non-animated-tour">Non-Animated Tour</button>
         <button id="async-tour">Asynchronous Tour</button>
         <button id="confirm-exit-tour">Confirm on Exit</button>
@@ -638,6 +639,22 @@ <h2>Usage and Demo</h2>
         driverObj.drive();
       });
 
+      document.getElementById("skippable-tour").addEventListener("click", () => {
+        const driverObj = driver({
+          showProgress: true,
+          showButtons: ["skip", "previous", "next"],
+          skipBtnText: "Skip this tour",
+          progressText: "{{current}} / {{total}}",
+          steps: basicTourSteps,
+          onSkipClick: () => {
+            console.log("Tour skipped");
+            driverObj.destroy();
+          },
+        });
+
+        driverObj.drive();
+      });
+
       document.getElementById("no-buttons").addEventListener("click", () => {
         const driverObj = driver({});
 

src/config.ts

@@ -36,9 +36,10 @@ export type Config = {
   nextBtnText?: string;
   prevBtnText?: string;
   doneBtnText?: string;
+  skipBtnText?: string;
 
   // Called after the popover is rendered
-  onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State, driver: Driver }) => void;
+  onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State; driver: Driver }) => void;
 
   // State based callbacks, called upon state changes
   onHighlightStarted?: DriverHook;
@@ -51,6 +52,7 @@ export type Config = {
   onNextClick?: DriverHook;
   onPrevClick?: DriverHook;
   onCloseClick?: DriverHook;
+  onSkipClick?: DriverHook;
 };
 
 let currentConfig: Config = {};

src/driver.ts

@@ -51,6 +51,14 @@ export function driver(options: Config = {}): Driver {
     destroy();
   }
 
+  function handleSkip() {
+    if (!getConfig("allowClose")) {
+      return;
+    }
+
+    destroy();
+  }
+
   function handleOverlayClick() {
     const overlayClickBehavior = getConfig("overlayClickBehavior");
 
@@ -184,6 +192,7 @@ export function driver(options: Config = {}): Driver {
 
     listen("overlayClick", handleOverlayClick);
     listen("escapePress", handleClose);
+    listen("skipClick", handleSkip);
     listen("arrowLeftPress", handleArrowLeft);
     listen("arrowRightPress", handleArrowRight);
   }
@@ -222,6 +231,7 @@ export function driver(options: Config = {}): Driver {
 
     const configuredButtons = currentStep.popover?.showButtons || getConfig("showButtons");
     const calculatedButtons: AllowedButtons[] = [
+      ...(allowsClosing ? ["skip" as AllowedButtons] : []),
       "next",
       "previous",
       ...(allowsClosing ? ["close" as AllowedButtons] : []),
@@ -232,13 +242,16 @@ export function driver(options: Config = {}): Driver {
     const onNextClick = currentStep.popover?.onNextClick || getConfig("onNextClick");
     const onPrevClick = currentStep.popover?.onPrevClick || getConfig("onPrevClick");
     const onCloseClick = currentStep.popover?.onCloseClick || getConfig("onCloseClick");
+    const onSkipClick = currentStep.popover?.onSkipClick || getConfig("onSkipClick");
+    const disabledButtons = currentStep.popover?.disableButtons || getConfig("disableButtons") || [];
 
     highlight({
       ...currentStep,
       popover: {
+        ...(currentStep?.popover || {}),
         showButtons: calculatedButtons,
-        nextBtnText: !hasNextStep ? doneBtnText : undefined,
-        disableButtons: [...(!hasPreviousStep ? ["previous" as AllowedButtons] : [])],
+        nextBtnText: !hasNextStep ? doneBtnText : currentStep.popover?.nextBtnText,
+        disableButtons: [...disabledButtons, ...(!hasPreviousStep ? ["previous" as AllowedButtons] : [])],
         showProgress: showProgress,
         progressText: progressTextReplaced,
         onNextClick: onNextClick
@@ -260,7 +273,11 @@ export function driver(options: Config = {}): Driver {
           : () => {
               destroy();
             },
-        ...(currentStep?.popover || {}),
+        onSkipClick: onSkipClick
+          ? onSkipClick
+          : () => {
+              destroy();
+            },
       },
     });
   }

src/emitter.ts

@@ -4,6 +4,7 @@ type allowedEvents =
   | "nextClick"
   | "prevClick"
   | "closeClick"
+  | "skipClick"
   | "arrowRightPress"
   | "arrowLeftPress";