kamrify commited on
Commit
28ba7df
·
1 Parent(s): b0d2931

Add onPopoverRendered hook

Browse files
Files changed (4) hide show
  1. index.html +31 -19
  2. src/config.ts +4 -1
  3. src/popover.ts +8 -0
  4. src/style.css +5 -0
index.html CHANGED
@@ -187,9 +187,10 @@
187
  </div>
188
 
189
  <br />
190
- <p>You can assign custom classes to popover.</p>
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 hooksEl = document.getElementById("hooks-list");
601
- hooksEl.innerHTML = "";
602
 
603
  const driverObj = driver({
604
  animate: true,
605
  onDeselected: (element, step) => {
606
- const li = document.createElement("li");
607
- // prettier-ignore
608
- li.innerHTML = `Deselected: ${element?.textContent?.slice(0, 10)}..<br> ${JSON.stringify(step)}..`;
609
- hooksEl.append(li);
610
  },
611
  onHighlightStarted: (element, step) => {
612
- const li = document.createElement("li");
613
- // prettier-ignore
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 li = document.createElement("li");
619
- // prettier-ignore
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 li = document.createElement("li");
625
- // prettier-ignore
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 { AllowedButtons } from "./popover";
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
  }