refactor(view-transitions): zentralen withViewTransition-Helper in state.js, Duplikate entfernt

This commit is contained in:
2026-06-13 20:42:07 +02:00
parent 6004203339
commit 87cd070beb
5 changed files with 18 additions and 61 deletions
+2 -10
View File
@@ -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() {
+2 -16
View File
@@ -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();
});
+2 -16
View File
@@ -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();
});
+1 -19
View File
@@ -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);
}
/**
+11
View File
@@ -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();
}
}