From 24cc41c7d76562d6f3cc142ce2c43ba1fa5065e1 Mon Sep 17 00:00:00 2001
From: ekzyis <ekzyis@ekzy.is>
Date: Fri, 24 Jan 2025 19:47:10 +0100
Subject: [PATCH] Draggable zap container

---
 pages/overlay.templ | 103 ++++++++++++++++++++++++++++----------------
 1 file changed, 66 insertions(+), 37 deletions(-)
diff --git a/pages/overlay.templ b/pages/overlay.templ
index afa5df2..c7072af 100644
--- a/pages/overlay.templ
+++ b/pages/overlay.templ
@@ -18,16 +18,19 @@ templ Overlay(lnurl string, lnaddr string) {
             }
         </head>
         <body>
-            <div hx-ext="sse" sse-connect="/overlay/sse" sse-swap="zap" hx-swap="beforeend" class="fixed bottom-0 right-0" />
-            <script>
-                document.body.addEventListener('htmx:sseMessage', function (e) {
-                    setTimeout(() => {
-                        const div = document.getElementById(e.detail.lastEventId)
-                        div.classList.add('zap-animate-out')
-                        div.addEventListener('animationend', div.remove)
-                    }, 60_000)
-                })
-            </script>
+            <div
+                id="zap-container"
+                hx-ext="sse"
+                sse-connect="/overlay/sse"
+                sse-swap="zap"
+                hx-swap="beforeend"
+                class="fixed bottom-0 right-0 cursor-move"
+                draggable="true"
+            >
+                <div class="hidden items-center justify-center text-center border border-dashed border-[#212529] m-3 h-[64px] w-[384px] text-lg">
+                    zap messages will show up here
+                </div>
+            </div>
             <div id="qr" class="bg-white fixed bottom-0 left-0 text-center p-3 cursor-move" draggable="true">
                 <div class="p-2">
                     <div class="font-bold">{ lnaddr }</div>
@@ -36,41 +39,67 @@ templ Overlay(lnurl string, lnaddr string) {
                 <div class="italic">zap us a message!</div>
             </div>
             <script>
-                const qr = document.getElementById("qr");
+                // zap messages disappear after a minute
+                document.body.addEventListener('htmx:sseMessage', function (e) {
+                    setTimeout(() => {
+                        const div = document.getElementById(e.detail.lastEventId)
+                        div.classList.add('zap-animate-out')
+                        div.addEventListener('animationend', div.remove)
+                    }, 60_000)
+                })
 
-                const urlParams = new URLSearchParams(window.location.search);
-                let queryX = parseInt(urlParams.get('x'));
-                let queryY = parseInt(urlParams.get('y'));
-                const [localX,localY] = localStorage.getItem('qrPosition')?.split(',').map(Number) ?? [0,0];
+                function enableDrag(elementId, xParam, yParam) {
+                    const element = document.getElementById(elementId);
+                    const localStorageKey = `${elementId}-position`
 
-                let currentX = !isNaN(queryX) ? queryX : localX;
-                let currentY = !isNaN(queryY) ? queryY : localY;
-                qr.style.transform = `translate(${currentX}px, ${currentY}px)`;
+                    const urlParams = new URLSearchParams(window.location.search);
+                    let queryX = parseInt(urlParams.get(xParam));
+                    let queryY = parseInt(urlParams.get(yParam));
+                    const [localX,localY] = localStorage.getItem(localStorageKey)?.split(',').map(Number) ?? [0,0];
 
-                let startX = 0;
-                let startY = 0;
+                    let currentX = !isNaN(queryX) ? queryX : localX;
+                    let currentY = !isNaN(queryY) ? queryY : localY;
+                    element.style.transform = `translate(${currentX}px, ${currentY}px)`;
 
-                qr.addEventListener("dragstart", (e) => {
-                    startX = e.clientX - currentX;
-                    startY = e.clientY - currentY;
-                    e.dataTransfer.setData("text/plain", `${currentX},${currentY}`);
-                });
+                    let startX = 0;
+                    let startY = 0;
 
-                qr.addEventListener("drag", (e) => {
-                    if (e.clientX && e.clientY) {
+                    element.addEventListener("dragstart", (e) => {
+                        console.log("dragstart", e)
+                        startX = e.clientX - currentX;
+                        startY = e.clientY - currentY;
+                        e.dataTransfer.setData("text/plain", `${currentX},${currentY}`);
+                    });
+
+                    element.addEventListener("drag", (e) => {
+                        if (e.clientX && e.clientY) {
+                            currentX = e.clientX - startX;
+                            currentY = e.clientY - startY;
+                            element.style.transform = `translate(${currentX}px, ${currentY}px)`;
+                        }
+                    });
+
+                    element.addEventListener("dragend", (e) => {
                         currentX = e.clientX - startX;
                         currentY = e.clientY - startY;
-                        qr.style.transform = `translate(${currentX}px, ${currentY}px)`;
-                    }
-                });
+                        element.style.transform = `translate(${currentX}px, ${currentY}px)`;
+                        localStorage.setItem(localStorageKey, `${currentX},${currentY}`);
+                        const params = new URLSearchParams(window.location.search);
+                        params.set(xParam, currentX);
+                        params.set(yParam, currentY);
+                        window.location.search = params.toString();
+                    });
+                }
 
-                qr.addEventListener("dragend", (e) => {
-                    currentX = e.clientX - startX;
-                    currentY = e.clientY - startY;
-                    qr.style.transform = `translate(${currentX}px, ${currentY}px)`;
-                    localStorage.setItem('qrPosition', `${currentX},${currentY}`);
-                    window.location.search = `?x=${currentX}&y=${currentY}`
-                });
+                enableDrag("qr", "qrX", "qrY")
+                enableDrag("zap-container", "zapX", "zapY")
+
+                // hide 'zap messages will show up here' if query param given
+                const params = new URLSearchParams(window.location.search)
+                if (params.has("help", 1)) {
+                    const element = document.querySelector("#zap-container>div")
+                    element.style.display = "flex"
+                }
             </script>
         </body>
     </html>
