Add onPopoverRendered hook
Browse files- index.html +31 -19
- src/config.ts +4 -1
- src/popover.ts +8 -0
- src/style.css +5 -0
index.html
CHANGED
@@ -187,9 +187,10 @@
|
|
187 |
</div>
|
188 |
|
189 |
<br />
|
190 |
-
<p>You can
|
191 |
<div class="buttons">
|
192 |
<button id="custom-classes">Custom Classes</button>
|
|
|
193 |
</div>
|
194 |
|
195 |
<ul>
|
@@ -423,6 +424,26 @@ npm install driver.js</pre
|
|
423 |
});
|
424 |
});
|
425 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
426 |
document.getElementById("custom-classes").addEventListener("click", () => {
|
427 |
const driverObj = driver({
|
428 |
popoverClass: "custom-driver-popover"
|
@@ -597,34 +618,25 @@ npm install driver.js</pre
|
|
597 |
});
|
598 |
|
599 |
document.getElementById("hooks").addEventListener("click", () => {
|
600 |
-
const
|
601 |
-
hooksEl.innerHTML = "";
|
602 |
|
603 |
const driverObj = driver({
|
604 |
animate: true,
|
605 |
onDeselected: (element, step) => {
|
606 |
-
const
|
607 |
-
|
608 |
-
li.innerHTML = `Deselected: ${element?.textContent?.slice(0, 10)}..<br> ${JSON.stringify(step)}..`;
|
609 |
-
hooksEl.append(li);
|
610 |
},
|
611 |
onHighlightStarted: (element, step) => {
|
612 |
-
const
|
613 |
-
|
614 |
-
li.innerHTML = `Highlight Started: ${element?.textContent?.slice(0, 10) || 'None'}..<br> ${JSON.stringify(step)}..`;
|
615 |
-
hooksEl.append(li);
|
616 |
},
|
617 |
onHighlighted: (element, step) => {
|
618 |
-
const
|
619 |
-
|
620 |
-
li.innerHTML = `Highlighted: ${element?.textContent?.slice(0, 10) || 'None'}..<br> ${JSON.stringify(step)}..`;
|
621 |
-
hooksEl.append(li);
|
622 |
},
|
623 |
onDestroyed: (element, step) => {
|
624 |
-
const
|
625 |
-
|
626 |
-
li.innerHTML = `Closed: ${element?.textContent?.slice(0, 10) || 'None'}..<br> ${JSON.stringify(step)}..`;
|
627 |
-
hooksEl.append(li);
|
628 |
},
|
629 |
});
|
630 |
|
|
|
187 |
</div>
|
188 |
|
189 |
<br />
|
190 |
+
<p>You can modify the popover as well with custom CSS and JS.</p>
|
191 |
<div class="buttons">
|
192 |
<button id="custom-classes">Custom Classes</button>
|
193 |
+
<button id="popover-hook">Popover Hook</button>
|
194 |
</div>
|
195 |
|
196 |
<ul>
|
|
|
424 |
});
|
425 |
});
|
426 |
|
427 |
+
document.getElementById("popover-hook").addEventListener("click", () => {
|
428 |
+
const driverObj = driver({
|
429 |
+
onPopoverRendered: (popover) => {
|
430 |
+
popover.title.innerText = 'Modified Parent';
|
431 |
+
}
|
432 |
+
});
|
433 |
+
driverObj.highlight({
|
434 |
+
element: '.page-header',
|
435 |
+
popover: {
|
436 |
+
title: 'Page Title',
|
437 |
+
description: 'Body of the popover',
|
438 |
+
side: 'bottom',
|
439 |
+
align: 'start',
|
440 |
+
onPopoverRendered: (popover) => {
|
441 |
+
popover.title.innerText = 'Modified';
|
442 |
+
}
|
443 |
+
}
|
444 |
+
})
|
445 |
+
});
|
446 |
+
|
447 |
document.getElementById("custom-classes").addEventListener("click", () => {
|
448 |
const driverObj = driver({
|
449 |
popoverClass: "custom-driver-popover"
|
|
|
618 |
});
|
619 |
|
620 |
document.getElementById("hooks").addEventListener("click", () => {
|
621 |
+
const pageHeader = document.getElementById(".page-header");
|
|
|
622 |
|
623 |
const driverObj = driver({
|
624 |
animate: true,
|
625 |
onDeselected: (element, step) => {
|
626 |
+
const elementText = element?.textContent?.slice(0, 10) || ' - N/A -';
|
627 |
+
console.log(`Deselected: ${elementText}\n${JSON.stringify(step)}`);
|
|
|
|
|
628 |
},
|
629 |
onHighlightStarted: (element, step) => {
|
630 |
+
const elementText = element?.textContent?.slice(0, 10) || ' - N/A -';
|
631 |
+
console.log(`Highlight Started: ${elementText}\n${JSON.stringify(step)}`);
|
|
|
|
|
632 |
},
|
633 |
onHighlighted: (element, step) => {
|
634 |
+
const elementText = element?.textContent?.slice(0, 10) || ' - N/A -';
|
635 |
+
console.log(`Highlighted: ${elementText}\n${JSON.stringify(step)}`);
|
|
|
|
|
636 |
},
|
637 |
onDestroyed: (element, step) => {
|
638 |
+
const elementText = element?.textContent?.slice(0, 10) || ' - N/A -';
|
639 |
+
console.log(`Destroyed: ${elementText}\n${JSON.stringify(step)}`);
|
|
|
|
|
640 |
},
|
641 |
});
|
642 |
|
src/config.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1 |
import { DriveStep } from "./driver";
|
2 |
-
import {
|
3 |
|
4 |
export type Config = {
|
5 |
animate?: boolean;
|
@@ -21,6 +21,9 @@ export type Config = {
|
|
21 |
prevBtnText?: string;
|
22 |
closeBtnText?: string;
|
23 |
|
|
|
|
|
|
|
24 |
// State based callbacks, called upon state changes
|
25 |
onOverlayClick?: (element: Element | undefined, step: DriveStep) => void;
|
26 |
onHighlightStarted?: (element: Element | undefined, step: DriveStep) => void;
|
|
|
1 |
import { DriveStep } from "./driver";
|
2 |
+
import {AllowedButtons, PopoverDOM} from "./popover";
|
3 |
|
4 |
export type Config = {
|
5 |
animate?: boolean;
|
|
|
21 |
prevBtnText?: string;
|
22 |
closeBtnText?: string;
|
23 |
|
24 |
+
// Called after the popover is rendered
|
25 |
+
onPopoverRendered?: (popover: PopoverDOM) => void;
|
26 |
+
|
27 |
// State based callbacks, called upon state changes
|
28 |
onOverlayClick?: (element: Element | undefined, step: DriveStep) => void;
|
29 |
onHighlightStarted?: (element: Element | undefined, step: DriveStep) => void;
|
src/popover.ts
CHANGED
@@ -25,6 +25,9 @@ export type Popover = {
|
|
25 |
nextBtnText?: string;
|
26 |
prevBtnText?: string;
|
27 |
|
|
|
|
|
|
|
28 |
// Button callbacks
|
29 |
onNextClick?: (element: Element | undefined, step: DriveStep) => void;
|
30 |
onPrevClick?: (element: Element | undefined, step: DriveStep) => void;
|
@@ -173,6 +176,11 @@ export function renderPopover(element: Element, step: DriveStep) {
|
|
173 |
|
174 |
repositionPopover(element, step);
|
175 |
bringInView(popoverWrapper);
|
|
|
|
|
|
|
|
|
|
|
176 |
}
|
177 |
|
178 |
type PopoverDimensions = {
|
|
|
25 |
nextBtnText?: string;
|
26 |
prevBtnText?: string;
|
27 |
|
28 |
+
// Called after the popover is rendered
|
29 |
+
onPopoverRendered?: (popover: PopoverDOM) => void;
|
30 |
+
|
31 |
// Button callbacks
|
32 |
onNextClick?: (element: Element | undefined, step: DriveStep) => void;
|
33 |
onPrevClick?: (element: Element | undefined, step: DriveStep) => void;
|
|
|
176 |
|
177 |
repositionPopover(element, step);
|
178 |
bringInView(popoverWrapper);
|
179 |
+
|
180 |
+
const onPopoverRendered = step.popover?.onPopoverRendered || getConfig('onPopoverRendered');
|
181 |
+
if (onPopoverRendered) {
|
182 |
+
onPopoverRendered(popover);
|
183 |
+
}
|
184 |
}
|
185 |
|
186 |
type PopoverDimensions = {
|
src/style.css
CHANGED
@@ -97,6 +97,11 @@
|
|
97 |
border-radius: 3px;
|
98 |
}
|
99 |
|
|
|
|
|
|
|
|
|
|
|
100 |
.driver-popover-footer button:hover {
|
101 |
background-color: #f7f7f7;
|
102 |
}
|
|
|
97 |
border-radius: 3px;
|
98 |
}
|
99 |
|
100 |
+
/* Disable the scrolling of parent element if it has an active element*/
|
101 |
+
:not(body):has(> .driver-active-element) {
|
102 |
+
overflow: hidden !important;
|
103 |
+
}
|
104 |
+
|
105 |
.driver-popover-footer button:hover {
|
106 |
background-color: #f7f7f7;
|
107 |
}
|