forked from openedx/edx-platform
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: minimal UI for the Problem Bank block
- Loading branch information
1 parent
6912ddb
commit 7456c0a
Showing
5 changed files
with
173 additions
and
34 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
| 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <div style="padding: 1em"> | ||
| {% if block_count > 0 %} | ||
| <p>Learners will see {{ max_count }} of the {{ block_count }} selected components:</p> | ||
| <ol style="list-style: decimal; margin-left: 2em;"> | ||
| {% for block in blocks %} | ||
| <li>{{ block.display_name }}</li> | ||
| {% endfor %} | ||
| </ol> | ||
| <p style="color: var(--gray);">Press <a href="/container/{{ item_bank_id }}">View</a> to preview, sync/update, and/or remove the selected components.</p> | ||
| <p style="color: var(--gray);">Press <a role="button" href="#" class="edit-button action-button">Edit</a> to configure how many will be shown and other settings.</p> | ||
| {% else %} | ||
| <p>You have not selected any components yet.</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,12 @@ | ||
| <div class="insert-new-lib-blocks-here"></div> | ||
| <div class="xblock-header-secondary"> | ||
| {% comment %} | ||
| How does this button work? 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 %} | ||
| <button class="btn btn-primary problem-bank-v2-add-button"> | ||
| <span class="icon fa fa-plus" aria-hidden="true"></span> | ||
| Add components | ||
| </button> from a content library to this problem bank. | ||
| </div> |