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

103
pages/overlay.templ
View File

@ -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>