From 7fbff02ae499b39c76b897d1a6820e59304417ca Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 15 Jun 2023 03:00:16 +0100
Subject: [PATCH] Fix popover and arrow rendering

---
 index.html       |  4 ++++
 src/driver.ts    |  6 +++---
 src/events.ts    |  2 +-
 src/highlight.ts |  3 +--
 src/popover.ts   | 12 ++++++++----
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index ea9fe32..920391f 100644
--- a/index.html
+++ b/index.html
@@ -449,6 +449,10 @@ npm install driver.js</pre
 
         driverObj.highlight({
           element: "#hooks",
+          popover: {
+            title: "Hooks",
+            description: "Here are all the hooks",
+          },
         });
 
         window.setTimeout(() => {
diff --git a/src/driver.ts b/src/driver.ts
index cdc3df1..4a13d3f 100644
--- a/src/driver.ts
+++ b/src/driver.ts
@@ -1,8 +1,8 @@
 import { destroyPopover, Popover } from "./popover";
 import { destroyStage } from "./stage";
-import { destroyEvents, initEvents } from "./events";
+import { destroyEvents, initEvents, requireRefresh } from "./events";
 import { Config, configure, getConfig } from "./config";
-import { destroyHighlight, highlight, refreshActiveHighlight } from "./highlight";
+import { destroyHighlight, highlight } from "./highlight";
 import { destroyEmitter, listen } from "./emitter";
 
 import "./style.css";
@@ -70,7 +70,7 @@ export function driver(options: Config = {}) {
   return {
     isActive: () => getState("isInitialized") || false,
     refresh: () => {
-      refreshActiveHighlight();
+      requireRefresh();
     },
     drive: (steps: DriveStep[]) => console.log(steps),
     highlight: (step: DriveStep) => {
diff --git a/src/events.ts b/src/events.ts
index 3f40511..612ee27 100644
--- a/src/events.ts
+++ b/src/events.ts
@@ -2,7 +2,7 @@ import { refreshActiveHighlight } from "./highlight";
 import { emit } from "./emitter";
 import { getState, setState } from "./state";
 
-function requireRefresh() {
+export function requireRefresh() {
   const resizeTimeout = getState("resizeTimeout");
   if (resizeTimeout) {
     window.cancelAnimationFrame(resizeTimeout);
diff --git a/src/highlight.ts b/src/highlight.ts
index ad12deb..8ba9bde 100644
--- a/src/highlight.ts
+++ b/src/highlight.ts
@@ -68,7 +68,6 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
   const isFirstHighlight = !fromElement || fromElement === toElement;
   const isToDummyElement = toElement.id === "driver-dummy-element";
   const isFromDummyElement = fromElement.id === "driver-dummy-element";
-  const hasNoPreviousPopover = fromStep && !fromStep.popover;
 
   const highlightStartedHook = getConfig("onHighlightStarted");
   const highlightedHook = getConfig("onHighlighted");
@@ -82,7 +81,7 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
     highlightStartedHook(isToDummyElement ? undefined : toElement, toStep);
   }
 
-  const hasDelayedPopover = !isFirstHighlight && (hasNoPreviousPopover || isFromDummyElement || isToDummyElement);
+  const hasDelayedPopover = !isFirstHighlight;
   let isPopoverRendered = false;
 
   hidePopover();
diff --git a/src/popover.ts b/src/popover.ts
index 7bbf0ae..41a4617 100644
--- a/src/popover.ts
+++ b/src/popover.ts
@@ -53,9 +53,9 @@ export function renderPopover(element: Element, step: DriveStep) {
     description,
     showButtons = undefined,
     // doneBtnText = 'Done',
-    closeBtnText= 'Close',
-    nextBtnText= 'Next &rarr;',
-    prevBtnText = '&larr; Previous',
+    closeBtnText = "Close",
+    nextBtnText = "Next &rarr;",
+    prevBtnText = "&larr; Previous",
   } = step.popover || {};
 
   popover.nextButton.innerHTML = nextBtnText;
@@ -361,7 +361,11 @@ export function repositionPopover(element: Element, step: DriveStep) {
   // e.g. if element scrolled out of the screen to the top, the arrow should be rendered
   // pointing to the top. If the element scrolled out of the screen to the bottom,
   // the arrow should be rendered pointing to the bottom.
-  renderPopoverArrow(requiredAlignment, popoverRenderedSide, element);
+  if (!noneOptimal) {
+    renderPopoverArrow(requiredAlignment, popoverRenderedSide, element);
+  } else {
+    popover.arrow.classList.add("driver-popover-arrow-none");
+  }
 }
 
 function renderPopoverArrow(alignment: Alignment, side: Side, element: Element) {