Make expansion/contraction work on overview page

cms/envs/common.py

@@ -275,7 +275,7 @@ PIPELINE_JS = {
             pth.replace(PROJECT_ROOT / 'static/', '')
             for pth
             in glob2.glob(PROJECT_ROOT / 'static/coffee/src/**/*.coffee')
-        ],
+        ] + ['js/base.js'],
         'output_filename': 'js/cms-application.js',
     },
     'module-js': {

cms/static/js/base.js

+var $body;
+var $modal;
+var $modalCover;
+var $newComponentItem;
+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');
+
+	$('.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);
+
+	$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);
+});
+
+function toggleSubmodules(e) {
+	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');
+}
+
+function editComponent(e) {
+	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);
+}
+
+function showNewComponentForm(e) {
+	e.preventDefault();	
+	$newComponentItem.addClass('adding');
+	$(this).slideUp(150);
+	$newComponentStep1.slideDown(150);
+}
+
+function showNewComponentProperties(e) {
+	e.preventDefault();
+
+	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;
+	}
+
+	$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);	
+
+	$newComponentStep1.slideUp(250);
+	$newComponentStep2.slideDown(250);
+}
+
+function cancelNewComponent(e) {
+	e.preventDefault();
+
+	$newComponentStep2.slideUp(250);
+	$newComponentButton.slideDown(250);
+	$newComponentItem.removeClass('adding');
+	$newComponentItem.find('.rendered-component').remove();
+}
+
+function saveNewComponent(e) {
+	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();
+
+	$newComponentStep2.slideUp(250);
+	$newComponentButton.slideDown(250);
+	$newComponentItem.removeClass('adding');
+	$newComponentItem.find('.rendered-component').remove();
+
+	$newComponentItem.before($newComponent);
+}
+
+function showHistoryModal(e) {
+	e.preventDefault();
+
+	$modal.show();
+	$modalCover.show();
+}
+
+function hideHistoryModal(e) {
+	e.preventDefault();
+
+	$modal.hide();
+	$modalCover.hide();
+}
+
+
+
+
+
+

cms/static/sass/_content-types.scss

 .content-type {
-  padding-left: 34px;
+  display: inline-block;
+  width: 14px;
+  height: 16px;
+  padding-left: 14px;
   background-position: 8px center;
   background-repeat: no-repeat;
 }

cms/templates/overview.html

@@ -2,6 +2,30 @@
 <%block name="title">CMS Courseware Overview</%block>
 <%include file="widgets/header.html"/>
 
+<%def name="branch(section)">
+  <li class="branch collapsed">
+    <div class="section-item">
+      % if len(section.get_children()) > 0:
+      <a href="#" class="expand-collapse-icon expand"></a>
+      % endif
+      <a href="#" class="draft-item">
+        <span class="${section.category}-icon"></span>${section.display_name} <span class="draft-tag">– draft</span>
+      </a>
+      <div class="item-actions">
+        <a href="#" class="edit-button"><span class="edit-icon"></span></a>
+        <a href="#" class="edit-button"><span class="delete-icon"></span></a>
+        <a href="#" class="drag-handle"></a>
+      </div>
+    </div>
+    <ol>
+      % for unit in section.get_children():
+      ${branch(unit)}
+      % endfor
+    </ol>
+  </li>
+</%def>
+
+
 <%block name="content">
     <div class="main-wrapper">
       <div class="inner-wrapper">
@@ -25,30 +49,7 @@
             </header>
             <ol>
               % for section in week.get_children():
-              <li class="branch collapsed">
-                <div class="section-item">
-                  <a href="#" class="expand-collapse-icon expand"></a><a href="#" class="draft-item"><span class="${section.category}-icon"></span>${section.display_name} <span class="draft-tag">– draft</span></a>
-                  <div class="item-actions">
-                    <a href="#" class="edit-button"><span class="edit-icon"></span></a>
-                    <a href="#" class="edit-button"><span class="delete-icon"></span></a>
-                    <a href="#" class="drag-handle"></a>
-                  </div>
-                </div>
-                <ol>
-                  % for unit in section.get_children():
-                  <li>
-                    <div class="section-item">
-                      <a href="#"><span class="${unit.category}-icon"></span>${unit.display_name}</a>
-                      <div class="item-actions">
-                        <a href="#" class="edit-button"><span class="edit-icon"></span></a>
-                        <a href="#" class="edit-button"><span class="delete-icon"></span></a>
-                        <a href="#" class="drag-handle"></a>
-                      </div>
-                    </div>
-                  </li>
-                  % endfor
-                </ol>
-              </li>
+              ${branch(section)}
               % endfor
             </ol>
           </section>