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

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

@@ -15,27 +15,32 @@
function handleWheel(event: WheelEvent) { function handleWheel(event: WheelEvent) {
event.preventDefault(); 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)); const newBrightness = Math.max(0, Math.min(100, brightness + delta));
if (newBrightness !== brightness) { if (newBrightness !== brightness) {
brightness = newBrightness; brightness = newBrightness;
brightnessChange(lamp, brightness); clearTimeout(timer);
timer = setTimeout(() => {
brightnessChange(lamp, brightness);
}, 300);
} }
} }
</script> </script>
<div class="flex flex-col items-center justify-center p-4"> <div class="flex flex-col items-center justify-center p-4">
<div <div class="relative">
class="w-48 h-48 rounded-full overflow-hidden mb-4 relative" <div
style="background-color: #FFD700; filter: brightness({brightness}%)" class="w-48 h-48 rounded-full overflow-hidden mb-4"
on:wheel={handleWheel} 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 class="w-48 h-48 fill-current text-yellow-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
</svg> <path d="M12 2L2 22h20Z" />
<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"> </svg>
</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)}% {Math.round(brightness)}%
</div> </div>
</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> </div>