From 60c8c7f63477bdf2da5c581d987b98d1bb817126 Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Thu, 4 Apr 2024 00:18:30 +0300
Subject: [PATCH] feat: added logic for displaying and hiding the xblock modal
 editing window

---
 cms/templates/container_editor.html | 43 +++++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)
diff --git a/cms/templates/container_editor.html b/cms/templates/container_editor.html
index cb7d6ddbf68a..c091e2500f48 100644
--- a/cms/templates/container_editor.html
+++ b/cms/templates/container_editor.html
@@ -93,6 +93,11 @@
     <%static:css group='style-vendor'/>
     <%static:css group='style-vendor-tinymce-content'/>
     <%static:css group='style-vendor-tinymce-skin'/>
+    <style>
+        html body {
+            background: transparent;
+        }
+    </style>
 
     % if uses_bootstrap:
       <link rel="stylesheet" href="${static.url(self.attr.main_css)}" type="text/css" media="all" />
@@ -132,7 +137,7 @@
     </script>
   </head>
 
-  <body class="${static.dir_rtl()} <%block name='bodyclass'></%block> lang_${LANGUAGE_CODE}">
+  <body class="${static.dir_rtl()} <%block name='bodyclass'></%block> lang_${LANGUAGE_CODE} view-container">
     <%block name="view_notes"></%block>
 
     <a class="nav-skip" href="#main">${_("Skip to main content")}</a>
@@ -181,8 +186,40 @@
 </div>
 
 <script>
-$( document ).ready(function() {
-    setTimeout(() => $(".button-edit").trigger("click"), 300)
+$(document).ready(function () {
+    // Serves to initialize the rendering of a xblock edit modal window.
+    setTimeout(() => $('.button-edit').trigger('click'), 300);
+
+    /**
+     * Callback function for the MutationObserver to handle mutations
+     * and send information when the modal window close logic is triggered.
+     *
+     * @callback mutationCallback
+     * @param {MutationRecord[]} mutations - The list of mutations detected by the observer.
+     */
+    const xblockEditModalObserver = new MutationObserver((mutations) => {
+        const modalClassName = 'wrapper-modal-window-edit-xblock';
+        // The index of the current modal window in the removed nodes.
+        const currentModalIndex = 1;
+
+        // Filter mutations to find removed nodes that match the current modal class name.
+        const editModalRemovedNodes = mutations
+            .filter(({ removedNodes }) => {
+                return removedNodes.length > 0 && removedNodes[currentModalIndex].className.includes(modalClassName)
+            });
+
+        // If removed nodes match the current modal, post a message to close the edit modal.
+        if (editModalRemovedNodes.length > 0) {
+            window.parent.postMessage({ method: 'close_edit_modal', msg: 'Message from edit iframe modal' }, '*');
+        }
+    })
+
+    xblockEditModalObserver.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['class']
+    });
 });
 </script>
 
