Skip to content

E
edx-platform
Commit 44251612 by Calen Pennington
Options

Merge pull request #936 from MITx/feature/cas/tomg/saving-conventions 

new saving conventions
parents 35d50976 fb2925a2
Showing with 164 additions and 28 deletions
cms/static/coffee/src/views/module_edit.coffee
......@@ -57,7 +57,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
data = @module.save()
data.metadata = @metadata()
@model.save(data).done( =>
showToastMessage("Your changes have been saved.", null, 3)
# # showToastMessage("Your changes have been saved.", null, 3)
@module = null
@render()
@$el.removeClass('editing')
......
cms/static/coffee/src/views/unit.coffee
......@@ -177,6 +177,7 @@ class CMS.Views.UnitEdit.NameEdit extends Backbone.View
initialize: =>
@model.on('change:metadata', @render)
@saveName
@$spinner = $('<span class="spinner-in-field-icon"></span>');
render: =>
@$('.unit-display-name-input').val(@model.get('metadata').display_name)
......@@ -186,7 +187,27 @@ class CMS.Views.UnitEdit.NameEdit extends Backbone.View
metadata = $.extend({}, @model.get('metadata'))
metadata.display_name = @$('.unit-display-name-input').val()
$('.unit-location .editing .unit-name').html(metadata.display_name)
@model.set('metadata', metadata)
@model.set 'metadata', metadata
inputField = this.$el.find('input')
# add a spinner
@$spinner.css({
'position': 'absolute',
'top': Math.floor(inputField.position().top + (inputField.outerHeight() / 2) + 3),
'left': inputField.position().left + inputField.outerWidth() - 24,
'margin-top': '-10px'
});
inputField.after(@$spinner);
# save the name after a slight delay
if @timer
clearTimeout @timer
@timer = setTimeout( =>
@model.save()
@timer = null
@$spinner.delay(500).fadeOut(150)
, 500)
class CMS.Views.UnitEdit.LocationState extends Backbone.View
initialize: =>
......
cms/static/js/base.js
......@@ -4,6 +4,8 @@ var $modalCover;
var $newComponentItem;
var $newComponentStep1;
var $newComponentStep2;
var $changedInput;
var $spinner;
$(document).ready(function() {
$body = $('body');
......@@ -13,6 +15,7 @@ $(document).ready(function() {
$newComponentTypePicker = $('.new-component');
$newComponentTemplatePickers = $('.new-component-templates');
$newComponentButton = $('.new-component-button');
$spinner = $('<span class="spinner-in-field-icon"></span>');
$body.bind('keyup', onKeyUp);
$('.expand-collapse-icon').bind('click', toggleSubmodules);
......@@ -31,6 +34,14 @@ $(document).ready(function() {
$('.new-unit-item').bind('click', createNewUnit);
$('.save-subsection').bind('click', saveSubsection);
// autosave when a field is updated on the subsection page
$body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue);
$('.subsection-display-name-input, .unit-subtitle, .policy-list-name, .policy-list-value').each(function(i) {
this.val = $(this).val();
});
$("#start_date, #start_time, #due_date, #due_time").bind('change', autosaveInput);
$('.sync-date, .remove-date').bind('click', autosaveInput);
// making the unit list sortable
$('.sortable-unit-list').sortable({
axis: 'y',
......@@ -62,7 +73,7 @@ $(document).ready(function() {
});
// Subsection reordering
$('.unit-list ol').sortable({
$('.subsection-list > ol').sortable({
axis: 'y',
handle: '.section-item .drag-handle',
update: onSubsectionReordered
......@@ -101,7 +112,7 @@ function showImportSubmit(e) {
$('.file-name-block').show();
$('.import .choose-file-button').hide();
$('.submit-button').show();
$('.progress').show();
$('.progress').show();
} else {
$('.error-block').html('File format not supported. Please upload a file with a <code>tar.gz</code> extension.').show();
}
......@@ -109,27 +120,48 @@ function showImportSubmit(e) {
function syncReleaseDate(e) {
e.preventDefault();
$(this).closest('.notice').hide();
$("#start_date").val("");
$("#start_time").val("");
}
function addPolicyMetadata(e) {
e.preventDefault();
var template =$('#add-new-policy-element-template > li');
var template =$('#add-new-policy-element-template > li');
var newNode = template.clone();
var _parent_el = $(this).parent('ol:.policy-list');
newNode.insertBefore('.add-policy-data');
$('.remove-policy-data').bind('click', removePolicyMetadata);
newNode.find('.policy-list-name').focus();
newNode.find('.save-button').bind('click', savePolicyMetadata);
newNode.find('.cancel-button').bind('click', cancelPolicyMetadata);
}
function savePolicyMetadata(e) {
e.preventDefault();
$('.save-subsection').click();
$(this).parents('.policy-list-element').removeClass('new-policy-list-element');
}
function cancelPolicyMetadata(e) {
e.preventDefault();
$(this).parents('.policy-list-element').remove();
}
function removePolicyMetadata(e) {
e.preventDefault();
if(!confirm('Are you sure you wish to delete this item. It cannot be reversed!'))
return;
policy_name = $(this).data('policy-name');
var _parent_el = $(this).parent('li:.policy-list-element');
if ($(_parent_el).hasClass("new-policy-list-element"))
_parent_el.remove();
else
if ($(_parent_el).hasClass("new-policy-list-element")) {
_parent_el.remove();
} else {
_parent_el.appendTo("#policy-to-delete");
}
$('.save-subsection').click();
}
......@@ -207,8 +239,55 @@ function getEdxTimeFromDateTimeInputs(date_id, time_id, format) {
return getEdxTimeFromDateTimeVals(input_date, input_time, format);
}
function checkForNewValue(e) {
if($(this).parents('.new-policy-list-element')[0]) {
return;
}
if(this.val) {
this.hasChanged = this.val != $(this).val();
} else {
this.hasChanged = false;
}
this.val = $(this).val();
if(this.hasChanged) {
if(this.saveTimer) {
clearTimeout(this.saveTimer);
}
this.saveTimer = setTimeout(function() {
$changedInput = $(e.target);
$('.save-subsection').click();
this.saveTimer = null;
}, 500);
}
}
function autosaveInput(e) {
if(this.saveTimer) {
clearTimeout(this.saveTimer);
}
this.saveTimer = setTimeout(function() {
$changedInput = $(e.target);
$('.save-subsection').click();
this.saveTimer = null;
}, 500);
}
function saveSubsection(e) {
e.preventDefault();
if($changedInput && !$changedInput.hasClass('no-spinner')) {
$spinner.css({
'position': 'absolute',
'top': Math.floor($changedInput.position().top + ($changedInput.outerHeight() / 2) + 3),
'left': $changedInput.position().left + $changedInput.outerWidth() - 24,
'margin-top': '-10px'
});
$changedInput.after($spinner);
}
var id = $(this).data('id');
......@@ -252,10 +331,10 @@ function saveSubsection(e) {
contentType: "application/json",
data:JSON.stringify({ 'id' : id, 'metadata' : metadata, 'data': null, 'children' : children}),
success: function() {
alert('Your changes have been saved.');
$spinner.delay(500).fadeOut(150);
},
error: function() {
alert('There has been an error while saving your changes.');
showToastMessage('There has been an error while saving your changes.');
}
});
}
......@@ -550,7 +629,7 @@ function addNewSubsection(e) {
e.preventDefault();
var $section = $(this).closest('.courseware-section');
var $newSubsection = $($('#new-subsection-template').html());
$section.find('.unit-list > ol').append($newSubsection);
$section.find('.subsection-list > ol').append($newSubsection);
$section.find('.new-subsection-name-input').focus().select();
var $saveButton = $newSubsection.find('.new-subsection-name-save');
......@@ -561,7 +640,7 @@ function addNewSubsection(e) {
$saveButton.data('parent', parent)
$saveButton.data('template', $(this).data('template'));
$newSubsection.find('.new-subsection-name-cancel').bind('click', cancelNewSubsection);
$newSubsection.find('.new-subsection-name-cancel').bind('click', cancelNewSubsection);
}
function saveNewSubsection(e) {
......@@ -583,8 +662,6 @@ function saveNewSubsection(e) {
location.reload();
}
});
}
function cancelNewSubsection(e) {
......
cms/static/sass/_courseware.scss
......@@ -38,8 +38,8 @@ input.courseware-unit-search-input {
}
}
&.collapsed .unit-list,
.collapsed .unit-list,
&.collapsed .subsection-list,
.collapsed .subsection-list,
.collapsed > ol {
display: none !important;
}
......@@ -94,7 +94,7 @@ input.courseware-unit-search-input {
border-radius: 3px 3px 0 0;
}
.unit-list {
.subsection-list {
margin: 0 12px;
> ol {
......
cms/static/sass/_graphics.scss
......@@ -269,3 +269,11 @@
vertical-align: middle;
background: url(../img/blue-spinner.gif) no-repeat;
}
.spinner-in-field-icon {
display: inline-block;
width: 14px;
height: 14px;
vertical-align: middle;
background: url(../img/spinner-in-field.gif) no-repeat;
}
cms/static/sass/_subsection.scss
......@@ -15,7 +15,7 @@
width: 100%;
}
.unit-list {
.sortable-unit-list {
ol {
@include tree-view;
}
......@@ -24,15 +24,39 @@
.policy-list {
.policy-list-name {
margin-right: 5px;
margin-bottom: 10px;
}
.policy-list-value {
margin-right: 10px;
}
}
.policy-list-element {
.save-button,
.cancel-button {
display: none;
}
}
li {
.new-policy-list-element {
padding: 10px 10px 0;
margin: 0 -10px;
border-radius: 3px;
background: $mediumGrey;
.save-button {
@include blue-button;
margin-bottom: 10px;
}
.cancel-button {
@include white-button;
}
.delete-icon {
display: none;
}
}
.new-policy-item {
......
cms/static/sass/_unit.scss
......@@ -276,7 +276,7 @@
}
}
.unit-properties {
.unit-settings {
.window-contents {
padding: 10px 20px;
}
......@@ -323,6 +323,7 @@
.save-button {
@include blue-button;
display: none;
}
.save-button,
......
cms/templates/edit-static-page.html
......@@ -19,7 +19,7 @@
</article>
</div>
<div class="sidebar">
<div class="unit-properties window">
<div class="unit-settings window">
<h4>Page Settings</h4>
<div class="window-contents">
<div class="row visibility">
......
cms/templates/edit_subsection.html
......@@ -27,7 +27,7 @@
<label>Format:</label>
<input type="text" value="${subsection.metadata['format'] if 'format' in subsection.metadata else ''}" class="unit-subtitle" data-metadata-name="format"/>
</div>
<div class="unit-list">
<div class="sortable-unit-list">
<label>Units:</label>
${units.enum_units(subsection, subsection_units=subsection_units)}
</div>
......@@ -51,11 +51,16 @@
</div>
<div id="add-new-policy-element-template" style="display:none">
<li class="policy-list-element new-policy-list-element"><input type="text" class="policy-list-name" autocomplete="off" size="15"/>:&nbsp;<input type="text" class="policy-list-value" size=40 autocomplete="off"/><a href="#" class="delete-icon remove-policy-data"></a></li>
<li class="policy-list-element new-policy-list-element">
<input type="text" class="policy-list-name" autocomplete="off" size="15"/>:&nbsp;<input type="text" class="policy-list-value" size=40 autocomplete="off"/>
<a href="#" class="save-button">Save</a>
<a href="#" class="cancel-button">Cancel</a>
<a href="#" class="delete-icon remove-policy-data"></a>
</li>
</div>
<div class="sidebar">
<div class="unit-properties window">
<div class="unit-settings window">
<h4>Subsection Settings</h4>
<div class="window-contents">
<div class="scheduled-date-input row">
......@@ -74,7 +79,7 @@
% else:
<p class="notice">The date above differs from the release date of ${parent_item.display_name} – ${parent_start_date.strftime('%m/%d/%Y')} at ${parent_start_date.strftime('%H:%M')}.
% endif
<a href="#" class="sync-date">Sync to ${parent_item.display_name}.</a></p>
<a href="#" class="sync-date no-spinner">Sync to ${parent_item.display_name}.</a></p>
% endif
</div>
<div class="due-date-input row">
......
cms/templates/overview.html
......@@ -98,7 +98,7 @@
<a href="#" class="drag-handle"></a>
</div>
</header>
<div class="unit-list">
<div class="subsection-list">
<div class="list-header">
<a href="#" class="new-subsection-item" data-template="${new_subsection_template}">
<span class="new-folder-icon"></span>New Subsection
......
cms/templates/unit.html
......@@ -70,8 +70,8 @@
</div>
<div class="sidebar">
<div class="unit-properties window">
<h4>Unit Properties</h4>
<div class="unit-settings window">
<h4>Unit Settings</h4>
<div class="window-contents">
<div class="row visibility">
<label class="inline-label">Visibility:</label>
......
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