From 3d6a7871d6af97550e02fe30319e8f38da1114dd Mon Sep 17 00:00:00 2001 From: Tristan T Date: Tue, 9 Dec 2025 10:43:07 +0100 Subject: [PATCH] feat: add "content" props --- index.html | 76 ++++++++++++++++++++++++++++++++++++++++++++++++-- src/driver.css | 15 +++++++++- src/popover.ts | 24 ++++++++++++++++ 3 files changed, 112 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index b1891c8e..3163f0c2 100644 --- a/index.html +++ b/index.html @@ -206,6 +206,9 @@

Highlight Feature

+ + +

Tour Feature

@@ -918,7 +921,8 @@

Usage and Demo

element: ".page-header h1 sup", popover: { title: "Buggy Highlight", - description: "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.", + description: + "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.", side: "bottom", align: "start", }, @@ -930,7 +934,8 @@

Usage and Demo

element: ".container", popover: { title: "Buggy Highlight", - description: "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.", + description: + "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.", side: "bottom", align: "start", }, @@ -1160,6 +1165,73 @@

Usage and Demo

document.getElementById("destroy-btn").addEventListener("click", () => { driver().destroy(); }); + + document.getElementById("test-content-string").addEventListener("click", () => { + const driverObj = driver(); + driverObj.highlight({ + element: "#test-content-string", + popover: { + title: "Content with HTML String", + description: "This is the regular description.", + content: + '
Custom Content

This content is inserted via an HTML string.

', + }, + }); + }); + + document.getElementById("test-content-element").addEventListener("click", () => { + const driverObj = driver(); + + // Create a custom element + const contentDiv = document.createElement("div"); + contentDiv.style.cssText = "padding: 10px; background: #f0f0f0; border-radius: 5px; margin-top: 5px;"; + + const title = document.createElement("strong"); + title.textContent = "Dynamically Created DOM Element"; + + const list = document.createElement("ul"); + list.style.cssText = "margin: 10px 0 0 0; padding-left: 20px;"; + ["Item 1", "Item 2", "Item 3"].forEach(text => { + const li = document.createElement("li"); + li.textContent = text; + list.appendChild(li); + }); + + contentDiv.appendChild(title); + contentDiv.appendChild(list); + + driverObj.highlight({ + element: "#test-content-element", + popover: { + title: "Content with DOM Element", + description: "The description is displayed first.", + content: contentDiv, + }, + }); + }); + + document.getElementById("test-content-interactive").addEventListener("click", () => { + const driverObj = driver(); + + const contentDiv = document.createElement("div"); + contentDiv.style.cssText = " margin-top: 5px; text-align: center;"; + + const img = document.createElement("img"); + img.src = "https://i.imgur.com/EAQhHu5.gif"; + img.alt = "Demo animation"; + img.style.cssText = "max-width: 100%; height: auto;"; + + contentDiv.appendChild(img); + + driverObj.highlight({ + element: "#test-content-interactive", + popover: { + title: "Interactive Content", + description: "This popover contains an image!", + content: contentDiv, + }, + }); + }); diff --git a/src/driver.css b/src/driver.css index 0128f76d..02fbb0e4 100644 --- a/src/driver.css +++ b/src/driver.css @@ -97,6 +97,18 @@ zoom: 1; } +.driver-popover-description[style*="block"] + .driver-popover-content { + margin-top: 10px; +} + +.driver-popover-content { + margin-bottom: 0; + font: 14px / normal sans-serif; + line-height: 1.5; + font-weight: 400; + zoom: 1; +} + .driver-popover-footer { margin-top: 15px; text-align: right; @@ -141,7 +153,8 @@ overflow: hidden !important; } -.driver-no-interaction, .driver-no-interaction * { +.driver-no-interaction, +.driver-no-interaction * { pointer-events: none !important; } diff --git a/src/popover.ts b/src/popover.ts index 582d5005..6d255e53 100644 --- a/src/popover.ts +++ b/src/popover.ts @@ -12,6 +12,7 @@ export type AllowedButtons = "next" | "previous" | "close"; export type Popover = { title?: string; description?: string; + content?: string | HTMLElement | Node; side?: Side; align?: Alignment; @@ -41,6 +42,7 @@ export type PopoverDOM = { arrow: HTMLElement; title: HTMLElement; description: HTMLElement; + content: HTMLElement; footer: HTMLElement; progress: HTMLElement; previousButton: HTMLButtonElement; @@ -70,6 +72,7 @@ export function renderPopover(element: Element, step: DriveStep) { const { title, description, + content, showButtons, disableButtons, showProgress, @@ -97,6 +100,20 @@ export function renderPopover(element: Element, step: DriveStep) { popover.description.style.display = "none"; } + if (content) { + popover.content.innerHTML = ""; + + if (typeof content === "string") { + popover.content.innerHTML = content; + } else if (content instanceof HTMLElement || content instanceof Node) { + popover.content.appendChild(content); + } + + popover.content.style.display = "block"; + } else { + popover.content.style.display = "none"; + } + const showButtonsConfig: AllowedButtons[] = showButtons || getConfig("showButtons")!; const showProgressConfig = showProgress || getConfig("showProgress") || false; const showFooter = @@ -642,6 +659,11 @@ function createPopover(): PopoverDOM { description.style.display = "none"; description.innerText = "Popover description is here"; + const content = document.createElement("div"); + content.id = "driver-popover-content"; + content.classList.add("driver-popover-content"); + content.style.display = "none"; + const closeButton = document.createElement("button"); closeButton.type = "button"; closeButton.classList.add("driver-popover-close-btn"); @@ -677,6 +699,7 @@ function createPopover(): PopoverDOM { wrapper.appendChild(arrow); wrapper.appendChild(title); wrapper.appendChild(description); + wrapper.appendChild(content); wrapper.appendChild(footer); return { @@ -684,6 +707,7 @@ function createPopover(): PopoverDOM { arrow, title, description, + content, footer, previousButton, nextButton,