Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1896 from edx/frances/fix/studio-outline-cleanup

Browse Source 
FED Cleanup of Studio Outline page
This commit is contained in:
frances botsford
2013-12-17 07:27:14 -08:00
parent 8554c3f0ab 1618c916bb
commit 8a23f432c7
15 changed files with 1278 additions and 919 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
cms/static/js/base.js
View File

@@ -25,7 +25,7 @@ domReady(function() {
$('body').addClass('js');
$('.unit .item-actions .delete-button').bind('click', deleteUnit);
$('.unit .item-actions .delete-unit-button').bind('click', deleteUnit);
$('.new-unit-item').bind('click', createNewUnit);
// lean/simple modal
@@ -243,17 +243,17 @@ function createNewUnit(e) {
function deleteUnit(e) {
e.preventDefault();
_deleteItem($(this).parents('li.leaf'), 'Unit');
_deleteItem($(this).parents('li.courseware-unit'), 'Unit');
}
function deleteSubsection(e) {
e.preventDefault();
_deleteItem($(this).parents('li.branch'), 'Subsection');
_deleteItem($(this).parents('li.courseware-subsection'), 'Subsection');
}
function deleteSection(e) {
e.preventDefault();
_deleteItem($(this).parents('section.branch'), 'Section');
_deleteItem($(this).parents('section.courseware-section'), 'Section');
}
function _deleteItem($el, type) {

140
cms/static/js/views/overview.js
View File

@@ -1,9 +1,9 @@
define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/feedback_notification", "draggabilly",
"js/utils/modal", "js/utils/cancel_on_escape", "js/utils/get_date", "js/utils/module"],
function (domReady, $, ui, _, gettext, NotificationView, Draggabilly, ModalUtils, CancelOnEscape,
"js/utils/cancel_on_escape", "js/utils/get_date", "js/utils/module"],
function (domReady, $, ui, _, gettext, NotificationView, Draggabilly, CancelOnEscape,
DateUtils, ModuleUtils) {
var modalSelector = '.edit-subsection-publish-settings';
var modalSelector = '.edit-section-publish-settings';
var toggleSections = function(e) {
e.preventDefault();
@@ -21,18 +21,24 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
if ($button.hasClass('is-activated')) {
$section.addClass('collapsed');
// first child in order to avoid the icons on the subsection lists which are not in the first child
$section.find('header .expand-collapse-icon').removeClass('collapse').addClass('expand');
$section.find('header .expand-collapse').removeClass('collapse').addClass('expand');
} else {
$section.removeClass('collapsed');
// first child in order to avoid the icons on the subsection lists which are not in the first child
$section.find('header .expand-collapse-icon').removeClass('expand').addClass('collapse');
$section.find('header .expand-collapse').removeClass('expand').addClass('collapse');
}
};
var toggleSubmodules = function(e) {
e.preventDefault();
$(this).toggleClass('expand').toggleClass('collapse');
$(this).closest('.branch, .window').toggleClass('collapsed');
$(this).closest('.is-collapsible, .window').toggleClass('collapsed');
};
var closeModalNew = function () {
$('body').removeClass('dialog-is-shown');
$('.edit-section-publish-settings').removeClass('is-shown');
};
var editSectionPublishDate = function (e) {
@@ -45,15 +51,16 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
$modal.find('.save-button').hide();
}
$modal.find('.section-name').html('"' + $(this).closest('.courseware-section').find('.section-name-span').text() + '"');
ModalUtils.showModal();
$('body').addClass('dialog-is-shown');
$('.edit-section-publish-settings').addClass('is-shown');
};
var saveSetSectionScheduleDate = function (e) {
e.preventDefault();
var datetime = DateUtils(
$('.edit-subsection-publish-settings .start-date'),
$('.edit-subsection-publish-settings .start-time')
$('.edit-section-publish-settings .start-date'),
$('.edit-section-publish-settings .start-time')
);
var locator = $(modalSelector).attr('data-locator');
@@ -89,19 +96,19 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
var $thisSection = $('.courseware-section[data-locator="' + locator + '"]');
var html = _.template(
'<span class="published-status">' +
'<strong>' + gettext("Will Release:") + '&nbsp;</strong>' +
'<strong>' + gettext("Release date:") + '&nbsp;</strong>' +
gettext("{month}/{day}/{year} at {hour}:{minute} UTC") +
'</span>' +
'<a href="#" class="edit-button" data-date="{month}/{day}/{year}" data-time="{hour}:{minute}" data-locator="{locator}">' +
gettext("Edit") +
'</a>',
'<a href="#" class="edit-release-date action" data-date="{month}/{day}/{year}" data-time="{hour}:{minute}" data-locator="{locator}"><i class="icon-time"></i> <span class="sr">' +
gettext("Edit section release date") +
'</span></a>',
{year: datetime.getUTCFullYear(), month: pad2(datetime.getUTCMonth() + 1), day: pad2(datetime.getUTCDate()),
hour: pad2(datetime.getUTCHours()), minute: pad2(datetime.getUTCMinutes()),
locator: locator},
{interpolate: /\{(.+?)\}/g});
$thisSection.find('.section-published-date').html(html);
ModalUtils.hideModal();
saving.hide();
closeModalNew();
});
};
@@ -159,7 +166,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
var $saveButton = $newSubsection.find('.new-subsection-name-save');
var $cancelButton = $newSubsection.find('.new-subsection-name-cancel');
var parent = $(this).parents("section.branch").data("locator");
var parent = $(this).parents("section.courseware-section").data("locator");
$saveButton.data('parent', parent);
$saveButton.data('category', $(this).data('category'));
@@ -197,7 +204,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
var cancelNewSubsection = function (e) {
e.preventDefault();
$(this).parents('li.branch').remove();
$(this).parents('li.courseware-subsection').remove();
};
var overviewDragger = {
@@ -212,6 +219,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
*/
findDestination: function (ele, yChange) {
var eleY = ele.offset().top;
var eleYEnd = eleY + ele.height();
var containers = $(ele.data('droppable-class'));
for (var i = 0; i < containers.length; i++) {
@@ -226,7 +234,15 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
// position of the container
var parentList = container.parents(ele.data('parent-location-selector')).first();
if (parentList.hasClass('collapsed')) {
if (Math.abs(eleY - parentList.offset().top) < 10) {
var parentListTop = parentList.offset().top;
// To make it easier to drop subsections into collapsed sections (which have
// a lot of visual padding around them), allow a fudge factor around the
// parent element.
var collapseFudge = 10;
if (Math.abs(eleY - parentListTop) < collapseFudge ||
(eleY > parentListTop &&
eleYEnd - collapseFudge <= parentListTop + parentList.height())
) {
return {
ele: container,
attachMethod: 'prepend',
@@ -260,25 +276,64 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
// Facilitate dropping into the beginning or end of a list
// (coming from opposite direction) via a "fudge factor". Math.min is for Jasmine test.
var fudge = Math.min(Math.ceil(siblingHeight / 2), 20);
// Dragging up into end of list.
if (j == siblings.length - 1 && yChange < 0 && Math.abs(eleY - siblingYEnd) <= fudge) {
return {
ele: $sibling,
attachMethod: 'after'
};
// Dragging to top or bottom of a list with only one element is tricky
// because the element being dragged may be the same size as the sibling.
if (siblings.length == 1) {
// Element being dragged is within the drop target. Use the direction
// of the drag (yChange) to determine before or after.
if (eleY + fudge >= siblingY && eleYEnd - fudge <= siblingYEnd) {
return {
ele: $sibling,
attachMethod: yChange > 0 ? 'after' : 'before'
};
}
// Element being dragged is before the drop target.
else if (Math.abs(eleYEnd - siblingY) <= fudge) {
return {
ele: $sibling,
attachMethod: 'before'
};
}
// Element being dragged is after the drop target.
else if (Math.abs(eleY - siblingYEnd) <= fudge) {
return {
ele: $sibling,
attachMethod: 'after'
};
}
}
// Dragging down into beginning of list.
else if (j == 0 && yChange > 0 && Math.abs(eleY - siblingY) <= fudge) {
return {
ele: $sibling,
attachMethod: 'before'
};
}
else if (eleY >= siblingY && eleY <= siblingYEnd) {
return {
ele: $sibling,
attachMethod: eleY - siblingY <= siblingHeight / 2 ? 'before' : 'after'
};
else {
// Dragging up into end of list.
if (j == siblings.length - 1 && yChange < 0 && Math.abs(eleY - siblingYEnd) <= fudge) {
return {
ele: $sibling,
attachMethod: 'after'
};
}
// Dragging up or down into beginning of list.
else if (j == 0 && Math.abs(eleY - siblingY) <= fudge) {
return {
ele: $sibling,
attachMethod: 'before'
};
}
// Dragging down into end of list. Special handling required because
// the element being dragged may be taller then the element being dragged over
// (if eleY can never be >= siblingY, general case at the end does not work).
else if (j == siblings.length - 1 && yChange > 0 &&
Math.abs(eleYEnd - siblingYEnd) <= fudge) {
return {
ele: $sibling,
attachMethod: 'after'
};
}
else if (eleY >= siblingY && eleY <= siblingYEnd) {
return {
ele: $sibling,
attachMethod: eleY - siblingY <= siblingHeight / 2 ? 'before' : 'after'
};
}
}
}
}
@@ -310,7 +365,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
};
if (!ele.hasClass('collapsed')) {
ele.addClass('collapsed');
ele.find('.expand-collapse-icon').first().addClass('expand').removeClass('collapse');
ele.find('.expand-collapse').first().addClass('expand').removeClass('collapse');
// onDragStart gets called again after the collapse, so we can't just store a variable in the dragState.
ele.addClass(this.expandOnDropClass);
}
@@ -406,7 +461,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
expandElement: function (ele) {
ele.removeClass('collapsed');
ele.find('.expand-collapse-icon').first().removeClass('expand').addClass('collapse');
ele.find('.expand-collapse').first().removeClass('expand').addClass('collapse');
},
/*
@@ -500,13 +555,12 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
}
});
$('.toggle-button-sections').bind('click', toggleSections);
$('.expand-collapse-icon').bind('click', toggleSubmodules);
$('.expand-collapse').bind('click', toggleSubmodules);
var $body = $('body');
$body.on('click', '.section-published-date .edit-button', editSectionPublishDate);
$body.on('click', '.section-published-date .schedule-button', editSectionPublishDate);
$body.on('click', '.edit-subsection-publish-settings .save-button', saveSetSectionScheduleDate);
$body.on('click', '.edit-subsection-publish-settings .cancel-button', ModalUtils.hideModal);
$body.on('click', '.section-published-date .edit-release-date', editSectionPublishDate);
$body.on('click', '.edit-section-publish-settings .action-save', saveSetSectionScheduleDate);
$body.on('click', '.edit-section-publish-settings .action-cancel', closeModalNew);
$('.new-courseware-section-button').bind('click', addNewSection);
$('.new-subsection-item').bind('click', addNewSubsection);
@@ -530,7 +584,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
'.unit',
'.unit-drag-handle',
'ol.sortable-unit-list',
'li.branch, article.subsection-body'
'li.courseware-subsection, article.subsection-body'
);
});