Fix event handlers not firing in drive

docs/package.json

@@ -16,7 +16,7 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "astro": "^2.7.0",
-    "driver.js": "1.1.7-next.0",
+    "driver.js": "1.1.8-next.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-fast-marquee": "^1.6.0",

docs/pnpm-lock.yaml

@@ -24,8 +24,8 @@ dependencies:
     specifier: ^2.7.0
     version: 2.7.0
   driver.js:
-    specifier: 1.1.7-next.0
-    version: 1.1.7-next.0
+    specifier: 1.1.8-next.0
+    version: 1.1.8-next.0
   react:
     specifier: ^18.0.0
     version: 18.0.0
@@ -1386,8 +1386,8 @@ packages:
   /[email protected]:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 
-  /[email protected].7-next.0:
-    resolution: {integrity: sha512-NRjJXcOWR7ZpijJqNrGME1qJ4yS2xr0uSQpmYjHTJiiZ770Q6Sw5xVh+fRxggcyMpJT45bx51YPZig4zbhtEXw==}
+  /[email protected].8-next.0:
+    resolution: {integrity: sha512-3xI442GHwr6IvGnkmuEihOWTCXHaBa/M+iSgTVUpOz0JdkC6oyx8Eqtk7x8zS3YiehngEHEkDpJ5tl7l3yNPfA==}
     dev: false
 
   /[email protected]:

docs/src/content/guides/buttons.mdx

@@ -0,0 +1,244 @@
+---
+title: "Popover Buttons"
+groupTitle: "Examples"
+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']`.
+
+<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`
+  button. However, you can use the `showButtons` option to show other buttons as well. But the buttons won't do
+  anything. You will have to use the `onNextClick` and `onPreviousClick` callbacks to implement the functionality.
+</div>
+
+<div className='flex flex-col gap-1'>
+  <CodeSample
+    buttonText={"Show All Buttons"}
+    config={{
+      showButtons: [
+        'next',
+        'previous',
+        'close'
+      ],
+    }}
+    tour={[
+      {
+        element: '#driver-note',
+        popover: {
+          title: 'Popover Title',
+          description: 'Popover Description'
+        }
+      },
+      {
+        element: '#driver-note p code:nth-child(4)',
+        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: [
+        'next',
+        'previous',
+        'close'
+      ],
+      steps: [
+        {
+          element: '#first-element',
+          popover: {
+            title: 'Popover Title',
+            description: 'Popover Description'
+          }
+        },
+        {
+          element: '#second-element',
+          popover: {
+            title: 'Popover Title',
+            description: 'Popover Description'
+          }
+        }
+      ]
+    });
+
+    driverObj.drive();
+    ```
+  </CodeSample>
+  <CodeSample
+    buttonText="No Close Button"
+    config={{
+      showButtons: [
+        'next',
+        'previous',
+      ],
+    }}
+    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 />
+  <CodeSample
+    buttonText="No Buttons (Use Arrows)"
+    config={{
+      showButtons: [undefined],
+    }}
+    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',
+          side: 'bottom',
+          align: 'start'
+        }
+      }
+    ]}
+    id={"code-sample"}
+    client:load />
+</div>
+
+## Change Button Text
+
+You can also change the text of buttons using `nextBtnText`, `prevBtnText` and `doneBtnText` options.
+
+<div className='flex flex-col gap-1'>
+  <CodeSample
+    heading="Change Button Text"
+    buttonText={"Change Button Text"}
+    config={{
+      showProgress: true,
+      nextBtnText: '—>',
+      prevBtnText: '<--',
+      doneBtnText: 'X',
+    }}
+    tour={[
+      {
+        element: '#code-sample-3',
+        popover: {
+          title: 'Popover Title',
+          description: 'Popover Description'
+        }
+      },
+      {
+        element: '#code-sample-3 code',
+        popover: {
+          title: 'Popover Title',
+          description: 'Popover Description'
+        }
+      }
+    ]}
+    id={"code-sample-3"}
+    client:load>
+    ```js
+    import { driver } from "driver.js";
+    import "driver.js/dist/driver.css";
+
+    const driverObj = driver({
+      nextBtnText: '—›',
+      prevBtnText: '‹—',
+      doneBtnText: '✕',
+      showProgress: true,
+      steps: [
+        // ...
+      ]
+    });
+
+    driverObj.drive();
+    ```
+  </CodeSample>
+</div>
+
+## 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.
+
+> 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.
+
+<CodeSample
+  buttonText={"Show Example"}
+  config={{
+    onNextClick:() => {
+      alert('Next Button Clicked');
+    },
+    onPrevClick:() => {
+      alert('Previous Button Clicked');
+    },
+    onCloseClick:() => {
+      alert('Close Button Clicked');
+    },
+  }}
+  tour={[
+    {
+      element: '#code-sample-4',
+      popover: {
+        title: 'Popover Title',
+        description: 'Popover Description'
+      }
+    },
+    {
+      element: '#code-sample-4 code',
+      popover: {
+        title: 'Popover Title',
+        description: 'Popover Description'
+      }
+    }
+  ]}
+  id={"code-sample-4"}
+  client:load>
+  ```js
+  import { driver } from "driver.js";
+  import "driver.js/dist/driver.css";
+
+  const driverObj = driver({
+    onNextClick:() => {
+      console.log('Next Button Clicked');
+      // Implement your own functionality here
+      driverObj.moveNext();
+    },
+    onPrevClick:() => {
+      console.log('Previous Button Clicked');
+      // Implement your own functionality here
+      driverObj.movePrevious();
+    },
+    onCloseClick:() => {
+      console.log('Close Button Clicked');
+      // Implement your own functionality here
+      driverObj.destroy();
+    },
+    steps: [
+      // ...
+    ]
+  });
+
+  driverObj.drive();
+  ```
+</CodeSample>

