First pass at integrating the new unit editing wireframes with the CMS
This commit is contained in:
Calen Pennington
@@ -6,160 +6,162 @@ var $newComponentStep1;
|
||||
var $newComponentStep2;
|
||||
|
||||
$(document).ready(function() {
|
||||
$body = $('body');
|
||||
$modal = $('.history-modal');
|
||||
$modalCover = $('.modal-cover');
|
||||
$newComponentItem = $('.new-component-item');
|
||||
$newComponentStep1 = $('.new-component-step-1');
|
||||
$newComponentStep2 = $('.new-component-step-2');
|
||||
$newComponentButton = $('.new-component-button');
|
||||
$body = $('body');
|
||||
$modal = $('.history-modal');
|
||||
$modalCover = $('.modal-cover');
|
||||
$newComponentItem = $('.new-component-item');
|
||||
$newComponentStep1 = $('.new-component-step-1');
|
||||
$newComponentStep2 = $('.new-component-step-2');
|
||||
$newComponentButton = $('.new-component-button');
|
||||
|
||||
$('.expand-collapse-icon').bind('click', toggleSubmodules);
|
||||
$('.visibility-options').bind('change', setVisibility);
|
||||
$('.expand-collapse-icon').bind('click', toggleSubmodules);
|
||||
$('.visibility-options').bind('change', setVisibility);
|
||||
|
||||
$body.delegate('.components .edit-button', 'click', editComponent);
|
||||
$body.delegate('.component-editor .save-button, .component-editor .cancel-button', 'click', closeComponentEditor);
|
||||
$body.delegate('.components .edit-button', 'click', editComponent);
|
||||
$body.delegate('.component-editor .save-button, .component-editor .cancel-button', 'click', closeComponentEditor);
|
||||
|
||||
$newComponentButton.bind('click', showNewComponentForm);
|
||||
$newComponentStep1.find('.new-component-type a').bind('click', showNewComponentProperties);
|
||||
$newComponentStep2.find('.save-button').bind('click', saveNewComponent);
|
||||
$newComponentStep2.find('.cancel-button').bind('click', cancelNewComponent);
|
||||
$newComponentButton.bind('click', showNewComponentForm);
|
||||
$newComponentStep1.find('.new-component-type a').bind('click', showNewComponentProperties);
|
||||
$newComponentStep2.find('.save-button').bind('click', saveNewComponent);
|
||||
$newComponentStep2.find('.cancel-button').bind('click', cancelNewComponent);
|
||||
|
||||
$('.unit-history ol a').bind('click', showHistoryModal);
|
||||
$modal.bind('click', hideHistoryModal);
|
||||
$modalCover.bind('click', hideHistoryModal);
|
||||
$('.unit-history ol a').bind('click', showHistoryModal);
|
||||
$modal.bind('click', hideHistoryModal);
|
||||
$modalCover.bind('click', hideHistoryModal);
|
||||
|
||||
XModule.loadModules('display');
|
||||
});
|
||||
|
||||
function toggleSubmodules(e) {
|
||||
e.preventDefault();
|
||||
$(this).toggleClass('expand').toggleClass('collapse');
|
||||
$(this).closest('.branch, .window').toggleClass('collapsed');
|
||||
e.preventDefault();
|
||||
$(this).toggleClass('expand').toggleClass('collapse');
|
||||
$(this).closest('.branch, .window').toggleClass('collapsed');
|
||||
}
|
||||
|
||||
function setVisibility(e) {
|
||||
$(this).find('.checked').removeClass('checked');
|
||||
$(e.target).closest('.option').addClass('checked');
|
||||
$(this).find('.checked').removeClass('checked');
|
||||
$(e.target).closest('.option').addClass('checked');
|
||||
}
|
||||
|
||||
function editComponent(e) {
|
||||
e.preventDefault();
|
||||
$(this).closest('li').addClass('editing').find('.component-editor').slideDown(150);
|
||||
e.preventDefault();
|
||||
$(this).closest('li').addClass('editing').find('.component-editor').slideDown(150);
|
||||
}
|
||||
|
||||
function closeComponentEditor(e) {
|
||||
e.preventDefault();
|
||||
$(this).closest('li').removeClass('editing').find('.component-editor').slideUp(150);
|
||||
e.preventDefault();
|
||||
$(this).closest('li').removeClass('editing').find('.component-editor').slideUp(150);
|
||||
}
|
||||
|
||||
function showNewComponentForm(e) {
|
||||
e.preventDefault();
|
||||
$newComponentItem.addClass('adding');
|
||||
$(this).slideUp(150);
|
||||
$newComponentStep1.slideDown(150);
|
||||
e.preventDefault();
|
||||
$newComponentItem.addClass('adding');
|
||||
$(this).slideUp(150);
|
||||
$newComponentStep1.slideDown(150);
|
||||
}
|
||||
|
||||
function showNewComponentProperties(e) {
|
||||
e.preventDefault();
|
||||
e.preventDefault();
|
||||
|
||||
var displayName;
|
||||
var componentSource;
|
||||
var selectionRange;
|
||||
var $renderedComponent;
|
||||
var displayName;
|
||||
var componentSource;
|
||||
var selectionRange;
|
||||
var $renderedComponent;
|
||||
|
||||
switch($(this).attr('data-type')) {
|
||||
case 'video':
|
||||
displayName = 'Video';
|
||||
componentSource = '<video youtube="1.50:___,1.25:___,1.0:___,0.75:___"/>';
|
||||
selectionRange = [21, 24];
|
||||
$renderedComponent = $('<div class="rendered-component"><div class="video-unit"><img src="images/video-module.png"></div></div>');
|
||||
break;
|
||||
case 'textbook':
|
||||
displayName = 'Textbook';
|
||||
componentSource = '<customtag page="___"><impl>book</impl></customtag>';
|
||||
selectionRange = [17, 20];
|
||||
$renderedComponent = $('<div class="rendered-component"><p><span class="textbook-icon"></span>More information given in the text.</p></div>');
|
||||
break;
|
||||
case 'slide':
|
||||
displayName = 'Slide';
|
||||
componentSource = '<customtag page="___"><customtag lecnum="___"><impl>slides</impl></customtag>';
|
||||
selectionRange = [17, 20];
|
||||
$renderedComponent = $('<div class="rendered-component"><p><span class="slides-icon"></span>Lecture Slides Handout [Clean] [Annotated]</p></div>');
|
||||
break;
|
||||
case 'discussion':
|
||||
displayName = 'Discussion';
|
||||
componentSource = '<discussion for="___" id="___" discussion_category="___"/>';
|
||||
selectionRange = [17, 20];
|
||||
$renderedComponent = $('<div class="rendered-component"><div class="discussion-unit"><img src="images/discussion-module.png"></div></div>');
|
||||
break;
|
||||
case 'problem':
|
||||
displayName = 'Problem';
|
||||
componentSource = '<problem>___</problem>';
|
||||
selectionRange = [9, 12];
|
||||
$renderedComponent = $('<div class="rendered-component"></div>');
|
||||
break;
|
||||
case 'freeform':
|
||||
displayName = 'Freeform HTML';
|
||||
componentSource = '';
|
||||
selectionRange = [0, 0];
|
||||
$renderedComponent = $('<div class="rendered-component"></div>');
|
||||
break;
|
||||
}
|
||||
switch($(this).attr('data-type')) {
|
||||
case 'video':
|
||||
displayName = 'Video';
|
||||
componentSource = '<video youtube="1.50:___,1.25:___,1.0:___,0.75:___"/>';
|
||||
selectionRange = [21, 24];
|
||||
$renderedComponent = $('<div class="rendered-component"><div class="video-unit"><img src="images/video-module.png"></div></div>');
|
||||
break;
|
||||
case 'textbook':
|
||||
displayName = 'Textbook';
|
||||
componentSource = '<customtag page="___"><impl>book</impl></customtag>';
|
||||
selectionRange = [17, 20];
|
||||
$renderedComponent = $('<div class="rendered-component"><p><span class="textbook-icon"></span>More information given in the text.</p></div>');
|
||||
break;
|
||||
case 'slide':
|
||||
displayName = 'Slide';
|
||||
componentSource = '<customtag page="___"><customtag lecnum="___"><impl>slides</impl></customtag>';
|
||||
selectionRange = [17, 20];
|
||||
$renderedComponent = $('<div class="rendered-component"><p><span class="slides-icon"></span>Lecture Slides Handout [Clean] [Annotated]</p></div>');
|
||||
break;
|
||||
case 'discussion':
|
||||
displayName = 'Discussion';
|
||||
componentSource = '<discussion for="___" id="___" discussion_category="___"/>';
|
||||
selectionRange = [17, 20];
|
||||
$renderedComponent = $('<div class="rendered-component"><div class="discussion-unit"><img src="images/discussion-module.png"></div></div>');
|
||||
break;
|
||||
case 'problem':
|
||||
displayName = 'Problem';
|
||||
componentSource = '<problem>___</problem>';
|
||||
selectionRange = [9, 12];
|
||||
$renderedComponent = $('<div class="rendered-component"></div>');
|
||||
break;
|
||||
case 'freeform':
|
||||
displayName = 'Freeform HTML';
|
||||
componentSource = '';
|
||||
selectionRange = [0, 0];
|
||||
$renderedComponent = $('<div class="rendered-component"></div>');
|
||||
break;
|
||||
}
|
||||
|
||||
$newComponentItem.prepend($renderedComponent);
|
||||
$renderedComponent.slideDown(250);
|
||||
$newComponentItem.prepend($renderedComponent);
|
||||
$renderedComponent.slideDown(250);
|
||||
|
||||
$newComponentStep2.find('h5').html('Edit ' + displayName + ' Component');
|
||||
$newComponentStep2.find('textarea').html(componentSource);
|
||||
setTimeout(function() {
|
||||
$newComponentStep2.find('textarea').focus().get(0).setSelectionRange(selectionRange[0], selectionRange[1]);
|
||||
}, 10);
|
||||
$newComponentStep2.find('h5').html('Edit ' + displayName + ' Component');
|
||||
$newComponentStep2.find('textarea').html(componentSource);
|
||||
setTimeout(function() {
|
||||
$newComponentStep2.find('textarea').focus().get(0).setSelectionRange(selectionRange[0], selectionRange[1]);
|
||||
}, 10);
|
||||
|
||||
$newComponentStep1.slideUp(250);
|
||||
$newComponentStep2.slideDown(250);
|
||||
$newComponentStep1.slideUp(250);
|
||||
$newComponentStep2.slideDown(250);
|
||||
}
|
||||
|
||||
function cancelNewComponent(e) {
|
||||
e.preventDefault();
|
||||
e.preventDefault();
|
||||
|
||||
$newComponentStep2.slideUp(250);
|
||||
$newComponentButton.slideDown(250);
|
||||
$newComponentItem.removeClass('adding');
|
||||
$newComponentItem.find('.rendered-component').remove();
|
||||
$newComponentStep2.slideUp(250);
|
||||
$newComponentButton.slideDown(250);
|
||||
$newComponentItem.removeClass('adding');
|
||||
$newComponentItem.find('.rendered-component').remove();
|
||||
}
|
||||
|
||||
function saveNewComponent(e) {
|
||||
e.preventDefault();
|
||||
e.preventDefault();
|
||||
|
||||
var $newComponent = $newComponentItem.clone();
|
||||
$newComponent.removeClass('adding').removeClass('new-component-item');
|
||||
$newComponent.find('.new-component-step-2').removeClass('new-component-step-2').addClass('component-editor');
|
||||
setTimeout(function() {
|
||||
$newComponent.find('.component-editor').slideUp(250);
|
||||
}, 10);
|
||||
$newComponent.append('<div class="component-actions"><a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a><a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a> </div><a href="#" class="drag-handle"></a>');
|
||||
$newComponent.find('.new-component-step-1').remove();
|
||||
$newComponent.find('.new-component-button').remove();
|
||||
var $newComponent = $newComponentItem.clone();
|
||||
$newComponent.removeClass('adding').removeClass('new-component-item');
|
||||
$newComponent.find('.new-component-step-2').removeClass('new-component-step-2').addClass('component-editor');
|
||||
setTimeout(function() {
|
||||
$newComponent.find('.component-editor').slideUp(250);
|
||||
}, 10);
|
||||
$newComponent.append('<div class="component-actions"><a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a><a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a> </div><a href="#" class="drag-handle"></a>');
|
||||
$newComponent.find('.new-component-step-1').remove();
|
||||
$newComponent.find('.new-component-button').remove();
|
||||
|
||||
$newComponentStep2.slideUp(250);
|
||||
$newComponentButton.slideDown(250);
|
||||
$newComponentItem.removeClass('adding');
|
||||
$newComponentItem.find('.rendered-component').remove();
|
||||
$newComponentStep2.slideUp(250);
|
||||
$newComponentButton.slideDown(250);
|
||||
$newComponentItem.removeClass('adding');
|
||||
$newComponentItem.find('.rendered-component').remove();
|
||||
|
||||
$newComponentItem.before($newComponent);
|
||||
$newComponentItem.before($newComponent);
|
||||
}
|
||||
|
||||
function showHistoryModal(e) {
|
||||
e.preventDefault();
|
||||
e.preventDefault();
|
||||
|
||||
$modal.show();
|
||||
$modalCover.show();
|
||||
$modal.show();
|
||||
$modalCover.show();
|
||||
}
|
||||
|
||||
function hideHistoryModal(e) {
|
||||
e.preventDefault();
|
||||
e.preventDefault();
|
||||
|
||||
$modal.hide();
|
||||
$modalCover.hide();
|
||||
$modal.hide();
|
||||
$modalCover.hide();
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user