Skip to content

E
edx-platform
Commit 650bdc2f by cahrens
Options

Drag and drop support on the course outline page.

parent e8ae3d1b
Showing with 168 additions and 98 deletions
cms/djangoapps/contentstore/features/course-outline.py
......@@ -131,14 +131,3 @@ def all_sections_are_collapsed_or_expanded(step, text):
def change_grading_status(step):
world.css_find('a.menu-toggle').click()
world.css_find('.menu li').first.click()
@step(u'I reorder subsections')
def reorder_subsections(_step):
draggable_css = '.subsection-drag-handle'
ele = world.css_find(draggable_css).first
ele.action_chains.drag_and_drop_by_offset(
ele._element,
0,
25
).perform()
cms/static/js/spec/utils/drag_and_drop_spec.js
define(["js/utils/drag_and_drop", "js/views/feedback_notification", "js/spec_helpers/create_sinon", "jquery"],
function (ContentDragger, Notification, create_sinon, $) {
define(["js/utils/drag_and_drop", "js/views/feedback_notification", "js/spec_helpers/create_sinon", "jquery", "underscore"],
function (ContentDragger, Notification, create_sinon, $, _) {
describe("Overview drag and drop functionality", function () {
beforeEach(function () {
setFixtures(readFixtures('mock/mock-outline.underscore'));
ContentDragger.makeDraggable('.unit', '.unit-drag-handle', 'ol.sortable-unit-list', 'li.courseware-subsection, article.subsection-body');
ContentDragger.makeDraggable('.courseware-subsection', '.subsection-drag-handle', '.sortable-subsection-list', 'section');
_.each(
$('.unit'),
function (element) {
ContentDragger.makeDraggable(element, {
type: '.unit',
handleClass: '.unit-drag-handle',
droppableClass: 'ol.sortable-unit-list',
parentLocationSelector: 'li.courseware-subsection',
refresh: jasmine.createSpy('Spy on Unit')
});
}
);
_.each(
$('.courseware-subsection'),
function (element) {
ContentDragger.makeDraggable(element, {
type: '.courseware-subsection',
handleClass: '.subsection-drag-handle',
droppableClass: '.sortable-subsection-list',
parentLocationSelector: 'section',
refresh: jasmine.createSpy('Spy on Subsection')
});
}
);
});
describe("findDestination", function () {
......@@ -115,7 +137,7 @@ define(["js/utils/drag_and_drop", "js/views/feedback_notification", "js/spec_hel
});
it("can drag into a collapsed list", function () {
var $ele, destination;
$('#subsection-2').addClass('collapsed');
$('#subsection-2').addClass('is-collapsed');
$ele = $('#unit-2');
$ele.offset({
top: $('#subsection-2').offset().top + 3,
......@@ -142,11 +164,11 @@ define(["js/utils/drag_and_drop", "js/views/feedback_notification", "js/spec_hel
});
});
it("collapses expanded elements", function () {
expect($('#subsection-1')).not.toHaveClass('collapsed');
expect($('#subsection-1')).not.toHaveClass('is-collapsed');
ContentDragger.onDragStart({
element: $('#subsection-1')
}, null, null);
expect($('#subsection-1')).toHaveClass('collapsed');
expect($('#subsection-1')).toHaveClass('is-collapsed');
expect($('#subsection-1')).toHaveClass('expand-on-drop');
});
});
......@@ -246,16 +268,16 @@ define(["js/utils/drag_and_drop", "js/views/feedback_notification", "js/spec_hel
expect(['0px', 'auto']).toContain($('#unit-1').css('left'));
});
it("expands an element if it was collapsed on drag start", function () {
$('#subsection-1').addClass('collapsed');
$('#subsection-1').addClass('is-collapsed');
$('#subsection-1').addClass('expand-on-drop');
ContentDragger.onDragEnd({
element: $('#subsection-1')
}, null, null);
expect($('#subsection-1')).not.toHaveClass('collapsed');
expect($('#subsection-1')).not.toHaveClass('is-collapsed');
expect($('#subsection-1')).not.toHaveClass('expand-on-drop');
});
it("expands a collapsed element when something is dropped in it", function () {
$('#subsection-2').addClass('collapsed');
$('#subsection-2').addClass('is-collapsed');
ContentDragger.dragState.dropDestination = $('#list-2');
ContentDragger.dragState.attachMethod = "prepend";
ContentDragger.dragState.parentList = $('#subsection-2');
......@@ -264,7 +286,7 @@ define(["js/utils/drag_and_drop", "js/views/feedback_notification", "js/spec_hel
}, null, {
clientX: $('#unit-1').offset().left
});
expect($('#subsection-2')).not.toHaveClass('collapsed');
expect($('#subsection-2')).not.toHaveClass('is-collapsed');
});
});
describe("AJAX", function () {
......@@ -306,6 +328,10 @@ define(["js/utils/drag_and_drop", "js/views/feedback_notification", "js/spec_hel
expect(this.savingSpies.hide).toHaveBeenCalled();
this.clock.tick(1001);
expect($('#unit-1')).not.toHaveClass('was-dropped');
// source
expect($('#subsection-1').data('refresh')).toHaveBeenCalled();
// target
expect($('#subsection-2').data('refresh')).toHaveBeenCalled();
});
});
});
......
cms/static/js/spec/views/pages/course_outline_spec.js
......@@ -179,7 +179,7 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/view_helpers"
create_sinon.expectJsonRequest(requests, 'GET', '/xblock/outline/mock-course');
create_sinon.respondWithJson(requests, mockSingleSectionCourseJSON);
expect(outlinePage.$('.no-content')).not.toExist();
expect(outlinePage.$('.list-sections li').data('locator')).toEqual('mock-section');
expect(outlinePage.$('.list-sections li.outline-section').data('locator')).toEqual('mock-section');
});
it('can add a second section', function() {
......@@ -237,7 +237,7 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/view_helpers"
create_sinon.expectJsonRequest(requests, 'GET', '/xblock/outline/mock-course');
create_sinon.respondWithJson(requests, mockSingleSectionCourseJSON);
expect(outlinePage.$('.no-content')).not.toExist();
expect(outlinePage.$('.list-sections li').data('locator')).toEqual('mock-section');
expect(outlinePage.$('.list-sections li.outline-section').data('locator')).toEqual('mock-section');
});
it('remains empty if an add fails', function() {
......@@ -303,7 +303,7 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/view_helpers"
requestCount = requests.length;
create_sinon.respondWithError(requests);
expect(requests.length).toBe(requestCount); // No additional requests should be made
expect(outlinePage.$('.list-sections li').data('locator')).toEqual('mock-section');
expect(outlinePage.$('.list-sections li.outline-section').data('locator')).toEqual('mock-section');
});
it('can add a subsection', function() {
......
cms/static/js/views/course_outline.js
......@@ -9,15 +9,20 @@
* - adding units will automatically redirect to the unit page rather than showing them inline
*/
define(["jquery", "underscore", "js/views/xblock_outline", "js/views/utils/view_utils",
"js/models/xblock_outline_info",
"js/views/modals/edit_outline_item"],
function($, _, XBlockOutlineView, ViewUtils, XBlockOutlineInfo, EditSectionXBlockModal) {
"js/models/xblock_outline_info", "js/views/modals/edit_outline_item", "js/utils/drag_and_drop"],
function($, _, XBlockOutlineView, ViewUtils, XBlockOutlineInfo, EditSectionXBlockModal, ContentDragger) {
var CourseOutlineView = XBlockOutlineView.extend({
// takes XBlockOutlineInfo as a model
templateName: 'course-outline',
render: function() {
var renderResult = XBlockOutlineView.prototype.render.call(this);
this.makeContentDraggable(this.el);
return renderResult;
},
shouldExpandChildren: function() {
// Expand the children if this xblock's locator is in the initially expanded state
if (this.initialState && _.contains(this.initialState.expanded_locators, this.model.id)) {
......@@ -154,6 +159,36 @@ define(["jquery", "underscore", "js/views/xblock_outline", "js/views/utils/view_
event.preventDefault();
this.editXBlock();
}.bind(this));
},
makeContentDraggable: function(element) {
if ($(element).hasClass("outline-section")) {
ContentDragger.makeDraggable(element, {
type: '.outline-section',
handleClass: '.section-drag-handle',
droppableClass: 'ol.list-sections',
parentLocationSelector: 'article.outline',
refresh: this.refresh.bind(this)
});
}
else if ($(element).hasClass("outline-subsection")) {
ContentDragger.makeDraggable(element, {
type: '.outline-subsection',
handleClass: '.subsection-drag-handle',
droppableClass: 'ol.list-subsections',
parentLocationSelector: 'li.outline-section',
refresh: this.refresh.bind(this)
});
}
else if ($(element).hasClass("outline-unit")) {
ContentDragger.makeDraggable(element, {
type: '.outline-unit',
handleClass: '.unit-drag-handle',
droppableClass: 'ol.list-units',
parentLocationSelector: 'li.outline-subsection',
refresh: this.refresh.bind(this)
});
}
}
});
......
cms/static/js/views/overview.js
define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/feedback_notification", "js/utils/drag_and_drop",
define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/feedback_notification",
"js/utils/cancel_on_escape", "js/utils/date_utils", "js/utils/module"],
function (domReady, $, ui, _, gettext, NotificationView, ContentDragger, CancelOnEscape,
function (domReady, $, ui, _, gettext, NotificationView, CancelOnEscape,
DateUtils, ModuleUtils) {
var modalSelector = '.edit-section-publish-settings';
......@@ -37,9 +37,9 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
var closeModalNew = function (e) {
if (e) {
if (e) {
e.preventDefault();
};
}
$('body').removeClass('modal-window-is-shown');
$('.edit-section-publish-settings').removeClass('is-shown');
};
......@@ -230,27 +230,6 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
$('.new-courseware-section-button').bind('click', addNewSection);
$('.new-subsection-item').bind('click', addNewSubsection);
// Section
ContentDragger.makeDraggable(
'.courseware-section',
'.section-drag-handle',
'.courseware-overview',
'article.courseware-overview'
);
// Subsection
ContentDragger.makeDraggable(
'.id-holder',
'.subsection-drag-handle',
'.subsection-list > ol',
'.courseware-section'
);
// Unit
ContentDragger.makeDraggable(
'.unit',
'.unit-drag-handle',
'ol.sortable-unit-list',
'li.courseware-subsection, article.subsection-body'
);
});
return {
......
cms/static/sass/elements/_controls.scss
......@@ -394,6 +394,9 @@
box-shadow: 0 1px 2px 0 $blue-t2;
}
}
.was-dragging {
@include transition(transform $tmg-f2 ease-in-out 0);
}
// UI: drag state - was dragging
.was-dragging {
......
cms/static/sass/views/_outline.scss
......@@ -224,6 +224,10 @@
color: $blue;
}
}
&.is-dragging {
@include transition-property(none);
}
}
// item: title
......
cms/templates/js/course-outline.underscore
......@@ -35,6 +35,8 @@ if (statusType === 'warning') {
<li class="outline-item outline-<%= xblockType %> <%= visibilityClass %> is-draggable <%= includesChildren ? 'is-collapsible' : '' %> <%= isCollapsed ? 'is-collapsed' : '' %>"
data-parent="<%= parentInfo.get('id') %>" data-locator="<%= xblockInfo.get('id') %>">
<span class="draggable-drop-indicator draggable-drop-indicator-before"><i class="icon-caret-right"></i></span>
<div class="<%= xblockType %>-header">
<% if (includesChildren) { %>
<h3 class="<%= xblockType %>-header-details expand-collapse <%= isCollapsed ? 'expand' : 'collapse' %> ui-toggle-expansion" title="<%= gettext('Collapse/Expand this Checklist') %>">
......@@ -69,6 +71,12 @@ if (statusType === 'warning') {
<span class="sr action-button-text"><%= gettext('Delete') %></span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="<%= gettext('Drag to reorder') %>"
class="drag-handle <%= xblockType %>-drag-handle action">
<span class="sr"><%= gettext('Drag to reorder') %></span>
</span>
</li>
</ul>
</div>
</div>
......@@ -125,10 +133,14 @@ if (statusType === 'warning') {
</a>
</p>
</div>
<% } else { %>
<% } else if (category !== 'vertical') { %>
<div class="outline-content <%= xblockType %>-content">
<ol class="<%= typeListClass %> is-sortable">
<li class="ui-splint ui-splint-indicator">
<span class="draggable-drop-indicator draggable-drop-indicator-initial"><i class="icon-caret-right"></i></span>
</li>
</ol>
<% if (childType) { %>
<div class="add-<%= childType %> add-item">
<a href="#" class="button button-new" data-category="<%= childCategory %>"
......@@ -141,5 +153,6 @@ if (statusType === 'warning') {
<% } %>
<% if (parentInfo) { %>
<span class="draggable-drop-indicator draggable-drop-indicator-after"><i class="icon-caret-right"></i></span>
</li>
<% } %>
cms/templates/js/xblock-outline.underscore
......@@ -29,11 +29,6 @@
<span class="sr"><%= gettext('Delete') %></span>
</a>
</li>
<li class="actions-item drag">
<span data-tooltip="<%= gettext('Drag to reorder') %>" class="drag-handle">
<span class="sr"><%= gettext('Drag to reorder') %></span>
</span>
</li>
</ul>
</div>
</div>
......
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