impl atk.elementRemoveObserver

js/src/Helper/elementRemoveObserver.js

@@ -0,0 +1,105 @@
+const observerByElement = new Map();
+const observedChildrenByElement = new Map();
+const removeHandlersByElement = new Map();
+
+function handleElementRemove(elem) {
+    const observedChildren = observedChildrenByElement.get(elem) ?? [];
+    const removeHandlers = removeHandlersByElement.get(elem) ?? [];
+
+    removeObserverIfUnused(elem, true);
+
+    for (const child of observedChildren) {
+        handleElementRemove(child);
+    }
+
+    for (const handler of removeHandlers) {
+        handler();
+    }
+}
+
+function addObserverToParentElement(elem) {
+    const parentElem = elem.parentElement;
+    if (parentElem === null) {
+        return;
+    }
+
+    if (!observerByElement.has(parentElem)) {
+        addObserverToParentElement(parentElem);
+
+        const observer = new MutationObserver((mutationRecords) => {
+            for (const mutationRecord of mutationRecords) {
+                if (mutationRecord.removedNodes.length > 0) {
+                    const removedNodes = observedChildrenByElement.get(parentElem).intersection(mutationRecord.removedNodes);
+                    for (const removedNode of removedNodes) {
+                        handleElementRemove(removedNode);
+                    }
+                }
+            }
+        });
+        observer.observe(parentElem, { childList: true, characterData: false });
+
+        observerByElement.set(parentElem, observer);
+        observedChildrenByElement.set(parentElem, new Set());
+    }
+
+    observedChildrenByElement.get(parentElem).add(elem);
+}
+
+function removeObserverIfUnused(elem, force = false) {
+    let updated = false;
+
+    if (removeHandlersByElement.has(elem)) {
+        if (!force && removeHandlersByElement.get(elem).size !== 0) {
+            return;
+        }
+
+        removeHandlersByElement.delete(elem);
+
+        updated = true;
+    }
+
+    if (observerByElement.has(elem)) {
+        if (!force && observedChildrenByElement.get(elem).size !== 0) {
+            return;
+        }
+
+        const observer = observerByElement.get(elem);
+        observer.disconnect();
+        observerByElement.delete(elem);
+
+        observedChildrenByElement.delete(elem);
+
+        updated = true;
+    }
+
+    if (updated) {
+        const parentElem = elem.parentElement;
+        if (parentElem !== null) {
+            removeObserverIfUnused(parentElem);
+        }
+    }
+}
+
+export default {
+    /**
+     * @param {HTMLElement} element
+     */
+    addHandler: function (element, handler) {
+        addObserverToParentElement(element);
+
+        if (!removeHandlersByElement.has(element)) {
+            removeHandlersByElement.set(element, new Set());
+        }
+
+        removeHandlersByElement.get(element).add(handler);
+    },
+
+    /**
+     * @param {HTMLElement} element
+     */
+    removeHandler: function (element, handler) {
+        removeHandlersByElement.get(element).delete(handler);
+
+        removeObserverIfUnused(element);
+    },
+};

js/src/setupUtils.js

@@ -2,6 +2,7 @@ import $ from 'external/jquery';
 import mitt from 'mitt';
 import lodashDebounce from 'lodash/debounce';
 import atk from 'atk';
+import elementRemoveObserver from './Helper/elementRemoveObserver';
 import gridCheckboxHelper from './Helper/gridCheckboxHelper';
 import tableDropdownHelper from './Helper/tableDropdownHelper';
 import urlHelper from './Helper/urlHelper';
@@ -83,6 +84,7 @@ atk.utils = {
     },
 };
 
+atk.elementRemoveObserver = elementRemoveObserver;
 atk.gridCheckboxHelper = gridCheckboxHelper;
 atk.tableDropdownHelper = tableDropdownHelper;
 atk.urlHelper = urlHelper;