refactor: corrected xblock dropdown menu

openedx · Nov 15, 2024 · cae1f67 · cae1f67
1 parent 29add8c
commit cae1f67
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 29 deletions.
diff --git a/cms/static/js/base.js b/cms/static/js/base.js
@@ -76,20 +76,6 @@ function(
             $('.nav-dd .nav-item .wrapper-nav-sub').removeClass('is-shown');
             $('.nav-dd .nav-item .title').removeClass('is-selected');
             $('.custom-dropdown .dropdown-options').hide();
-
-            try {
-                window.parent.postMessage(
-                    {
-                        type: 'toggleDropdownMenu',
-                        message: 'Sends a message when the dropdown menu is closed',
-                        payload: {
-                            subMenuHeight: 0,
-                        }
-                    }, document.referrer
-                );
-            } catch (e) {
-                console.error(e);
-            }
         });
 
         $('.nav-dd .nav-item, .filterable-column .nav-item').click(function(e) {

diff --git a/cms/static/js/views/container.js b/cms/static/js/views/container.js
@@ -74,6 +74,7 @@ function($, _, XBlockView, ModuleUtils, gettext, StringUtils, NotificationView)
                         window.parent.postMessage(
                             {
                                 type: 'refreshPositions',
+                                message: 'Refresh positions of all xblocks',
                                 payload: {}
                             }, document.referrer
                         );

diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js
@@ -387,11 +387,13 @@ function($, _, Backbone, gettext, BasePage,
 
         editXBlock: function(event, options) {
             event.preventDefault();
+            var isAccessButton = event.currentTarget.className === 'access-button';
             try {
-                if (this.options.isIframeEmbed && event.currentTarget.className === 'access-button') {
+                if (this.options.isIframeEmbed && isAccessButton) {
                     return window.parent.postMessage(
                         {
                             type: 'manageXBlockAccess',
+                            message: 'Open the access editor for the XBlock',
                             payload: {
                                 id: this.findXBlockElement(event.target).data('locator'),
                                 targetElementClassName: event.currentTarget.className,
@@ -423,6 +425,7 @@ function($, _, Backbone, gettext, BasePage,
                             return window.parent.postMessage(
                                 {
                                     type: 'newXBlockEditor',
+                                    message: 'Open the new XBlock editor',
                                     payload: {
                                         url: pathToNewXBlockEditor,
                                     }
@@ -483,21 +486,18 @@ function($, _, Backbone, gettext, BasePage,
             // not present yet during the domReady event, we have to handle displaying it ourselves.
             subMenu.classList.toggle('is-shown');
 
-            try {
-                if (this.options.isIframeEmbed) {
-                    window.parent.postMessage(
-                        {
-                            type: 'toggleDropdownMenu',
-                            message: 'Sends a message when the dropdown menu is toggled',
-                            payload: {
-                                subMenuHeight: subMenu.offsetHeight,
-                            }
-                        }, document.referrer
-                    );
-                }
-            } catch (e) {
-                console.error(e);
+            // Calculate the viewport height and the dropdown menu height.
+            // Check if the dropdown would overflow beyond the iframe height based on the user's click position.
+            // If the dropdown overflows, adjust its position to display above the click point.
+            const courseUnitXBlockIframeHeight = window.innerHeight;
+            const courseXBlockDropdownHeight = subMenu.offsetHeight;
+            const clickYPosition = event.clientY;
+
+            if ((courseXBlockDropdownHeight + clickYPosition) > courseUnitXBlockIframeHeight) {
+                // Move the dropdown menu upward to prevent it from overflowing out of the viewport.
+                subMenu.style.top =  `-${courseXBlockDropdownHeight}px`;
             }
+
             // if propagation is not stopped, the event will bubble up to the
             // body element, which will close the dropdown.
             event.stopPropagation();
@@ -543,6 +543,7 @@ function($, _, Backbone, gettext, BasePage,
                     return window.parent.postMessage(
                         {
                             type: 'copyXBlock',
+                            message: 'Copy the XBlock',
                             payload: {
                                 id: this.findXBlockElement(event.target).data('locator')
                             }
@@ -602,6 +603,7 @@ function($, _, Backbone, gettext, BasePage,
                     return window.parent.postMessage(
                         {
                             type: 'duplicateXBlock',
+                            message: 'Duplicate the XBlock',
                             payload: {
                                 id: this.findXBlockElement(event.target).data('locator')
                             }
@@ -647,6 +649,7 @@ function($, _, Backbone, gettext, BasePage,
                     return window.parent.postMessage(
                         {
                             type: 'deleteXBlock',
+                            message: 'Delete the XBlock',
                             payload: {
                                 id: this.findXBlockElement(event.target).data('locator')
                             }