Skip to content

Commit

Permalink
refactor: some refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@PKulkoRaccoonGang
PKulkoRaccoonGang committed Nov 18, 2024
1 parent 929f7f7 commit e4925e6
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 16 deletions.
13 changes: 13 additions & 0 deletions cms/static/js/base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
90 changes: 74 additions & 16 deletions cms/static/js/views/pages/container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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
);
}
Expand Down Expand Up @@ -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.
Expand All @@ -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();
Expand Down Expand Up @@ -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
);
}
Expand Down Expand Up @@ -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
);
}
Expand Down Expand Up @@ -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
);
}
Expand Down Expand Up @@ -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;
}
Expand Down

0 comments on commit e4925e6

Please sign in to comment.