docs/src/content/guides/{customize-overlay.mdx → styling-overlay.mdx}

@@ -8,6 +8,8 @@ import { CodeSample } from "../../components/CodeSample.tsx";
 
 You can customize the overlay opacity and color using `overlayOpacity` and `overlayColor` options to change the look of the overlay.
 
+> **Note:** In the examples below we have used `highlight` method to highlight the elements. The same configuration applies to the tour steps as well.
+
 ## Overlay Color
 
 Here are some driver.js examples with different overlay colors.
@@ -17,8 +19,9 @@ import { driver } from "driver.js";
 import "driver.js/dist/driver.css";
 
 const driverObj = driver({
-  overlayColor: 'blue'
+  overlayColor: 'red'
 });
+
 driverObj.highlight({
   popover: {
     title: 'Pass any RGB Color',
@@ -27,17 +30,52 @@ driverObj.highlight({
 });
 ```
 
-<CodeSample
-  buttonText={"Blue Color"}
-  config={{
-    overlayColor: 'blue'
-  }}
-  highlight={{
-    popover: {
-      title: 'Pass any RGB Color',
-      description: 'Here we have set the overlay color to be blue. You can pass any RGB color to overlayColor option.',
-    }
-  }}
-  id={"left-start"}
-  client:load
-/>
+<div className='flex flex-col gap-1 -mt-5'>
+  <CodeSample
+    buttonText={"Red Color"}
+    config={{
+      overlayColor: 'red',
+      overlayOpacity: 0.3
+    }}
+    highlight={{
+      popover: {
+        title: 'Pass any RGB Color',
+        description: 'Here we have set the overlay color to be blue. You can pass any RGB color to overlayColor option.',
+      }
+    }}
+    id={"left-start"}
+    client:load
+  />
+
+  <CodeSample
+    buttonText={"Blue Color"}
+    config={{
+      overlayColor: 'blue',
+      overlayOpacity: 0.3
+    }}
+    highlight={{
+      popover: {
+        title: 'Pass any RGB Color',
+        description: 'Here we have set the overlay color to be blue. You can pass any RGB color to overlayColor option.',
+      }
+    }}
+    id={"left-start"}
+    client:load
+  />
+
+  <CodeSample
+    buttonText={"Yellow Color"}
+    config={{
+      overlayColor: 'yellow',
+      overlayOpacity: 0.3
+    }}
+    highlight={{
+      popover: {
+        title: 'Pass any RGB Color',
+        description: 'Here we have set the overlay color to be blue. You can pass any RGB color to overlayColor option.',
+      }
+    }}
+    id={"left-start"}
+    client:load
+  />
+</div>

index.html

@@ -187,6 +187,7 @@
         <button id="button-texts">Button Texts</button>
         <button id="disabled-buttons">Disabled Buttons</button>
         <button id="button-config-events">Button Listeners</button>
+        <button id="button-tour-events">Tour Button Listeners</button>
       </div>
 
       <br />
@@ -712,8 +713,12 @@ npm install driver.js</pre
 
       document.getElementById("button-config-events").addEventListener("click", () => {
         const driverObj = driver({
-          onNextClick: () => alert("Next Clicked"),
-          onPrevClick: () => alert("Previous Clicked"),
+          onNextClick: () => {
+            alert("Next Clicked");
+          },
+          onPrevClick: () => {
+            alert("Previous Clicked");
+          },
           onCloseClick: () => {
             driverObj.destroy();
           },
@@ -729,6 +734,29 @@ npm install driver.js</pre
         });
       });
 
+      document.getElementById("button-tour-events").addEventListener("click", () => {
+        const driverObj = driver({
+          onNextClick: () => {
+            alert("Next Clicked");
+            driverObj.moveNext();
+          },
+          onPrevClick: () => {
+            alert("Previous Clicked");
+            driverObj.movePrevious();
+          },
+          onCloseClick: () => {
+            driverObj.destroy();
+          },
+          steps: [
+            { popover: { title: "Some title", description: "Some description" }},
+            { popover: { title: "Another title", description: "Some description" }},
+            { popover: { title: "Yet another title", description: "Some description" }},
+          ]
+        });
+
+        driverObj.drive();
+      });
+
       document.getElementById("is-active-btn").addEventListener("click", () => {
         alert(driver().isActive());
       });

src/driver.ts

@@ -157,10 +157,18 @@ export function driver(options: Config = {}) {
       .replace("{{total}}", `${steps.length}`);
 
     const configuredButtons = currentStep.popover?.showButtons || getConfig("showButtons");
-    const calculatedButtons: AllowedButtons[] = ["next", "previous", ...(allowsClosing ? ["close" as AllowedButtons] : [])].filter((b) => {
+    const calculatedButtons: AllowedButtons[] = [
+      "next",
+      "previous",
+      ...(allowsClosing ? ["close" as AllowedButtons] : []),
+    ].filter(b => {
       return !configuredButtons?.length || configuredButtons.includes(b as AllowedButtons);
     }) as AllowedButtons[];
 
+    const onNextClick = currentStep.popover?.onNextClick || getConfig("onNextClick");
+    const onPrevClick = currentStep.popover?.onPrevClick || getConfig("onPrevClick");
+    const onCloseClick = currentStep.popover?.onCloseClick || getConfig("onCloseClick");
+
     highlight({
       ...currentStep,
       popover: {
@@ -169,17 +177,17 @@ export function driver(options: Config = {}) {
         disableButtons: [...(!hasPreviousStep ? ["previous" as AllowedButtons] : [])],
         showProgress: showProgress,
         progressText: progressTextReplaced,
-        onNextClick: () => {
+        onNextClick: onNextClick ? onNextClick : () => {
           if (!hasNextStep) {
             destroy();
           } else {
             drive(stepIndex + 1);
           }
         },
-        onPrevClick: () => {
+        onPrevClick: onPrevClick ? onPrevClick : () => {
           drive(stepIndex - 1);
         },
-        onCloseClick: () => {
+        onCloseClick: onCloseClick ? onCloseClick : () => {
           destroy();
         },
         ...(currentStep?.popover || {}),