From 28ba7df565d404f1c68150425b42e2dc126d5db6 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 18 Jun 2023 01:38:20 +0100
Subject: [PATCH] Add onPopoverRendered hook

---
 index.html     | 50 +++++++++++++++++++++++++++++++-------------------
 src/config.ts  |  5 ++++-
 src/popover.ts |  8 ++++++++
 src/style.css  |  5 +++++
 4 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 3109b99..6ecace2 100644
--- a/index.html
+++ b/index.html
@@ -187,9 +187,10 @@
       </div>
 
       <br />
-      <p>You can assign custom classes to popover.</p>
+      <p>You can modify the popover as well with custom CSS and JS.</p>
       <div class="buttons">
         <button id="custom-classes">Custom Classes</button>
+        <button id="popover-hook">Popover Hook</button>
       </div>
 
       <ul>
@@ -423,6 +424,26 @@ npm install driver.js</pre
         });
       });
 
+      document.getElementById("popover-hook").addEventListener("click", () => {
+        const driverObj = driver({
+          onPopoverRendered: (popover) => {
+            popover.title.innerText = 'Modified Parent';
+          }
+        });
+        driverObj.highlight({
+          element: '.page-header',
+          popover: {
+            title: 'Page Title',
+            description: 'Body of the popover',
+            side: 'bottom',
+            align: 'start',
+            onPopoverRendered: (popover) => {
+              popover.title.innerText = 'Modified';
+            }
+          }
+        })
+      });
+
       document.getElementById("custom-classes").addEventListener("click", () => {
         const driverObj = driver({
           popoverClass: "custom-driver-popover"
@@ -597,34 +618,25 @@ npm install driver.js</pre
       });
 
       document.getElementById("hooks").addEventListener("click", () => {
-        const hooksEl = document.getElementById("hooks-list");
-        hooksEl.innerHTML = "";
+        const pageHeader = document.getElementById(".page-header");
 
         const driverObj = driver({
           animate: true,
           onDeselected: (element, step) => {
-            const li = document.createElement("li");
-            // prettier-ignore
-            li.innerHTML = `Deselected: ${element?.textContent?.slice(0, 10)}..<br> ${JSON.stringify(step)}..`;
-            hooksEl.append(li);
+            const elementText = element?.textContent?.slice(0, 10) || ' - N/A -';
+            console.log(`Deselected: ${elementText}\n${JSON.stringify(step)}`);
           },
           onHighlightStarted: (element, step) => {
-            const li = document.createElement("li");
-            // prettier-ignore
-            li.innerHTML = `Highlight Started: ${element?.textContent?.slice(0, 10) || 'None'}..<br> ${JSON.stringify(step)}..`;
-            hooksEl.append(li);
+            const elementText = element?.textContent?.slice(0, 10) || ' - N/A -';
+            console.log(`Highlight Started: ${elementText}\n${JSON.stringify(step)}`);
           },
           onHighlighted: (element, step) => {
-            const li = document.createElement("li");
-            // prettier-ignore
-            li.innerHTML = `Highlighted: ${element?.textContent?.slice(0, 10) || 'None'}..<br> ${JSON.stringify(step)}..`;
-            hooksEl.append(li);
+            const elementText = element?.textContent?.slice(0, 10) || ' - N/A -';
+            console.log(`Highlighted: ${elementText}\n${JSON.stringify(step)}`);
           },
           onDestroyed: (element, step) => {
-            const li = document.createElement("li");
-            // prettier-ignore
-            li.innerHTML = `Closed: ${element?.textContent?.slice(0, 10) || 'None'}..<br> ${JSON.stringify(step)}..`;
-            hooksEl.append(li);
+            const elementText = element?.textContent?.slice(0, 10) || ' - N/A -';
+            console.log(`Destroyed: ${elementText}\n${JSON.stringify(step)}`);
           },
         });
 
diff --git a/src/config.ts b/src/config.ts
index a45f1c1..075a2e4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,5 +1,5 @@
 import { DriveStep } from "./driver";
-import { AllowedButtons } from "./popover";
+import {AllowedButtons, PopoverDOM} from "./popover";
 
 export type Config = {
   animate?: boolean;
@@ -21,6 +21,9 @@ export type Config = {
   prevBtnText?: string;
   closeBtnText?: string;
 
+  // Called after the popover is rendered
+  onPopoverRendered?: (popover: PopoverDOM) => void;
+
   // State based callbacks, called upon state changes
   onOverlayClick?: (element: Element | undefined, step: DriveStep) => void;
   onHighlightStarted?: (element: Element | undefined, step: DriveStep) => void;
diff --git a/src/popover.ts b/src/popover.ts
index 726854f..31edc1e 100644
--- a/src/popover.ts
+++ b/src/popover.ts
@@ -25,6 +25,9 @@ export type Popover = {
   nextBtnText?: string;
   prevBtnText?: string;
 
+  // Called after the popover is rendered
+  onPopoverRendered?: (popover: PopoverDOM) => void;
+
   // Button callbacks
   onNextClick?: (element: Element | undefined, step: DriveStep) => void;
   onPrevClick?: (element: Element | undefined, step: DriveStep) => void;
@@ -173,6 +176,11 @@ export function renderPopover(element: Element, step: DriveStep) {
 
   repositionPopover(element, step);
   bringInView(popoverWrapper);
+
+  const onPopoverRendered = step.popover?.onPopoverRendered || getConfig('onPopoverRendered');
+  if (onPopoverRendered) {
+    onPopoverRendered(popover);
+  }
 }
 
 type PopoverDimensions = {
diff --git a/src/style.css b/src/style.css
index 9bac33a..e5798a4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -97,6 +97,11 @@
   border-radius: 3px;
 }
 
+/* Disable the scrolling of parent element if it has an active element*/
+:not(body):has(> .driver-active-element) {
+  overflow: hidden !important;
+}
+
 .driver-popover-footer button:hover {
   background-color: #f7f7f7;
 }