-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #35679 from open-craft/braden/pool-ui
"Bare Bones" UI for Problem Bank [FC-0062] Part of: openedx/frontend-app-authoring#1385
- Loading branch information
Showing
10 changed files
with
213 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
/** | ||
* Provides utilities to open and close the library content picker. | ||
* | ||
*/ | ||
define(['jquery', 'underscore', 'gettext', 'js/views/modals/base_modal'], | ||
function($, _, gettext, BaseModal) { | ||
'use strict'; | ||
|
||
var SelectV2LibraryContent = BaseModal.extend({ | ||
options: $.extend({}, BaseModal.prototype.options, { | ||
modalName: 'add-component-from-library', | ||
modalSize: 'lg', | ||
view: 'studio_view', | ||
viewSpecificClasses: 'modal-add-component-picker confirm', | ||
// Translators: "title" is the name of the current component being edited. | ||
titleFormat: gettext('Add library content'), | ||
addPrimaryActionButton: false, | ||
}), | ||
|
||
initialize: function() { | ||
BaseModal.prototype.initialize.call(this); | ||
// Add event listen to close picker when the iframe tells us to | ||
const handleMessage = (event) => { | ||
if (event.data?.type === 'pickerComponentSelected') { | ||
var requestData = { | ||
library_content_key: event.data.usageKey, | ||
category: event.data.category, | ||
} | ||
this.callback(requestData); | ||
this.hide(); | ||
} | ||
}; | ||
this.messageListener = window.addEventListener("message", handleMessage); | ||
this.cleanupListener = () => { window.removeEventListener("message", handleMessage) }; | ||
}, | ||
|
||
hide: function() { | ||
BaseModal.prototype.hide.call(this); | ||
this.cleanupListener(); | ||
}, | ||
|
||
/** | ||
* Adds the action buttons to the modal. | ||
*/ | ||
addActionButtons: function() { | ||
this.addActionButton('cancel', gettext('Cancel')); | ||
}, | ||
|
||
/** | ||
* Show a component picker modal from library. | ||
* @param contentPickerUrl Url for component picker | ||
* @param callback A function to call with the selected block(s) | ||
*/ | ||
showComponentPicker: function(contentPickerUrl, callback) { | ||
this.contentPickerUrl = contentPickerUrl; | ||
this.callback = callback; | ||
|
||
this.render(); | ||
this.show(); | ||
}, | ||
|
||
getContentHtml: function() { | ||
return `<iframe src="${this.contentPickerUrl}" onload="this.contentWindow.focus()" frameborder="0" style="width: 100%; height: 100%;"/>`; | ||
}, | ||
}); | ||
|
||
return SelectV2LibraryContent; | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
{% load i18n %} | ||
{% load django_markup %} | ||
<div style="padding: 1em"> | ||
{% if block_count > 0 %} | ||
{% if max_count == -1 %} | ||
<p> | ||
{% filter force_escape %} | ||
{% blocktrans count num_selected=block_count %} | ||
Learners will see the selected component: | ||
{% plural %} | ||
Learners will see all of the {{ num_selected }} selected components, in random order: | ||
{% endblocktrans %} | ||
{% endfilter %} | ||
</p> | ||
{% else %} | ||
<p> | ||
{% filter force_escape %} | ||
{% blocktrans with max_count=max_count count num_selected=block_count %} | ||
Learners will see the selected component: | ||
{% plural %} | ||
Learners will see {{ max_count }} of the {{ num_selected }} selected components: | ||
{% endblocktrans %} | ||
{% endfilter %} | ||
</p> | ||
{% endif %} | ||
<ol style="list-style: decimal; margin-left: 2em;"> | ||
{% for block in blocks %} | ||
<li>{{ block.display_name }}</li> | ||
{% endfor %} | ||
</ol> | ||
<p style="color: var(--gray);"> | ||
{% blocktrans trimmed asvar view_msg %} | ||
Press {link_start}View{link_end} to preview, sync/update, and/or remove the selected components. | ||
{% endblocktrans %} | ||
{% interpolate_html view_msg link_start=view_link|safe link_end='</a>'|safe %} | ||
</p> | ||
<p style="color: var(--gray);"> | ||
{% blocktrans trimmed asvar edit_msg %} | ||
Press {link_start}Edit{link_end} to configure how many will be shown and other settings. | ||
{% endblocktrans %} | ||
{% interpolate_html edit_msg link_start='<a role="button" href="#" class="edit-button action-button">'|safe link_end='</a>'|safe %} | ||
</p> | ||
{% else %} | ||
<p>{% trans "You have not selected any components yet." as tmsg %}{{tmsg|force_escape}}</p> | ||
{% endif %} | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
{% load i18n %} | ||
{% load django_markup %} | ||
<div class="insert-new-lib-blocks-here"></div> | ||
<div class="xblock-header-secondary"> | ||
{% comment %} | ||
How this button works: An event handler in cms/static/js/views/pages/container.js | ||
will watch for clicks and then display the SelectV2LibraryContent modal and process | ||
the list of selected blocks returned from the modal. | ||
{% endcomment %} | ||
{% blocktrans trimmed asvar tmsg %} | ||
{button_start}Add components{button_end} from a content library to this problem bank. | ||
{% endblocktrans %} | ||
{% interpolate_html tmsg button_start='<button class="btn btn-primary problem-bank-v2-add-button"><span class="icon fa fa-plus" aria-hidden="true"></span> '|safe button_end='</button>'|safe %} | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters