JonKazama-Hellion
c985a531ef
Preset->Custom liess das alte Preset-Hintergrundbild im bgLayer haengen, weil applyCustomTheme den bgLayer nie anfasste. Jetzt wird er geleert, wenn keine gueltige bgUrl gesetzt ist, sodass --bg-primary (Solid) durchscheint.
704 lines
28 KiB
JavaScript
704 lines
28 KiB
JavaScript
/* =============================================
|
||
HELLION NEWTAB — settings.js
|
||
Settings Panel, Theme-Modal, Accordion, Toggles
|
||
============================================= */
|
||
|
||
// ---- A11Y: Fokus-Management fuer Modals ----
|
||
// Merkt sich das vor dem Oeffnen fokussierte Element, damit wir es beim
|
||
// Schliessen restaurieren koennen. Pro offenem Modal eine Closure-Variable.
|
||
const _focusReturn = { settings: null, theme: null };
|
||
|
||
/** Liefert die fokussierbaren Elemente innerhalb eines Containers. */
|
||
function _focusable(container) {
|
||
return Array.from(container.querySelectorAll(
|
||
'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
|
||
)).filter(el => el.offsetParent !== null);
|
||
}
|
||
|
||
/** Tab/Shift+Tab im Container einfangen + Escape schliesst. */
|
||
function _makeTrap(container, closeFn) {
|
||
return function trap(e) {
|
||
// Ein offener HellionDialog (z.B. Reset-All-Confirm oder BG-URL-Alert aus
|
||
// dem Panel) hat Vorrang: sein eigener keydown-Handler uebernimmt Escape/Tab.
|
||
// Sonst schloessen beide Listener gleichzeitig und die Dialog-Fokusfalle wird loechrig.
|
||
if (document.querySelector('.dialog-overlay')) return;
|
||
if (e.key === 'Escape') { e.preventDefault(); closeFn(); return; }
|
||
if (e.key !== 'Tab') return;
|
||
const items = _focusable(container);
|
||
if (items.length === 0) return;
|
||
const first = items[0];
|
||
const last = items[items.length - 1];
|
||
if (e.shiftKey && document.activeElement === first) {
|
||
e.preventDefault(); last.focus();
|
||
} else if (!e.shiftKey && document.activeElement === last) {
|
||
e.preventDefault(); first.focus();
|
||
}
|
||
};
|
||
}
|
||
|
||
// ---- SETTINGS PANEL ----
|
||
// Hinweis: withViewTransition (Phase 4) bleibt fuer das Fade erhalten; das
|
||
// Fokus-Management (merken, Falle, Rueckgabe) liegt bewusst ausserhalb des
|
||
// Transition-Callbacks. activeElement wird vor der Mutation gelesen.
|
||
let _settingsTrap = null;
|
||
function openSettings() {
|
||
const panel = document.getElementById('settingsPanel');
|
||
_focusReturn.settings = document.activeElement;
|
||
withViewTransition(() => {
|
||
panel.classList.add('open');
|
||
document.getElementById('settingsOverlay').classList.add('active');
|
||
});
|
||
panel.setAttribute('aria-hidden', 'false');
|
||
renderTrash();
|
||
_settingsTrap = _makeTrap(panel, closeSettings);
|
||
document.addEventListener('keydown', _settingsTrap);
|
||
const first = _focusable(panel)[0];
|
||
if (first) first.focus();
|
||
}
|
||
function closeSettings() {
|
||
const panel = document.getElementById('settingsPanel');
|
||
withViewTransition(() => {
|
||
panel.classList.remove('open');
|
||
document.getElementById('settingsOverlay').classList.remove('active');
|
||
});
|
||
panel.setAttribute('aria-hidden', 'true');
|
||
if (_settingsTrap) { document.removeEventListener('keydown', _settingsTrap); _settingsTrap = null; }
|
||
if (_focusReturn.settings) { _focusReturn.settings.focus(); _focusReturn.settings = null; }
|
||
}
|
||
|
||
// ---- THEME MODAL ----
|
||
let _themeTrap = null;
|
||
function openThemeModal() {
|
||
const overlay = document.getElementById('themeOverlay');
|
||
const modal = document.getElementById('themeModal');
|
||
_focusReturn.theme = document.activeElement;
|
||
withViewTransition(() => {
|
||
overlay.classList.add('active');
|
||
});
|
||
modal.setAttribute('aria-hidden', 'false');
|
||
_themeTrap = _makeTrap(modal, closeThemeModal);
|
||
document.addEventListener('keydown', _themeTrap);
|
||
const first = _focusable(modal)[0];
|
||
if (first) first.focus();
|
||
syncCustomPickers();
|
||
document.getElementById('themeBuilderPanel').classList.toggle('hidden', settings.theme !== 'custom');
|
||
}
|
||
function closeThemeModal() {
|
||
const overlay = document.getElementById('themeOverlay');
|
||
const modal = document.getElementById('themeModal');
|
||
withViewTransition(() => {
|
||
overlay.classList.remove('active');
|
||
});
|
||
modal.setAttribute('aria-hidden', 'true');
|
||
if (_themeTrap) { document.removeEventListener('keydown', _themeTrap); _themeTrap = null; }
|
||
if (_focusReturn.theme) { _focusReturn.theme.focus(); _focusReturn.theme = null; }
|
||
}
|
||
|
||
/**
|
||
* Wechselt das Theme mit nativem Cross-Fade (View Transitions API).
|
||
* Wrap sitzt bewusst hier am User-Ausloeser, NICHT in applyTheme(),
|
||
* sonst fadet jeder neue Tab beim Initial-Load (settings.js:101).
|
||
* Feature-Detection-Fallback: aeltere Browser (z.B. Firefox < 144)
|
||
* schalten instant um, ohne Bruch.
|
||
* @param {string} name - Theme-Name
|
||
*/
|
||
function switchTheme(name) {
|
||
const swap = () => applyTheme(name, false); // false: Theme-BG anwenden (kein User-bgUrl-Schutz hier noetig, bgUrl wurde geleert)
|
||
withViewTransition(swap);
|
||
}
|
||
|
||
/**
|
||
* Prueft ob eine Background-URL sicher fuer CSS-Einbettung ist.
|
||
* Erlaubt nur blob: und data:image/ Protokolle (aus File Upload).
|
||
* @param {string} url
|
||
* @returns {boolean}
|
||
*/
|
||
function isValidBgUrl(url) {
|
||
return typeof url === 'string' && url.length > 0 &&
|
||
(url.startsWith('blob:') || url.startsWith('data:image/') || url.startsWith('https://'));
|
||
}
|
||
|
||
// ---- THEME-BUILDER: Konstanten + reine Helfer ----
|
||
const CUSTOM_DEFAULTS = {
|
||
accent: '#6c8cff', bgPrimary: '#0b0d12', bgBoard: '#141821',
|
||
textPrimary: '#e6e8ef', textSecondary: '#9aa3b8', textMuted: '#5b6478',
|
||
};
|
||
const HEX_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
|
||
|
||
function isValidHexColor(v) { return typeof v === 'string' && HEX_RE.test(v); }
|
||
function safeHex(v, fallback) { return isValidHexColor(v) ? v : fallback; }
|
||
|
||
function hexToRgba(hex, alpha) {
|
||
let h = hex.replace('#', '');
|
||
if (h.length === 3) h = h.split('').map(c => c + c).join('');
|
||
const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);
|
||
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
||
}
|
||
|
||
// WCAG 2.x Relativluminanz + Kontrastverhaeltnis
|
||
function relLuminance(hex) {
|
||
let h = hex.replace('#', '');
|
||
if (h.length === 3) h = h.split('').map(c => c + c).join('');
|
||
const lin = [0, 2, 4].map(i => {
|
||
const c = parseInt(h.slice(i, i + 2), 16) / 255;
|
||
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
||
});
|
||
return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
|
||
}
|
||
function contrastRatio(hexA, hexB) {
|
||
const a = relLuminance(hexA), b = relLuminance(hexB);
|
||
return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
|
||
}
|
||
|
||
function updateContrastIndicator(textHex, bgHex) {
|
||
const el = document.getElementById('tbContrast');
|
||
if (!el) return;
|
||
const ratio = contrastRatio(textHex, bgHex);
|
||
let cls, key;
|
||
if (ratio >= 4.5) { cls = 'good'; key = 'theme.builder.contrast_good'; }
|
||
else if (ratio >= 3) { cls = 'ok'; key = 'theme.builder.contrast_ok'; }
|
||
else { cls = 'bad'; key = 'theme.builder.contrast_bad'; }
|
||
el.classList.remove('good', 'ok', 'bad');
|
||
el.classList.add(cls);
|
||
const txt = document.getElementById('tbContrastText');
|
||
if (txt) txt.textContent = `${t(key)} (${ratio.toFixed(1)}:1)`;
|
||
}
|
||
|
||
// Setzt data-theme='custom' + 6 validierte Inline-Vars (Gate vor jedem setProperty).
|
||
function applyCustomTheme(ct) {
|
||
const root = document.documentElement;
|
||
const c = ct || {};
|
||
const accent = safeHex(c.accent, CUSTOM_DEFAULTS.accent);
|
||
const bgPrimary = safeHex(c.bgPrimary, CUSTOM_DEFAULTS.bgPrimary);
|
||
const bgBoard = safeHex(c.bgBoard, CUSTOM_DEFAULTS.bgBoard);
|
||
const textPrimary = safeHex(c.textPrimary, CUSTOM_DEFAULTS.textPrimary);
|
||
const textSecondary = safeHex(c.textSecondary, CUSTOM_DEFAULTS.textSecondary);
|
||
const textMuted = safeHex(c.textMuted, CUSTOM_DEFAULTS.textMuted);
|
||
|
||
root.setAttribute('data-theme', 'custom');
|
||
root.style.setProperty('--accent', accent);
|
||
root.style.setProperty('--bg-primary', bgPrimary);
|
||
root.style.setProperty('--bg-board', hexToRgba(bgBoard, 0.55));
|
||
root.style.setProperty('--text-primary', textPrimary);
|
||
root.style.setProperty('--text-secondary', textSecondary);
|
||
root.style.setProperty('--text-muted', textMuted);
|
||
|
||
document.querySelectorAll('.theme-card').forEach(card => {
|
||
const on = card.dataset.value === 'custom';
|
||
card.classList.toggle('active', on);
|
||
card.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||
});
|
||
updateContrastIndicator(textPrimary, bgPrimary);
|
||
|
||
// Kein eigenes Bild gesetzt -> bgLayer leeren, damit --bg-primary (Solid) durchscheint
|
||
// statt des Hintergrundbilds eines zuvor gewaehlten Presets (das sonst haengen bliebe).
|
||
if (!(settings.bgUrl && isValidBgUrl(settings.bgUrl))) {
|
||
document.getElementById('bgLayer').style.backgroundImage = '';
|
||
}
|
||
}
|
||
|
||
// Entfernt die 6 Inline-Vars (Rueckwechsel auf Preset / Reset).
|
||
function clearCustomTheme() {
|
||
const root = document.documentElement;
|
||
['--accent', '--bg-primary', '--bg-board', '--text-primary', '--text-secondary', '--text-muted']
|
||
.forEach(v => root.style.removeProperty(v));
|
||
}
|
||
|
||
// Schreibt die gespeicherten (oder Default-) Farben in die 6 Picker-Inputs.
|
||
function syncCustomPickers() {
|
||
const ct = settings.customTheme || {};
|
||
const set = (id, key) => { const el = document.getElementById(id); if (el) el.value = safeHex(ct[key], CUSTOM_DEFAULTS[key]); };
|
||
set('tbAccent', 'accent'); set('tbBg', 'bgPrimary'); set('tbBoard', 'bgBoard');
|
||
set('tbText', 'textPrimary'); set('tbTextSec', 'textSecondary'); set('tbTextMuted', 'textMuted');
|
||
}
|
||
|
||
// Eigenes Upload-Bild Quota-schonend verkleinern: auf die laengste Bildschirmkante
|
||
// (× devicePixelRatio, gedeckelt) herunterrechnen und als WebP neu kodieren. Das spart
|
||
// gegenueber dem rohen Base64-Upload locker den Grossteil der chrome.storage.local-Quota.
|
||
// Greift nur beim lokalen Upload (data:-URL ist same-origin, Canvas wird nicht getainted);
|
||
// https-Hintergruende liegen remote und kosten keine Quota.
|
||
function downscaleBgImage(dataUrl) {
|
||
const MAX_DIM = Math.min(2560, Math.round(Math.max(screen.width, screen.height) * (window.devicePixelRatio || 1)));
|
||
const QUALITY = 0.82;
|
||
return new Promise((resolve, reject) => {
|
||
const img = new Image();
|
||
img.onload = () => {
|
||
const scale = Math.min(1, MAX_DIM / Math.max(img.naturalWidth, img.naturalHeight));
|
||
const w = Math.max(1, Math.round(img.naturalWidth * scale));
|
||
const h = Math.max(1, Math.round(img.naturalHeight * scale));
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = w;
|
||
canvas.height = h;
|
||
const ctx = canvas.getContext('2d');
|
||
if (!ctx) { resolve(dataUrl); return; } // kein 2D-Context -> Original behalten
|
||
ctx.drawImage(img, 0, 0, w, h);
|
||
// WebP wo verfuegbar (Chrome/Opera/FF142+); sonst faellt toDataURL auf PNG zurueck -> dann JPEG
|
||
let out = canvas.toDataURL('image/webp', QUALITY);
|
||
if (!out.startsWith('data:image/webp')) out = canvas.toDataURL('image/jpeg', QUALITY);
|
||
resolve(out);
|
||
};
|
||
img.onerror = () => reject(new Error('image decode failed'));
|
||
img.src = dataUrl;
|
||
});
|
||
}
|
||
|
||
// ---- ACCORDION ----
|
||
function initAccordion() {
|
||
const defaultOpen = new Set(['widgets']);
|
||
const sections = document.querySelectorAll('.settings-section[data-section]');
|
||
|
||
sections.forEach(section => {
|
||
const name = section.dataset.section;
|
||
const title = section.querySelector('.settings-section-title');
|
||
|
||
if (defaultOpen.has(name)) {
|
||
section.classList.add('open');
|
||
}
|
||
|
||
title.addEventListener('click', () => {
|
||
section.classList.toggle('open');
|
||
});
|
||
|
||
title.addEventListener('keydown', e => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
section.classList.toggle('open');
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// ---- PAPIERKORB ----
|
||
/**
|
||
* Formatiert einen deletedAt-Timestamp lokalisiert (folgt der aktiven UI-Sprache).
|
||
* @param {number} ts - Millisekunden-Timestamp
|
||
* @returns {string}
|
||
*/
|
||
function formatTrashDate(ts) {
|
||
const locale = I18n.currentLang === 'de' ? 'de-DE' : 'en-US';
|
||
return new Date(ts).toLocaleDateString(locale, { year: 'numeric', month: '2-digit', day: '2-digit' });
|
||
}
|
||
|
||
/**
|
||
* Rendert den Papierkorb in die Settings-Section. Wird bei jedem openSettings()
|
||
* sowie nach jeder Trash-Mutation aufgerufen. Baut DOM ohne innerHTML (XSS-frei,
|
||
* Titel kommen aus User-/Importdaten).
|
||
*/
|
||
function renderTrash() {
|
||
const listEl = document.getElementById('trashList');
|
||
const actionsRow = document.getElementById('trashActionsRow');
|
||
if (!listEl) return;
|
||
listEl.replaceChildren();
|
||
|
||
if (trash.length === 0) {
|
||
const empty = document.createElement('div');
|
||
empty.className = 'trash-empty';
|
||
empty.textContent = t('trash.empty');
|
||
listEl.appendChild(empty);
|
||
if (actionsRow) actionsRow.classList.add('hidden');
|
||
return;
|
||
}
|
||
if (actionsRow) actionsRow.classList.remove('hidden');
|
||
|
||
// Neueste zuerst.
|
||
const sorted = [...trash].sort((a, b) => b.deletedAt - a.deletedAt);
|
||
sorted.forEach(entry => listEl.appendChild(createTrashItemEl(entry)));
|
||
}
|
||
|
||
/**
|
||
* Baut eine einzelne Papierkorb-Zeile.
|
||
* @param {Object} entry - trash-Eintrag { item, type, originBoardId, deletedAt }
|
||
* @returns {HTMLElement}
|
||
*/
|
||
function createTrashItemEl(entry) {
|
||
const row = document.createElement('div');
|
||
row.className = 'trash-item';
|
||
|
||
const info = document.createElement('div');
|
||
info.className = 'trash-item-info';
|
||
|
||
const titleLine = document.createElement('span');
|
||
titleLine.className = 'trash-item-title';
|
||
const badge = document.createElement('span');
|
||
badge.className = 'trash-item-badge';
|
||
badge.textContent = entry.type === 'board' ? t('trash.type.board') : t('trash.type.bookmark');
|
||
const titleText = document.createTextNode(entry.item && entry.item.title ? entry.item.title : '');
|
||
titleLine.append(badge, titleText);
|
||
|
||
const meta = document.createElement('span');
|
||
meta.className = 'trash-item-meta';
|
||
let metaText = t('trash.deleted_at', { date: formatTrashDate(entry.deletedAt) });
|
||
if (entry.type === 'bookmark') {
|
||
const origin = entry.originBoardId ? boards.find(b => b.id === entry.originBoardId) : null;
|
||
metaText += origin
|
||
? ' · ' + t('trash.from_board', { board: origin.title })
|
||
: ' · ' + t('trash.from_board_unknown');
|
||
}
|
||
meta.textContent = metaText;
|
||
|
||
info.append(titleLine, meta);
|
||
|
||
const actions = document.createElement('div');
|
||
actions.className = 'trash-item-actions';
|
||
|
||
const btnRestore = document.createElement('button');
|
||
btnRestore.className = 'btn-small';
|
||
btnRestore.textContent = t('trash.restore');
|
||
btnRestore.title = t('trash.restore_title');
|
||
btnRestore.addEventListener('click', () => { btnRestore.disabled = true; restoreTrashEntry(entry); });
|
||
|
||
const btnForever = document.createElement('button');
|
||
btnForever.className = 'btn-danger';
|
||
btnForever.textContent = t('trash.delete_forever');
|
||
btnForever.title = t('trash.delete_forever_title');
|
||
btnForever.addEventListener('click', () => deleteTrashEntryForever(entry));
|
||
|
||
actions.append(btnRestore, btnForever);
|
||
row.append(info, actions);
|
||
return row;
|
||
}
|
||
|
||
/**
|
||
* Stellt einen Papierkorb-Eintrag wieder her.
|
||
* Bookmark -> in originBoardId (falls noch vorhanden), sonst in die Inbox (ensureInboxBoard).
|
||
* Board -> zurueck in boards[].
|
||
* @param {Object} entry
|
||
*/
|
||
async function restoreTrashEntry(entry) {
|
||
// Re-Entry-Guard: ein zweiter Klick (z.B. waehrend der Inbox-Alert offen ist) wuerde sonst
|
||
// das Item ein zweites Mal einfuegen (Duplikat). Nach der ersten Ausfuehrung ist entry
|
||
// nicht mehr in trash[]; btnRestore wird zusaetzlich beim ersten Klick disabled.
|
||
if (!trash.includes(entry)) return;
|
||
if (entry.type === 'board') {
|
||
// Ganzes Board zurueck (inkl. blurred). Falls die id schon existiert (Edge-Case),
|
||
// neue uid vergeben, damit nichts ueberschrieben wird.
|
||
const restored = structuredClone(entry.item);
|
||
if (boards.some(b => b.id === restored.id)) restored.id = uid();
|
||
boards.push(restored);
|
||
await saveBoards();
|
||
} else {
|
||
const restored = structuredClone(entry.item);
|
||
let target = entry.originBoardId ? boards.find(b => b.id === entry.originBoardId) : null;
|
||
let toInbox = false;
|
||
if (!target) {
|
||
// Ursprungs-Board weg -> in die Inbox (Page-Wrapper ensureInboxBoard aus Phase 1).
|
||
target = await ensureInboxBoard();
|
||
toInbox = true;
|
||
}
|
||
target.bookmarks.push(restored);
|
||
await saveBoards();
|
||
if (toInbox) {
|
||
await HellionDialog.alert(t('trash.restored_to_inbox'), { type: 'info', title: t('trash.restored_to_inbox.title') });
|
||
}
|
||
}
|
||
trash = trash.filter(e => e !== entry);
|
||
await saveTrash();
|
||
renderTrash();
|
||
renderBoards();
|
||
}
|
||
|
||
/**
|
||
* Loescht einen einzelnen Papierkorb-Eintrag endgueltig (mit Confirm).
|
||
* @param {Object} entry
|
||
*/
|
||
async function deleteTrashEntryForever(entry) {
|
||
const ok = await HellionDialog.confirm(
|
||
t('trash.delete_forever_confirm'),
|
||
{ type: 'danger', title: t('trash.delete_forever_confirm.title'), confirmText: t('trash.delete_forever') }
|
||
);
|
||
if (!ok) return;
|
||
trash = trash.filter(e => e !== entry);
|
||
await saveTrash();
|
||
renderTrash();
|
||
}
|
||
|
||
/**
|
||
* Leert den gesamten Papierkorb (mit Confirm).
|
||
*/
|
||
async function emptyTrash() {
|
||
if (trash.length === 0) return;
|
||
const ok = await HellionDialog.confirm(
|
||
t('trash.empty_confirm', { count: trash.length }),
|
||
{ type: 'danger', title: t('trash.empty_confirm.title'), confirmText: t('trash.empty_btn') }
|
||
);
|
||
if (!ok) return;
|
||
trash = [];
|
||
await saveTrash();
|
||
renderTrash();
|
||
}
|
||
|
||
// ---- APPLY SETTINGS ----
|
||
function applySettings() {
|
||
const body = document.body;
|
||
body.classList.toggle('compact', settings.compact);
|
||
body.classList.toggle('shorten-titles', settings.shortenTitles);
|
||
body.classList.toggle('show-desc', settings.showDesc);
|
||
|
||
document.getElementById('settingCompact').checked = settings.compact;
|
||
document.getElementById('settingShorten').checked = settings.shortenTitles;
|
||
document.getElementById('settingNewTab').checked = settings.newTab;
|
||
document.getElementById('settingShowDesc').checked = settings.showDesc;
|
||
document.getElementById('settingHideExtra').checked = settings.hideExtra;
|
||
document.getElementById('settingVisibleCount').value = String(settings.visibleCount);
|
||
document.getElementById('visibleCountRow').classList.toggle('dim', !settings.hideExtra);
|
||
|
||
// showSearch: undefined (alter Save) → true
|
||
if (settings.showSearch === undefined) settings.showSearch = true;
|
||
const searchWrapper = document.getElementById('searchBarWrapper');
|
||
if (searchWrapper) searchWrapper.classList.toggle('hidden', !settings.showSearch);
|
||
const showSearchEl = document.getElementById('settingShowSearch');
|
||
if (showSearchEl) showSearchEl.checked = settings.showSearch;
|
||
|
||
// Image-Ref Toggle
|
||
if (settings.imageRefEnabled === undefined) settings.imageRefEnabled = false;
|
||
const imgRefCheckbox = document.getElementById('settingImageRef');
|
||
if (imgRefCheckbox) imgRefCheckbox.checked = settings.imageRefEnabled;
|
||
const imgRefBtn = document.querySelector('[data-action="image-ref"]');
|
||
if (imgRefBtn) imgRefBtn.classList.toggle('hidden', !settings.imageRefEnabled);
|
||
|
||
// A11y: aria-checked aller role=switch-Toggles an den realen checked-State angleichen
|
||
document.querySelectorAll('.toggle input[role="switch"]').forEach(cb => {
|
||
cb.setAttribute('aria-checked', cb.checked ? 'true' : 'false');
|
||
});
|
||
|
||
// Toolbar-Position
|
||
document.body.classList.toggle('toolbar-left', settings.toolbarPos === 'left');
|
||
const toolbarPosEl = document.getElementById('settingToolbarPos');
|
||
if (toolbarPosEl) toolbarPosEl.value = settings.toolbarPos || 'right';
|
||
|
||
// Sprache (Dropdown-Wert setzen — I18n.init() übernimmt die eigentliche Anwendung)
|
||
const langEl = document.getElementById('settingLanguage');
|
||
if (langEl) langEl.value = settings.language || 'auto';
|
||
|
||
if (settings.theme === 'custom') {
|
||
applyCustomTheme(settings.customTheme);
|
||
} else {
|
||
applyTheme(settings.theme || 'nebula', !!settings.bgUrl);
|
||
}
|
||
|
||
if (settings.bgUrl && isValidBgUrl(settings.bgUrl)) {
|
||
document.getElementById('bgLayer').style.backgroundImage = `url('${settings.bgUrl}')`;
|
||
} else if (settings.bgUrl) {
|
||
settings.bgUrl = '';
|
||
}
|
||
}
|
||
|
||
// ---- BIND EVENTS ----
|
||
function bindSettingsEvents() {
|
||
// Settings Panel
|
||
document.getElementById('settingsOverlay').addEventListener('click', closeSettings);
|
||
document.getElementById('btnCloseSettings').addEventListener('click', closeSettings);
|
||
document.getElementById('btnSettings').addEventListener('click', openSettings);
|
||
|
||
// Theme Modal
|
||
document.getElementById('btnTheme').addEventListener('click', openThemeModal);
|
||
document.getElementById('btnCloseTheme').addEventListener('click', closeThemeModal);
|
||
document.getElementById('themeOverlay').addEventListener('click', e => {
|
||
if (e.target === document.getElementById('themeOverlay')) closeThemeModal();
|
||
});
|
||
|
||
// Theme-Picker (Cards im Theme-Modal)
|
||
const themeCards = document.querySelectorAll('.theme-card');
|
||
function selectThemeCard(card) {
|
||
const name = card.dataset.value;
|
||
if (!name) return Promise.resolve();
|
||
|
||
// Custom: VOR dem name===settings.theme-Guard, damit ein Re-Klick das Panel wieder oeffnet.
|
||
if (name === 'custom') {
|
||
settings.theme = 'custom';
|
||
if (!settings.customTheme) settings.customTheme = { ...CUSTOM_DEFAULTS };
|
||
themeCards.forEach(c => c.setAttribute('aria-pressed', c === card ? 'true' : 'false'));
|
||
applyCustomTheme(settings.customTheme); // setzt data-theme + Inline-Vars; bgUrl UNANGETASTET (Koexistenz)
|
||
syncCustomPickers();
|
||
document.getElementById('themeBuilderPanel').classList.remove('hidden');
|
||
return saveSettings();
|
||
}
|
||
|
||
if (name === settings.theme) return Promise.resolve();
|
||
settings.theme = name;
|
||
settings.bgUrl = '';
|
||
document.getElementById('bgUrlInput').value = '';
|
||
clearCustomTheme(); // Inline-Vars weg beim Rueckwechsel auf ein Preset
|
||
document.getElementById('themeBuilderPanel').classList.add('hidden');
|
||
// aria-pressed synchron halten — applyTheme/switchTheme pflegt nur die .active-Klasse, nicht ARIA
|
||
themeCards.forEach(c => c.setAttribute('aria-pressed', c === card ? 'true' : 'false'));
|
||
switchTheme(name); // WICHTIG: switchTheme aus Phase 4 (View-Transition-Wrapper), NICHT applyTheme direkt — sonst geht der Theme-Fade verloren
|
||
return saveSettings();
|
||
}
|
||
themeCards.forEach(card => {
|
||
card.addEventListener('click', () => selectThemeCard(card));
|
||
card.addEventListener('keydown', e => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
selectThemeCard(card);
|
||
}
|
||
});
|
||
});
|
||
|
||
// Theme-Builder Picker
|
||
const TB_PICKERS = [['tbAccent', 'accent'], ['tbBg', 'bgPrimary'], ['tbBoard', 'bgBoard'],
|
||
['tbText', 'textPrimary'], ['tbTextSec', 'textSecondary'], ['tbTextMuted', 'textMuted']];
|
||
TB_PICKERS.forEach(([id, key]) => {
|
||
const el = document.getElementById(id);
|
||
if (!el) return;
|
||
el.addEventListener('input', () => { // live waehrend des Ziehens
|
||
if (!settings.customTheme) settings.customTheme = { ...CUSTOM_DEFAULTS };
|
||
settings.customTheme[key] = el.value;
|
||
settings.theme = 'custom';
|
||
applyCustomTheme(settings.customTheme);
|
||
});
|
||
el.addEventListener('change', () => saveSettings()); // persistiert beim Loslassen/Schliessen
|
||
});
|
||
|
||
const tbReset = document.getElementById('tbReset');
|
||
if (tbReset) {
|
||
tbReset.addEventListener('click', async () => {
|
||
settings.customTheme = { ...CUSTOM_DEFAULTS };
|
||
applyCustomTheme(settings.customTheme);
|
||
syncCustomPickers();
|
||
await saveSettings();
|
||
});
|
||
}
|
||
|
||
// Accordion initialisieren
|
||
initAccordion();
|
||
|
||
// Toggles
|
||
const toggleMap = {
|
||
settingCompact: v => { settings.compact = v; document.body.classList.toggle('compact', v); },
|
||
settingShorten: v => { settings.shortenTitles = v; document.body.classList.toggle('shorten-titles', v); },
|
||
settingNewTab: v => { settings.newTab = v; },
|
||
settingShowDesc: v => { settings.showDesc = v; document.body.classList.toggle('show-desc', v); },
|
||
settingHideExtra: v => {
|
||
settings.hideExtra = v;
|
||
document.getElementById('visibleCountRow').classList.toggle('dim', !v);
|
||
renderBoards();
|
||
},
|
||
settingShowSearch: v => {
|
||
settings.showSearch = v;
|
||
document.getElementById('searchBarWrapper').classList.toggle('hidden', !v);
|
||
},
|
||
settingImageRef: v => {
|
||
settings.imageRefEnabled = v;
|
||
const imgBtn = document.querySelector('[data-action="image-ref"]');
|
||
if (imgBtn) imgBtn.classList.toggle('hidden', !v);
|
||
}
|
||
};
|
||
|
||
Object.entries(toggleMap).forEach(([id, fn]) => {
|
||
const el = document.getElementById(id);
|
||
if (el) {
|
||
el.addEventListener('change', async e => {
|
||
e.target.setAttribute('aria-checked', e.target.checked ? 'true' : 'false');
|
||
fn(e.target.checked);
|
||
await saveSettings();
|
||
});
|
||
}
|
||
});
|
||
|
||
document.getElementById('settingVisibleCount').addEventListener('change', async e => {
|
||
settings.visibleCount = parseInt(e.target.value, 10);
|
||
await saveSettings();
|
||
renderBoards();
|
||
});
|
||
|
||
// Background URL (im Theme-Modal)
|
||
document.getElementById('btnChangeBg').addEventListener('click', () => {
|
||
// toggle() liefert true, wenn 'hidden' jetzt gesetzt ist -> Hinweis exakt parallel schalten
|
||
const isNowHidden = document.getElementById('bgInputRow').classList.toggle('hidden');
|
||
document.getElementById('bgUrlHint').classList.toggle('hidden', isNowHidden);
|
||
});
|
||
document.getElementById('btnApplyBg').addEventListener('click', async () => {
|
||
const url = document.getElementById('bgUrlInput').value.trim();
|
||
if (url && !isValidBgUrl(url)) {
|
||
await HellionDialog.alert(t('settings.bg_invalid_url'), { type: 'danger', title: t('settings.bg_invalid_url.title') });
|
||
return;
|
||
}
|
||
settings.bgUrl = url;
|
||
document.getElementById('bgLayer').style.backgroundImage = url ? `url('${url}')` : '';
|
||
await saveSettings();
|
||
document.getElementById('bgInputRow').classList.add('hidden');
|
||
});
|
||
|
||
// Background File Upload (im Theme-Modal)
|
||
document.getElementById('btnBgFile').addEventListener('click', () => {
|
||
document.getElementById('bgFileInput').click();
|
||
});
|
||
document.getElementById('bgFileInput').addEventListener('change', e => {
|
||
const file = e.target.files[0];
|
||
if (!file) return;
|
||
const reader = new FileReader();
|
||
reader.onload = async ev => {
|
||
if (!isValidBgUrl(ev.target.result)) return;
|
||
let bg = ev.target.result;
|
||
try {
|
||
bg = await downscaleBgImage(bg); // Quota-Schutz: verkleinern + WebP
|
||
} catch {
|
||
// Downscale fehlgeschlagen -> Original-Upload nutzen (besser als gar kein Bild)
|
||
}
|
||
settings.bgUrl = bg;
|
||
document.getElementById('bgLayer').style.backgroundImage = `url('${bg}')`;
|
||
await saveSettings();
|
||
};
|
||
reader.onerror = () => {
|
||
HellionDialog.alert(t('settings.file_read_error'), { type: 'danger', title: t('settings.file_read_error.title') });
|
||
};
|
||
reader.readAsDataURL(file);
|
||
});
|
||
|
||
// Sprach-Einstellung
|
||
const languageEl = document.getElementById('settingLanguage');
|
||
if (languageEl) {
|
||
languageEl.value = settings.language || 'auto';
|
||
languageEl.addEventListener('change', async (e) => {
|
||
settings.language = e.target.value;
|
||
setLanguage(e.target.value);
|
||
await saveSettings();
|
||
});
|
||
}
|
||
|
||
// Toolbar-Position Setting
|
||
const toolbarPosEl = document.getElementById('settingToolbarPos');
|
||
if (toolbarPosEl) {
|
||
toolbarPosEl.value = settings.toolbarPos || 'right';
|
||
toolbarPosEl.addEventListener('change', async (e) => {
|
||
settings.toolbarPos = e.target.value;
|
||
document.body.classList.toggle('toolbar-left', e.target.value === 'left');
|
||
await saveSettings();
|
||
});
|
||
}
|
||
|
||
// Onboarding wiederholen
|
||
document.getElementById('btnRestartOnboarding').addEventListener('click', () => {
|
||
closeSettings();
|
||
Onboarding.start();
|
||
});
|
||
|
||
// Papierkorb leeren
|
||
const btnEmptyTrash = document.getElementById('btnEmptyTrash');
|
||
if (btnEmptyTrash) btnEmptyTrash.addEventListener('click', emptyTrash);
|
||
|
||
// Reset All
|
||
document.getElementById('btnResetAll').addEventListener('click', async () => {
|
||
const ok = await HellionDialog.confirm(
|
||
t('settings.reset_confirm'),
|
||
{ type: 'danger', title: t('settings.reset_confirm.title'), confirmText: t('settings.reset_confirm.button') }
|
||
);
|
||
if (!ok) return;
|
||
boards = [];
|
||
trash = [];
|
||
settings = { compact: false, shortenTitles: false, newTab: true, showDesc: false,
|
||
hideExtra: false, visibleCount: 10, bgUrl: '', theme: 'nebula',
|
||
showSearch: true, searchEngine: 'google', toolbarPos: 'right',
|
||
imageRefEnabled: false, language: 'auto', customTheme: null };
|
||
clearCustomTheme();
|
||
await saveBoards();
|
||
await saveTrash();
|
||
await saveSettings();
|
||
setLanguage('auto');
|
||
applySettings();
|
||
renderBoards();
|
||
closeSettings();
|
||
});
|
||
}
|