From 3b6933e16aa9c0922149322b0f886a9ab136878f Mon Sep 17 00:00:00 2001
From: ekzyis <ekzyis@ekzy.is>
Date: Fri, 24 Jan 2025 20:51:11 +0100
Subject: [PATCH] Add slider for QR code size

---
 pages/overlay.templ | 55 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 6 deletions(-)
diff --git a/pages/overlay.templ b/pages/overlay.templ
index c7072af..61460a5 100644
--- a/pages/overlay.templ
+++ b/pages/overlay.templ
@@ -18,6 +18,18 @@ templ Overlay(lnurl string, lnaddr string) {
             }
         </head>
         <body>
+            <div id="controls" class="hidden grid grid-cols-2 fixed top-0 left-0 items-center gap-3 m-3">
+                <label for="qr-scale-slider" class="text-black">QR code size:</label>
+                <input
+                    type="range"
+                    id="qr-scale-slider"
+                    min="0.5"
+                    max="5"
+                    step="0.1"
+                    value="1.0"
+                    class="w-32 accent-teal"
+                />
+            </div>
             <div
                 id="zap-container"
                 hx-ext="sse"
@@ -32,11 +44,13 @@ templ Overlay(lnurl string, lnaddr string) {
                 </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>
-                    <img src={ "data:image/jpeg;base64," + qrEncode(lnurl) }/>
+                <div id="qr-scaler">
+                    <div class="p-2">
+                        <div class="font-bold">{ lnaddr }</div>
+                        <img src={ "data:image/jpeg;base64," + qrEncode(lnurl) }/>
+                    </div>
+                    <div class="italic">zap us a message!</div>
                 </div>
-                <div class="italic">zap us a message!</div>
             </div>
             <script>
                 // zap messages disappear after a minute
@@ -95,11 +109,40 @@ templ Overlay(lnurl string, lnaddr string) {
                 enableDrag("zap-container", "zapX", "zapY")
 
                 // hide 'zap messages will show up here' if query param given
+                function showHelpers() {
+                    document.querySelector('#zap-container>div').style.display = "flex";
+                    document.querySelector('#controls').style.display = "grid";
+                }
+
                 const params = new URLSearchParams(window.location.search)
                 if (params.has("help", 1)) {
-                    const element = document.querySelector("#zap-container>div")
-                    element.style.display = "flex"
+                    showHelpers()
                 }
+
+                function enableSlider(sliderId, elementId, param, onChange) {
+                    const slider = document.getElementById(sliderId);
+                    const target = document.getElementById(elementId);
+                    const initialValue = localStorage.getItem(param) ?? 1.0;
+                    slider.value = initialValue;
+                    onChange(target, initialValue);
+
+                    let timeout
+                    slider.oninput = function (e) {
+                        const value = e.target.value
+                        clearTimeout(timeout);
+                        localStorage.setItem(param, value);
+                        onChange(target, value);
+                        timeout = setTimeout(() => {
+                            const params = new URLSearchParams(window.location.search);
+                            params.set(param, value);
+                            window.location.search = params.toString();
+                        }, 1_000);
+                    }
+                }
+
+                enableSlider('qr-scale-slider', 'qr-scaler', 'qrScale', (element, value) => {
+                    element.style.transform = `scaleX(${value}) scaleY(${value})`;
+                })
             </script>
         </body>
     </html>
