diff --git a/index.html b/index.html index 75f6948..be7ed59 100644 --- a/index.html +++ b/index.html @@ -146,7 +146,7 @@ -
+

given below are the examples of simple `highlight`

@@ -155,9 +155,10 @@ +
-
+

You can Attach events to buttons.

@@ -373,6 +374,27 @@ npm install driver.js { + const driverObj = driver({ + prevBtnText: "<——", + nextBtnText: "——>", + closeBtnText: "X", + }); + + driverObj.highlight({ + element: "#button-texts", + popover: { + side: "left", + title: "Button from Config", + showButtons: ["close", "next", "previous"], + closeBtnText: "xx", + nextBtnText: "==>", + prevBtnText: "<==", + description: "These buttons are configured using driver config.", + }, + }); + }); + document.getElementById("is-active-btn").addEventListener("click", () => { alert(driver().isActive()); }); @@ -514,7 +536,7 @@ npm install driver.js { const hooksEl = document.getElementById("hooks-list"); - hooksEl.innerHTML = ''; + hooksEl.innerHTML = ""; const driverObj = driver({ animate: true, diff --git a/src/config.ts b/src/config.ts index 7e87e51..c3f0bc0 100644 --- a/src/config.ts +++ b/src/config.ts @@ -12,6 +12,11 @@ export type Config = { popoverOffset?: number; showButtons?: AllowedButtons[]; + // Button texts + nextBtnText?: string; + prevBtnText?: string; + closeBtnText?: string; + // State based callbacks, called upon state changes onHighlightStarted?: (element: Element | undefined, step: DriveStep) => void; onHighlighted?: (element: Element | undefined, step: DriveStep) => void; diff --git a/src/popover.ts b/src/popover.ts index 6924002..4fe51dc 100644 --- a/src/popover.ts +++ b/src/popover.ts @@ -54,9 +54,9 @@ export function renderPopover(element: Element, step: DriveStep) { description, showButtons: popoverShowButtons = undefined, // doneBtnText = 'Done', - closeBtnText = "Close", - nextBtnText = "Next →", - prevBtnText = "← Previous", + closeBtnText = getConfig("closeBtnText") || "Close", + nextBtnText = getConfig("nextBtnText") || "Next →", + prevBtnText = getConfig("prevBtnText") || "← Previous", } = step.popover || {}; popover.nextButton.innerHTML = nextBtnText; @@ -77,21 +77,22 @@ export function renderPopover(element: Element, step: DriveStep) { popover.description.style.display = "none"; } - const showButtonsConfig: AllowedButtons[] = popoverShowButtons !== undefined ? popoverShowButtons : getConfig("showButtons")!; + const showButtonsConfig: AllowedButtons[] = + popoverShowButtons !== undefined ? popoverShowButtons : getConfig("showButtons")!; console.log(popoverShowButtons); if (showButtonsConfig?.length! > 0) { popover.footer.style.display = "flex"; - if (!showButtonsConfig.includes('next')) { + if (!showButtonsConfig.includes("next")) { popover.nextButton.style.display = "none"; } - if (!showButtonsConfig.includes('previous')) { + if (!showButtonsConfig.includes("previous")) { popover.previousButton.style.display = "none"; } - if (!showButtonsConfig.includes('close')) { + if (!showButtonsConfig.includes("close")) { popover.closeButton.style.display = "none"; } } else {