Add support for custom classes
Browse files- src/config.ts +2 -0
- src/popover.ts +6 -0
src/config.ts
CHANGED
@@ -11,6 +11,8 @@ export type Config = {
|
|
11 |
stageRadius?: number;
|
12 |
allowKeyboardControl?: boolean;
|
13 |
|
|
|
|
|
14 |
popoverOffset?: number;
|
15 |
showButtons?: AllowedButtons[];
|
16 |
|
|
|
11 |
stageRadius?: number;
|
12 |
allowKeyboardControl?: boolean;
|
13 |
|
14 |
+
// Popover specific configuration
|
15 |
+
popoverClass?: string;
|
16 |
popoverOffset?: number;
|
17 |
showButtons?: AllowedButtons[];
|
18 |
|
src/popover.ts
CHANGED
@@ -17,6 +17,8 @@ export type Popover = {
|
|
17 |
|
18 |
showButtons?: AllowedButtons[];
|
19 |
|
|
|
|
|
20 |
// Button texts
|
21 |
doneBtnText?: string;
|
22 |
closeBtnText?: string;
|
@@ -118,6 +120,10 @@ export function renderPopover(element: Element, step: DriveStep) {
|
|
118 |
const popoverArrow = popover.arrow;
|
119 |
popoverArrow.className = "driver-popover-arrow";
|
120 |
|
|
|
|
|
|
|
|
|
121 |
// Handles the popover button clicks
|
122 |
onDriverClick(
|
123 |
popover.wrapper,
|
|
|
17 |
|
18 |
showButtons?: AllowedButtons[];
|
19 |
|
20 |
+
popoverClass?: string;
|
21 |
+
|
22 |
// Button texts
|
23 |
doneBtnText?: string;
|
24 |
closeBtnText?: string;
|
|
|
120 |
const popoverArrow = popover.arrow;
|
121 |
popoverArrow.className = "driver-popover-arrow";
|
122 |
|
123 |
+
// Reset any custom classes on the popover
|
124 |
+
const customPopoverClass = step.popover?.popoverClass || getConfig("popoverClass") || "";
|
125 |
+
popoverWrapper.className = `driver-popover ${customPopoverClass}`.trim();
|
126 |
+
|
127 |
// Handles the popover button clicks
|
128 |
onDriverClick(
|
129 |
popover.wrapper,
|