refactor(view-transitions): zentralen withViewTransition-Helper in state.js, Duplikate entfernt
This commit is contained in:
+2
-10
@@ -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() {
|
||||
|
||||
@@ -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
@@ -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
@@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user