From 03f51095d47fc50e658931f0de1b231e8ea45f30 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 21 Jun 2023 04:32:28 +0100
Subject: [PATCH] Add support for showing progress

---
 index.html     |  6 ++++++
 src/config.ts  |  5 ++++-
 src/driver.ts  |  8 ++++++++
 src/popover.ts | 51 +++++++++++++++++++++++++++++++++++---------------
 src/style.css  |  8 ++++++++
 5 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index e3f5e63..c5069b0 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- prefetch image -->
+    <link rel="preconnect" href="https://i.imgur.com/" />
     <title>Vite App</title>
 
     <style>
@@ -410,6 +412,7 @@ npm install driver.js</pre
           animate: false,
           backdropColor: "blue",
           opacity: 0.3,
+          showProgress: true,
           steps: basicTourSteps,
         });
 
@@ -438,6 +441,8 @@ npm install driver.js</pre
         const driverObj = driver({
           animate: true,
           opacity: 0.3,
+          showProgress: true,
+          progressText: "{{current}} / {{total}}",
           steps: [
             {
               element: ".page-header",
@@ -524,6 +529,7 @@ npm install driver.js</pre
 
       document.getElementById("basic-tour").addEventListener("click", () => {
         const driverObj = driver({
+          showProgress: true,
           steps: basicTourSteps,
         });
 
diff --git a/src/config.ts b/src/config.ts
index 98d52d4..a9f84c4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,5 +1,5 @@
 import { DriveStep } from "./driver";
-import {AllowedButtons, PopoverDOM} from "./popover";
+import { AllowedButtons, PopoverDOM } from "./popover";
 
 export type Config = {
   steps?: DriveStep[];
@@ -17,9 +17,11 @@ export type Config = {
   popoverClass?: string;
   popoverOffset?: number;
   showButtons?: AllowedButtons[];
+  showProgress?: boolean;
   disableButtons?: AllowedButtons[];
 
   // Button texts
+  progressText?: string;
   nextBtnText?: string;
   prevBtnText?: string;
   doneBtnText?: string;
@@ -49,6 +51,7 @@ export function configure(config: Config = {}) {
     allowClose: true,
     opacity: 0.7,
     smoothScroll: false,
+    showProgress: false,
     stagePadding: 10,
     stageRadius: 5,
     popoverOffset: 10,
diff --git a/src/driver.ts b/src/driver.ts
index ffce16f..4eff801 100644
--- a/src/driver.ts
+++ b/src/driver.ts
@@ -120,13 +120,19 @@ export function driver(options: Config = {}) {
 
     const doneBtnText = currentStep.popover?.doneBtnText || getConfig("doneBtnText") || "Done";
     const allowsClosing = getConfig("allowClose");
+    const showProgress = typeof currentStep.popover?.showProgress !== "undefined" ? currentStep.popover?.showProgress : getConfig("showProgress")
+    const progressText = currentStep.popover?.progressText || getConfig("progressText") || "{{current}} of {{total}}";
+    const progressTextReplaced = progressText.replace("{{current}}", `${stepIndex + 1}`).replace("{{total}}", `${steps.length}`);
 
+    console.log(showProgress);
     highlight({
       ...currentStep,
       popover: {
         showButtons: ["next", "previous", ...(allowsClosing ? ["close" as AllowedButtons] : [])],
         nextBtnText: !hasNextStep ? doneBtnText : undefined,
         disableButtons: [...(!hasPreviousStep ? ["previous" as AllowedButtons] : [])],
+        showProgress: showProgress,
+        progressText: progressTextReplaced,
         onNextClick: () => {
           if (!hasNextStep) {
             destroy();
@@ -211,6 +217,8 @@ export function driver(options: Config = {}) {
         popover: step.popover
           ? {
               showButtons: [],
+              showProgress: false,
+              progressText: "",
               ...step.popover!,
             }
           : undefined,
diff --git a/src/popover.ts b/src/popover.ts
index f83a3ad..b45fdc1 100644
--- a/src/popover.ts
+++ b/src/popover.ts
@@ -16,11 +16,13 @@ export type Popover = {
   align?: Alignment;
 
   showButtons?: AllowedButtons[];
+  showProgress?: boolean;
   disableButtons?: AllowedButtons[];
 
   popoverClass?: string;
 
   // Button texts
+  progressText?: string;
   doneBtnText?: string;
   nextBtnText?: string;
   prevBtnText?: string;
@@ -41,6 +43,7 @@ export type PopoverDOM = {
   title: HTMLElement;
   description: HTMLElement;
   footer: HTMLElement;
+  progress: HTMLElement;
   previousButton: HTMLElement;
   nextButton: HTMLElement;
   closeButton: HTMLElement;
@@ -70,13 +73,16 @@ export function renderPopover(element: Element, step: DriveStep) {
     description,
     showButtons,
     disableButtons,
+    showProgress,
 
     nextBtnText = getConfig("nextBtnText") || "Next &rarr;",
     prevBtnText = getConfig("prevBtnText") || "&larr; Previous",
+    progressText = getConfig("progressText") || "{current} of {total}",
   } = step.popover || {};
 
   popover.nextButton.innerHTML = nextBtnText;
   popover.previousButton.innerHTML = prevBtnText;
+  popover.progress.innerHTML = progressText;
 
   if (title) {
     popover.title.innerText = title;
@@ -93,27 +99,36 @@ export function renderPopover(element: Element, step: DriveStep) {
   }
 
   const showButtonsConfig: AllowedButtons[] = showButtons || getConfig("showButtons")!;
+  const showProgressConfig = showProgress || getConfig("showProgress") || false;
+  const showFooter =
+    showButtonsConfig?.includes("next") ||
+    showButtonsConfig?.includes("previous") ||
+    showButtonsConfig?.includes("close") ||
+    showProgressConfig;
 
-  popover.closeButton.style.display = showButtonsConfig.includes("close") ? 'block' : 'none';
-  if (showButtonsConfig?.includes("next") || showButtonsConfig?.includes("previous")) {
+  popover.closeButton.style.display = showButtonsConfig.includes("close") ? "block" : "none";
+
+  if (showFooter) {
     popover.footer.style.display = "flex";
-    popover.nextButton.style.display = showButtonsConfig.includes("next") ? 'block' : 'none';
-    popover.previousButton.style.display = showButtonsConfig.includes("previous") ? 'block' : 'none';
+
+    popover.progress.style.display = showProgressConfig ? "block" : "none";
+    popover.nextButton.style.display = showButtonsConfig.includes("next") ? "block" : "none";
+    popover.previousButton.style.display = showButtonsConfig.includes("previous") ? "block" : "none";
   } else {
     popover.footer.style.display = "none";
   }
 
-  const disabledButtonsConfig: AllowedButtons[] = disableButtons || getConfig('disableButtons')! || [];
-  if (disabledButtonsConfig?.includes('next')) {
-      popover.nextButton.classList.add("driver-popover-btn-disabled")
+  const disabledButtonsConfig: AllowedButtons[] = disableButtons || getConfig("disableButtons")! || [];
+  if (disabledButtonsConfig?.includes("next")) {
+    popover.nextButton.classList.add("driver-popover-btn-disabled");
   }
 
-  if (disabledButtonsConfig?.includes('previous')) {
-      popover.previousButton.classList.add("driver-popover-btn-disabled")
+  if (disabledButtonsConfig?.includes("previous")) {
+    popover.previousButton.classList.add("driver-popover-btn-disabled");
   }
 
-  if (disabledButtonsConfig?.includes('close')) {
-      popover.closeButton.classList.add("driver-popover-btn-disabled")
+  if (disabledButtonsConfig?.includes("close")) {
+    popover.closeButton.classList.add("driver-popover-btn-disabled");
   }
 
   // Reset the popover position
@@ -182,7 +197,7 @@ export function renderPopover(element: Element, step: DriveStep) {
   repositionPopover(element, step);
   bringInView(popoverWrapper);
 
-  const onPopoverRendered = step.popover?.onPopoverRendered || getConfig('onPopoverRendered');
+  const onPopoverRendered = step.popover?.onPopoverRendered || getConfig("onPopoverRendered");
   if (onPopoverRendered) {
     onPopoverRendered(popover);
   }
@@ -566,13 +581,17 @@ function createPopover(): PopoverDOM {
   description.style.display = "none";
   description.innerText = "Popover description is here";
 
-  const footer = document.createElement("div");
-  footer.classList.add("driver-popover-footer");
-
   const closeButton = document.createElement("button");
   closeButton.classList.add("driver-popover-close-btn");
   closeButton.innerHTML = "&times;";
 
+  const footer = document.createElement("div");
+  footer.classList.add("driver-popover-footer");
+
+  const progress = document.createElement("span");
+  progress.classList.add("driver-popover-progress-text");
+  progress.innerText = "";
+
   const footerButtons = document.createElement("span");
   footerButtons.classList.add("driver-popover-navigation-btns");
 
@@ -586,6 +605,7 @@ function createPopover(): PopoverDOM {
 
   footerButtons.appendChild(previousButton);
   footerButtons.appendChild(nextButton);
+  footer.appendChild(progress);
   footer.appendChild(footerButtons);
 
   wrapper.appendChild(closeButton);
@@ -604,6 +624,7 @@ function createPopover(): PopoverDOM {
     nextButton,
     closeButton,
     footerButtons,
+    progress,
   };
 }
 
diff --git a/src/style.css b/src/style.css
index 448ffd9..1023ca9 100644
--- a/src/style.css
+++ b/src/style.css
@@ -101,9 +101,17 @@
   text-align: right;
   zoom: 1;
   display: flex;
+  align-items: center;
   justify-content: space-between;
 }
 
+.driver-popover-progress-text {
+  font-size: 13px;
+  font-weight: 400;
+  color: #a2a2a2;
+  zoom: 1;
+}
+
 .driver-popover-footer button {
   all: unset;
   display: inline-block;