michael/Phoenix
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor GUI rendering and align RTA axis

Browse Source
This commit is contained in:
Mikei386
2026-07-22 11:35:51 +02:00
parent 2e868bfa3a
commit 890a47a272
16 changed files with 1199 additions and 1415 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/ui/options.js
+4 -74
View File
@@ -3,6 +3,8 @@
import { CONFIG, saveConfig, loadConfig, applyAlignmentProfile, applyRtaBpoSelection, applySoftwarePreset, loadSoftwarePreset, saveSoftwarePreset, loadLayoutPreset, saveLayoutPreset, exportSoftwarePreset, importSoftwarePreset, updateVuReference, resetConfigToDefaults, updateInputOffsetGain } from '../core/config.js';
import { clamp, clampPow2 } from '../core/utils.js';
import { bindOptionsViewportAssist } from './options_viewport.js';
import { setupLazyChangelog } from './changelog.js';
// DOM helper
const E = (id) => document.getElementById(id);
@@ -86,86 +88,14 @@ export function setupOptions(env) {
enforcePhaseAmplitudeConstraints({ persist: true });
syncUI();
wireHandlers(env);
bindOptionsViewportAssist();
bindOptionsViewportAssist(E('optionsPanelNew'));
setupLazyChangelog(E('changelogDetails'), E('changelogContent'));
bindAlignmentToggle(env);
bindVuRefToggle(env);
// Sichtbarkeit nach View steuern übernimmt main.js — hier nur Export der Sync-Funktion
return { syncUI };
}
let optionsViewportAssistBound = false;
function bindOptionsViewportAssist() {
if (optionsViewportAssistBound) return;
optionsViewportAssistBound = true;
const panel = E('optionsPanelNew');
if (!panel) return;
const setKeyboardInset = () => {
const vv = window.visualViewport;
if (!vv) {
panel.style.setProperty('--options-kb-inset', '0px');
return;
}
const inset = Math.max(0, window.innerHeight - (vv.height + vv.offsetTop));
panel.style.setProperty('--options-kb-inset', `${Math.round(inset)}px`);
};
const revealFocusedField = (target) => {
if (!panel || !target || !panel.contains(target)) return;
const vv = window.visualViewport;
const panelRect = panel.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
const keyboardInset = vv ? Math.max(0, window.innerHeight - (vv.height + vv.offsetTop)) : 0;
const visibleTop = panelRect.top + 16;
const visibleBottom = panelRect.bottom - keyboardInset - 16;
if (targetRect.bottom > visibleBottom || targetRect.top < visibleTop) {
const targetCenter = targetRect.top + (targetRect.height / 2);
const visibleCenter = visibleTop + ((visibleBottom - visibleTop) / 2);
const delta = targetCenter - visibleCenter;
panel.scrollTop += delta;
}
};
const onFocus = (ev) => {
const el = ev.target;
if (!(el instanceof HTMLElement)) return;
const type = String(el.getAttribute('type') || '').toLowerCase();
if (el.tagName !== 'INPUT' && el.tagName !== 'SELECT' && el.tagName !== 'TEXTAREA') return;
if (type === 'checkbox' || type === 'range' || type === 'color') return;
setKeyboardInset();
requestAnimationFrame(() => revealFocusedField(el));
setTimeout(() => revealFocusedField(el), 250);
};
const onBlur = () => {
setTimeout(() => {
const active = document.activeElement;
if (!(active instanceof HTMLElement) || !panel.contains(active)) {
panel.style.setProperty('--options-kb-inset', '0px');
}
}, 50);
};
panel.addEventListener('focusin', onFocus);
panel.addEventListener('focusout', onBlur);
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', () => {
setKeyboardInset();
const active = document.activeElement;
if (active instanceof HTMLElement && panel.contains(active)) {
requestAnimationFrame(() => revealFocusedField(active));
}
});
window.visualViewport.addEventListener('scroll', setKeyboardInset);
}
setKeyboardInset();
}
function syncSoftwarePresetControls() {
const presetId = String(E('opt_softwarePreset')?.value || CONFIG.SOFTWARE_PRESET || 'default').toLowerCase();
const isDefault = presetId === 'default';