From e4925e619b9c4bce764b61b1c29e3fef22e7f529 Mon Sep 17 00:00:00 2001 From: Peter Kulko Date: Mon, 18 Nov 2024 09:43:01 +0200 Subject: [PATCH] refactor: some refactoring --- cms/static/js/base.js | 13 ++++ cms/static/js/views/pages/container.js | 90 +++++++++++++++++++++----- 2 files changed, 87 insertions(+), 16 deletions(-) diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 5f970a89d592..3c181df86914 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -76,6 +76,19 @@ 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: 'toggleCourseXBlockDropdown', + message: 'Adjust the height of the dropdown menu', + payload: { + courseXBlockDropdownHeight: 0, + } + }, document.referrer + ); + } catch (error) { + console.error(error); + } }); $('.nav-dd .nav-item, .filterable-column .nav-item').click(function(e) { diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js index 704dc8cfbcc2..b42e706533a2 100644 --- a/cms/static/js/views/pages/container.js +++ b/cms/static/js/views/pages/container.js @@ -126,6 +126,7 @@ function($, _, Backbone, gettext, BasePage, } if (this.options.isIframeEmbed) { + // TODO: In the next PRs we will move away from receiving updated data via iframe reloading. window.addEventListener('message', (event) => { if (event.data && event.data.type === 'refreshXBlock') { this.render(); @@ -394,10 +395,7 @@ function($, _, Backbone, gettext, BasePage, { type: 'manageXBlockAccess', message: 'Open the access editor for the XBlock', - payload: { - id: this.findXBlockElement(event.target).data('locator'), - targetElementClassName: event.currentTarget.className, - } + payload: {} }, document.referrer ); } @@ -485,6 +483,21 @@ function($, _, Backbone, gettext, BasePage, // Code in 'base.js' normally handles toggling these dropdowns but since this one is // not present yet during the domReady event, we have to handle displaying it ourselves. subMenu.classList.toggle('is-shown'); + if (!subMenu.classList.contains('is-shown')) { + try { + if (this.options.isIframeEmbed) { + window.parent.postMessage( + { + type: 'toggleCourseXBlockDropdown', + message: 'Adjust the height of the dropdown menu', + payload: { courseXBlockDropdownHeight: 0 } + }, document.referrer + ); + } + } catch (error) { + console.error(error); + } + } // 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. @@ -493,11 +506,42 @@ function($, _, Backbone, gettext, BasePage, const courseXBlockDropdownHeight = subMenu.offsetHeight; const clickYPosition = event.clientY; - if ((courseXBlockDropdownHeight + clickYPosition) > courseUnitXBlockIframeHeight) { + if (courseUnitXBlockIframeHeight < courseXBlockDropdownHeight) { + // If the dropdown menu is taller than the iframe, adjust the height of the dropdown menu. + try { + if (this.options.isIframeEmbed) { + window.parent.postMessage( + { + type: 'toggleCourseXBlockDropdown', + message: 'Adjust the height of the dropdown menu', + payload: { courseXBlockDropdownHeight: courseXBlockDropdownHeight / 2 } + }, document.referrer + ); + } + } catch (e) { + console.error(e); + } + } else if ((courseXBlockDropdownHeight + clickYPosition) > courseUnitXBlockIframeHeight) { // Move the dropdown menu upward to prevent it from overflowing out of the viewport. subMenu.style.top = `-${courseXBlockDropdownHeight}px`; } + try { + if (this.options.isIframeEmbed) { + window.parent.postMessage( + { + type: 'currentXBlockId', + message: 'Get the current XBlock ID', + payload: { + id: this.findXBlockElement(event.target).data('locator') + } + }, document.referrer + ); + } + } catch (e) { + console.error(e); + } + // if propagation is not stopped, the event will bubble up to the // body element, which will close the dropdown. event.stopPropagation(); @@ -544,9 +588,7 @@ function($, _, Backbone, gettext, BasePage, { type: 'copyXBlock', message: 'Copy the XBlock', - payload: { - id: this.findXBlockElement(event.target).data('locator') - } + payload: {} }, document.referrer ); } @@ -604,9 +646,7 @@ function($, _, Backbone, gettext, BasePage, { type: 'duplicateXBlock', message: 'Duplicate the XBlock', - payload: { - id: this.findXBlockElement(event.target).data('locator') - } + payload: {} }, document.referrer ); } @@ -650,9 +690,7 @@ function($, _, Backbone, gettext, BasePage, { type: 'deleteXBlock', message: 'Delete the XBlock', - payload: { - id: this.findXBlockElement(event.target).data('locator') - } + payload: {} }, document.referrer ); } @@ -812,12 +850,32 @@ function($, _, Backbone, gettext, BasePage, || (useNewProblemEditor === 'True' && blockType.includes('problem')) ){ var destinationUrl; + var pathToXBlockEditor; if (useVideoGalleryFlow === "True" && blockType.includes("video")) { - destinationUrl = this.$('.xblock-header-primary').attr("authoring_MFE_base_url") + '/course-videos/' + encodeURI(data.locator); + pathToXBlockEditor = `/course-videos/${encodeURI(data.locator)}`; + destinationUrl = `${this.$('.xblock-header-primary').attr("authoring_MFE_base_url")}${pathToXBlockEditor}`; } else { - destinationUrl = this.$('.xblock-header-primary').attr("authoring_MFE_base_url") + '/' + blockType[1] + '/' + encodeURI(data.locator); + pathToXBlockEditor = `/${blockType[1]}/${encodeURI(data.locator)}`; + destinationUrl = `${this.$('.xblock-header-primary').attr("authoring_MFE_base_url")}${pathToXBlockEditor}`; } + + try { + if (this.options.isIframeEmbed) { + return window.parent.postMessage( + { + type: 'newXBlockEditor', + message: 'Sends a message when the new XBlock editor is opened', + payload: { + url: pathToXBlockEditor, + } + }, document.referrer + ); + } + } catch (e) { + console.error(e); + } + window.location.href = destinationUrl; return; }