Repositioning of popover

src/highlight.ts

@@ -1,7 +1,7 @@
 import { DriveStep } from "./driver";
 import { refreshStage, trackActiveElement, transitionStage } from "./stage";
 import { getConfig } from "./config";
-import { refreshPopover, renderPopover } from "./popover";
+import { repositionPopover, renderPopover } from "./popover";
 import { bringInView } from "./utils";
 
 let previousHighlight: Element | undefined;

src/popover.ts

@@ -1,8 +1,11 @@
 import { bringInView } from "./utils";
+import { STAGE_PADDING } from "./stage";
 
 export type Side = "top" | "right" | "bottom" | "left";
 export type Alignment = "start" | "center" | "end";
 
+const POPOVER_OFFSET = 10;
+
 export type Popover = {
   title?: string;
   description: string;
@@ -30,80 +33,100 @@ export function renderPopover(element: Element) {
     document.body.appendChild(popover.wrapper);
   }
 
+  // Reset the popover position
   const popoverWrapper = popover.wrapper;
-
   popoverWrapper.style.display = "block";
-  popoverWrapper.style.left = "0";
-  popoverWrapper.style.top = "0";
+  popoverWrapper.style.left = "";
+  popoverWrapper.style.top = "";
   popoverWrapper.style.bottom = "";
   popoverWrapper.style.right = "";
 
-  refreshPopover(element);
+  // Reset the classes responsible for the arrow position
+  const popoverArrow = popover.arrow;
+  popoverArrow.className = "driver-popover-arrow";
+
+  repositionPopover(element);
   bringInView(popoverWrapper);
 }
 
