ekzyis
/
zaply
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow QR code to be dragged

This commit is contained in:
ekzyis 2025-01-03 21:03:28 +01:00
parent 0393817939
commit 05bc6514d6
1 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
pages/overlay.templ
View File

@ -28,13 +28,50 @@ templ Overlay(lnurl string, lnaddr string) {
}, 60_000)
})
</script>
<div class="bg-white fixed bottom-0 left-0 text-center p-3">
<div id="qr" class="bg-white fixed bottom-0 left-0 text-center p-3 cursor-move" style="left: 0; bottom: 0;" draggable="true">
<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>
<script>
const qr = document.getElementById("qr");
let currentX = 0;
let currentY = 0;
let startX = 0;
let startY = 0;
const savedPosition = localStorage.getItem('qrPosition');
if (savedPosition) {
const [x, y] = savedPosition.split(',').map(Number);
currentX = x;
currentY = y;
qr.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}`);
});
qr.addEventListener("drag", (e) => {
if (e.clientX && e.clientY) {
currentX = e.clientX - startX;
currentY = e.clientY - startY;
qr.style.transform = `translate(${currentX}px, ${currentY}px)`;
}
});
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}`);
});
</script>
</body>
</html>
}