From 8a131446fe8873e6812f577831766e2d470622aa Mon Sep 17 00:00:00 2001 From: Calen Pennington Date: Tue, 25 Sep 2012 13:13:06 -0400 Subject: [PATCH] First pass at integrating the new unit editing wireframes with the CMS --- cms/djangoapps/contentstore/views.py | 27 ++-- cms/static/js/base.js | 220 ++++++++++++++------------- cms/templates/editable_preview.html | 13 ++ cms/templates/overview.html | 84 +++++----- cms/templates/unit.html | 113 +++++++------- cms/urls.py | 3 +- 6 files changed, 242 insertions(+), 218 deletions(-) create mode 100644 cms/templates/editable_preview.html diff --git a/cms/djangoapps/contentstore/views.py b/cms/djangoapps/contentstore/views.py index f3d1f47ecf..931ead4027 100644 --- a/cms/djangoapps/contentstore/views.py +++ b/cms/djangoapps/contentstore/views.py @@ -118,7 +118,7 @@ def course_index(request, org, course, name): @login_required -def edit_item(request): +def edit_item(request, location): """ Display an editing page for the specified module. @@ -127,11 +127,10 @@ def edit_item(request): id: A Location URL """ # TODO (vshnayder): change name from id to location in coffee+html as well. - item_location = request.GET['id'] - if not has_access(request.user, item_location): + if not has_access(request.user, location): raise Http404 # TODO (vshnayder): better error - item = modulestore().get_item(item_location) + item = modulestore().get_item(location) item.get_html = wrap_xmodule(item.get_html, item, "xmodule_edit.html") if settings.LMS_BASE is not None: @@ -146,17 +145,16 @@ def edit_item(request): return render_to_response('unit.html', { - 'contents': item.get_html(), - 'js_module': item.js_module_name, - 'category': item.category, - 'url_name': item.url_name, - 'previews': get_module_previews(request, item), - 'metadata': item.metadata, - # TODO: It would be nice to able to use reverse here in some form, but we don't have the lms urls imported - 'lms_link': lms_link, + 'module': item, + 'editable_preview': get_module_previews(request, item)[0], }) +@login_required +def delete_item(request, location): + pass + + @login_required def new_item(request): """ @@ -277,6 +275,7 @@ def preview_module_system(request, preview_id, descriptor): preview_id (str): An identifier specifying which preview this module is used for descriptor: An XModuleDescriptor """ + return ModuleSystem( ajax_url=reverse('preview_dispatch', args=[preview_id, descriptor.location.url(), '']).rstrip('/'), # TODO (cpennington): Do we want to track how instructors are using the preview problems? @@ -323,8 +322,10 @@ def load_preview_module(request, preview_id, descriptor, instance_state, shared_ error_msg=exc_info_to_str(sys.exc_info()) ).xmodule_constructor(system)(None, None) + module.get_html = wrap_xmodule(module.get_html, module, "xmodule_display.html") + module.get_html = wrap_xmodule(module.get_html, module, "editable_preview.html") module.get_html = replace_static_urls( - wrap_xmodule(module.get_html, module, "xmodule_display.html"), + module.get_html, module.metadata.get('data_dir', module.location.course) ) save_preview_state(request, preview_id, descriptor.location.url(), diff --git a/cms/static/js/base.js b/cms/static/js/base.js index bf8c845f57..5042830364 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -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 = '