-export function refreshPopover(element: Element) {
-  if (!popover) {
+function getPopoverDimensions() {
+  if (!popover?.wrapper) {
     return;
   }
 
-  const popoverArrow = popover.arrow;
+  const boundingClientRect = popover.wrapper.getBoundingClientRect();
+
+  return {
+    width: boundingClientRect.width + STAGE_PADDING + POPOVER_OFFSET,
+    height: boundingClientRect.height + STAGE_PADDING + POPOVER_OFFSET,
 
-  // const position = calculatePopoverPosition(element);
-  popoverArrow?.classList.add("driver-popover-arrow-side-bottom", "driver-popover-arrow-align-center");
+    realWidth: boundingClientRect.width,
+    realHeight: boundingClientRect.height,
+  };
 }
 
-function calculatePopoverPosition(element: Element) {
+export function repositionPopover(element: Element) {
   if (!popover) {
     return;
   }
 
-  const popoverPadding = 10;
+  const requiredAlignment: Alignment = "start";
+  const popoverPadding = STAGE_PADDING;
 
-  const popoverDimensions = popover.wrapper.getBoundingClientRect();
+  const popoverDimensions = getPopoverDimensions();
   const popoverArrowDimensions = popover.arrow.getBoundingClientRect();
   const elementDimensions = element.getBoundingClientRect();
 
-  const popoverPaddedWidth = popoverDimensions.width + popoverPadding;
-  const popoverPaddedHeight = popoverDimensions.height + popoverPadding;
-
-  const topValue = elementDimensions.top - popoverPaddedHeight;
+  const topValue = elementDimensions.top - popoverDimensions!.height;
   const isTopOptimal = topValue >= 0;
 
-  const bottomValue = window.innerHeight - (elementDimensions.bottom + popoverPaddedHeight);
+  const bottomValue = window.innerHeight - (elementDimensions.bottom + popoverDimensions!.height);
   const isBottomOptimal = bottomValue >= 0;
 
-  const leftValue = elementDimensions.left - popoverPaddedWidth;
+  const leftValue = elementDimensions.left - popoverDimensions!.width;
   const isLeftOptimal = leftValue >= 0;
 
-  const rightValue = window.innerWidth - (elementDimensions.right + popoverPaddedWidth);
+  const rightValue = window.innerWidth - (elementDimensions.right + popoverDimensions!.width);
   const isRightOptimal = rightValue >= 0;
 
   const noneOptimal = !isTopOptimal && !isBottomOptimal && !isLeftOptimal && !isRightOptimal;
+
   if (noneOptimal) {
-    return {
-      left: window.innerWidth / 2 - popoverDimensions.width / 2,
-      bottom: 10,
-    };
-  }
+    const leftValue = window.innerWidth / 2 - popoverDimensions?.realWidth! / 2;
+    const bottomValue = 10;
 
-  // @todo placement based on the side and alignment
-}
+    popover.wrapper.style.left = `${leftValue}px`;
+    popover.wrapper.style.right = `auto`;
+    popover.wrapper.style.bottom = `${bottomValue}px`;
+    popover.wrapper.style.top = `auto`;
+
+    popover.arrow.classList.add("driver-popover-arrow-none");
 
-function getLeftValueAfterAlignment(element: Element) {
-  if (!popover) {
     return;
   }
 
-  const popoverRect = popover.wrapper.getBoundingClientRect();
-  const elementRect = element.getBoundingClientRect();
+  if (isTopOptimal) {
+    const topToSet = Math.min(topValue, window.innerHeight - popoverDimensions.height - popoverArrowDimensions.width);
 
-  const requiredAlignment = 'left';
-  const popoverWidth = popoverRect.width;
-  const pos = element.getBoundingClientRect().left;
-  const end = window.innerWidth;
-  const elementLength = elementRect.width;
-  const extraPadding = popover.arrow.getBoundingClientRect().width;
+    let leftToSet = 0;
+
+    if (requiredAlignment === "start") {
+      leftToSet = Math.max(
+        Math.min(
+          elementDimensions.left - popoverPadding,
+          window.innerWidth - popoverDimensions.width - popoverArrowDimensions.width
+        ),
+        popoverArrowDimensions.width
+      );
+    }
+
+    // popover.arrow.classList.add("driver-popover-arrow-bottom");
+
+    popover.wrapper.style.top = `${topToSet}px`;
+    popover.wrapper.style.left = `${leftToSet}px`;
+    popover.wrapper.style.bottom = `auto`;
+    popover.wrapper.style.right = "auto";
+  }
 }
 
 function createPopover(): PopoverDOM {
@@ -119,7 +142,7 @@ function createPopover(): PopoverDOM {
 
   const description = document.createElement("div");
   description.classList.add("driver-popover-description");
-  description.innerText = "Popover Description";
+  description.innerText = "Popover description is here";
 
   const footer = document.createElement("div");
   footer.classList.add("driver-popover-footer");

src/stage.ts

@@ -3,6 +3,9 @@ import { onDriverClick } from "./events";
 import { emit } from "./emitter";
 import { getConfig } from "./config";
 
+export const STAGE_PADDING = 10;
+export const STAGE_RADIUS = 5;
+
 export type StageDefinition = {
   x: number;
   y: number;
@@ -15,45 +18,18 @@ let stageSvg: SVGSVGElement | undefined;
 
 // This method calculates the animated new position of the
 // stage (called for each frame by requestAnimationFrame)
-export function transitionStage(
-  elapsed: number,
-  duration: number,
-  from: Element,
-  to: Element
-) {
-  const fromDefinition = activeStagePosition
-    ? activeStagePosition
-    : from.getBoundingClientRect();
+export function transitionStage(elapsed: number, duration: number, from: Element, to: Element) {
+  const fromDefinition = activeStagePosition ? activeStagePosition : from.getBoundingClientRect();
 
   const toDefinition = to.getBoundingClientRect();
 
-  const x = easeInOutQuad(
-    elapsed,
-    fromDefinition.x,
-    toDefinition.x - fromDefinition.x,
-    duration
-  );
-
-  const y = easeInOutQuad(
-    elapsed,
-    fromDefinition.y,
-    toDefinition.y - fromDefinition.y,
-    duration
-  );
-
-  const width = easeInOutQuad(
-    elapsed,
-    fromDefinition.width,
-    toDefinition.width - fromDefinition.width,
-    duration
-  );
-
-  const height = easeInOutQuad(
-    elapsed,
-    fromDefinition.height,
-    toDefinition.height - fromDefinition.height,
-    duration
-  );
+  const x = easeInOutQuad(elapsed, fromDefinition.x, toDefinition.x - fromDefinition.x, duration);
+
+  const y = easeInOutQuad(elapsed, fromDefinition.y, toDefinition.y - fromDefinition.y, duration);
+
+  const width = easeInOutQuad(elapsed, fromDefinition.width, toDefinition.width - fromDefinition.width, duration);
+
+  const height = easeInOutQuad(elapsed, fromDefinition.height, toDefinition.height - fromDefinition.height, duration);
 
   activeStagePosition = {
     x,
@@ -151,10 +127,7 @@ function createStageSvg(stage: StageDefinition): SVGSVGElement {
   svg.style.width = "100%";
   svg.style.height = "100%";
 
-  const cutoutPath = document.createElementNS(
-    "http://www.w3.org/2000/svg",
-    "path"
-  );
+  const cutoutPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
 
   cutoutPath.setAttribute("d", generateSvgCutoutPathString(stage));
 
@@ -169,23 +142,20 @@ function createStageSvg(stage: StageDefinition): SVGSVGElement {
 }
 
 function generateSvgCutoutPathString(stage: StageDefinition) {
-  const padding = 4;
-  const radius = 5;
-
   const windowX = window.innerWidth;
   const windowY = window.innerHeight;
 
-  const stageWidth = stage.width + padding * 2;
-  const stageHeight = stage.height + padding * 2;
+  const stageWidth = stage.width + STAGE_PADDING * 2;
+  const stageHeight = stage.height + STAGE_PADDING * 2;
 
   // prevent glitches when stage is too small for radius
-  const limitedRadius = Math.min(radius, stageWidth / 2, stageHeight / 2);
+  const limitedRadius = Math.min(STAGE_RADIUS, stageWidth / 2, stageHeight / 2);
 
   // no value below 0 allowed + round down
   const normalizedRadius = Math.floor(Math.max(limitedRadius, 0));
 
-  const highlightBoxX = stage.x - padding + normalizedRadius;
-  const highlightBoxY = stage.y - padding;
+  const highlightBoxX = stage.x - STAGE_PADDING + normalizedRadius;
+  const highlightBoxY = stage.y - STAGE_PADDING;
   const highlightBoxWidth = stageWidth - normalizedRadius * 2;
   const highlightBoxHeight = stageHeight - normalizedRadius * 2;
 

src/style.css

@@ -116,3 +116,8 @@
   left: 50%;
   margin-left: -5px;
 }
+
+/* No arrow */
+.driver-popover-arrow-none {
+  display: none;
+}