dave/BigLamper
1
0
Fork 0
generated from dave/wails-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make scrolling less spammy

Browse Source
This commit is contained in:
PhatPhuckDave
2024-12-29 00:41:03 +01:00
parent 0bb13f635a
commit f454bb48f9
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/lib/components/Lamp.svelte
View File

@@ -15,27 +15,32 @@
function handleWheel(event: WheelEvent) {
event.preventDefault();
const delta = event.deltaY > 0 ? -2 : 2;
const delta = event.deltaY > 0 ? -4 : 4;
const newBrightness = Math.max(0, Math.min(100, brightness + delta));
if (newBrightness !== brightness) {
brightness = newBrightness;
clearTimeout(timer);
timer = setTimeout(() => {
brightnessChange(lamp, brightness);
}, 300);
}
}
</script>
<div class="flex flex-col items-center justify-center p-4">
<div class="relative">
<div
class="w-48 h-48 rounded-full overflow-hidden mb-4 relative"
class="w-48 h-48 rounded-full overflow-hidden mb-4"
style="background-color: #FFD700; filter: brightness({brightness}%)"
on:wheel={handleWheel}
>
<svg class="w-48 h-48 fill-current text-yellow-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 22h20Z" />
</svg>
<div class="cursor-none absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white px-2 py-1 rounded">
</div>
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-3 py-1 rounded-full text-sm font-semibold">
{Math.round(brightness)}%
</div>
</div>
<input type="range" min="0" max="100" step="1" value={brightness} on:input={handleBrightnessChange} class="w-4/5" />
<input type="range" min="0" max="100" step="1" value={brightness} on:input={handleBrightnessChange} class="w-4/5 mt-4" />
</div>