144 lines
6.5 KiB
JavaScript
144 lines
6.5 KiB
JavaScript
define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext", "common/js/components/views/feedback_notification",
|
|
"jquery.ui"], // The container view uses sortable, which is provided by jquery.ui.
|
|
function ($, _, XBlockView, ModuleUtils, gettext, NotificationView) {
|
|
var studioXBlockWrapperClass = '.studio-xblock-wrapper';
|
|
|
|
var ContainerView = XBlockView.extend({
|
|
// Store the request token of the first xblock on the page (which we know was rendered by Studio when
|
|
// the page was generated). Use that request token to filter out user-defined HTML in any
|
|
// child xblocks within the page.
|
|
requestToken: "",
|
|
|
|
new_child_view: 'reorderable_container_child_preview',
|
|
|
|
xblockReady: function () {
|
|
XBlockView.prototype.xblockReady.call(this);
|
|
var reorderableClass, reorderableContainer,
|
|
newParent, oldParent, self = this;
|
|
|
|
this.requestToken = this.$('div.xblock').first().data('request-token');
|
|
reorderableClass = this.makeRequestSpecificSelector('.reorderable-container');
|
|
|
|
reorderableContainer = this.$(reorderableClass);
|
|
reorderableContainer.sortable({
|
|
handle: '.drag-handle',
|
|
|
|
start: function (event, ui) {
|
|
// Necessary because of an open bug in JQuery sortable.
|
|
// http://bugs.jqueryui.com/ticket/4990
|
|
reorderableContainer.sortable('refreshPositions');
|
|
},
|
|
|
|
stop: function (event, ui) {
|
|
var saving, hideSaving, removeFromParent;
|
|
|
|
if (_.isUndefined(oldParent)) {
|
|
// If no actual change occurred,
|
|
// oldParent will never have been set.
|
|
return;
|
|
}
|
|
|
|
saving = new NotificationView.Mini({
|
|
title: gettext('Saving')
|
|
});
|
|
saving.show();
|
|
|
|
hideSaving = function () {
|
|
saving.hide();
|
|
};
|
|
|
|
// If moving from one container to another,
|
|
// add to new container before deleting from old to
|
|
// avoid creating an orphan if the addition fails.
|
|
if (newParent) {
|
|
removeFromParent = oldParent;
|
|
self.updateChildren(newParent, function () {
|
|
self.updateChildren(removeFromParent, hideSaving);
|
|
});
|
|
} else {
|
|
// No new parent, only reordering within same container.
|
|
self.updateChildren(oldParent, hideSaving);
|
|
}
|
|
|
|
oldParent = undefined;
|
|
newParent = undefined;
|
|
},
|
|
update: function (event, ui) {
|
|
// 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
|
|
// was originally in (the case of a move within the same container
|
|
// or the deletion from a container when moving to a new container).
|
|
var parent = $(event.target).closest(studioXBlockWrapperClass);
|
|
if (ui.sender) {
|
|
// Move to a new container (the addition part).
|
|
newParent = parent;
|
|
} else {
|
|
// Reorder inside a container, or deletion when moving to new container.
|
|
oldParent = parent;
|
|
}
|
|
},
|
|
helper: "original",
|
|
opacity: '0.5',
|
|
placeholder: 'component-placeholder',
|
|
forcePlaceholderSize: true,
|
|
axis: 'y',
|
|
items: '> .is-draggable',
|
|
connectWith: reorderableClass,
|
|
tolerance: "pointer"
|
|
|
|
});
|
|
},
|
|
|
|
updateChildren: function (targetParent, successCallback) {
|
|
var children, childLocators, xblockInfo=this.model;
|
|
|
|
// Find descendants with class "studio-xblock-wrapper" whose parent === targetParent.
|
|
// This is necessary to filter our grandchildren, great-grandchildren, etc.
|
|
children = targetParent.find(studioXBlockWrapperClass).filter(function () {
|
|
var parent = $(this).parent().closest(studioXBlockWrapperClass);
|
|
return parent.data('locator') === targetParent.data('locator');
|
|
});
|
|
|
|
childLocators = _.map(
|
|
children,
|
|
function (child) {
|
|
return $(child).data('locator');
|
|
}
|
|
);
|
|
$.ajax({
|
|
url: ModuleUtils.getUpdateUrl(targetParent.data('locator')),
|
|
type: 'PUT',
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({
|
|
children: childLocators
|
|
}),
|
|
success: function () {
|
|
// change data-parent on the element moved.
|
|
if (successCallback) {
|
|
successCallback();
|
|
}
|
|
// Update publish and last modified information from the server.
|
|
xblockInfo.fetch();
|
|
}
|
|
});
|
|
},
|
|
|
|
acknowledgeXBlockDeletion: function(locator){
|
|
this.notifyRuntime('deleted-child', locator);
|
|
},
|
|
|
|
refresh: function() {
|
|
var sortableInitializedClass = this.makeRequestSpecificSelector('.reorderable-container.ui-sortable');
|
|
this.$(sortableInitializedClass).sortable('refresh');
|
|
},
|
|
|
|
makeRequestSpecificSelector: function(selector) {
|
|
return 'div.xblock[data-request-token="' + this.requestToken + '"] > ' + selector;
|
|
}
|
|
});
|
|
|
|
return ContainerView;
|
|
}); // end define();
|