fix: support legacy studio_view in v2 library (#36748)

Fix "Add" button in LTI editor in v2 library. The iframe studio view renderer in library now supports legacy studio view.
This commit is contained in:
Navin Karkera
2025-05-20 20:52:00 +00:00
committed by GitHub
parent 26b4edf985
commit 1002f5f91b
2 changed files with 19 additions and 27 deletions

View File

@@ -2886,6 +2886,8 @@ LIBRARY_ENABLED_BLOCKS = [
'google-calendar',
'google-document',
'invideoquiz',
'lti',
'lti_consumer',
'pdf',
'poll',
'survey',

View File

@@ -273,8 +273,6 @@
// Check if the XBlock has an initialization function:
const initFunctionName = element.getAttribute('data-init');
if (initFunctionName !== null) {
// Since this block has an init function, it may need to call handlers:
element[HANDLER_URL] = HANDLER_URL_MAP[usageId];
// Now proceed with initializing the block's JavaScript:
const InitFunction = (window)[initFunctionName];
// Does the XBlock HTML contain arguments to pass to the InitFunction?
@@ -293,13 +291,12 @@
// to pass 'element' as a jQuery-wrapped DOM element, whereas the LMS
// runtime used to pass 'element' as the pure DOM node. In order not to
// break backwards compatibility, we would need to maintain that.
// However, this is currently disabled as it causes issues (need to
// modify the runtime methods like handlerUrl too), and we decided not
// to maintain support for legacy studio_view in this runtime.
// const isStudioView = element.className.indexOf('studio_view') !== -1;
// const passElement = isStudioView && (window as any).$ ? (window as any).$(element) : element;
const blockJS = new InitFunction(runtime, element, data) || {};
blockJS.element = element;
const isStudioView = element.className.indexOf('studio_view') !== -1;
const passElement = isStudioView && window.$ ? window.$(element) : element;
// Since this block has an init function, it may need to call handlers:
passElement[HANDLER_URL] = HANDLER_URL_MAP[usageId];
const blockJS = new InitFunction(runtime, passElement, data) || {};
blockJS.element = passElement;
if (['MetadataOnlyEditingDescriptor', 'SequenceDescriptor'].includes(data['xmodule-type'])) {
// The xmodule type `MetadataOnlyEditingDescriptor` and `SequenceDescriptor` renders a `<div>` with
@@ -308,7 +305,7 @@
// editor using the metadata.
require(['{{ cms_root_url }}/static/studio/js/views/xblock_editor.js'], function(XBlockEditorView) {
var editorView = new XBlockEditorView({
el: element,
el: passElement,
xblock: blockJS,
});
// To render block using metadata
@@ -327,35 +324,28 @@
</ul>
</div>
`;
element.innerHTML += xblockActions;
const views = editorView.getMetadataEditor().views;
Object.values(views).forEach(view => {
const uniqueId = view.uniqueId;
const input = element.querySelector(`#${uniqueId}`);
if (input) {
input.addEventListener("input", function(event) {
view.model.setValue(event.target.value);
});
}
});
// Check if passElement is a jQuery-wrapped dom element
if (passElement.jquery) {
passElement.append(xblockActions);
} else {
passElement.innerHTML += xblockActions;
}
// Adding cancel functionality
$('.cancel-button', element).bind('click', function() {
$('.cancel-button', passElement).bind('click', function() {
runtime.notify('cancel', {});
event.preventDefault();
});
// Adding save functionality
$('.save-button', element).bind('click', function() {
$('.save-button', passElement).bind('click', function() {
//event.preventDefault();
var error_message_div = $('.xblock-editor-error-message', element);
var error_message_div = $('.xblock-editor-error-message', passElement);
const modifiedData = editorView.getChangedMetadata();
error_message_div.html();
error_message_div.css('display', 'none');
var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
var handlerUrl = runtime.handlerUrl(passElement, 'studio_submit');
runtime.notify('save', {state: 'start', message: gettext("Saving")});