Moving inline popup outside

web-atoms · Oct 25, 2023 · 4cfcd94 · 4cfcd94
1 parent d1dd921
commit 4cfcd94
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 26 deletions.
diff --git a/src/basic/InlinePopup.tsx b/src/basic/InlinePopup.tsx
@@ -78,27 +78,31 @@ export default class InlinePopup extends AtomControl {
         const container = document.createElement("div");
         container.setAttribute("data-inline-popup", "inline-popup");
 
-        const alignment = options.alignment ?? "none";
-        switch (alignment) {
-            case "bottomLeft":
-                container.style.top = `${targetElement.offsetHeight}px`;
-                container.style.left = "0px";
-                break;
-            case "bottomRight":
-                container.style.top = `${targetElement.offsetHeight}px`;
-                container.style.right = "0px";
-                break;
-            case "topRight":
-                container.style.top = "0px";
-                container.style.left = `${targetElement.offsetWidth}px`;
-                break;
-            case "above":
-                container.style.bottom = `${targetElement.offsetHeight}px`;
-                container.style.left = "0px";
-                break;
-            default:
-                container.style.top = `${targetElement.offsetHeight}px`;
-                break;
+        const updatePosition = () => {
+            const rect = targetElement.getBoundingClientRect();
+            const alignment = options.alignment ?? "none";
+            switch (alignment) {
+                case "bottomLeft":
+                    container.style.top = `${rect.top + targetElement.offsetHeight}px`;
+                    container.style.left = `${rect.left}px`;
+                    break;
+                case "bottomRight":
+                    container.style.top = `${rect.top + targetElement.offsetHeight}px`;
+                    container.style.right = `${rect.left}px`;
+                    break;
+                case "topRight":
+                    container.style.top = `${rect.top}px`;
+                    container.style.left = `${rect.left + targetElement.offsetWidth}px`;
+                    break;
+                case "above":
+                    container.style.bottom = `${rect.top + targetElement.offsetHeight}px`;
+                    container.style.left = `${rect.left}px`;
+                    break;
+                default:
+                    container.style.top = `${rect.top + targetElement.offsetHeight}px`;
+                    container.style.left = `${rect.left}px`;
+                    break;
+            }
         }
 
         container._logicalParent = targetElement;
@@ -116,6 +120,10 @@ export default class InlinePopup extends AtomControl {
 
             let resolved = false;
 
+            const updatePositionInterval = setInterval(updatePosition, 1000);
+
+            disposables.add(() => clearInterval(updatePositionInterval));
+
             const close = (r?) => {
                 if (resolved) {
                     return;

diff --git a/src/basic/styles/inline-popup-style.ts b/src/basic/styles/inline-popup-style.ts
@@ -1,7 +1,7 @@
 import styled from "@web-atoms/core/dist/style/styled";
 
     styled.css `
-    position: absolute;
+    position: fixed;
     border-radius: 5px;
     padding: 5px;
     box-shadow: rgba(50, 50, 105, 0.5) 0px 4px 6px 4px, rgba(0, 0, 0, 0.5) 0px 1px 1px 0px;
@@ -12,10 +12,10 @@ import styled from "@web-atoms/core/dist/style/styled";
     left: 0;
     `.installGlobal("*[data-inline-popup=inline-popup]");
 
-    styled.css `
-    right: 0;
-    left: unset;
-    `.installGlobal("*[data-alignment=bottom-right] > [data-inline-popup=inline-popup]");
+    // styled.css `
+    // right: 0;
+    // left: unset;
+    // `.installGlobal("*[data-alignment=bottom-right] > [data-inline-popup=inline-popup]");
 
 
     // styled.css `