feat: new Studio view for rendering a Unit in an iframe [FC-0070]
The first attempt at creating a new MFE-driven page for Studio Unit rendering involved rendering each XBlock separately in its own iframe. This turned out to be prohibitively slow because of the many redundant assets and JavaScript processing (e.g. MathJax) that happens for each XBlock component. In order to mitigate some of these issues, we decided to try a hybrid approach where we render the entire Unit's worth of XBlocks at once on the server side in a Studio view + template, and then invoke that from frontend-app-authoring as an iframe. The frontend-app-authoring MFE would still be responsible for displaying most of the interactive UI, but the per-component actions like "edit" would be triggered by buttons on the server-rendered Unit display. When one of those buttons is pressed, the server-rendered UI code in the iframe would use postMessage to communicate to the frontend-app-authoring MFE, which would then display the appropriate actions. To make this work, we're making a new view and template that copies a lot of existing code used to display the Unit in pre-MFE Studio, and then modifying that to remove things like the header/footer so that it can be invoked from an iframe. This entire design is a compromise in order to do as much of the UI development in frontend-app-authoring as possible while keeping XBlock rendering performance tolerable. We hope that we can find better solutions for this later. Authored-by: Sagirov Eugeniy <evhenyj.sahyrov@raccoongang.com>
This commit is contained in:
Sagirov Evgeniy
@@ -11,6 +11,7 @@ from django.core.exceptions import PermissionDenied
|
||||
from django.http import Http404, HttpResponseBadRequest
|
||||
from django.shortcuts import redirect
|
||||
from django.utils.translation import gettext as _
|
||||
from django.views.decorators.clickjacking import xframe_options_exempt
|
||||
from django.views.decorators.http import require_GET
|
||||
from opaque_keys import InvalidKeyError
|
||||
from opaque_keys.edx.keys import UsageKey
|
||||
@@ -35,7 +36,8 @@ from xmodule.modulestore.exceptions import ItemNotFoundError # lint-amnesty, py
|
||||
|
||||
__all__ = [
|
||||
'container_handler',
|
||||
'component_handler'
|
||||
'component_handler',
|
||||
'container_embed_handler',
|
||||
]
|
||||
|
||||
log = logging.getLogger(__name__)
|
||||
@@ -141,6 +143,36 @@ def container_handler(request, usage_key_string): # pylint: disable=too-many-st
|
||||
return HttpResponseBadRequest("Only supports HTML requests")
|
||||
|
||||
|
||||
@require_GET
|
||||
@login_required
|
||||
@xframe_options_exempt
|
||||
def container_embed_handler(request, usage_key_string): # pylint: disable=too-many-statements
|
||||
"""
|
||||
Returns an HttpResponse with HTML content for the container XBlock.
|
||||
The returned HTML is a chromeless rendering of the XBlock.
|
||||
|
||||
GET
|
||||
html: returns the HTML page for editing a container
|
||||
json: not currently supported
|
||||
"""
|
||||
|
||||
# Avoiding a circular dependency
|
||||
from ..utils import get_container_handler_context
|
||||
|
||||
try:
|
||||
usage_key = UsageKey.from_string(usage_key_string)
|
||||
except InvalidKeyError: # Raise Http404 on invalid 'usage_key_string'
|
||||
return HttpResponseBadRequest()
|
||||
with modulestore().bulk_operations(usage_key.course_key):
|
||||
try:
|
||||
course, xblock, lms_link, preview_lms_link = _get_item_in_course(request, usage_key)
|
||||
except ItemNotFoundError:
|
||||
raise Http404 # lint-amnesty, pylint: disable=raise-missing-from
|
||||
|
||||
container_handler_context = get_container_handler_context(request, usage_key, course, xblock)
|
||||
return render_to_response('container_chromeless.html', container_handler_context)
|
||||
|
||||
|
||||
def get_component_templates(courselike, library=False): # lint-amnesty, pylint: disable=too-many-statements
|
||||
"""
|
||||
Returns the applicable component templates that can be used by the specified course or library.
|
||||
|
||||
@@ -242,3 +242,61 @@ class ContainerPageTestCase(StudioPageTestCase, LibraryTestCase):
|
||||
usage_key_string=str(self.vertical.location)
|
||||
)
|
||||
self.assertEqual(response.status_code, 200)
|
||||
|
||||
|
||||
class ContainerEmbedPageTestCase(ContainerPageTestCase): # lint-amnesty, pylint: disable=test-inherits-tests
|
||||
"""
|
||||
Unit tests for the container embed page.
|
||||
"""
|
||||
|
||||
def test_container_html(self):
|
||||
assets_url = reverse(
|
||||
'assets_handler', kwargs={'course_key_string': str(self.child_container.location.course_key)}
|
||||
)
|
||||
self._test_html_content(
|
||||
self.child_container,
|
||||
expected_section_tag=(
|
||||
'<section class="wrapper-xblock level-page is-hidden studio-xblock-wrapper" '
|
||||
'data-locator="{0}" data-course-key="{0.course_key}" data-course-assets="{1}">'.format(
|
||||
self.child_container.location, assets_url
|
||||
)
|
||||
),
|
||||
)
|
||||
|
||||
def test_container_on_container_html(self):
|
||||
"""
|
||||
Create the scenario of an xblock with children (non-vertical) on the container page.
|
||||
This should create a container page that is a child of another container page.
|
||||
"""
|
||||
draft_container = self._create_block(self.child_container, "wrapper", "Wrapper")
|
||||
self._create_block(draft_container, "html", "Child HTML")
|
||||
|
||||
def test_container_html(xblock):
|
||||
assets_url = reverse(
|
||||
'assets_handler', kwargs={'course_key_string': str(draft_container.location.course_key)}
|
||||
)
|
||||
self._test_html_content(
|
||||
xblock,
|
||||
expected_section_tag=(
|
||||
'<section class="wrapper-xblock level-page is-hidden studio-xblock-wrapper" '
|
||||
'data-locator="{0}" data-course-key="{0.course_key}" data-course-assets="{1}">'.format(
|
||||
draft_container.location, assets_url
|
||||
)
|
||||
),
|
||||
)
|
||||
|
||||
# Test the draft version of the container
|
||||
test_container_html(draft_container)
|
||||
|
||||
# Now publish the unit and validate again
|
||||
self.store.publish(self.vertical.location, self.user.id)
|
||||
draft_container = self.store.get_item(draft_container.location)
|
||||
test_container_html(draft_container)
|
||||
|
||||
def _test_html_content(self, xblock, expected_section_tag): # lint-amnesty, pylint: disable=arguments-differ
|
||||
"""
|
||||
Get the HTML for a container page and verify the section tag is correct
|
||||
and the breadcrumbs trail is correct.
|
||||
"""
|
||||
html = self.get_page_html(xblock)
|
||||
self.assertIn(expected_section_tag, html)
|
||||
|
||||
@@ -1407,6 +1407,12 @@ PIPELINE['STYLESHEETS'] = {
|
||||
],
|
||||
'output_filename': 'css/cms-style-xmodule-annotations.css',
|
||||
},
|
||||
'course-unit-mfe-iframe-bundle': {
|
||||
'source_filenames': [
|
||||
'css/course-unit-mfe-iframe-bundle.css',
|
||||
],
|
||||
'output_filename': 'css/course-unit-mfe-iframe-bundle.css',
|
||||
},
|
||||
}
|
||||
|
||||
base_vendor_js = [
|
||||
|
||||
3
cms/static/images/pencil-icon.svg
Normal file
3
cms/static/images/pencil-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false" aria-hidden="true">
|
||||
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25ZM21.41 6.34l-3.75-3.75-2.53 2.54 3.75 3.75 2.53-2.54Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 292 B |
@@ -207,7 +207,7 @@ function($, _, Backbone, gettext, BasePage,
|
||||
|
||||
renderAddXBlockComponents: function() {
|
||||
var self = this;
|
||||
if (self.options.canEdit) {
|
||||
if (self.options.canEdit && !self.options.isIframeEmbed) {
|
||||
this.$('.add-xblock-component').each(function(index, element) {
|
||||
var component = new AddXBlockComponent({
|
||||
el: element,
|
||||
@@ -222,7 +222,7 @@ function($, _, Backbone, gettext, BasePage,
|
||||
},
|
||||
|
||||
initializePasteButton() {
|
||||
if (this.options.canEdit) {
|
||||
if (this.options.canEdit && !self.options.isIframeEmbed) {
|
||||
// We should have the user's clipboard status.
|
||||
const data = this.options.clipboardData;
|
||||
this.refreshPasteButton(data);
|
||||
@@ -239,7 +239,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) {
|
||||
if (!this.isLibraryPage && !this.isLibraryContentPage && !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) {
|
||||
@@ -273,6 +273,18 @@ function($, _, Backbone, gettext, BasePage,
|
||||
/** The user has clicked on the "Paste Component button" */
|
||||
pasteComponent(event) {
|
||||
event.preventDefault();
|
||||
try {
|
||||
if (this.options.isIframeEmbed) {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: 'pasteComponent',
|
||||
payload: {}
|
||||
}, document.referrer
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
// Get the ID of the container (usually a unit/vertical) that we're pasting into:
|
||||
const parentElement = this.findXBlockElement(event.target);
|
||||
const parentLocator = parentElement.data('locator');
|
||||
@@ -365,6 +377,18 @@ function($, _, Backbone, gettext, BasePage,
|
||||
|
||||
editXBlock: function(event, options) {
|
||||
event.preventDefault();
|
||||
try {
|
||||
if (this.options.isIframeEmbed) {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: 'editXBlock',
|
||||
payload: {}
|
||||
}, document.referrer
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
if (!options || options.view !== 'visibility_view') {
|
||||
const primaryHeader = $(event.target).closest('.xblock-header-primary, .nav-actions');
|
||||
@@ -432,66 +456,43 @@ function($, _, Backbone, gettext, BasePage,
|
||||
});
|
||||
},
|
||||
|
||||
duplicateXBlock: function(event) {
|
||||
event.preventDefault();
|
||||
this.duplicateComponent(this.findXBlockElement(event.target));
|
||||
},
|
||||
|
||||
openManageTags: function(event) {
|
||||
try {
|
||||
if (this.options.isIframeEmbed) {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: 'openManageTags',
|
||||
payload: {}
|
||||
}, document.referrer
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
const taxonomyTagsWidgetUrl = this.model.get('taxonomy_tags_widget_url');
|
||||
const contentId = this.findXBlockElement(event.target).data('locator');
|
||||
|
||||
TaggingDrawerUtils.openDrawer(taxonomyTagsWidgetUrl, contentId);
|
||||
},
|
||||
|
||||
showMoveXBlockModal: function(event) {
|
||||
var xblockElement = this.findXBlockElement(event.target),
|
||||
parentXBlockElement = xblockElement.parents('.studio-xblock-wrapper'),
|
||||
modal = new MoveXBlockModal({
|
||||
sourceXBlockInfo: XBlockUtils.findXBlockInfo(xblockElement, this.model),
|
||||
sourceParentXBlockInfo: XBlockUtils.findXBlockInfo(parentXBlockElement, this.model),
|
||||
XBlockURLRoot: this.getURLRoot(),
|
||||
outlineURL: this.options.outlineURL
|
||||
});
|
||||
|
||||
event.preventDefault();
|
||||
modal.show();
|
||||
},
|
||||
|
||||
deleteXBlock: function(event) {
|
||||
event.preventDefault();
|
||||
this.deleteComponent(this.findXBlockElement(event.target));
|
||||
},
|
||||
|
||||
createPlaceholderElement: function() {
|
||||
return $('<div/>', {class: 'studio-xblock-wrapper'});
|
||||
},
|
||||
|
||||
createComponent: function(template, target) {
|
||||
// A placeholder element is created in the correct location for the new xblock
|
||||
// and then onNewXBlock will replace it with a rendering of the xblock. Note that
|
||||
// for xblocks that can't be replaced inline, the entire parent will be refreshed.
|
||||
var parentElement = this.findXBlockElement(target),
|
||||
parentLocator = parentElement.data('locator'),
|
||||
buttonPanel = target.closest('.add-xblock-component'),
|
||||
listPanel = buttonPanel.prev(),
|
||||
scrollOffset = ViewUtils.getScrollOffset(buttonPanel),
|
||||
$placeholderEl = $(this.createPlaceholderElement()),
|
||||
requestData = _.extend(template, {
|
||||
parent_locator: parentLocator
|
||||
}),
|
||||
placeholderElement;
|
||||
placeholderElement = $placeholderEl.appendTo(listPanel);
|
||||
return $.postJSON(this.getURLRoot() + '/', requestData,
|
||||
_.bind(this.onNewXBlock, this, placeholderElement, scrollOffset, false))
|
||||
.fail(function() {
|
||||
// Remove the placeholder if the update failed
|
||||
placeholderElement.remove();
|
||||
});
|
||||
},
|
||||
|
||||
copyXBlock: function(event) {
|
||||
event.preventDefault();
|
||||
try {
|
||||
if (this.options.isIframeEmbed) {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: 'copyXBlock',
|
||||
payload: {}
|
||||
}, document.referrer
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
const clipboardEndpoint = "/api/content-staging/v1/clipboard/";
|
||||
const element = this.findXBlockElement(event.target);
|
||||
const usageKeyToCopy = element.data('locator');
|
||||
@@ -535,41 +536,44 @@ function($, _, Backbone, gettext, BasePage,
|
||||
});
|
||||
},
|
||||
|
||||
duplicateComponent: function(xblockElement) {
|
||||
// A placeholder element is created in the correct location for the duplicate xblock
|
||||
// and then onNewXBlock will replace it with a rendering of the xblock. Note that
|
||||
// for xblocks that can't be replaced inline, the entire parent will be refreshed.
|
||||
var self = this,
|
||||
parentElement = self.findXBlockElement(xblockElement.parent()),
|
||||
scrollOffset = ViewUtils.getScrollOffset(xblockElement),
|
||||
$placeholderEl = $(self.createPlaceholderElement()),
|
||||
placeholderElement;
|
||||
|
||||
placeholderElement = $placeholderEl.insertAfter(xblockElement);
|
||||
XBlockUtils.duplicateXBlock(xblockElement, parentElement)
|
||||
.done(function(data) {
|
||||
self.onNewXBlock(placeholderElement, scrollOffset, true, data);
|
||||
})
|
||||
.fail(function() {
|
||||
// Remove the placeholder if the update failed
|
||||
placeholderElement.remove();
|
||||
});
|
||||
},
|
||||
|
||||
duplicateXBlock: function(event) {
|
||||
event.preventDefault();
|
||||
try {
|
||||
if (this.options.isIframeEmbed) {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: 'duplicateXBlock',
|
||||
payload: {}
|
||||
}, document.referrer
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
this.duplicateComponent(this.findXBlockElement(event.target));
|
||||
},
|
||||
|
||||
showMoveXBlockModal: function(event) {
|
||||
try {
|
||||
if (this.options.isIframeEmbed) {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: 'showMoveXBlockModal',
|
||||
payload: {}
|
||||
}, document.referrer
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
var xblockElement = this.findXBlockElement(event.target),
|
||||
parentXBlockElement = xblockElement.parents('.studio-xblock-wrapper'),
|
||||
modal = new MoveXBlockModal({
|
||||
sourceXBlockInfo: XBlockUtils.findXBlockInfo(xblockElement, this.model),
|
||||
sourceParentXBlockInfo: XBlockUtils.findXBlockInfo(parentXBlockElement, this.model),
|
||||
XBlockURLRoot: this.getURLRoot(),
|
||||
outlineURL: this.options.outlineURL
|
||||
});
|
||||
sourceXBlockInfo: XBlockUtils.findXBlockInfo(xblockElement, this.model),
|
||||
sourceParentXBlockInfo: XBlockUtils.findXBlockInfo(parentXBlockElement, this.model),
|
||||
XBlockURLRoot: this.getURLRoot(),
|
||||
outlineURL: this.options.outlineURL
|
||||
});
|
||||
|
||||
event.preventDefault();
|
||||
modal.show();
|
||||
@@ -577,6 +581,18 @@ function($, _, Backbone, gettext, BasePage,
|
||||
|
||||
deleteXBlock: function(event) {
|
||||
event.preventDefault();
|
||||
try {
|
||||
if (this.options.isIframeEmbed) {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: 'deleteXBlock',
|
||||
payload: {}
|
||||
}, document.referrer
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
this.deleteComponent(this.findXBlockElement(event.target));
|
||||
},
|
||||
|
||||
|
||||
651
cms/static/sass/course-unit-mfe-iframe-bundle.scss
Normal file
651
cms/static/sass/course-unit-mfe-iframe-bundle.scss
Normal file
@@ -0,0 +1,651 @@
|
||||
@import 'cms/theme/variables-v1';
|
||||
@import 'elements/course-unit-mfe-iframe';
|
||||
|
||||
.wrapper {
|
||||
.wrapper-xblock {
|
||||
background-color: $transparent;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
border-color: none;
|
||||
}
|
||||
|
||||
.xblock-header-primary {
|
||||
padding: ($baseline * 1.2) ($baseline * 1.2) ($baseline / 1.67);
|
||||
border-bottom: none;
|
||||
|
||||
.header-details .xblock-display-name {
|
||||
font-size: 22px;
|
||||
line-height: 28px;
|
||||
font-weight: 700;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
&.level-element {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .15);
|
||||
margin: 0 0 ($baseline * 1.4) 0;
|
||||
}
|
||||
|
||||
&.level-element .xblock-header-primary {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
&.level-element .xblock-render {
|
||||
background: $white;
|
||||
margin: 0;
|
||||
padding: $baseline;
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.wrapper-xblock .header-actions .actions-list .action-item .action-button {
|
||||
@extend %button-styles;
|
||||
|
||||
color: $black;
|
||||
|
||||
.fa-ellipsis-v {
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
border-color: $transparent;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px $transparent;
|
||||
background-color: $transparent;
|
||||
box-shadow: inset 0 0 0 2px $primary;
|
||||
color: $primary;
|
||||
border-color: $transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.xblock-header-primary .header-actions .nav-dd .nav-sub {
|
||||
border: 1px solid rgba(0, 0, 0, .15);
|
||||
border-radius: 6px;
|
||||
padding: ($baseline / 2) 0;
|
||||
min-width: 288px;
|
||||
right: 90px;
|
||||
|
||||
.nav-item {
|
||||
border-bottom: none;
|
||||
color: $dark;
|
||||
font-size: $base-font-size;
|
||||
|
||||
a {
|
||||
padding: ($baseline / 2) ($baseline / 1.25);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f2f0ef;
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $primary;
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.wrapper-modal-window .modal-window .modal-actions a {
|
||||
color: $text-color;
|
||||
background-color: $transparent;
|
||||
border-color: $transparent;
|
||||
box-shadow: none;
|
||||
font-weight: 500;
|
||||
border: 1px solid $transparent;
|
||||
padding: ($baseline / 2) ($baseline / 1.25);
|
||||
font-size: $base-font-size;
|
||||
line-height: 20px;
|
||||
border-radius: $btn-border-radius;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background-color: $light-background-color;
|
||||
border-color: $transparent;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $transparent;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-window.modal-editor {
|
||||
background-color: $white;
|
||||
border-radius: 6px;
|
||||
|
||||
a {
|
||||
color: #00688d;
|
||||
}
|
||||
|
||||
select {
|
||||
&:focus {
|
||||
background-color: $white;
|
||||
color: $text-color;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 1px $primary;
|
||||
}
|
||||
}
|
||||
|
||||
input:not([type="radio"], [type="checkbox"], [type="submit"]) {
|
||||
@extend %input-styles;
|
||||
|
||||
line-height: 20px;
|
||||
height: 44px;
|
||||
|
||||
&:hover {
|
||||
border: solid 1px #002121;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $text-color;
|
||||
background-color: $white;
|
||||
border-color: $primary;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 1px $primary;
|
||||
}
|
||||
}
|
||||
|
||||
#student_training_settings_editor .openassessment_training_example .openassessment_training_example_body
|
||||
.openassessment_training_example_essay_wrapper textarea {
|
||||
@extend %input-styles;
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
@extend %input-styles;
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
&#poll-question-editor,
|
||||
&#poll-feedback-editor {
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
color: $text-color;
|
||||
background-color: $white;
|
||||
border-color: $primary;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 1px $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: solid 1px #002121;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $text-color;
|
||||
background-color: $white;
|
||||
border-color: $primary;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 1px $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.tip.setting-help {
|
||||
color: $border-color;
|
||||
font-size: 14px;
|
||||
line-height: $base-font-size;
|
||||
}
|
||||
|
||||
label,
|
||||
.label.setting-label {
|
||||
font-size: $base-font-size;
|
||||
line-height: 28px;
|
||||
color: $text-color;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.title.modal-window-title {
|
||||
color: $black;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.xblock-actions {
|
||||
background-color: $white;
|
||||
|
||||
.action-button {
|
||||
background-color: $transparent;
|
||||
border: 1px solid $transparent;
|
||||
padding: ($baseline / 2.22) ($baseline / 1.25);
|
||||
border-radius: $input-border-radius;
|
||||
font-weight: 400;
|
||||
color: #00688d;
|
||||
font-size: $base-font-size;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.openassessment_save_button,
|
||||
.save-button,
|
||||
.continue-button {
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
box-shadow: none;
|
||||
font-weight: 500;
|
||||
border: 1px solid $transparent;
|
||||
padding: ($baseline / 2) ($baseline / 1.25);
|
||||
font-size: $base-font-size;
|
||||
line-height: 20px;
|
||||
border-radius: $btn-border-radius;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
height: auto;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background: darken($primary, 5%);
|
||||
border-color: $transparent;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $primary;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.openassessment_cancel_button,
|
||||
.cancel-button {
|
||||
color: $text-color;
|
||||
background-color: $transparent;
|
||||
border-color: $transparent;
|
||||
box-shadow: none;
|
||||
font-weight: 500;
|
||||
border: 1px solid $transparent;
|
||||
padding: ($baseline / 2) ($baseline / 1.25);
|
||||
font-size: $base-font-size;
|
||||
line-height: 20px;
|
||||
border-radius: $btn-border-radius;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background-color: $light-background-color;
|
||||
border-color: $transparent;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $transparent;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-lg.modal-window.confirm.openassessment_modal_window {
|
||||
height: 635px;
|
||||
}
|
||||
}
|
||||
|
||||
.view-container .content-primary {
|
||||
background-color: $transparent;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrapper-content.wrapper {
|
||||
padding: $baseline / 4;
|
||||
}
|
||||
|
||||
.btn-default.action-edit.title-edit-button {
|
||||
@extend %button-styles;
|
||||
|
||||
position: relative;
|
||||
top: 7px;
|
||||
|
||||
.fa-pencil {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
@extend %icon-position;
|
||||
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: $black;
|
||||
mask: url('#{$static-path}/images/pencil-icon.svg') center no-repeat;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
border-color: $transparent;
|
||||
|
||||
&::before {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px $transparent;
|
||||
background-color: $transparent;
|
||||
box-shadow: inset 0 0 0 2px $primary;
|
||||
border-color: $transparent;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
border-color: $transparent;
|
||||
|
||||
&::before {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-edit {
|
||||
.action-button-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.edit-button.action-button {
|
||||
@extend %button-styles;
|
||||
|
||||
position: relative;
|
||||
|
||||
.fa-pencil {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
@extend %icon-position;
|
||||
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: $black;
|
||||
mask: url('#{$static-path}/images/pencil-icon.svg') center no-repeat;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
border-color: $transparent;
|
||||
|
||||
&::before {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px $transparent;
|
||||
background-color: $transparent;
|
||||
box-shadow: inset 0 0 0 2px $primary;
|
||||
border-color: $transparent;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
border-color: $transparent;
|
||||
|
||||
&::before {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dd.ui-right .nav-sub {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item {
|
||||
.editor-button,
|
||||
.settings-button {
|
||||
@extend %light-button;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="view-"] .wrapper.wrapper-modal-window .modal-window .modal-actions .action-primary {
|
||||
@extend %primary-button;
|
||||
}
|
||||
|
||||
.wrapper-comp-settings {
|
||||
.list-input.settings-list {
|
||||
.metadata-list-enum .create-setting {
|
||||
@extend %modal-actions-button;
|
||||
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
border: 1px solid $primary;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: darken($primary, 5%);
|
||||
border-color: #2d494e;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $primary;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-input.settings-list {
|
||||
.field.comp-setting-entry.is-set .setting-input {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
select {
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $input-border-radius;
|
||||
color: $text-color;
|
||||
height: 44px;
|
||||
|
||||
&:focus {
|
||||
background-color: $white;
|
||||
color: $text-color;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 1px $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: $base-font-size;
|
||||
line-height: 28px;
|
||||
color: $text-color;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.action.setting-clear {
|
||||
@extend %button-styles;
|
||||
|
||||
background-color: $transparent;
|
||||
color: $primary;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px $transparent;
|
||||
background-color: $transparent;
|
||||
box-shadow: inset 0 0 0 2px $primary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-input.settings-list .metadata-list-enum .remove-setting .fa-times-circle {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $input-border-radius;
|
||||
color: $text-color;
|
||||
height: 44px;
|
||||
padding: ($baseline / 2) ($baseline / 1.25);
|
||||
|
||||
&:focus {
|
||||
background-color: $white;
|
||||
color: $text-color;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 1px $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.xblock {
|
||||
.xblock--drag-and-drop--editor .tab {
|
||||
background-color: $white;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#openassessment-editor #oa_rubric_editor_wrapper {
|
||||
.openassessment_criterion .openassessment_criterion_basic_editor .comp-setting-entry .wrapper-comp-settings label input,
|
||||
.openassessment_criterion_option .openassessment_criterion_option_name_wrapper label,
|
||||
.openassessment_criterion_option .openassessment_criterion_option_explanation_wrapper label,
|
||||
.openassessment_criterion .openassessment_criterion_feedback_wrapper label,
|
||||
#openassessment_rubric_feedback_wrapper label,
|
||||
.openassessment_criterion_option .openassessment_criterion_option_point_wrapper label,
|
||||
.openassessment_criterion_option .openassessment_criterion_option_name_wrapper label input,
|
||||
.openassessment_criterion .openassessment_criterion_basic_editor .comp-setting-entry .wrapper-comp-settings .openassessment_criterion_prompt,
|
||||
#openassessment_rubric_feedback_wrapper textarea,
|
||||
.openassessment_criterion_option
|
||||
.openassessment_criterion_option_explanation_wrapper label textarea,
|
||||
input[type=number] {
|
||||
font-size: $base-font-size;
|
||||
background-color: $white;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
#openassessment-editor {
|
||||
#openassessment_editor_header .editor_tabs .oa_editor_tab {
|
||||
@extend %light-button;
|
||||
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#openassessment_editor_header,
|
||||
.openassessment_tab_instructions {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
#oa_schedule_editor_wrapper #dates_config_new_badge {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.openassessment_description {
|
||||
font-size: 14px;
|
||||
line-height: $base-font-size;
|
||||
}
|
||||
|
||||
#oa_rubric_editor_wrapper .openassessment_criterion
|
||||
.openassessment_criterion_basic_editor .comp-setting-entry
|
||||
.wrapper-comp-settings label {
|
||||
font-size: $base-font-size;
|
||||
line-height: 28px;
|
||||
color: $text-color;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#oa_rubric_editor_wrapper .openassessment_criterion_option
|
||||
.openassessment_criterion_option_point_wrapper label input {
|
||||
min-width: 70px;
|
||||
font-size: 18px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.openassessment_assessment_module_settings_editor:hover {
|
||||
border-color: $primary;
|
||||
|
||||
.drag-handle {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-help,
|
||||
.ti.wrapper-comp-settings .list-input.settings-list .setting-help {
|
||||
color: $border-color;
|
||||
font-size: 14px;
|
||||
line-height: $base-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.xblock--drag-and-drop--editor .btn,
|
||||
#openassessment-editor .openassessment_container_add_button,
|
||||
#openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_add_option,
|
||||
#student_training_settings_editor .openassessment_add_training_example {
|
||||
@extend %primary-button;
|
||||
}
|
||||
}
|
||||
|
||||
.xblock-header-primary {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 83px;
|
||||
left: 25px;
|
||||
width: 95%;
|
||||
height: 1px;
|
||||
background-color: #eae6e5;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-loading {
|
||||
background-color: #f8f7f6;
|
||||
box-shadow: none;
|
||||
|
||||
.spin,
|
||||
.copy {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-comp-setting.metadata-list-enum .action.setting-clear.active {
|
||||
margin-top: 0;
|
||||
}
|
||||
65
cms/static/sass/elements/_course-unit-mfe-iframe.scss
Normal file
65
cms/static/sass/elements/_course-unit-mfe-iframe.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
%button-styles {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
%input-styles {
|
||||
font-size: $base-font-size;
|
||||
color: $text-color !important;
|
||||
background-color: $white;
|
||||
border: 1px solid $border-color !important;
|
||||
border-radius: $input-border-radius !important;
|
||||
padding: 10px 16px !important;
|
||||
background-image: none;
|
||||
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
||||
}
|
||||
|
||||
%modal-actions-button {
|
||||
font-size: $base-font-size;
|
||||
line-height: 20px;
|
||||
padding: 10px 16px;
|
||||
border-radius: $btn-border-radius;
|
||||
}
|
||||
|
||||
%primary-button {
|
||||
@extend %modal-actions-button;
|
||||
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
border: 1px solid $primary;
|
||||
cursor: pointer;
|
||||
background-image: none;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background: darken($primary, 5%);
|
||||
border-color: #2d494e;
|
||||
box-shadow: none;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $primary;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
%light-button {
|
||||
@extend %modal-actions-button;
|
||||
|
||||
color: $black;
|
||||
background-color: $light-background-color;
|
||||
border-color: $light-background-color;
|
||||
box-shadow: none;
|
||||
border: 1px solid $transparent;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
%icon-position {
|
||||
top: 11px;
|
||||
left: 11px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
@@ -304,3 +304,12 @@ $state-danger-bg: #f2dede !default;
|
||||
$state-danger-border: darken($state-danger-bg, 5%) !default;
|
||||
|
||||
$text-dark-black-blue: #2c3e50;
|
||||
|
||||
$primary: #0a3055 !default;
|
||||
$btn-border-radius: 6px !default;
|
||||
$input-border-radius: 6px !default;
|
||||
$text-color: #454545 !default;
|
||||
$light-background-color: #e1dddb !default;
|
||||
$border-color: #707070 !default;
|
||||
$base-font-size: 18px !default;
|
||||
$dark: #212529;
|
||||
|
||||
278
cms/templates/container_chromeless.html
Normal file
278
cms/templates/container_chromeless.html
Normal file
@@ -0,0 +1,278 @@
|
||||
## coding=utf-8
|
||||
## mako
|
||||
##
|
||||
## Studio view template for rendering the whole Unit in an iframe with
|
||||
## XBlocks controls specifically for Authoring MFE. This template renders
|
||||
## a chromeless version of a unit container without headers, footers,
|
||||
## and a navigation bar.
|
||||
|
||||
<%! main_css = "style-main-v1" %>
|
||||
|
||||
<%! course_unit_mfe_iframe_css = "course-unit-mfe-iframe-bundle" %>
|
||||
|
||||
<%namespace name='static' file='static_content.html'/>
|
||||
<%!
|
||||
from django.urls import reverse
|
||||
from django.utils.translation import gettext as _
|
||||
|
||||
from cms.djangoapps.contentstore.config.waffle import CUSTOM_RELATIVE_DATES
|
||||
from cms.djangoapps.contentstore.helpers import xblock_type_display_name
|
||||
from lms.djangoapps.branding import api as branding_api
|
||||
from openedx.core.djangoapps.util.user_messages import PageLevelMessages
|
||||
from openedx.core.djangolib.js_utils import (
|
||||
dump_js_escaped_json, js_escaped_string
|
||||
)
|
||||
from openedx.core.djangolib.markup import HTML, Text
|
||||
from openedx.core.release import RELEASE_LINE
|
||||
%>
|
||||
|
||||
<%page expression_filter="h"/>
|
||||
<!doctype html>
|
||||
<!--[if lte IE 9]><html class="ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
|
||||
<!--[if !IE]><<!--><html lang="${LANGUAGE_CODE}"><!--<![endif]-->
|
||||
<head dir="${static.dir_rtl()}">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="openedx-release-line" content="${RELEASE_LINE}" />
|
||||
<title>
|
||||
${xblock.display_name_with_default} ${xblock_type_display_name(xblock)} |
|
||||
% if context_course:
|
||||
<% ctx_loc = context_course.location %>
|
||||
${context_course.display_name_with_default} |
|
||||
% elif context_library:
|
||||
${context_library.display_name_with_default} |
|
||||
% endif
|
||||
${settings.STUDIO_NAME}
|
||||
</title>
|
||||
|
||||
<%
|
||||
jsi18n_path = "js/i18n/{language}/djangojs.js".format(language=LANGUAGE_CODE)
|
||||
%>
|
||||
|
||||
% if getattr(settings, 'CAPTURE_CONSOLE_LOG', False):
|
||||
<script type="text/javascript">
|
||||
var oldOnError = window.onerror;
|
||||
window.localStorage.setItem('console_log_capture', JSON.stringify([]));
|
||||
|
||||
window.onerror = function (message, url, lineno, colno, error) {
|
||||
if (oldOnError) {
|
||||
oldOnError.apply(this, arguments);
|
||||
}
|
||||
|
||||
var messages = JSON.parse(window.localStorage.getItem('console_log_capture'));
|
||||
messages.push([message, url, lineno, colno, (error || {}).stack]);
|
||||
window.localStorage.setItem('console_log_capture', JSON.stringify(messages));
|
||||
}
|
||||
</script>
|
||||
% endif
|
||||
|
||||
<script type="text/javascript" src="${static.url(jsi18n_path)}"></script>
|
||||
% if settings.DEBUG:
|
||||
## Provides a fallback for gettext functions in development environment
|
||||
<script type="text/javascript" src="${static.url('js/src/gettext_fallback.js')}"></script>
|
||||
% endif
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="path_prefix" content="${EDX_ROOT_URL}">
|
||||
<% favicon_url = branding_api.get_favicon_url() %>
|
||||
<link rel="icon" type="image/x-icon" href="${favicon_url}"/>
|
||||
<%static:css group='style-vendor'/>
|
||||
<%static:css group='style-vendor-tinymce-content'/>
|
||||
<%static:css group='style-vendor-tinymce-skin'/>
|
||||
|
||||
% if uses_bootstrap:
|
||||
<link rel="stylesheet" href="${static.url(self.attr.main_css)}" type="text/css" media="all" />
|
||||
% else:
|
||||
<%static:css group='${self.attr.main_css}'/>
|
||||
% endif
|
||||
|
||||
<%static:css group='${self.attr.course_unit_mfe_iframe_css}'/>
|
||||
|
||||
<%include file="widgets/segment-io.html" />
|
||||
|
||||
% for template_name in templates:
|
||||
<script type="text/template" id="${template_name}-tpl">
|
||||
<%static:include path="js/${template_name}.underscore" />
|
||||
</script>
|
||||
% endfor
|
||||
<script type="text/template" id="image-modal-tpl">
|
||||
<%static:include path="common/templates/image-modal.underscore" />
|
||||
</script>
|
||||
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
|
||||
## The following stylesheets are included for studio-frontend debugging.
|
||||
## Remove this as part of studio frontend deprecation.
|
||||
## https://github.com/openedx/studio-frontend/issues/381
|
||||
% if not settings.STUDIO_FRONTEND_CONTAINER_URL:
|
||||
<link rel="stylesheet" type="text/css" href="${static.url('common/css/vendor/common.min.css')}" />
|
||||
<link rel="stylesheet" type="text/css" href="${static.url('common/css/vendor/editImageModal.min.css')}" />
|
||||
% endif
|
||||
</head>
|
||||
|
||||
<body class="${static.dir_rtl()} is-signedin course container view-container lang_${LANGUAGE_CODE}">
|
||||
|
||||
<a class="nav-skip" href="#main">${_("Skip to main content")}</a>
|
||||
|
||||
<%static:js group='base_vendor'/>
|
||||
|
||||
<%static:webpack entry="commons"/>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.baseUrl = "${settings.STATIC_URL | n, js_escaped_string}";
|
||||
require.config({
|
||||
baseUrl: window.baseUrl
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="${static.url("cms/js/require-config.js")}"></script>
|
||||
|
||||
<!-- view -->
|
||||
<div class="wrapper wrapper-view" dir="${static.dir_rtl()}">
|
||||
<%
|
||||
banner_messages = list(PageLevelMessages.user_messages(request))
|
||||
%>
|
||||
|
||||
% if banner_messages:
|
||||
<div class="page-banner">
|
||||
<div class="user-messages">
|
||||
% for message in banner_messages:
|
||||
<div class="alert ${message.css_class}" role="alert">
|
||||
<span class="icon icon-alert fa ${message.icon_class}" aria-hidden="true"></span>
|
||||
${HTML(message.message_html)}
|
||||
</div>
|
||||
% endfor
|
||||
</div>
|
||||
</div>
|
||||
% endif
|
||||
|
||||
<main id="main" aria-label="Content" tabindex="-1">
|
||||
<div id="content">
|
||||
|
||||
<div class="wrapper-content wrapper">
|
||||
<div class="inner-wrapper">
|
||||
<section class="content-area">
|
||||
<article class="content-primary ${'content-primary-fullwidth' if is_fullwidth_content else ''}">
|
||||
<%
|
||||
assets_url = reverse('assets_handler', kwargs={'course_key_string': str(xblock_locator.course_key)})
|
||||
%>
|
||||
<section class="wrapper-xblock level-page is-hidden studio-xblock-wrapper" data-locator="${xblock_locator}" data-course-key="${xblock_locator.course_key}" data-course-assets="${assets_url}">
|
||||
</section>
|
||||
<div class="ui-loading">
|
||||
<p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">${_("Loading")}</span></p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="page-prompt"></div>
|
||||
|
||||
% if context_course:
|
||||
<%static:webpack entry="js/factories/context_course"/>
|
||||
<script type="text/javascript">
|
||||
window.course = new ContextCourse({
|
||||
id: "${context_course.id | n, js_escaped_string}",
|
||||
name: "${context_course.display_name_with_default | n, js_escaped_string}",
|
||||
url_name: "${context_course.location.block_id | n, js_escaped_string}",
|
||||
org: "${context_course.location.org | n, js_escaped_string}",
|
||||
num: "${context_course.location.course | n, js_escaped_string}",
|
||||
display_course_number: "${context_course.display_coursenumber | n, js_escaped_string}",
|
||||
revision: "${context_course.location.branch | n, js_escaped_string}",
|
||||
self_paced: ${ context_course.self_paced | n, dump_js_escaped_json },
|
||||
is_custom_relative_dates_active: ${CUSTOM_RELATIVE_DATES.is_enabled(context_course.id) | n, dump_js_escaped_json},
|
||||
start: ${context_course.start | n, dump_js_escaped_json},
|
||||
discussions_settings: ${context_course.discussions_settings | n, dump_js_escaped_json}
|
||||
});
|
||||
</script>
|
||||
% endif
|
||||
<script type="text/javascript">
|
||||
require(['js/factories/base'], function () {});
|
||||
</script>
|
||||
|
||||
<%static:webpack entry="js/factories/container">
|
||||
ContainerFactory(
|
||||
${component_templates | n, dump_js_escaped_json},
|
||||
${xblock_info | n, dump_js_escaped_json},
|
||||
"${action | n, js_escaped_string}",
|
||||
{
|
||||
isUnitPage: ${is_unit_page | n, dump_js_escaped_json},
|
||||
canEdit: true,
|
||||
outlineURL: "${outline_url | n, js_escaped_string}",
|
||||
clipboardData: ${user_clipboard | n, dump_js_escaped_json},
|
||||
isIframeEmbed: true,
|
||||
}
|
||||
);
|
||||
</%static:webpack>
|
||||
</body>
|
||||
|
||||
## Initialize MutationObserver and ResizeObserver to update the iframe size.
|
||||
## These are used to provide resize events for the Authoring MFE.
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
// If this view is rendered in an iframe within the authoring microfrontend app
|
||||
// it will report the height of its contents to the parent window when the
|
||||
// document loads, window resizes, or DOM mutates.
|
||||
if (window !== window.parent) {
|
||||
var lastHeight = window.parent[0].offsetHeight;
|
||||
var lastWidth = window.parent[0].offsetWidth;
|
||||
var contentElement = document.getElementById('content');
|
||||
|
||||
function dispatchResizeMessage(event) {
|
||||
// Note: event is actually an Array of MutationRecord objects when fired from the MutationObserver
|
||||
var isLoadEvent = event.type === 'load';
|
||||
var newHeight = contentElement.offsetHeight;
|
||||
var newWidth = contentElement.offsetWidth;
|
||||
|
||||
// Monitor for messages and checks if the message contains an id. If
|
||||
// there is an id, then the location of the selected focus element
|
||||
// is sent through its offset attribute. The offset will allow the
|
||||
// page to scroll to the location of the focus element so that it is
|
||||
// at the top of the page. Unique ids and names are required for
|
||||
// proper scrolling.
|
||||
window.addEventListener('message', function (event) {
|
||||
if (event.data.hashName) {
|
||||
var targetId = event.data.hashName;
|
||||
var targetName = event.data.hashName.slice(1);
|
||||
// Checks if the target uses an id or name to focus and gets offset.
|
||||
var targetOffset = $(targetId).offset() || $(document.getElementsByName(targetName)[0]).offset();
|
||||
window.parent.postMessage({ 'offset': targetOffset.top }, document.referrer);
|
||||
}
|
||||
})
|
||||
|
||||
window.parent.postMessage(
|
||||
{
|
||||
type: 'plugin.resize',
|
||||
payload: {
|
||||
width: newWidth,
|
||||
height: newHeight,
|
||||
}
|
||||
}, document.referrer
|
||||
);
|
||||
|
||||
lastHeight = newHeight;
|
||||
lastWidth = newWidth;
|
||||
|
||||
// Within the authoring microfrontend the iframe resizes to match the
|
||||
// height of this document and it should never scroll. It does scroll
|
||||
// ocassionally when javascript is used to focus elements on the page
|
||||
// before the parent iframe has been resized to match the content
|
||||
// height. This window.scrollTo is an attempt to keep the content at the
|
||||
// top of the page.
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
// Create an observer instance linked to the callback function
|
||||
const observer = new MutationObserver(dispatchResizeMessage);
|
||||
|
||||
// Start observing the target node for configured mutations
|
||||
observer.observe(document.body, { attributes: true, childList: true, subtree: true });
|
||||
|
||||
window.addEventListener('load', dispatchResizeMessage);
|
||||
|
||||
const resizeObserver = new ResizeObserver(dispatchResizeMessage);
|
||||
resizeObserver.observe(document.body);
|
||||
}
|
||||
}());
|
||||
</script>
|
||||
</html>
|
||||
@@ -123,6 +123,8 @@ urlpatterns = oauth2_urlpatterns + [
|
||||
name='course_rerun_handler'),
|
||||
re_path(fr'^container/{settings.USAGE_KEY_PATTERN}$', contentstore_views.container_handler,
|
||||
name='container_handler'),
|
||||
re_path(fr'^container_embed/{settings.USAGE_KEY_PATTERN}$', contentstore_views.container_embed_handler,
|
||||
name='container_embed_handler'),
|
||||
re_path(fr'^orphan/{settings.COURSE_KEY_PATTERN}$', contentstore_views.orphan_handler,
|
||||
name='orphan_handler'),
|
||||
re_path(fr'^assets/{settings.COURSE_KEY_PATTERN}/{settings.ASSET_KEY_PATTERN}?$',
|
||||
|
||||
Reference in New Issue
Block a user