opensource/driver.js
3
0
Fork 0
mirror of https://github.com/kamranahmedse/driver.js.git synced 2026-10-31 03:52:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add support for showing progress

Browse Source
This commit is contained in:
Kamran Ahmed
2023-06-21 04:32:28 +01:00
parent 73b7925e90
commit 03f51095d4
5 changed files with 62 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+6
View File
@@ -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,
});
src/config.ts
+4 -1
View File
@@ -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,
src/driver.ts
+8
View File
@@ -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,
src/popover.ts
+36 -15
View File
@@ -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,
};
}
src/style.css
+8
View File
@@ -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;