Commit 7ce547f0 by cahrens

Fix for "ui-sortable" existing in HTML within HTML module.

parent 7130c14f
define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext", "js/views/feedback_notification", define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext", "js/views/feedback_notification",
"jquery.ui"], // The container view uses sortable, which is provided by jquery.ui. "jquery.ui"], // The container view uses sortable, which is provided by jquery.ui.
function ($, _, XBlockView, ModuleUtils, gettext, NotificationView) { function ($, _, XBlockView, ModuleUtils, gettext, NotificationView) {
var reorderableClass = '.reorderable-container', var studioXBlockWrapperClass = '.studio-xblock-wrapper';
sortableInitializedClass = '.ui-sortable',
studioXBlockWrapperClass = '.studio-xblock-wrapper';
var ContainerView = XBlockView.extend({ 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: "",
xblockReady: function () { xblockReady: function () {
XBlockView.prototype.xblockReady.call(this); XBlockView.prototype.xblockReady.call(this);
var reorderableContainer = this.$(reorderableClass), var reorderableClass, reorderableContainer,
alreadySortable = this.$(sortableInitializedClass), newParent, oldParent, self = this;
newParent,
oldParent,
self = this;
alreadySortable.sortable("destroy"); this.requestToken = this.$('div.xblock').first().data('request-token');
reorderableClass = this.makeRequestSpecificSelector('.reorderable-container');
reorderableContainer = this.$(reorderableClass);
reorderableContainer.sortable({ reorderableContainer.sortable({
handle: '.drag-handle', handle: '.drag-handle',
...@@ -123,7 +124,12 @@ define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext", ...@@ -123,7 +124,12 @@ define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext",
}, },
refresh: function() { refresh: function() {
var sortableInitializedClass = this.makeRequestSpecificSelector('.reorderable-container.ui-sortable');
this.$(sortableInitializedClass).sortable('refresh'); this.$(sortableInitializedClass).sortable('refresh');
},
makeRequestSpecificSelector: function(selector) {
return 'div.xblock[data-request-token="' + this.requestToken + '"] > ' + selector;
} }
}); });
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</div> </div>
</header> </header>
<article class="xblock-render"> <article class="xblock-render">
<div class="xblock" data-locator="locator-container" <div class="xblock" data-locator="locator-container" data-request-token="page-render-token"
data-init="MockXBlock" data-runtime-class="StudioRuntime" data-runtime-version="1"> data-init="MockXBlock" data-runtime-class="StudioRuntime" data-runtime-version="1">
<ol class="reorderable-container"> <ol class="reorderable-container">
<li class="studio-xblock-wrapper is-draggable" data-locator="locator-group-A"> <li class="studio-xblock-wrapper is-draggable" data-locator="locator-group-A">
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</header> </header>
<article class="xblock-render"> <article class="xblock-render">
<div class="xblock"> <div class="xblock" data-request-token="page-render-token">
<ol class="reorderable-container"> <ol class="reorderable-container">
<li class="studio-xblock-wrapper is-draggable" data-locator="locator-component-A1"> <li class="studio-xblock-wrapper is-draggable" data-locator="locator-component-A1">
<section class="wrapper-xblock level-element" <section class="wrapper-xblock level-element"
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
</header> </header>
<article class="xblock-render"> <article class="xblock-render">
<div class="xblock"> <div class="xblock" data-request-token="page-render-token">
<ol class="reorderable-container"> <ol class="reorderable-container">
<li class="studio-xblock-wrapper is-draggable" data-locator="locator-component-B1"> <li class="studio-xblock-wrapper is-draggable" data-locator="locator-component-B1">
<section class="wrapper-xblock level-element" <section class="wrapper-xblock level-element"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment