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

Add slider for QR code size

Browse Source
This commit is contained in:
ekzyis 2025-01-24 20:51:11 +01:00
parent 24cc41c7d7
commit 3b6933e16a
1 changed files with 49 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
pages/overlay.templ
View File

@ -18,6 +18,18 @@ templ Overlay(lnurl string, lnaddr string) {
} }
</head> </head>
<body> <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 <div
id="zap-container" id="zap-container"
hx-ext="sse" hx-ext="sse"
@ -32,11 +44,13 @@ templ Overlay(lnurl string, lnaddr string) {
</div> </div>
</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 id="qr-scaler">
<div class="font-bold">{ lnaddr }</div> <div class="p-2">
<img src={ "data:image/jpeg;base64," + qrEncode(lnurl) }/> <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>
<div class="italic">zap us a message!</div>
</div> </div>
<script> <script>
// zap messages disappear after a minute // zap messages disappear after a minute
@ -95,11 +109,40 @@ templ Overlay(lnurl string, lnaddr string) {
enableDrag("zap-container", "zapX", "zapY") enableDrag("zap-container", "zapX", "zapY")
// hide 'zap messages will show up here' if query param given // 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) const params = new URLSearchParams(window.location.search)
if (params.has("help", 1)) { if (params.has("help", 1)) {
const element = document.querySelector("#zap-container>div") showHelpers()
element.style.display = "flex"
} }
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> </script>
</body> </body>
</html> </html>