Fix tagmenu oob

src/lib/actions/stayInView.ts

@@ -0,0 +1,65 @@
+export interface StayInViewOptions {
+  /**
+   * If the `node` contains an element (like an arrow for menus),
+   * that should be shifted over to account for any shifting
+   * of the `node` itself, then pass a selector for it here.
+   */
+  elToShiftSelector?: string;
+}
+
+export default function stayInView(node: HTMLElement, opts: StayInViewOptions) {
+  console.debug("stayInView: Initial opts:", opts);
+  let { elToShiftSelector } = opts;
+  let viewDeb: ReturnType<typeof setTimeout>;
+
+  /**
+   * Move element to in view, if it isn't.
+   *
+   * Currently only supports moving `node` back into view if oob
+   * on the left. May need to support other sides and/or resizing
+   * when `node` still wont fit after shifting it in the future.
+   */
+  const getInView = () => {
+    const nrect = node.getBoundingClientRect();
+    const brect = document.body.getBoundingClientRect();
+    console.debug("stayInView->getInView: Called.", nrect, brect);
+    if (nrect.x <= brect.x) {
+      const diff = nrect.x - brect.x + 10;
+      console.debug(
+        "stayInView->getInView: Node is out of bounds on the left, shifting forwards to:",
+        diff
+      );
+      node.style.left = `${diff}px`;
+      if (elToShiftSelector) {
+        const elToShift = node.querySelector(elToShiftSelector) as HTMLElement;
+        if (elToShift) {
+          console.debug("stayInView->getInView: Shifting elToShift.");
+          const nrectNew = node.getBoundingClientRect();
+          const arrowDiff = nrectNew.left - nrect.left;
+          elToShift.style.left = `${elToShift.offsetLeft - arrowDiff}px`;
+        } else {
+          console.warn("elToShift not found.", elToShiftSelector);
+        }
+      }
+    }
+  };
+
+  const getInViewDeb = () => {
+    clearTimeout(viewDeb);
+    viewDeb = setTimeout(getInView, 200);
+  };
+
+  window.addEventListener("resize", getInViewDeb);
+  getInView();
+
+  return {
+    update(opts: StayInViewOptions) {
+      console.debug("stayInView: Opts updated", opts);
+      elToShiftSelector = opts.elToShiftSelector;
+      getInView();
+    },
+    destroy() {
+      window.removeEventListener("resize", getInViewDeb);
+    }
+  };
+}

src/lib/tag/TagMenu.svelte

@@ -5,6 +5,7 @@
   import type { Tag as TagT } from "@/types";
   import Tag from "./Tag.svelte";
   import DeleteTagModal from "./DeleteTagModal.svelte";
+  import stayInView from "../actions/stayInView";
 
   export let titleText: string | undefined = undefined;
   export let classes: string | undefined = undefined;
@@ -29,7 +30,8 @@
   }
 </script>
 
-<div class={[`menu`, classes].join(" ")}>
+<div class={[`menu`, classes].join(" ")} use:stayInView={{ elToShiftSelector: "& > .arrow" }}>
+  <i class="arrow"></i>
   <div class="inner">
     <div class="title">
       <h4 class="norm sm-caps">{titleText ? titleText : "my tags"}</h4>
@@ -86,15 +88,15 @@
     width: 200px;
     right: 47px;
 
-    &:before {
+    .arrow {
       left: 78px;
     }
 
     &.from-add-to-tag-btn {
       top: 50px;
       right: -78px;
 
-      &:before {
+      .arrow {
         left: 87px;
         /* The place where this button will be is always dark, so white works for both themes */
         border-bottom-color: white;

src/norm.scss

@@ -283,7 +283,11 @@
   z-index: 50;
 
   // The lil arrow, adjust its pos under each specific menu.
-  &:before {
+  &:not(:has(> .arrow)):before,
+  :global(.arrow) {
+    // Works by showing arrow in ::before pseudoelement,
+    // or if more control is needed, applies to any .arrow
+    // element.
     content: "";
     position: absolute;
     bottom: 100%;