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 bd2fc9a
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 16 deletions.
15 changes: 15 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 All @@ -85,11 +98,13 @@ function(
if ($subnav.hasClass('is-shown')) {
$subnav.removeClass('is-shown');
$title.removeClass('is-selected');
console.log('============================== closing dropdown ===========================');
} else {
$('.nav-dd .nav-item .title').removeClass('is-selected');
$('.nav-dd .nav-item .wrapper-nav-sub').removeClass('is-shown');
$title.addClass('is-selected');
$subnav.addClass('is-shown');
console.log('========================== opening dropdown ========================');
// if propagation is not stopped, the event will bubble up to the
// body element, which will close the dropdown.
e.stopPropagation();
Expand Down
93 changes: 77 additions & 16 deletions cms/static/js/views/pages/container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -394,10 +394,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 +482,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 +505,46 @@ function($, _, Backbone, gettext, BasePage,
const courseXBlockDropdownHeight = subMenu.offsetHeight;
const clickYPosition = event.clientY;

if ((courseXBlockDropdownHeight + clickYPosition) > courseUnitXBlockIframeHeight) {
console.log('courseUnitXBlockIframeHeight:', courseUnitXBlockIframeHeight);
console.log('courseXBlockDropdownHeight:', courseXBlockDropdownHeight);
console.log('clickYPosition:', clickYPosition);

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 +591,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 +649,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 +693,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 +853,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 bd2fc9a

Please sign in to comment.