From 79f41a60012a8cceca3b7ee0404034664a25deca Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Tue, 6 Jan 2026 09:58:40 +0000 Subject: [PATCH] fix(applauncher): throttle inactivity timer resets in menus, optimize sound slider updates, and adjust keyboard layout/keys --- changelog.md | 8 +++++ ts_web/00_commitinfo_data.ts | 2 +- .../eco-applauncher-batterymenu.ts | 8 ++++- .../eco-applauncher-keyboard.ts | 17 +++++++++-- .../eco-applauncher-soundmenu.ts | 30 +++++++++++++++++-- .../eco-applauncher-wifimenu.ts | 8 ++++- 6 files changed, 64 insertions(+), 9 deletions(-) diff --git a/changelog.md b/changelog.md index 3f81623..1311738 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,13 @@ # Changelog +## 2026-01-06 - 3.34.2 - fix(applauncher) +throttle inactivity timer resets in menus, optimize sound slider updates, and adjust keyboard layout/keys + +- Add lastActivityTime and throttle resetInactivityTimer to only reset if 5+ seconds have passed in battery, sound, and wifi menus to reduce frequent resets from continuous input. +- Remove @mousemove listener in menu containers and rely on mousedown + throttled resets to lower event noise. +- Debounce slider mousemove handling in sound menu using requestAnimationFrame and pendingPercentage to batch setVolume calls and cancel RAF on mouseup, preventing excessive volume updates. +- Add up/down arrow keys to virtual keyboard, reduce space key width from 4 to 3, and add .key.wide-3 CSS class to support the new sizing. + ## 2026-01-06 - 3.34.1 - fix(elements/applauncher) add eco app launcher components, wifi/sound/battery menus, demos and new eco-screensaver; replace dees-screensaver (breaking API change) diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index b558c15..47e3d45 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@ecobridge.xyz/catalog', - version: '3.34.1', + version: '3.34.2', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-applauncher/eco-applauncher-batterymenu/eco-applauncher-batterymenu.ts b/ts_web/elements/00group-applauncher/eco-applauncher-batterymenu/eco-applauncher-batterymenu.ts index b937730..4de2cad 100644 --- a/ts_web/elements/00group-applauncher/eco-applauncher-batterymenu/eco-applauncher-batterymenu.ts +++ b/ts_web/elements/00group-applauncher/eco-applauncher-batterymenu/eco-applauncher-batterymenu.ts @@ -248,6 +248,7 @@ export class EcoApplauncherBatterymenu extends DeesElement { private boundHandleClickOutside = this.handleClickOutside.bind(this); private inactivityTimeout: ReturnType | null = null; private readonly INACTIVITY_TIMEOUT = 60000; // 1 minute + private lastActivityTime = 0; public render(): TemplateResult { const fillClass = this.getFillClass(); @@ -255,7 +256,6 @@ export class EcoApplauncherBatterymenu extends DeesElement { return html`
e.stopPropagation()} - @mousemove=${this.resetInactivityTimer} @mousedown=${this.resetInactivityTimer} >
@@ -340,6 +340,12 @@ export class EcoApplauncherBatterymenu extends DeesElement { } private resetInactivityTimer(): void { + const now = Date.now(); + // Throttle: only reset if 5+ seconds since last reset + if (now - this.lastActivityTime < 5000) { + return; + } + this.lastActivityTime = now; this.clearInactivityTimer(); if (this.open) { this.inactivityTimeout = setTimeout(() => { diff --git a/ts_web/elements/00group-applauncher/eco-applauncher-keyboard/eco-applauncher-keyboard.ts b/ts_web/elements/00group-applauncher/eco-applauncher-keyboard/eco-applauncher-keyboard.ts index 4a8df0d..5561050 100644 --- a/ts_web/elements/00group-applauncher/eco-applauncher-keyboard/eco-applauncher-keyboard.ts +++ b/ts_web/elements/00group-applauncher/eco-applauncher-keyboard/eco-applauncher-keyboard.ts @@ -78,8 +78,10 @@ const qwertyLayout: IKeyConfig[][] = [ [ { key: '123', display: '123', width: 1.5, type: 'layout', action: 'numbers' }, { key: 'globe', display: '🌐', type: 'special' }, - { key: 'space', display: '', width: 4, type: 'space' }, + { key: 'space', display: '', width: 3, type: 'space' }, { key: 'left', display: '←', type: 'special', action: 'arrow-left' }, + { key: 'up', display: '↑', type: 'special', action: 'arrow-up' }, + { key: 'down', display: '↓', type: 'special', action: 'arrow-down' }, { key: 'right', display: '→', type: 'special', action: 'arrow-right' }, { key: 'enter', display: '↵', width: 1.5, type: 'special' }, ], @@ -102,8 +104,10 @@ const numbersLayout: IKeyConfig[][] = [ [ { key: 'ABC', display: 'ABC', width: 1.5, type: 'layout', action: 'qwerty' }, { key: 'globe', display: '🌐', type: 'special' }, - { key: 'space', display: '', width: 4, type: 'space' }, + { key: 'space', display: '', width: 3, type: 'space' }, { key: 'left', display: '←', type: 'special', action: 'arrow-left' }, + { key: 'up', display: '↑', type: 'special', action: 'arrow-up' }, + { key: 'down', display: '↓', type: 'special', action: 'arrow-down' }, { key: 'right', display: '→', type: 'special', action: 'arrow-right' }, { key: 'enter', display: '↵', width: 1.5, type: 'special' }, ], @@ -126,8 +130,10 @@ const symbolsLayout: IKeyConfig[][] = [ [ { key: 'ABC', display: 'ABC', width: 1.5, type: 'layout', action: 'qwerty' }, { key: 'globe', display: '🌐', type: 'special' }, - { key: 'space', display: '', width: 4, type: 'space' }, + { key: 'space', display: '', width: 3, type: 'space' }, { key: 'left', display: '←', type: 'special', action: 'arrow-left' }, + { key: 'up', display: '↑', type: 'special', action: 'arrow-up' }, + { key: 'down', display: '↓', type: 'special', action: 'arrow-down' }, { key: 'right', display: '→', type: 'special', action: 'arrow-right' }, { key: 'enter', display: '↵', width: 1.5, type: 'special' }, ], @@ -245,6 +251,11 @@ export class EcoApplauncherKeyboard extends DeesElement { max-width: 100px; } + .key.wide-3 { + flex: 3; + max-width: 140px; + } + .key.wide-4 { flex: 4; max-width: 180px; diff --git a/ts_web/elements/00group-applauncher/eco-applauncher-soundmenu/eco-applauncher-soundmenu.ts b/ts_web/elements/00group-applauncher/eco-applauncher-soundmenu/eco-applauncher-soundmenu.ts index 279239a..a299df0 100644 --- a/ts_web/elements/00group-applauncher/eco-applauncher-soundmenu/eco-applauncher-soundmenu.ts +++ b/ts_web/elements/00group-applauncher/eco-applauncher-soundmenu/eco-applauncher-soundmenu.ts @@ -249,6 +249,7 @@ export class EcoApplauncherSoundmenu extends DeesElement { private isDragging = false; private inactivityTimeout: ReturnType | null = null; private readonly INACTIVITY_TIMEOUT = 60000; // 1 minute + private lastActivityTime = 0; public render(): TemplateResult { const volumeIcon = this.getVolumeIcon(); @@ -256,7 +257,6 @@ export class EcoApplauncherSoundmenu extends DeesElement { return html`
e.stopPropagation()} - @mousemove=${this.resetInactivityTimer} @mousedown=${this.resetInactivityTimer} >
@@ -368,16 +368,34 @@ export class EcoApplauncherSoundmenu extends DeesElement { private handleSliderMouseDown(e: MouseEvent): void { this.isDragging = true; const slider = e.currentTarget as HTMLElement; + let rafId: number | null = null; + let pendingPercentage: number | null = null; + + const updateVolume = () => { + if (pendingPercentage !== null) { + this.setVolume(pendingPercentage); + pendingPercentage = null; + } + rafId = null; + }; const handleMouseMove = (moveEvent: MouseEvent) => { if (!this.isDragging) return; const rect = slider.getBoundingClientRect(); - const percentage = Math.round(((moveEvent.clientX - rect.left) / rect.width) * 100); - this.setVolume(Math.max(0, Math.min(100, percentage))); + pendingPercentage = Math.max(0, Math.min(100, Math.round(((moveEvent.clientX - rect.left) / rect.width) * 100))); + if (!rafId) { + rafId = requestAnimationFrame(updateVolume); + } }; const handleMouseUp = () => { this.isDragging = false; + if (rafId) { + cancelAnimationFrame(rafId); + } + if (pendingPercentage !== null) { + this.setVolume(pendingPercentage); + } document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); }; @@ -421,6 +439,12 @@ export class EcoApplauncherSoundmenu extends DeesElement { } private resetInactivityTimer(): void { + const now = Date.now(); + // Throttle: only reset if 5+ seconds since last reset + if (now - this.lastActivityTime < 5000) { + return; + } + this.lastActivityTime = now; this.clearInactivityTimer(); if (this.open) { this.inactivityTimeout = setTimeout(() => { diff --git a/ts_web/elements/00group-applauncher/eco-applauncher-wifimenu/eco-applauncher-wifimenu.ts b/ts_web/elements/00group-applauncher/eco-applauncher-wifimenu/eco-applauncher-wifimenu.ts index 07b7b68..19c4870 100644 --- a/ts_web/elements/00group-applauncher/eco-applauncher-wifimenu/eco-applauncher-wifimenu.ts +++ b/ts_web/elements/00group-applauncher/eco-applauncher-wifimenu/eco-applauncher-wifimenu.ts @@ -231,12 +231,12 @@ export class EcoApplauncherWifimenu extends DeesElement { private boundHandleClickOutside = this.handleClickOutside.bind(this); private inactivityTimeout: ReturnType | null = null; private readonly INACTIVITY_TIMEOUT = 60000; // 1 minute + private lastActivityTime = 0; public render(): TemplateResult { return html`
e.stopPropagation()} - @mousemove=${this.resetInactivityTimer} @mousedown=${this.resetInactivityTimer} >
@@ -348,6 +348,12 @@ export class EcoApplauncherWifimenu extends DeesElement { } private resetInactivityTimer(): void { + const now = Date.now(); + // Throttle: only reset if 5+ seconds since last reset + if (now - this.lastActivityTime < 5000) { + return; + } + this.lastActivityTime = now; this.clearInactivityTimer(); if (this.open) { this.inactivityTimeout = setTimeout(() => {