diff --git a/src/js/boards.js b/src/js/boards.js index 941e316..b856b8b 100644 --- a/src/js/boards.js +++ b/src/js/boards.js @@ -273,18 +273,10 @@ function bindBoardListEvents(list, board) { // reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. // Feature-Detection-Fallback (Firefox < 144): instant. function openModal(id) { - if (document.startViewTransition) { - document.startViewTransition(() => document.getElementById(id).classList.add('active')); - } else { - document.getElementById(id).classList.add('active'); - } + withViewTransition(() => document.getElementById(id).classList.add('active')); } function closeModal(id) { - if (document.startViewTransition) { - document.startViewTransition(() => document.getElementById(id).classList.remove('active')); - } else { - document.getElementById(id).classList.remove('active'); - } + withViewTransition(() => document.getElementById(id).classList.remove('active')); } function openAddBoardModal() { diff --git a/src/js/bookmark-import.js b/src/js/bookmark-import.js index dcaa56c..0ea80d6 100644 --- a/src/js/bookmark-import.js +++ b/src/js/bookmark-import.js @@ -4,20 +4,6 @@ via chrome.bookmarks.getTree() / browser.bookmarks.getTree() ============================================= */ -/** - * Fuehrt eine DOM-Mutation mit nativem View-Transition-Fade aus. - * Feature-Detection-Fallback (Firefox < 144): instant. - * reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. - * @param {Function} mutate - synchrone DOM-Mutation - */ -function bmImportViewTransition(mutate) { - if (document.startViewTransition) { - document.startViewTransition(mutate); - } else { - mutate(); - } -} - const BrowserBookmarkImport = { /** Initialisiert den Import-Button */ @@ -211,14 +197,14 @@ const BrowserBookmarkImport = { document.body.appendChild(overlay); // View-Transition-Fade - bmImportViewTransition(() => overlay.classList.add('active')); + withViewTransition(() => overlay.classList.add('active')); }, /** Schliesst das Modal */ _closeModal() { const overlay = document.getElementById('bmImportOverlay'); if (!overlay) return; - bmImportViewTransition(() => { + withViewTransition(() => { overlay.classList.remove('active'); overlay.remove(); }); diff --git a/src/js/dialog.js b/src/js/dialog.js index 272e12f..22ff77c 100644 --- a/src/js/dialog.js +++ b/src/js/dialog.js @@ -3,20 +3,6 @@ Custom Dialog System (ersetzt native alert/confirm) ============================================= */ -/** - * Fuehrt eine DOM-Mutation mit nativem View-Transition-Fade aus. - * Feature-Detection-Fallback (Firefox < 144): instant. - * reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. - * @param {Function} mutate - synchrone DOM-Mutation - */ -function dialogViewTransition(mutate) { - if (document.startViewTransition) { - document.startViewTransition(mutate); - } else { - mutate(); - } -} - const HellionDialog = { /** SVG-Icons je nach Dialog-Typ */ _icons: { @@ -79,7 +65,7 @@ const HellionDialog = { function cleanup(result) { document.removeEventListener('keydown', keyHandler); - dialogViewTransition(() => { + withViewTransition(() => { overlay.classList.remove('active'); overlay.remove(); }); @@ -125,7 +111,7 @@ const HellionDialog = { document.body.appendChild(overlay); // View-Transition uebernimmt das Fade; Fokus bleibt erhalten - dialogViewTransition(() => { + withViewTransition(() => { overlay.classList.add('active'); confirmBtn.focus(); }); diff --git a/src/js/settings.js b/src/js/settings.js index 5735039..86ca2ff 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -3,20 +3,6 @@ Settings Panel, Theme-Modal, Accordion, Toggles ============================================= */ -/** - * Fuehrt einen DOM-Mutationsschritt mit nativem View-Transition-Fade aus. - * Feature-Detection-Fallback fuer aeltere Browser (Firefox < 144): instant. - * reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. - * @param {Function} mutate - synchrone DOM-Mutation (Klassen-Toggle etc.) - */ -function withViewTransition(mutate) { - if (document.startViewTransition) { - document.startViewTransition(mutate); - } else { - mutate(); - } -} - // ---- SETTINGS PANEL ---- function openSettings() { withViewTransition(() => { @@ -53,11 +39,7 @@ function closeThemeModal() { */ function switchTheme(name) { const swap = () => applyTheme(name, false); // false: Theme-BG anwenden (kein User-bgUrl-Schutz hier noetig, bgUrl wurde geleert) - if (document.startViewTransition) { - document.startViewTransition(swap); - } else { - swap(); - } + withViewTransition(swap); } /** diff --git a/src/js/state.js b/src/js/state.js index d2db23e..4ca28c1 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -55,3 +55,14 @@ async function saveBoards() { async function saveSettings() { await Store.set('settings', settings); } + +// ---- VIEW TRANSITIONS ---- +// Fuehrt eine synchrone DOM-Mutation mit nativem View-Transition-Fade aus. +// Feature-Detection-Fallback (Firefox < 144): instant. reduced-motion kappt das Fade ueber den ungeschichteten @media-Block. +function withViewTransition(mutate) { + if (document.startViewTransition) { + document.startViewTransition(mutate); + } else { + mutate(); + } +}