diff --git a/.playwright-mcp/after-body-click.png b/.playwright-mcp/after-body-click.png new file mode 100644 index 0000000..1125dbb Binary files /dev/null and b/.playwright-mcp/after-body-click.png differ diff --git a/.playwright-mcp/after-pointer-fix.png b/.playwright-mcp/after-pointer-fix.png new file mode 100644 index 0000000..d72057c Binary files /dev/null and b/.playwright-mcp/after-pointer-fix.png differ diff --git a/.playwright-mcp/applauncher-keyboard-bright.png b/.playwright-mcp/applauncher-keyboard-bright.png new file mode 100644 index 0000000..a6749b1 Binary files /dev/null and b/.playwright-mcp/applauncher-keyboard-bright.png differ diff --git a/.playwright-mcp/applauncher-keyboard-open.png b/.playwright-mcp/applauncher-keyboard-open.png new file mode 100644 index 0000000..377faad Binary files /dev/null and b/.playwright-mcp/applauncher-keyboard-open.png differ diff --git a/.playwright-mcp/applauncher-keyboard-toggle.png b/.playwright-mcp/applauncher-keyboard-toggle.png new file mode 100644 index 0000000..555b159 Binary files /dev/null and b/.playwright-mcp/applauncher-keyboard-toggle.png differ diff --git a/.playwright-mcp/applauncher-keyboard-zindex.png b/.playwright-mcp/applauncher-keyboard-zindex.png new file mode 100644 index 0000000..dc6283f Binary files /dev/null and b/.playwright-mcp/applauncher-keyboard-zindex.png differ diff --git a/.playwright-mcp/applauncher-menus.png b/.playwright-mcp/applauncher-menus.png new file mode 100644 index 0000000..1279b6f Binary files /dev/null and b/.playwright-mcp/applauncher-menus.png differ diff --git a/.playwright-mcp/applauncher-topbar-bright.png b/.playwright-mcp/applauncher-topbar-bright.png new file mode 100644 index 0000000..e22a486 Binary files /dev/null and b/.playwright-mcp/applauncher-topbar-bright.png differ diff --git a/.playwright-mcp/applauncher-topbar-dark.png b/.playwright-mcp/applauncher-topbar-dark.png new file mode 100644 index 0000000..ba4a342 Binary files /dev/null and b/.playwright-mcp/applauncher-topbar-dark.png differ diff --git a/.playwright-mcp/applauncher-with-keyboard-toggle.png b/.playwright-mcp/applauncher-with-keyboard-toggle.png new file mode 100644 index 0000000..6d9416c Binary files /dev/null and b/.playwright-mcp/applauncher-with-keyboard-toggle.png differ diff --git a/.playwright-mcp/battery-menu-open.png b/.playwright-mcp/battery-menu-open.png new file mode 100644 index 0000000..191a19f Binary files /dev/null and b/.playwright-mcp/battery-menu-open.png differ diff --git a/.playwright-mcp/battery-saver-toggled.png b/.playwright-mcp/battery-saver-toggled.png new file mode 100644 index 0000000..e7f8bf8 Binary files /dev/null and b/.playwright-mcp/battery-saver-toggled.png differ diff --git a/.playwright-mcp/menu-test.png b/.playwright-mcp/menu-test.png new file mode 100644 index 0000000..068d548 Binary files /dev/null and b/.playwright-mcp/menu-test.png differ diff --git a/.playwright-mcp/menus-after-fix.png b/.playwright-mcp/menus-after-fix.png new file mode 100644 index 0000000..f1a8d42 Binary files /dev/null and b/.playwright-mcp/menus-after-fix.png differ 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 3aa74c3..b937730 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 @@ -30,6 +30,11 @@ export class EcoApplauncherBatterymenu extends DeesElement { :host { display: block; position: relative; + pointer-events: none; + } + + :host([open]) { + pointer-events: auto; } .menu-container { @@ -241,12 +246,18 @@ export class EcoApplauncherBatterymenu extends DeesElement { accessor timeRemaining: string | null = null; private boundHandleClickOutside = this.handleClickOutside.bind(this); + private inactivityTimeout: ReturnType | null = null; + private readonly INACTIVITY_TIMEOUT = 60000; // 1 minute public render(): TemplateResult { const fillClass = this.getFillClass(); return html` -
+
e.stopPropagation()} + @mousemove=${this.resetInactivityTimer} + @mousedown=${this.resetInactivityTimer} + >
@@ -324,11 +335,41 @@ export class EcoApplauncherBatterymenu extends DeesElement { private handleClickOutside(e: MouseEvent): void { if (this.open && !this.contains(e.target as Node)) { - this.open = false; - this.dispatchEvent(new CustomEvent('menu-close', { - bubbles: true, - composed: true, - })); + this.closeMenu(); + } + } + + private resetInactivityTimer(): void { + this.clearInactivityTimer(); + if (this.open) { + this.inactivityTimeout = setTimeout(() => { + this.closeMenu(); + }, this.INACTIVITY_TIMEOUT); + } + } + + private clearInactivityTimer(): void { + if (this.inactivityTimeout) { + clearTimeout(this.inactivityTimeout); + this.inactivityTimeout = null; + } + } + + private closeMenu(): void { + this.open = false; + this.dispatchEvent(new CustomEvent('menu-close', { + bubbles: true, + composed: true, + })); + } + + protected updated(changedProperties: Map): void { + if (changedProperties.has('open')) { + if (this.open) { + this.resetInactivityTimer(); + } else { + this.clearInactivityTimer(); + } } } @@ -342,5 +383,6 @@ export class EcoApplauncherBatterymenu extends DeesElement { async disconnectedCallback(): Promise { await super.disconnectedCallback(); document.removeEventListener('click', this.boundHandleClickOutside); + this.clearInactivityTimer(); } } diff --git a/ts_web/elements/00group-applauncher/eco-applauncher-keyboard/eco-applauncher-keyboard.demo.ts b/ts_web/elements/00group-applauncher/eco-applauncher-keyboard/eco-applauncher-keyboard.demo.ts new file mode 100644 index 0000000..45fd9d4 --- /dev/null +++ b/ts_web/elements/00group-applauncher/eco-applauncher-keyboard/eco-applauncher-keyboard.demo.ts @@ -0,0 +1,99 @@ +import { html } from '@design.estate/dees-element'; + +export const demo = () => html` + +
+
+
Typed text:
+
|
+
+
+
Event log:
+
+
+
+ { + const output = document.getElementById('typed-output'); + const log = document.getElementById('event-log'); + if (output && log) { + const currentText = output.textContent?.replace('|', '') || ''; + if (e.detail.type === 'special') { + if (e.detail.key === 'Backspace') { + output.textContent = currentText.slice(0, -1) + '|'; + } else if (e.detail.key === 'Enter') { + output.textContent = currentText + '\n|'; + } + } else { + output.textContent = currentText + e.detail.key + '|'; + } + log.textContent = `key-press: ${JSON.stringify(e.detail)}\n` + log.textContent; + } + }} + @backspace=${() => { + const log = document.getElementById('event-log'); + if (log) { + log.textContent = `backspace\n` + log.textContent; + } + }} + @enter=${() => { + const log = document.getElementById('event-log'); + if (log) { + log.textContent = `enter\n` + log.textContent; + } + }} + @space=${() => { + const log = document.getElementById('event-log'); + if (log) { + log.textContent = `space\n` + log.textContent; + } + }} + @arrow=${(e: CustomEvent) => { + const log = document.getElementById('event-log'); + if (log) { + log.textContent = `arrow: ${e.detail.direction}\n` + log.textContent; + } + }} + > +
+
+`; 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 new file mode 100644 index 0000000..4a8df0d --- /dev/null +++ b/ts_web/elements/00group-applauncher/eco-applauncher-keyboard/eco-applauncher-keyboard.ts @@ -0,0 +1,651 @@ +import { + customElement, + DeesElement, + type TemplateResult, + html, + property, + css, + cssManager, + state, +} from '@design.estate/dees-element'; +import { DeesIcon } from '@design.estate/dees-catalog'; +import { demo } from './eco-applauncher-keyboard.demo.js'; + +// Ensure components are registered +DeesIcon; + +declare global { + interface HTMLElementTagNameMap { + 'eco-applauncher-keyboard': EcoApplauncherKeyboard; + } +} + +export type TKeyboardLayout = 'qwerty' | 'numbers' | 'symbols'; + +export interface IKeyConfig { + key: string; + display?: string; + width?: number; // multiplier, default 1 + type?: 'char' | 'special' | 'modifier' | 'space' | 'layout'; + action?: string; +} + +// Long-press alternatives map +const alternativesMap: Record = { + 'a': ['à', 'á', 'â', 'ä', 'æ', 'ã', 'å', 'ā'], + 'c': ['ç', 'ć', 'č'], + 'e': ['è', 'é', 'ê', 'ë', 'ē', 'ė', 'ę'], + 'i': ['î', 'ï', 'í', 'ī', 'į', 'ì'], + 'n': ['ñ', 'ń'], + 'o': ['ô', 'ö', 'ò', 'ó', 'œ', 'ø', 'ō', 'õ'], + 's': ['ß', 'ś', 'š'], + 'u': ['û', 'ü', 'ù', 'ú', 'ū'], + 'y': ['ÿ'], + 'z': ['ž', 'ź', 'ż'], + // Numbers + '0': ['°', '⁰'], + '1': ['¹', '½', '⅓'], + '2': ['²', '⅔'], + '3': ['³', '¾'], + // Punctuation + '-': ['–', '—', '•'], + '/': ['\\'], + '$': ['€', '£', '¥', '¢'], + '&': ['§'], + '"': ['"', '"', '«', '»'], + '.': ['…'], + '?': ['¿'], + '!': ['¡'], + "'": ['\u2018', '\u2019', '`'], +}; + +// Keyboard layouts +const qwertyLayout: IKeyConfig[][] = [ + [ + { key: 'q' }, { key: 'w' }, { key: 'e' }, { key: 'r' }, { key: 't' }, + { key: 'y' }, { key: 'u' }, { key: 'i' }, { key: 'o' }, { key: 'p' }, + ], + [ + { key: 'a' }, { key: 's' }, { key: 'd' }, { key: 'f' }, { key: 'g' }, + { key: 'h' }, { key: 'j' }, { key: 'k' }, { key: 'l' }, + ], + [ + { key: 'shift', display: '⇧', width: 1.5, type: 'modifier' }, + { key: 'z' }, { key: 'x' }, { key: 'c' }, { key: 'v' }, + { key: 'b' }, { key: 'n' }, { key: 'm' }, + { key: 'backspace', display: '⌫', width: 1.5, type: 'special' }, + ], + [ + { key: '123', display: '123', width: 1.5, type: 'layout', action: 'numbers' }, + { key: 'globe', display: '🌐', type: 'special' }, + { key: 'space', display: '', width: 4, type: 'space' }, + { key: 'left', display: '←', type: 'special', action: 'arrow-left' }, + { key: 'right', display: '→', type: 'special', action: 'arrow-right' }, + { key: 'enter', display: '↵', width: 1.5, type: 'special' }, + ], +]; + +const numbersLayout: IKeyConfig[][] = [ + [ + { key: '1' }, { key: '2' }, { key: '3' }, { key: '4' }, { key: '5' }, + { key: '6' }, { key: '7' }, { key: '8' }, { key: '9' }, { key: '0' }, + ], + [ + { key: '-' }, { key: '/' }, { key: ':' }, { key: ';' }, { key: '(' }, + { key: ')' }, { key: '$' }, { key: '&' }, { key: '@' }, { key: '"' }, + ], + [ + { key: '#+=', display: '#+=' , width: 1.5, type: 'layout', action: 'symbols' }, + { key: '.' }, { key: ',' }, { key: '?' }, { key: '!' }, { key: "'" }, + { key: 'backspace', display: '⌫', width: 2.5, type: 'special' }, + ], + [ + { key: 'ABC', display: 'ABC', width: 1.5, type: 'layout', action: 'qwerty' }, + { key: 'globe', display: '🌐', type: 'special' }, + { key: 'space', display: '', width: 4, type: 'space' }, + { key: 'left', display: '←', type: 'special', action: 'arrow-left' }, + { key: 'right', display: '→', type: 'special', action: 'arrow-right' }, + { key: 'enter', display: '↵', width: 1.5, type: 'special' }, + ], +]; + +const symbolsLayout: IKeyConfig[][] = [ + [ + { key: '[' }, { key: ']' }, { key: '{' }, { key: '}' }, { key: '#' }, + { key: '%' }, { key: '^' }, { key: '*' }, { key: '+' }, { key: '=' }, + ], + [ + { key: '_' }, { key: '\\' }, { key: '|' }, { key: '~' }, { key: '<' }, + { key: '>' }, { key: '€' }, { key: '£' }, { key: '¥' }, { key: '•' }, + ], + [ + { key: '123', display: '123', width: 1.5, type: 'layout', action: 'numbers' }, + { key: '.' }, { key: ',' }, { key: '?' }, { key: '!' }, { key: "'" }, + { key: 'backspace', display: '⌫', width: 2.5, type: 'special' }, + ], + [ + { key: 'ABC', display: 'ABC', width: 1.5, type: 'layout', action: 'qwerty' }, + { key: 'globe', display: '🌐', type: 'special' }, + { key: 'space', display: '', width: 4, type: 'space' }, + { key: 'left', display: '←', type: 'special', action: 'arrow-left' }, + { key: 'right', display: '→', type: 'special', action: 'arrow-right' }, + { key: 'enter', display: '↵', width: 1.5, type: 'special' }, + ], +]; + +const layouts: Record = { + qwerty: qwertyLayout, + numbers: numbersLayout, + symbols: symbolsLayout, +}; + +@customElement('eco-applauncher-keyboard') +export class EcoApplauncherKeyboard extends DeesElement { + public static demo = demo; + public static demoGroup = 'App Launcher'; + + public static styles = [ + cssManager.defaultStyles, + css` + :host { + display: block; + width: 100%; + height: 100%; + } + + :host(:not([visible])) { + display: none; + } + + .keyboard-container { + background: ${cssManager.bdTheme('hsl(220 15% 92%)', 'hsl(240 6% 12%)')}; + padding: 8px 4px; + height: 100%; + display: flex; + flex-direction: column; + gap: 6px; + box-sizing: border-box; + position: relative; + } + + .keyboard-row { + display: flex; + justify-content: center; + gap: 4px; + flex: 1; + } + + .keyboard-row.offset { + padding-left: 16px; + } + + .key { + flex: 1; + max-width: 40px; + height: 100%; + background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(240 5% 22%)')}; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + font-weight: 500; + color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 95%)')}; + cursor: pointer; + user-select: none; + transition: background 0.1s ease, transform 0.05s ease; + box-shadow: 0 1px 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(0, 0, 0, 0.4)')}; + text-transform: none; + -webkit-tap-highlight-color: transparent; + } + + .key:active, + .key.pressed { + transform: scale(0.95); + background: ${cssManager.bdTheme('hsl(220 15% 92%)', 'hsl(240 5% 28%)')}; + } + + .key.special { + background: ${cssManager.bdTheme('hsl(220 10% 88%)', 'hsl(240 5% 16%)')}; + font-size: 16px; + } + + .key.modifier { + background: ${cssManager.bdTheme('hsl(220 10% 88%)', 'hsl(240 5% 16%)')}; + font-size: 16px; + } + + .key.modifier.active { + background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')}; + color: white; + } + + .key.layout { + background: ${cssManager.bdTheme('hsl(220 10% 88%)', 'hsl(240 5% 16%)')}; + font-size: 14px; + font-weight: 600; + } + + .key.space { + background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(240 5% 22%)')}; + } + + .key.wide-1-5 { + flex: 1.5; + max-width: 60px; + } + + .key.wide-2 { + flex: 2; + max-width: 80px; + } + + .key.wide-2-5 { + flex: 2.5; + max-width: 100px; + } + + .key.wide-4 { + flex: 4; + max-width: 180px; + } + + /* Alternatives popup */ + .alternatives-popup { + position: absolute; + display: flex; + gap: 2px; + background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(240 6% 18%)')}; + border-radius: 10px; + padding: 6px; + box-shadow: 0 4px 20px ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(0, 0, 0, 0.6)')}; + z-index: 10000; + pointer-events: none; + } + + .alternative-key { + min-width: 36px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + font-size: 20px; + font-weight: 500; + color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')}; + transition: background 0.1s ease; + } + + .alternative-key.selected { + background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')}; + color: white; + } + + /* Key preview on press */ + .key-preview { + position: absolute; + width: 48px; + height: 56px; + background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(240 5% 25%)')}; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + font-weight: 500; + color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 95%)')}; + box-shadow: 0 4px 16px ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.5)')}; + z-index: 10000; + pointer-events: none; + } + `, + ]; + + @property({ type: Boolean, reflect: true }) + accessor visible = false; + + @property({ type: String }) + accessor layout: TKeyboardLayout = 'qwerty'; + + @state() + accessor shiftActive = false; + + @state() + accessor capsLock = false; + + @state() + accessor alternativesPopup: { + key: string; + alternatives: string[]; + x: number; + y: number; + selectedIndex: number; + } | null = null; + + @state() + accessor keyPreview: { key: string; x: number; y: number } | null = null; + + private longPressTimer: ReturnType | null = null; + private longPressStartX = 0; + private currentLongPressKey: string | null = null; + + public render(): TemplateResult { + const currentLayout = layouts[this.layout]; + + return html` +
+ ${currentLayout.map((row, rowIndex) => this.renderRow(row, rowIndex))} + ${this.alternativesPopup ? this.renderAlternativesPopup() : ''} + ${this.keyPreview ? this.renderKeyPreview() : ''} +
+ `; + } + + private renderRow(row: IKeyConfig[], rowIndex: number): TemplateResult { + const isSecondRow = rowIndex === 1 && this.layout === 'qwerty'; + return html` +
+ ${row.map((keyConfig) => this.renderKey(keyConfig))} +
+ `; + } + + private renderKey(config: IKeyConfig): TemplateResult { + const type = config.type || 'char'; + const widthClass = config.width ? `wide-${String(config.width).replace('.', '-')}` : ''; + const isShift = config.key === 'shift'; + const isActive = isShift && (this.shiftActive || this.capsLock); + + let displayValue = config.display ?? config.key; + if (type === 'char' && this.layout === 'qwerty') { + displayValue = (this.shiftActive || this.capsLock) ? displayValue.toUpperCase() : displayValue.toLowerCase(); + } + + return html` +
this.handlePointerDown(e, config)} + @pointerup=${(e: PointerEvent) => this.handlePointerUp(e, config)} + @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e, config)} + @pointermove=${(e: PointerEvent) => this.handlePointerMove(e, config)} + > + ${displayValue} +
+ `; + } + + private renderAlternativesPopup(): TemplateResult { + if (!this.alternativesPopup) return html``; + + const { alternatives, x, y, selectedIndex } = this.alternativesPopup; + const popupWidth = alternatives.length * 40; + + return html` +
+ ${alternatives.map((alt, index) => html` +
+ ${alt} +
+ `)} +
+ `; + } + + private renderKeyPreview(): TemplateResult { + if (!this.keyPreview) return html``; + + const { key, x, y } = this.keyPreview; + return html` +
+ ${(this.shiftActive || this.capsLock) ? key.toUpperCase() : key} +
+ `; + } + + private handlePointerDown(e: PointerEvent, config: IKeyConfig): void { + e.preventDefault(); + const target = e.currentTarget as HTMLElement; + target.setPointerCapture(e.pointerId); + + const type = config.type || 'char'; + + // Show key preview for character keys + if (type === 'char') { + const rect = target.getBoundingClientRect(); + const containerRect = this.shadowRoot!.querySelector('.keyboard-container')!.getBoundingClientRect(); + this.keyPreview = { + key: config.key, + x: rect.left + rect.width / 2 - containerRect.left, + y: rect.top - containerRect.top, + }; + } + + // Start long press timer for keys with alternatives + const keyLower = config.key.toLowerCase(); + if (alternativesMap[keyLower] && type === 'char') { + this.longPressStartX = e.clientX; + this.currentLongPressKey = keyLower; + + this.longPressTimer = setTimeout(() => { + const alternatives = alternativesMap[keyLower]; + if (alternatives) { + const rect = target.getBoundingClientRect(); + const containerRect = this.shadowRoot!.querySelector('.keyboard-container')!.getBoundingClientRect(); + this.alternativesPopup = { + key: keyLower, + alternatives, + x: rect.left + rect.width / 2 - containerRect.left, + y: rect.top - containerRect.top, + selectedIndex: -1, + }; + this.keyPreview = null; + } + }, 500); + } + } + + private handlePointerMove(e: PointerEvent, config: IKeyConfig): void { + if (this.alternativesPopup) { + // Calculate which alternative is being hovered based on x position + const deltaX = e.clientX - this.longPressStartX; + const alternatives = this.alternativesPopup.alternatives; + const keyWidth = 40; + const totalWidth = alternatives.length * keyWidth; + const startX = -totalWidth / 2; + + // Map deltaX to an index + const relativeX = deltaX - startX; + const index = Math.floor(relativeX / keyWidth); + const clampedIndex = Math.max(-1, Math.min(alternatives.length - 1, index)); + + if (clampedIndex !== this.alternativesPopup.selectedIndex) { + this.alternativesPopup = { + ...this.alternativesPopup, + selectedIndex: clampedIndex, + }; + } + } + } + + private handlePointerUp(e: PointerEvent, config: IKeyConfig): void { + e.preventDefault(); + this.clearLongPressTimer(); + this.keyPreview = null; + + const type = config.type || 'char'; + + // Handle alternatives selection + if (this.alternativesPopup) { + const { selectedIndex, alternatives, key } = this.alternativesPopup; + if (selectedIndex >= 0 && selectedIndex < alternatives.length) { + this.emitKeyPress(alternatives[selectedIndex]); + } else { + // No alternative selected, emit original key + this.emitKeyPress(key); + } + this.alternativesPopup = null; + this.handleShiftAfterKeyPress(); + return; + } + + // Handle different key types + switch (type) { + case 'char': + const char = (this.shiftActive || this.capsLock) + ? config.key.toUpperCase() + : config.key.toLowerCase(); + this.emitKeyPress(char); + this.handleShiftAfterKeyPress(); + break; + + case 'special': + this.handleSpecialKey(config); + break; + + case 'modifier': + this.handleModifierKey(config); + break; + + case 'space': + this.dispatchEvent(new CustomEvent('space', { + bubbles: true, + composed: true, + })); + this.dispatchEvent(new CustomEvent('key-press', { + detail: { key: ' ', type: 'space' }, + bubbles: true, + composed: true, + })); + break; + + case 'layout': + this.handleLayoutChange(config); + break; + } + } + + private handlePointerLeave(e: PointerEvent, config: IKeyConfig): void { + if (!this.alternativesPopup) { + this.clearLongPressTimer(); + this.keyPreview = null; + } + } + + private clearLongPressTimer(): void { + if (this.longPressTimer) { + clearTimeout(this.longPressTimer); + this.longPressTimer = null; + } + this.currentLongPressKey = null; + } + + private emitKeyPress(key: string): void { + this.dispatchEvent(new CustomEvent('key-press', { + detail: { key, type: 'char' }, + bubbles: true, + composed: true, + })); + } + + private handleSpecialKey(config: IKeyConfig): void { + switch (config.key) { + case 'backspace': + this.dispatchEvent(new CustomEvent('backspace', { + bubbles: true, + composed: true, + })); + this.dispatchEvent(new CustomEvent('key-press', { + detail: { key: 'Backspace', type: 'special' }, + bubbles: true, + composed: true, + })); + break; + + case 'enter': + this.dispatchEvent(new CustomEvent('enter', { + bubbles: true, + composed: true, + })); + this.dispatchEvent(new CustomEvent('key-press', { + detail: { key: 'Enter', type: 'special' }, + bubbles: true, + composed: true, + })); + break; + + case 'left': + this.dispatchEvent(new CustomEvent('arrow', { + detail: { direction: 'left' }, + bubbles: true, + composed: true, + })); + break; + + case 'right': + this.dispatchEvent(new CustomEvent('arrow', { + detail: { direction: 'right' }, + bubbles: true, + composed: true, + })); + break; + + case 'up': + this.dispatchEvent(new CustomEvent('arrow', { + detail: { direction: 'up' }, + bubbles: true, + composed: true, + })); + break; + + case 'down': + this.dispatchEvent(new CustomEvent('arrow', { + detail: { direction: 'down' }, + bubbles: true, + composed: true, + })); + break; + + case 'globe': + // Could be used for language switching + this.dispatchEvent(new CustomEvent('globe-press', { + bubbles: true, + composed: true, + })); + break; + } + } + + private handleModifierKey(config: IKeyConfig): void { + if (config.key === 'shift') { + if (this.capsLock) { + // If caps lock is on, turn it off + this.capsLock = false; + this.shiftActive = false; + } else if (this.shiftActive) { + // Double tap shift = caps lock + this.capsLock = true; + this.shiftActive = false; + } else { + // Single tap = shift + this.shiftActive = true; + } + } + } + + private handleShiftAfterKeyPress(): void { + // Turn off shift after typing (unless caps lock is on) + if (this.shiftActive && !this.capsLock) { + this.shiftActive = false; + } + } + + private handleLayoutChange(config: IKeyConfig): void { + const action = config.action as TKeyboardLayout; + if (action && layouts[action]) { + this.layout = action; + } + } +} diff --git a/ts_web/elements/00group-applauncher/eco-applauncher-keyboard/index.ts b/ts_web/elements/00group-applauncher/eco-applauncher-keyboard/index.ts new file mode 100644 index 0000000..4d36013 --- /dev/null +++ b/ts_web/elements/00group-applauncher/eco-applauncher-keyboard/index.ts @@ -0,0 +1 @@ +export * from './eco-applauncher-keyboard.js'; 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 e00906c..279239a 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 @@ -37,6 +37,11 @@ export class EcoApplauncherSoundmenu extends DeesElement { :host { display: block; position: relative; + pointer-events: none; + } + + :host([open]) { + pointer-events: auto; } .menu-container { @@ -242,12 +247,18 @@ export class EcoApplauncherSoundmenu extends DeesElement { private boundHandleClickOutside = this.handleClickOutside.bind(this); private isDragging = false; + private inactivityTimeout: ReturnType | null = null; + private readonly INACTIVITY_TIMEOUT = 60000; // 1 minute public render(): TemplateResult { const volumeIcon = this.getVolumeIcon(); return html` -
+
e.stopPropagation()} + @mousemove=${this.resetInactivityTimer} + @mousedown=${this.resetInactivityTimer} + >
@@ -405,11 +416,41 @@ export class EcoApplauncherSoundmenu extends DeesElement { private handleClickOutside(e: MouseEvent): void { if (this.open && !this.contains(e.target as Node)) { - this.open = false; - this.dispatchEvent(new CustomEvent('menu-close', { - bubbles: true, - composed: true, - })); + this.closeMenu(); + } + } + + private resetInactivityTimer(): void { + this.clearInactivityTimer(); + if (this.open) { + this.inactivityTimeout = setTimeout(() => { + this.closeMenu(); + }, this.INACTIVITY_TIMEOUT); + } + } + + private clearInactivityTimer(): void { + if (this.inactivityTimeout) { + clearTimeout(this.inactivityTimeout); + this.inactivityTimeout = null; + } + } + + private closeMenu(): void { + this.open = false; + this.dispatchEvent(new CustomEvent('menu-close', { + bubbles: true, + composed: true, + })); + } + + protected updated(changedProperties: Map): void { + if (changedProperties.has('open')) { + if (this.open) { + this.resetInactivityTimer(); + } else { + this.clearInactivityTimer(); + } } } @@ -423,5 +464,6 @@ export class EcoApplauncherSoundmenu extends DeesElement { async disconnectedCallback(): Promise { await super.disconnectedCallback(); document.removeEventListener('click', this.boundHandleClickOutside); + this.clearInactivityTimer(); } } 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 4048ec0..07b7b68 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 @@ -37,6 +37,11 @@ export class EcoApplauncherWifimenu extends DeesElement { :host { display: block; position: relative; + pointer-events: none; + } + + :host([open]) { + pointer-events: auto; } .menu-container { @@ -224,10 +229,16 @@ export class EcoApplauncherWifimenu extends DeesElement { accessor wifiEnabled = true; private boundHandleClickOutside = this.handleClickOutside.bind(this); + private inactivityTimeout: ReturnType | null = null; + private readonly INACTIVITY_TIMEOUT = 60000; // 1 minute public render(): TemplateResult { return html` -
+
e.stopPropagation()} + @mousemove=${this.resetInactivityTimer} + @mousedown=${this.resetInactivityTimer} + >
@@ -332,11 +343,41 @@ export class EcoApplauncherWifimenu extends DeesElement { private handleClickOutside(e: MouseEvent): void { if (this.open && !this.contains(e.target as Node)) { - this.open = false; - this.dispatchEvent(new CustomEvent('menu-close', { - bubbles: true, - composed: true, - })); + this.closeMenu(); + } + } + + private resetInactivityTimer(): void { + this.clearInactivityTimer(); + if (this.open) { + this.inactivityTimeout = setTimeout(() => { + this.closeMenu(); + }, this.INACTIVITY_TIMEOUT); + } + } + + private clearInactivityTimer(): void { + if (this.inactivityTimeout) { + clearTimeout(this.inactivityTimeout); + this.inactivityTimeout = null; + } + } + + private closeMenu(): void { + this.open = false; + this.dispatchEvent(new CustomEvent('menu-close', { + bubbles: true, + composed: true, + })); + } + + protected updated(changedProperties: Map): void { + if (changedProperties.has('open')) { + if (this.open) { + this.resetInactivityTimer(); + } else { + this.clearInactivityTimer(); + } } } @@ -351,5 +392,6 @@ export class EcoApplauncherWifimenu extends DeesElement { async disconnectedCallback(): Promise { await super.disconnectedCallback(); document.removeEventListener('click', this.boundHandleClickOutside); + this.clearInactivityTimer(); } } diff --git a/ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.ts b/ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.ts index ff75592..37e2cf8 100644 --- a/ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.ts +++ b/ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.ts @@ -13,12 +13,14 @@ import { demo } from './eco-applauncher.demo.js'; import { EcoApplauncherWifimenu, type IWifiNetwork } from '../eco-applauncher-wifimenu/index.js'; import { EcoApplauncherBatterymenu } from '../eco-applauncher-batterymenu/index.js'; import { EcoApplauncherSoundmenu, type IAudioDevice } from '../eco-applauncher-soundmenu/index.js'; +import { EcoApplauncherKeyboard } from '../eco-applauncher-keyboard/index.js'; // Ensure components are registered DeesIcon; EcoApplauncherWifimenu; EcoApplauncherBatterymenu; EcoApplauncherSoundmenu; +EcoApplauncherKeyboard; declare global { interface HTMLElementTagNameMap { @@ -37,6 +39,7 @@ export interface IStatusBarConfig { showNetwork?: boolean; showBattery?: boolean; showSound?: boolean; + showKeyboard?: boolean; } export interface ITopBarConfig { @@ -409,6 +412,22 @@ export class EcoApplauncher extends DeesElement { bottom: calc(100% + 8px); left: 0; z-index: 100; + pointer-events: none; + } + + .keyboard-area { + flex-shrink: 0; + height: 0; + overflow: hidden; + transition: height 0.25s ease; + background: ${cssManager.bdTheme('hsl(220 15% 92%)', 'hsl(240 6% 12%)')}; + z-index: 1000; + position: relative; + } + + .keyboard-area.visible { + height: 220px; + overflow: visible; } @media (max-width: 600px) { @@ -452,6 +471,7 @@ export class EcoApplauncher extends DeesElement { showNetwork: true, showBattery: true, showSound: true, + showKeyboard: true, }; @property({ type: Object }) @@ -492,6 +512,9 @@ export class EcoApplauncher extends DeesElement { @state() accessor soundMenuOpen = false; + @state() + accessor keyboardVisible = false; + @property({ type: Array }) accessor networks: IWifiNetwork[] = []; @@ -535,8 +558,19 @@ export class EcoApplauncher extends DeesElement { ${this.apps.map((app) => this.renderAppIcon(app))}
+
+ +
+ ${this.statusConfig.showKeyboard ? this.renderKeyboardToggle() : ''} ${this.statusConfig.showNetwork ? this.renderNetworkStatusWithMenu() : ''} ${this.statusConfig.showBattery ? this.renderBatteryStatusWithMenu() : ''} ${this.statusConfig.showSound ? this.renderSoundStatusWithMenu() : ''} @@ -765,6 +799,17 @@ export class EcoApplauncher extends DeesElement { `; } + private renderKeyboardToggle(): TemplateResult { + return html` +
+ +
+ `; + } + private getNetworkBars(): number { switch (this.networkStatus) { case 'online': @@ -901,6 +946,58 @@ export class EcoApplauncher extends DeesElement { })); } + private handleKeyboardToggle(): void { + this.keyboardVisible = !this.keyboardVisible; + // Close all menus when opening keyboard + if (this.keyboardVisible) { + this.wifiMenuOpen = false; + this.batteryMenuOpen = false; + this.soundMenuOpen = false; + } + this.dispatchEvent(new CustomEvent('keyboard-toggle', { + detail: { visible: this.keyboardVisible }, + bubbles: true, + composed: true, + })); + } + + private handleKeyboardKeyPress(e: CustomEvent): void { + this.dispatchEvent(new CustomEvent('keyboard-key-press', { + detail: e.detail, + bubbles: true, + composed: true, + })); + } + + private handleKeyboardBackspace(): void { + this.dispatchEvent(new CustomEvent('keyboard-backspace', { + bubbles: true, + composed: true, + })); + } + + private handleKeyboardEnter(): void { + this.dispatchEvent(new CustomEvent('keyboard-enter', { + bubbles: true, + composed: true, + })); + } + + private handleKeyboardSpace(): void { + this.dispatchEvent(new CustomEvent('keyboard-space', { + bubbles: true, + composed: true, + })); + } + + private handleKeyboardArrow(e: CustomEvent): void { + this.dispatchEvent(new CustomEvent('keyboard-arrow', { + detail: e.detail, + bubbles: true, + composed: true, + })); + } + private handleSearchClick(): void { this.dispatchEvent(new CustomEvent('search-click', { bubbles: true, diff --git a/ts_web/elements/00group-applauncher/index.ts b/ts_web/elements/00group-applauncher/index.ts index 32bbea4..2973cf2 100644 --- a/ts_web/elements/00group-applauncher/index.ts +++ b/ts_web/elements/00group-applauncher/index.ts @@ -3,3 +3,4 @@ export * from './eco-applauncher/index.js'; export * from './eco-applauncher-wifimenu/index.js'; export * from './eco-applauncher-batterymenu/index.js'; export * from './eco-applauncher-soundmenu/index.js'; +export * from './eco-applauncher-keyboard/index.js';