From 7be761cb2c5728aa0bb3148e642fdf1327e23f82 Mon Sep 17 00:00:00 2001 From: Peter Kulko Date: Tue, 22 Oct 2024 14:13:18 +0300 Subject: [PATCH 1/3] feat: Listen to xBlock interaction events refactor: some refactoring feat: post msg for new editor --- cms/static/js/views/container.js | 10 ++++ cms/static/js/views/pages/container.js | 53 +++++++++++++++---- .../sass/course-unit-mfe-iframe-bundle.scss | 5 ++ 3 files changed, 57 insertions(+), 11 deletions(-) diff --git a/cms/static/js/views/container.js b/cms/static/js/views/container.js index 9370dfdc29d5..86254df8422e 100644 --- a/cms/static/js/views/container.js +++ b/cms/static/js/views/container.js @@ -70,6 +70,16 @@ function($, _, XBlockView, ModuleUtils, gettext, StringUtils, NotificationView) newParent = undefined; }, update: function(event, ui) { + try { + window.parent.postMessage( + { + type: 'refreshPositions', + 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 diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js index e1ed9c30eaf7..a9f537ea27c4 100644 --- a/cms/static/js/views/pages/container.js +++ b/cms/static/js/views/pages/container.js @@ -126,6 +126,12 @@ function($, _, Backbone, gettext, BasePage, } + window.addEventListener('message', (event) => { + if (event.data && event.data.type === 'refreshXBlock') { + this.render(); + } + }); + this.listenTo(Backbone, 'move:onXBlockMoved', this.onXBlockMoved); }, @@ -380,11 +386,14 @@ function($, _, Backbone, gettext, BasePage, editXBlock: function(event, options) { event.preventDefault(); try { - if (this.options.isIframeEmbed) { - window.parent.postMessage( + if (this.options.isIframeEmbed && event.currentTarget.className === 'access-button') { + return window.parent.postMessage( { - type: 'editXBlock', - payload: {} + type: 'manageXBlockAccess', + payload: { + id: this.findXBlockElement(event.target).data('locator'), + targetElementClassName: event.currentTarget.className, + } }, document.referrer ); } @@ -404,7 +413,23 @@ 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', + payload: { + url: pathToNewXBlockEditor, + } + }, document.referrer + ); + } + } catch (e) { + console.error(e); + } window.location.href = destinationUrl; return; } @@ -497,10 +522,12 @@ function($, _, Backbone, gettext, BasePage, event.preventDefault(); try { if (this.options.isIframeEmbed) { - window.parent.postMessage( + return window.parent.postMessage( { type: 'copyXBlock', - payload: {} + payload: { + id: this.findXBlockElement(event.target).data('locator') + } }, document.referrer ); } @@ -554,10 +581,12 @@ function($, _, Backbone, gettext, BasePage, event.preventDefault(); try { if (this.options.isIframeEmbed) { - window.parent.postMessage( + return window.parent.postMessage( { type: 'duplicateXBlock', - payload: {} + payload: { + id: this.findXBlockElement(event.target).data('locator') + } }, document.referrer ); } @@ -597,10 +626,12 @@ function($, _, Backbone, gettext, BasePage, event.preventDefault(); try { if (this.options.isIframeEmbed) { - window.parent.postMessage( + return window.parent.postMessage( { type: 'deleteXBlock', - payload: {} + payload: { + id: this.findXBlockElement(event.target).data('locator') + } }, document.referrer ); } diff --git a/cms/static/sass/course-unit-mfe-iframe-bundle.scss b/cms/static/sass/course-unit-mfe-iframe-bundle.scss index 95774ea74058..0e1c870907b5 100644 --- a/cms/static/sass/course-unit-mfe-iframe-bundle.scss +++ b/cms/static/sass/course-unit-mfe-iframe-bundle.scss @@ -52,6 +52,7 @@ &:hover { background-color: $primary; border-color: $transparent; + color: $white; } &:focus { @@ -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; +} From 27d9cff031e1eb06bcc748ffd256567400c1bfb5 Mon Sep 17 00:00:00 2001 From: Peter Kulko Date: Thu, 31 Oct 2024 21:17:37 +0200 Subject: [PATCH 2/3] feat: manage tags interoperation --- cms/static/js/views/pages/container.js | 7 +++++-- cms/static/js/views/pages/container_subviews.js | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js index a9f537ea27c4..4bae656cc199 100644 --- a/cms/static/js/views/pages/container.js +++ b/cms/static/js/views/pages/container.js @@ -230,6 +230,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; @@ -496,12 +497,15 @@ function($, _, Backbone, gettext, BasePage, }, openManageTags: function(event) { + const contentId = this.findXBlockElement(event.target).data('locator'); try { if (this.options.isIframeEmbed) { window.parent.postMessage( { type: 'openManageTags', - payload: {} + payload: { + contentId, + } }, document.referrer ); } @@ -509,7 +513,6 @@ function($, _, Backbone, gettext, BasePage, console.error(e); } const taxonomyTagsWidgetUrl = this.model.get('taxonomy_tags_widget_url'); - const contentId = this.findXBlockElement(event.target).data('locator'); TaggingDrawerUtils.openDrawer(taxonomyTagsWidgetUrl, contentId); }, diff --git a/cms/static/js/views/pages/container_subviews.js b/cms/static/js/views/pages/container_subviews.js index b32c86ae8dec..c6872290ceb1 100644 --- a/cms/static/js/views/pages/container_subviews.js +++ b/cms/static/js/views/pages/container_subviews.js @@ -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'), From 97c2fc47a228c818ecafb5cae8048a030aa9cc6b Mon Sep 17 00:00:00 2001 From: Peter Kulko Date: Mon, 4 Nov 2024 13:34:13 +0200 Subject: [PATCH 3/3] refactor: added some styles --- cms/static/js/views/pages/container.js | 4 ++-- cms/static/sass/course-unit-mfe-iframe-bundle.scss | 11 +++++++++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js index 4bae656cc199..6120a294467c 100644 --- a/cms/static/js/views/pages/container.js +++ b/cms/static/js/views/pages/container.js @@ -248,7 +248,7 @@ function($, _, Backbone, gettext, BasePage, refreshPasteButton(data) { // Do not perform any changes on paste button since they are not // rendered on Library or LibraryContent pages - if (!this.isLibraryPage && !this.isLibraryContentPage && !self.options.isIframeEmbed) { + if (!this.isLibraryPage && !this.isLibraryContentPage && !(self.options && self.options.isIframeEmbed)) { // 'data' is the same data returned by the "get clipboard status" API endpoint // i.e. /api/content-staging/v1/clipboard/ if (this.options.canEdit && data.content) { @@ -504,7 +504,7 @@ function($, _, Backbone, gettext, BasePage, { type: 'openManageTags', payload: { - contentId, + id: contentId, } }, document.referrer ); diff --git a/cms/static/sass/course-unit-mfe-iframe-bundle.scss b/cms/static/sass/course-unit-mfe-iframe-bundle.scss index 0e1c870907b5..ae705c8cd7f7 100644 --- a/cms/static/sass/course-unit-mfe-iframe-bundle.scss +++ b/cms/static/sass/course-unit-mfe-iframe-bundle.scss @@ -651,6 +651,13 @@ select { margin-top: 0; } -.wrapper-xblock .xblock-header-primary .header-actions .wrapper-nav-sub { - z-index: 15; +.wrapper-xblock .xblock-header-primary .header-actions { + .wrapper-nav-sub { + z-index: 15; + } + + .actions-list .action-item.tag-count button.btn-default.action-button.manage-tags-button { + width: auto; + border-radius: 0; + } }