feat(bm-import): Import-Modal mit View-Transition-Fade, Teardown in Closure
This commit is contained in:
@@ -4,6 +4,20 @@
|
||||
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 */
|
||||
@@ -196,16 +210,18 @@ const BrowserBookmarkImport = {
|
||||
overlay.appendChild(modal);
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
// Animation
|
||||
requestAnimationFrame(() => overlay.classList.add('active'));
|
||||
// View-Transition-Fade
|
||||
bmImportViewTransition(() => overlay.classList.add('active'));
|
||||
},
|
||||
|
||||
/** Schliesst das Modal */
|
||||
_closeModal() {
|
||||
const overlay = document.getElementById('bmImportOverlay');
|
||||
if (!overlay) return;
|
||||
bmImportViewTransition(() => {
|
||||
overlay.classList.remove('active');
|
||||
setTimeout(() => overlay.remove(), 250);
|
||||
overlay.remove();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user