RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modal: use mutation observer 

Signed-off-by: Varun Patil <varunpatil@ucla.edu>
pull/579/head
Varun Patil 2023-04-16 17:01:09 -07:00
parent 265c0f795c
commit 51c62cd3b2
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/modal/Modal.vue
View File

@ -47,23 +47,25 @@ export default defineComponent({
isSidebarShown: false,
sidebarWidth: 400,
trapElements: [],
_mutationObserver: null,
}),
beforeMount() {
if (this.sidebar) {
subscribe("memories:sidebar:opened", this.handleAppSidebarOpen);
subscribe("memories:sidebar:closed", this.handleAppSidebarClose);
window.addEventListener("DOMNodeInserted", this.handlePopover);
}
this._mutationObserver = new MutationObserver(this.handleBodyMutation);
this._mutationObserver.observe(document.body, { childList: true });
},
beforeDestroy() {
if (this.sidebar) {
unsubscribe("memories:sidebar:opened", this.handleAppSidebarOpen);
unsubscribe("memories:sidebar:closed", this.handleAppSidebarClose);
window.removeEventListener("DOMNodeInserted", this.handlePopover);
globalThis.mSidebar.close();
}
this._mutationObserver.disconnect();
},
mounted() {
@ -84,13 +86,25 @@ export default defineComponent({
* Watch out for Popover inject in document root
* That way we can adjust the focusTrap
*/
handlePopover(event) {
if (
event.target?.classList &&
event.target.classList.contains("v-popper__popper")
) {
this.trapElements.push(event.target);
}
handleBodyMutation(mutations: MutationRecord[]) {
const test = (node: HTMLElement) =>
node?.classList?.contains("v-popper__popper");
mutations.forEach((mutation) => {
if (mutation.type === "childList") {
Array.from(mutation.addedNodes)
.filter(test)
.forEach((node) => this.trapElements.push(node));
Array.from(mutation.removedNodes)
.filter(test)
.forEach(
(node) =>
(this.trapElements = this.trapElements.filter(
(el) => el !== node
))
);
}
});
},
handleAppSidebarOpen() {