Popver initialization

index.html

@@ -289,7 +289,7 @@ npm install driver.js</pre
               title: "driver.js",
               description: "Highlight anything, anywhere on the page",
               align: "end",
-              preferredPosition: "top",
+              side: "top",
             },
           });
         });

src/popover.ts

@@ -1,98 +1,122 @@
 import { bringInView } from "./utils";
 
+export type Side = "top" | "right" | "bottom" | "left";
+export type Alignment = "start" | "center" | "end";
+
 export type Popover = {
   title?: string;
   description: string;
-  preferredPosition?: "top" | "right" | "bottom" | "left";
-  align?: "start" | "center" | "end";
+  side?: Side;
+  align?: Alignment;
 };
 
-let popoverEl: HTMLElement | undefined;
+type PopoverDOM = {
+  wrapper: HTMLElement;
+  tip: HTMLElement;
+  title: HTMLElement;
+  description: HTMLElement;
+  footer: HTMLElement;
+  previousButton: HTMLElement;
+  nextButton: HTMLElement;
+  closeButton: HTMLElement;
+  footerButtons: HTMLElement;
+};
 
-export function renderPopover(element: Element) {
-  if (!popoverEl) {
-    const popover = createPopover();
-    document.body.appendChild(popover.popoverWrapper);
+let popover: PopoverDOM | undefined;
 
-    popoverEl = popover.popoverWrapper;
+export function renderPopover(element: Element) {
+  if (!popover) {
+    popover = createPopover();
+    document.body.appendChild(popover.wrapper);
   }
 
-  popoverEl.style.display = "block";
-  popoverEl.style.left = "0";
-  popoverEl.style.top = "0";
-  popoverEl.style.bottom = "";
-  popoverEl.style.right = "";
+  const popoverWrapper = popover.wrapper;
+
+  popoverWrapper.style.display = "block";
+  popoverWrapper.style.left = "0";
+  popoverWrapper.style.top = "0";
+  popoverWrapper.style.bottom = "";
+  popoverWrapper.style.right = "";
 
-  refreshPopover();
-  bringInView(popoverEl);
+  refreshPopover(element);
+  bringInView(popoverWrapper);
 }
 
-export function refreshPopover() {
-  console.log("rendering popover");
+export function refreshPopover(element: Element) {
+  if (!popover) {
+    return;
+  }
+
+  const popoverTip = popover.tip;
+
+  // const position = calculatePopoverPosition(element);
+  popoverTip?.classList.add("driver-popover-tip-left");
 }
 
-function createPopover() {
-  const popoverWrapper = document.createElement("div");
-  popoverWrapper.classList.add("driver-popover");
+function calculatePopoverPosition(element: Element) {}
+
+function createPopover(): PopoverDOM {
+  const wrapper = document.createElement("div");
+  wrapper.classList.add("driver-popover");
 
-  const popoverTip = document.createElement("div");
-  popoverTip.classList.add("driver-popover-tip");
+  const tip = document.createElement("div");
+  tip.classList.add("driver-popover-tip");
 
-  const popoverTitle = document.createElement("div");
-  popoverTitle.classList.add("driver-popover-title");
-  popoverTitle.innerText = "Popover Title";
+  const title = document.createElement("div");
+  title.classList.add("driver-popover-title");
+  title.innerText = "Popover Title";
 
-  const popoverDescription = document.createElement("div");
-  popoverDescription.classList.add("driver-popover-description");
-  popoverDescription.innerText = "Popover Description";
+  const description = document.createElement("div");
+  description.classList.add("driver-popover-description");
+  description.innerText = "Popover Description";
 
-  const popoverFooter = document.createElement("div");
-  popoverFooter.classList.add("driver-popover-footer");
+  const footer = document.createElement("div");
+  footer.classList.add("driver-popover-footer");
 
-  const popoverCloseBtn = document.createElement("button");
-  popoverCloseBtn.classList.add("driver-popover-close-btn");
-  popoverCloseBtn.innerText = "Close";
+  const closeButton = document.createElement("button");
+  closeButton.classList.add("driver-popover-close-btn");
+  closeButton.innerText = "Close";
 
-  const popoverFooterBtnGroup = document.createElement("span");
-  popoverFooterBtnGroup.classList.add("driver-popover-footer-btns");
+  const footerButtons = document.createElement("span");
+  footerButtons.classList.add("driver-popover-footer-btns");
 
-  const popoverPrevBtn = document.createElement("button");
-  popoverPrevBtn.classList.add("driver-popover-prev-btn");
-  popoverPrevBtn.innerHTML = "← Previous";
+  const previousButton = document.createElement("button");
+  previousButton.classList.add("driver-popover-prev-btn");
+  previousButton.innerHTML = "← Previous";
 
-  const popoverNextBtn = document.createElement("button");
-  popoverNextBtn.classList.add("driver-popover-next-btn");
-  popoverNextBtn.innerHTML = "Next →";
+  const nextButton = document.createElement("button");
+  nextButton.classList.add("driver-popover-next-btn");
+  nextButton.innerHTML = "Next →";
 
-  popoverFooterBtnGroup.appendChild(popoverPrevBtn);
-  popoverFooterBtnGroup.appendChild(popoverNextBtn);
+  footerButtons.appendChild(previousButton);
+  footerButtons.appendChild(nextButton);
 
-  popoverFooter.appendChild(popoverCloseBtn);
-  popoverFooter.appendChild(popoverFooterBtnGroup);
+  footer.appendChild(closeButton);
+  footer.appendChild(footerButtons);
 
-  popoverWrapper.appendChild(popoverTip);
-  popoverWrapper.appendChild(popoverTitle);
-  popoverWrapper.appendChild(popoverDescription);
-  popoverWrapper.appendChild(popoverFooter);
+  wrapper.appendChild(tip);
+  wrapper.appendChild(title);
+  wrapper.appendChild(description);
+  wrapper.appendChild(footer);
 
   return {
-    popoverWrapper,
-    popoverTip,
-    popoverTitle,
-    popoverDescription,
-    popoverFooter,
-    popoverPrevBtn,
-    popoverNextBtn,
-    popoverCloseBtn,
-    popoverFooterBtnGroup,
+    wrapper,
+    tip,
+    title,
+    description,
+    footer,
+    previousButton,
+    nextButton,
+    closeButton,
+    footerButtons,
   };
 }
 
 export function destroyPopover() {
-  if (!popoverEl) {
+  if (!popover) {
     return;
   }
 
-  popoverEl.parentElement?.removeChild(popoverEl);
-  popoverEl = undefined;
+  popover.wrapper.parentElement?.removeChild(popover.wrapper);
+  popover = undefined;
 }

src/style.css

@@ -39,3 +39,17 @@
   right: 0;
   background-color: #fff;
 }
+
+.driver-popover-tip {
+  content: "";
+  position: absolute;
+  border: 5px solid #fff;
+}
+
+.driver-popover-tip-left {
+  top: 15px;
+  left: 100%;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-top-color: transparent;
+}