feat(bm-import): Import-Modal mit View-Transition-Fade, Teardown in Closure

This commit is contained in:
2026-06-13 20:32:07 +02:00
parent abddc59f49
commit 278eda7d69
+20 -4
View File
@@ -4,6 +4,20 @@
via chrome.bookmarks.getTree() / browser.bookmarks.getTree() 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 = { const BrowserBookmarkImport = {
/** Initialisiert den Import-Button */ /** Initialisiert den Import-Button */
@@ -196,16 +210,18 @@ const BrowserBookmarkImport = {
overlay.appendChild(modal); overlay.appendChild(modal);
document.body.appendChild(overlay); document.body.appendChild(overlay);
// Animation // View-Transition-Fade
requestAnimationFrame(() => overlay.classList.add('active')); bmImportViewTransition(() => overlay.classList.add('active'));
}, },
/** Schliesst das Modal */ /** Schliesst das Modal */
_closeModal() { _closeModal() {
const overlay = document.getElementById('bmImportOverlay'); const overlay = document.getElementById('bmImportOverlay');
if (!overlay) return; if (!overlay) return;
overlay.classList.remove('active'); bmImportViewTransition(() => {
setTimeout(() => overlay.remove(), 250); overlay.classList.remove('active');
overlay.remove();
});
}, },
/** /**