Skip to content

Commit

Permalink
feat: Listen to xBlock interaction events
Browse files Browse the repository at this point in the history 
refactor: some refactoring

feat: post msg for new editor

refactor: some refactoring

refactor: corrected xblock dropdown menu
  • Loading branch information
@PKulkoRaccoonGang
PKulkoRaccoonGang committed Nov 15, 2024
1 parent e2d6765 commit 929f7f7
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 12 deletions.
11 changes: 11 additions & 0 deletions cms/static/js/views/container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,17 @@ function($, _, XBlockView, ModuleUtils, gettext, StringUtils, NotificationView)
newParent = undefined;
},
update: function(event, ui) {
try {
window.parent.postMessage(
{
type: 'refreshPositions',
message: 'Refresh positions of all xblocks',
payload: {}
}, document.referrer
);
} catch (e) {
console.error(e);
}
// When dragging from one ol to another, this method
// will be called twice (once for each list). ui.sender will
// be null if the change is related to the list the element
Expand Down
74 changes: 63 additions & 11 deletions cms/static/js/views/pages/container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,13 @@ function($, _, Backbone, gettext, BasePage,
this.unitOutlineView.render();

}
if (this.options.isIframeEmbed) {
window.addEventListener('message', (event) => {
if (event.data && event.data.type === 'refreshXBlock') {
this.render();
}
});
}

this.listenTo(Backbone, 'move:onXBlockMoved', this.onXBlockMoved);
},
Expand Down Expand Up @@ -224,6 +231,7 @@ function($, _, Backbone, gettext, BasePage,
},

initializePasteButton() {
var self = this;
if (this.options.canEdit && !self.options.isIframeEmbed) {
// We should have the user's clipboard status.
const data = this.options.clipboardData;
Expand Down Expand Up @@ -379,12 +387,17 @@ function($, _, Backbone, gettext, BasePage,

editXBlock: function(event, options) {
event.preventDefault();
var isAccessButton = event.currentTarget.className === 'access-button';
try {
if (this.options.isIframeEmbed) {
window.parent.postMessage(
if (this.options.isIframeEmbed && isAccessButton) {
return window.parent.postMessage(
{
type: 'editXBlock',
payload: {}
type: 'manageXBlockAccess',
message: 'Open the access editor for the XBlock',
payload: {
id: this.findXBlockElement(event.target).data('locator'),
targetElementClassName: event.currentTarget.className,
}
}, document.referrer
);
}
Expand All @@ -404,7 +417,24 @@ function($, _, Backbone, gettext, BasePage,
|| (useNewVideoEditor === 'True' && blockType === 'video')
|| (useNewProblemEditor === 'True' && blockType === 'problem')
) {
var destinationUrl = primaryHeader.attr('authoring_MFE_base_url') + '/' + blockType + '/' + encodeURI(primaryHeader.attr('data-usage-id'));
var pathToNewXBlockEditor = `/${blockType}/${encodeURI(primaryHeader.attr('data-usage-id'))}`;
var destinationUrl = `${primaryHeader.attr('authoring_MFE_base_url')}${pathToNewXBlockEditor}`;

try {
if (this.options.isIframeEmbed) {
return window.parent.postMessage(
{
type: 'newXBlockEditor',
message: 'Open the new XBlock editor',
payload: {
url: pathToNewXBlockEditor,
}
}, document.referrer
);
}
} catch (e) {
console.error(e);
}
window.location.href = destinationUrl;
return;
}
Expand Down Expand Up @@ -455,6 +485,19 @@ 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');

// 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();
Expand Down Expand Up @@ -497,10 +540,13 @@ function($, _, Backbone, gettext, BasePage,
event.preventDefault();
try {
if (this.options.isIframeEmbed) {
window.parent.postMessage(
return window.parent.postMessage(
{
type: 'copyXBlock',
payload: {}
message: 'Copy the XBlock',
payload: {
id: this.findXBlockElement(event.target).data('locator')
}
}, document.referrer
);
}
Expand Down Expand Up @@ -554,10 +600,13 @@ function($, _, Backbone, gettext, BasePage,
event.preventDefault();
try {
if (this.options.isIframeEmbed) {
window.parent.postMessage(
return window.parent.postMessage(
{
type: 'duplicateXBlock',
payload: {}
message: 'Duplicate the XBlock',
payload: {
id: this.findXBlockElement(event.target).data('locator')
}
}, document.referrer
);
}
Expand Down Expand Up @@ -597,10 +646,13 @@ function($, _, Backbone, gettext, BasePage,
event.preventDefault();
try {
if (this.options.isIframeEmbed) {
window.parent.postMessage(
return window.parent.postMessage(
{
type: 'deleteXBlock',
payload: {}
message: 'Delete the XBlock',
payload: {
id: this.findXBlockElement(event.target).data('locator')
}
}, document.referrer
);
}
Expand Down
2 changes: 1 addition & 1 deletion cms/static/js/views/pages/container_subviews.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -523,7 +523,7 @@ function($, _, gettext, BaseView, ViewUtils, XBlockViewUtils, MoveXBlockUtils, H
tagValueElement.className = 'tagging-label-value';

tagContentElement.appendChild(tagValueElement);
parentElement.appendChild(tagContentElement);
parentElement?.appendChild(tagContentElement);

if (tag.children.length > 0) {
var tagIconElement = document.createElement('span'),
Expand Down
5 changes: 5 additions & 0 deletions cms/static/sass/course-unit-mfe-iframe-bundle.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
&:hover {
background-color: $primary;
border-color: $transparent;
color: $white;
}

&:focus {
Expand Down Expand Up @@ -649,3 +650,7 @@ select {
.wrapper-comp-setting.metadata-list-enum .action.setting-clear.active {
margin-top: 0;
}

.wrapper-xblock .xblock-header-primary .header-actions .wrapper-nav-sub {
z-index: 15;
}

0 comments on commit 929f7f7

Please sign in to comment.