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

Draggable zap container

Browse Source
This commit is contained in:
ekzyis 2025-01-24 19:47:10 +01:00
parent 7268c8061f
commit 24cc41c7d7
1 changed files with 66 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
pages/overlay.templ
View File

@ -18,16 +18,19 @@ templ Overlay(lnurl string, lnaddr string) {
} }
</head> </head>
<body> <body>
<div hx-ext="sse" sse-connect="/overlay/sse" sse-swap="zap" hx-swap="beforeend" class="fixed bottom-0 right-0" /> <div
<script> id="zap-container"
document.body.addEventListener('htmx:sseMessage', function (e) { hx-ext="sse"
setTimeout(() => { sse-connect="/overlay/sse"
const div = document.getElementById(e.detail.lastEventId) sse-swap="zap"
div.classList.add('zap-animate-out') hx-swap="beforeend"
div.addEventListener('animationend', div.remove) class="fixed bottom-0 right-0 cursor-move"
}, 60_000) draggable="true"
}) >
</script> <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 id="qr" class="bg-white fixed bottom-0 left-0 text-center p-3 cursor-move" draggable="true">
<div class="p-2"> <div class="p-2">
<div class="font-bold">{ lnaddr }</div> <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 class="italic">zap us a message!</div>
</div> </div>
<script> <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)
})
function enableDrag(elementId, xParam, yParam) {
const element = document.getElementById(elementId);
const localStorageKey = `${elementId}-position`
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
let queryX = parseInt(urlParams.get('x')); let queryX = parseInt(urlParams.get(xParam));
let queryY = parseInt(urlParams.get('y')); let queryY = parseInt(urlParams.get(yParam));
const [localX,localY] = localStorage.getItem('qrPosition')?.split(',').map(Number) ?? [0,0]; const [localX,localY] = localStorage.getItem(localStorageKey)?.split(',').map(Number) ?? [0,0];
let currentX = !isNaN(queryX) ? queryX : localX; let currentX = !isNaN(queryX) ? queryX : localX;
let currentY = !isNaN(queryY) ? queryY : localY; let currentY = !isNaN(queryY) ? queryY : localY;
qr.style.transform = `translate(${currentX}px, ${currentY}px)`; element.style.transform = `translate(${currentX}px, ${currentY}px)`;
let startX = 0; let startX = 0;
let startY = 0; let startY = 0;
qr.addEventListener("dragstart", (e) => { element.addEventListener("dragstart", (e) => {
console.log("dragstart", e)
startX = e.clientX - currentX; startX = e.clientX - currentX;
startY = e.clientY - currentY; startY = e.clientY - currentY;
e.dataTransfer.setData("text/plain", `${currentX},${currentY}`); e.dataTransfer.setData("text/plain", `${currentX},${currentY}`);
}); });
qr.addEventListener("drag", (e) => { element.addEventListener("drag", (e) => {
if (e.clientX && e.clientY) { if (e.clientX && e.clientY) {
currentX = e.clientX - startX; currentX = e.clientX - startX;
currentY = e.clientY - startY; currentY = e.clientY - startY;
qr.style.transform = `translate(${currentX}px, ${currentY}px)`; element.style.transform = `translate(${currentX}px, ${currentY}px)`;
} }
}); });
qr.addEventListener("dragend", (e) => { element.addEventListener("dragend", (e) => {
currentX = e.clientX - startX; currentX = e.clientX - startX;
currentY = e.clientY - startY; currentY = e.clientY - startY;
qr.style.transform = `translate(${currentX}px, ${currentY}px)`; element.style.transform = `translate(${currentX}px, ${currentY}px)`;
localStorage.setItem('qrPosition', `${currentX},${currentY}`); localStorage.setItem(localStorageKey, `${currentX},${currentY}`);
window.location.search = `?x=${currentX}&y=${currentY}` const params = new URLSearchParams(window.location.search);
params.set(xParam, currentX);
params.set(yParam, currentY);
window.location.search = params.toString();
}); });
}
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> </script>
</body> </body>
</html> </html>