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()
|
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();
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user