impl

Author: mvorisek

js/src/Helper/elementRemoveObserver.js

@@ -59,8 +59,10 @@ function handleObserverRecords(elem, mutationRecords) {
 
     const removedElems = new Set();
     for (const mutationRecord of mutationRecords) {
-        for (const removedElem of observedChildren.intersection(mutationRecord.removedNodes)) {
-            removedElems.add(removedElem);
+        for (const removedNode of mutationRecord.removedNodes) {
+            if (observedChildren.has(removedNode)) {
+                removedElems.add(removedNode);
+            }
         }
     }
 

js/src/Helper/elementTeleportObserver.js

@@ -1,7 +1,66 @@
+/**
+ * @param {Set<HTMLElement>} elems
+ */
+function handleElementsTeleport(elems) {
+    const teleportTargets = new Map();
+    for (const elem of elems) {
+        const teleportTo = elem.dataset.atk4TeleportTo;
+        if (!teleportTo) {
+            continue;
+        }
+
+        if (!teleportTargets.has(teleportTo)) {
+            const targets = window.document.querySelectorAll(teleportTo);
+            if (targets.length !== 1) {
+                throw new Error('Target DOM element not found');
+            }
+
+            teleportTargets.set(teleportTo, targets[0]);
+        }
+
+        const target = teleportTargets.get(teleportTo);
+        if (elem.parentElement === target) {
+            continue;
+        }
+
+        const elemId = elem.id;
+        if (!elemId) {
+            throw new Error('DOM element ID is required');
+        }
+
+        for (const elemOrig of target.querySelectorAll(':scope > *[id="' + CSS.escape(elemId) + '"]')) {
+            elemOrig.remove();
+        }
+
+        target.append(elem);
+    }
+}
+
 function handleObserverRecords(mutationRecords) {
+    const elems = new Set();
+    for (const mutationRecord of mutationRecords) {
+        for (const addedNode of mutationRecord.addedNodes) {
+            if (addedNode instanceof Element) {
+                if (addedNode.matches('*[data-atk4-teleport-to]')) {
+                    elems.add(addedNode);
+                }
+                for (const elem of addedNode.querySelectorAll('*[data-atk4-teleport-to]')) {
+                    elems.add(elem);
+                }
+            }
+        }
+        if (mutationRecord.type === 'attributes') {
+            elems.add(mutationRecord.target);
+        }
+    }
+
+    handleElementsTeleport(elems);
 }
 
 const observer = new MutationObserver((mutationRecords) => handleObserverRecords(mutationRecords));
+observer.observe(window.document, { subtree: true, childList: true, attributeFilter: ['data-atk4-teleport-to'] });
+
+handleElementsTeleport(new Set(window.document.querySelectorAll('*[data-atk4-teleport-to]')));
 
 export default {
     handleMutationQueueImmediately: function () { // TODO remove this method once evalJsCode() in apiService is called at least thru JS microtask

js/src/Service/apiService.js

@@ -103,12 +103,6 @@ class ApiService {
                     }
                     responseBody = null;
 
-                    // prevent modal duplication
-                    const $modalsContainers = $('body > .ui.dimmer.modals.page, body > .atk-side-panels');
-                    $(responseElement).find('.ui.modal[id], .atk-right-panel[id]').each((i, e) => {
-                        $modalsContainers.find('#' + e.id).remove();
-                    });
-
                     if ($target.hasClass('ui modal') || $target.hasClass('atk-right-panel')) {
                         $.each([...$target[0].childNodes], (i, node) => {
                             if (node instanceof Element && node.classList.contains('ui') && node.classList.contains('dimmer')) {

js/src/Service/modalService.js

@@ -101,16 +101,6 @@ class ModalService {
                 method: 'GET',
                 obj: $content,
                 onComplete: function (response, content) {
-                    // prevent modal duplication
-                    // TODO deduplicate in favor of apiService.js code only
-                    if (response.html) {
-                        const responseBody = new DOMParser().parseFromString('<body>' + response.html.trim() + '</body>', 'text/html').body;
-                        const $modalsContainers = $('body > .ui.dimmer.modals.page, body > .atk-side-panels');
-                        $(responseBody.childNodes[0]).find('.ui.modal[id], .atk-right-panel[id]').each((i, e) => {
-                            $modalsContainers.find('#' + e.id).remove();
-                        });
-                    }
-
                     const result = content.html(response.html);
                     if (result.length === 0) {
                         // TODO this if should be removed