lazily create tooltip and notification div

Otherwise, these modules might error when imported in a non-DOM environment.
beancount · Jul 30, 2022 · 6aba5e7 · 6aba5e7
1 parent 5e185f5
commit 6aba5e7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 24 deletions.
diff --git a/frontend/src/charts/tooltip.ts b/frontend/src/charts/tooltip.ts
@@ -1,19 +1,23 @@
 import { pointer } from "d3-selection";
 
-/**
- * Create tooltip with accompanying hide and destroy functions.
- */
-function createTooltip(): [HTMLDivElement, () => void] {
-  const tooltip = document.createElement("div");
-  tooltip.className = "tooltip";
-  document.body.appendChild(tooltip);
-  const hide = (): void => {
-    tooltip.style.opacity = "0";
+/** The tooltip div, lazily created. */
+const tooltip = (() => {
+  let value: HTMLDivElement | null = null;
+  return () => {
+    if (value === null) {
+      value = document.createElement("div");
+      value.className = "tooltip";
+      document.body.appendChild(value);
+    }
+    return value;
   };
-  return [tooltip, hide];
-}
+})();
 
-const [tooltip, hide] = createTooltip();
+/** Hide the tooltip. */
+const hide = (): void => {
+  const t = tooltip();
+  t.style.opacity = "0";
+};
 
 /**
  * Svelte action to have the given element act on mouse to show a tooltip.
@@ -28,12 +32,14 @@ export function followingTooltip(
   let getter = text;
   /** Event listener to have the tooltip follow the mouse. */
   function followMouse(event: MouseEvent): void {
-    tooltip.style.opacity = "1";
-    tooltip.style.left = `${event.pageX}px`;
-    tooltip.style.top = `${event.pageY - 15}px`;
+    const t = tooltip();
+    t.style.opacity = "1";
+    t.style.left = `${event.pageX}px`;
+    t.style.top = `${event.pageY - 15}px`;
   }
   node.addEventListener("mouseenter", () => {
-    tooltip.innerHTML = getter();
+    const t = tooltip();
+    t.innerHTML = getter();
   });
   node.addEventListener("mousemove", followMouse);
   node.addEventListener("mouseleave", hide);
@@ -70,10 +76,11 @@ export function positionedTooltip(
     const matrix = node.getScreenCTM();
     if (res && matrix) {
       const [x, y, content] = res;
-      tooltip.style.opacity = "1";
-      tooltip.innerHTML = content;
-      tooltip.style.left = `${window.scrollX + x + matrix.e}px`;
-      tooltip.style.top = `${window.scrollY + y + matrix.f - 15}px`;
+      const t = tooltip();
+      t.style.opacity = "1";
+      t.innerHTML = content;
+      t.style.left = `${window.scrollX + x + matrix.e}px`;
+      t.style.top = `${window.scrollY + y + matrix.f - 15}px`;
     } else {
       hide();
     }

diff --git a/frontend/src/notifications.ts b/frontend/src/notifications.ts
@@ -1,6 +1,15 @@
-const notificationList = document.createElement("div");
-notificationList.className = "notifications";
-document.body.appendChild(notificationList);
+/** The notification list div, lazily created. */
+const notificationList = (() => {
+  let value: HTMLDivElement | null = null;
+  return () => {
+    if (value === null) {
+      value = document.createElement("div");
+      value.className = "notifications";
+      document.body.appendChild(value);
+    }
+    return value;
+  };
+})();
 
 type NotificationType = "info" | "warning" | "error";
 
@@ -22,7 +31,7 @@ export function notify(
   const notification = document.createElement("li");
   notification.classList.add(cls);
   notification.appendChild(document.createTextNode(msg));
-  notificationList.append(notification);
+  notificationList().append(notification);
   notification.addEventListener("click", () => {
     notification.remove();
     callback?.();