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

key bindings and speed reworkings for the my courses and courseware pages

Browse Source
This commit is contained in:
Tom Giannattasio
2012-11-29 16:21:51 -05:00
parent 62fa734c68
commit fbbf9e9c0f
4 changed files with 125 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -93,7 +93,7 @@ $(document).ready(function() {
// section name editing
$('.section-name').bind('click', editSectionName);
$('.edit-section-name-cancel').bind('click', cancelEditSectionName);
$('.edit-section-name-save').bind('click', saveEditSectionName);
// $('.edit-section-name-save').bind('click', saveEditSectionName);
// section date setting
$('.set-publish-date').bind('click', setSectionScheduleDate);
@@ -585,33 +585,44 @@ function hideToastMessage(e) {
$(this).closest('.toast-notification').remove();
}
function addNewSection(e) {
function addNewSection(e, isTemplate) {
e.preventDefault();
var $newSection = $($('#new-section-template').html());
var $cancelButton = $newSection.find('.new-section-name-cancel');
$('.new-courseware-section-button').after($newSection);
$newSection.find('.new-section-name').focus().select();
$newSection.find('.new-section-name-save').bind('click', saveNewSection);
$newSection.find('.new-section-name-cancel').bind('click', cancelNewSection);
$newSection.find('.section-name-form').bind('submit', saveNewSection);
$cancelButton.bind('click', cancelNewSection);
$body.bind('keyup', { $cancelButton: $cancelButton }, checkForCancel);
}
function checkForCancel(e) {
if(e.which == 27) {
$body.unbind('keyup', checkForCancel);
e.data.$cancelButton.click();
}
}
function saveNewSection(e) {
e.preventDefault();
parent = $(this).data('parent');
template = $(this).data('template');
var $saveButton = $(this).find('.new-section-name-save');
var parent = $saveButton.data('parent');
var template = $saveButton.data('template');
var display_name = $(this).find('.new-section-name').val();
display_name = $(this).prev('.new-section-name').val();
$.post('/clone_item',
{'parent_location' : parent,
'template' : template,
'display_name': display_name,
},
function(data) {
$.post('/clone_item', {
'parent_location' : parent,
'template' : template,
'display_name': display_name,
},
function(data) {
if (data.id != undefined)
location.reload();
});
location.reload();
}
);
}
function cancelNewSection(e) {
@@ -619,44 +630,44 @@ function cancelNewSection(e) {
$(this).parents('section.new-section').remove();
}
function addNewCourse(e) {
e.preventDefault();
var $newCourse = $($('#new-course-template').html());
var $cancelButton = $newCourse.find('.new-course-cancel');
$('.new-course-button').after($newCourse);
$newCourse.find('.new-course-name').focus().select();
$newCourse.find('.new-course-save').bind('click', saveNewCourse);
$newCourse.find('.new-course-cancel').bind('click', cancelNewCourse);
$newCourse.find('form').bind('submit', saveNewCourse);
$cancelButton.bind('click', cancelNewCourse);
$body.bind('keyup', { $cancelButton: $cancelButton }, checkForCancel);
}
function saveNewCourse(e) {
e.preventDefault();
var $newCourse = $(this).closest('.new-course');
template = $(this).data('template');
org = $newCourse.find('.new-course-org').val();
number = $newCourse.find('.new-course-number').val();
display_name = $newCourse.find('.new-course-name').val();
var template = $(this).find('.new-course-save').data('template');
var org = $newCourse.find('.new-course-org').val();
var number = $newCourse.find('.new-course-number').val();
var display_name = $newCourse.find('.new-course-name').val();
if (org == '' || number == '' || display_name == ''){
alert('You must specify all fields in order to create a new course.');
return;
}
$.post('/create_new_course',
{ 'template' : template,
'org' : org,
'number' : number,
'display_name': display_name,
},
function(data) {
if (data.id != undefined)
location.reload();
else if (data.ErrMsg != undefined)
$.post('/create_new_course', {
'template' : template,
'org' : org,
'number' : number,
'display_name': display_name,
},
function(data) {
if (data.id != undefined) {
window.location = '/' + data.id.replace(/.*:\/\//, '');
} else if (data.ErrMsg != undefined) {
alert(data.ErrMsg);
});
}
});
}
function cancelNewCourse(e) {
@@ -672,35 +683,37 @@ function addNewSubsection(e) {
$section.find('.new-subsection-name-input').focus().select();
var $saveButton = $newSubsection.find('.new-subsection-name-save');
$saveButton.bind('click', saveNewSubsection);
var $cancelButton = $newSubsection.find('.new-subsection-name-cancel');
parent = $(this).parents("section.branch").data("id");
var parent = $(this).parents("section.branch").data("id");
$saveButton.data('parent', parent)
$saveButton.data('template', $(this).data('template'));
$newSubsection.find('.new-subsection-name-cancel').bind('click', cancelNewSubsection);
$newSubsection.find('.new-subsection-form').bind('submit', saveNewSubsection);
$cancelButton.bind('click', cancelNewSubsection);
$body.bind('keyup', { $cancelButton: $cancelButton }, checkForCancel);
}
function saveNewSubsection(e) {
e.preventDefault();
parent = $(this).data('parent');
template = $(this).data('template');
var parent = $(this).find('.new-subsection-name-save').data('parent');
var template = $(this).find('.new-subsection-name-save').data('template');
var display_name = $(this).find('.new-subsection-name-input').val();
display_name = $(this).prev('.subsection-name').find('.new-subsection-name-input').val()
$.post('/clone_item',
{'parent_location' : parent,
'template' : template,
'display_name': display_name,
},
function(data) {
$.post('/clone_item', {
'parent_location' : parent,
'template' : template,
'display_name': display_name
},
function(data) {
if (data.id != undefined) {
location.reload();
}
});
}
);
}
function cancelNewSubsection(e) {
@@ -710,22 +723,30 @@ function cancelNewSubsection(e) {
function editSectionName(e) {
e.preventDefault();
$(this).children('div.section-name-edit').show();
$(this).children('span.section-name-span').hide();
$(this).unbind('click', editSectionName);
$(this).children('.section-name-edit').show();
$(this).find('.edit-section-name').focus();
$(this).children('.section-name-span').hide();
$(this).find('.section-name-edit').bind('submit', saveEditSectionName);
$(this).find('.edit-section-name-cancel').bind('click', cancelNewSection);
$body.bind('keyup', { $cancelButton: $(this).find('.edit-section-name-cancel') }, checkForCancel);
}
function cancelEditSectionName(e) {
e.preventDefault();
$(this).parent().hide();
$(this).parent().siblings('span.section-name-span').show();
$(this).parent().siblings('.section-name-span').show();
$(this).closest('.section-name').bind('click', editSectionName);
e.stopPropagation();
}
function saveEditSectionName(e) {
e.preventDefault();
id = $(this).closest("section.courseware-section").data("id");
display_name = $.trim($(this).prev('.edit-section-name').val());
$(this).closest('.section-name').unbind('click', editSectionName);
var id = $(this).closest('.courseware-section').data('id');
var display_name = $.trim($(this).find('.edit-section-name').val());
$(this).closest('.courseware-section .section-name').append($spinner);
$spinner.show();
@@ -746,10 +767,10 @@ function saveEditSectionName(e) {
}).success(function()
{
$spinner.delay(250).fadeOut(250);
$_this.parent().siblings('span.section-name-span').html(display_name);
$_this.parent().siblings('span.section-name-span').show();
$_this.parent().hide();
e.stopPropagation();
$_this.closest('h3').find('.section-name-span').html(display_name).show();
$_this.hide();
$_this.closest('.section-name').bind('click', editSectionName);
e.stopPropagation();
});
}

6
cms/static/sass/_courseware.scss
View File

@@ -146,7 +146,7 @@ input.courseware-unit-search-input {
.section-name-edit {
input {
font-size: 16px;
font-size: 16px;
}
.save-button {
@@ -205,7 +205,7 @@ input.courseware-unit-search-input {
.new-section-name-save,
.new-subsection-name-save {
@include blue-button;
padding: 2px 20px 5px;
padding: 6px 20px 8px;
margin: 0 5px;
color: #fff !important;
}
@@ -213,7 +213,7 @@ input.courseware-unit-search-input {
.new-section-name-cancel,
.new-subsection-name-cancel {
@include white-button;
padding: 2px 20px 5px;
padding: 6px 20px 8px;
color: #8891a1 !important;
}

6
cms/templates/index.html
View File

@@ -22,14 +22,14 @@
</div>
</div>
<div class="row">
<a href="#" class="new-course-save" data-template="${new_course_template}">Save</a>
<a href="#" class="new-course-cancel">Cancel</a>
<input type="submit" value="Save" class="new-course-save" data-template="${new_course_template}" />
<input type="button" value="Cancel" class="new-course-cancel" />
</div>
</form>
</div>
</section>
</script>
</%block>
</%block>
<%block name="content">
<div class="main-wrapper">

51
cms/templates/overview.html
View File

@@ -12,10 +12,10 @@
<%namespace name="units" file="widgets/units.html" />
<%block name="jsextra">
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
<script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
<script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
<script src="${static.url('js/vendor/date.js')}"></script>
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
<script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
<script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
<script src="${static.url('js/vendor/date.js')}"></script>
</%block>
<%block name="header_extras">
@@ -24,7 +24,33 @@
<header>
<a href="#" class="expand-collapse-icon collapse"></a>
<div class="item-details">
<h3 class="section-name"><input type="text" value="New Section Name" class="new-section-name" /><a href="#" class="new-section-name-save" data-parent="${parent_location}" data-template="${new_section_template}">Save</a><a href="#" class="new-section-name-cancel">Cancel</a></h3>
<h3 class="section-name">
<form class="section-name-form">
<input type="text" value="New Section Name" class="new-section-name" />
<input type="submit" class="new-section-name-save" data-parent="${parent_location}" data-template="${new_section_template}" value="Save" />
<input type="button" class="new-section-name-cancel" value="Cancel" /></h3>
</form>
</div>
</header>
</section>
</script>
<script type="text/template" id="blank-slate-template">
<section class="courseware-section branch new-section">
<header>
<a href="#" class="expand-collapse-icon collapse"></a>
<div class="item-details">
<h3 class="section-name">
<span class="section-name-span">Click here to set the section name</span>
<form class="section-name-form">
<input type="text" value="New Section Name" class="new-section-name" />
<input type="submit" class="new-section-name-save" data-parent="${parent_location}" data-template="${new_section_template}" value="Save" />
<input type="button" class="new-section-name-cancel" value="Cancel" /></h3>
</form>
</div>
<div class="item-actions">
<a href="#" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
<a href="#" class="drag-handle"></a>
</div>
</header>
</section>
@@ -33,14 +59,14 @@
<script type="text/template" id="new-subsection-template">
<li class="branch collapsed">
<div class="section-item editing">
<div>
<form class="new-subsection-form">
<span class="folder-icon"></span>
<span class="subsection-name">
<input type="text" value="New Subsection" class="new-subsection-name-input" />
</span>
<a href="#" class="new-subsection-name-save">Save</a>
<a href="#" class="new-subsection-name-cancel">Cancel</a>
</div>
<input type="submit" value="Save" class="new-subsection-name-save" />
<input type="button" value="Cancel" class="new-subsection-name-cancel" />
</form>
</div>
<ol>
<li>
@@ -83,10 +109,11 @@
<div class="item-details" data-id="${section.location}">
<h3 class="section-name">
<span class="section-name-span">${section.display_name}</span>
<div class="section-name-edit" style="display:none">
<form class="section-name-edit" style="display:none">
<input type="text" value="${section.display_name}" class="edit-section-name" autocomplete="off"/>
<a href="#" class="save-button edit-section-name-save">Save</a><a href="#" class="cancel-button edit-section-name-cancel">Cancel</a>
</div>
<input type="submit" class="save-button edit-section-name-save" value="Save" />
<input type="button" class="cancel-button edit-section-name-cancel" value="Cancel" />
</form>
</h3>
<div class="section-published-date">
<%