Merge pull request #788 from MITx/bug/tomg/new-collapsibles

Added HTML and Problem collapsibles

common/lib/xmodule/xmodule/html_module.py

@@ -17,6 +17,9 @@ log = logging.getLogger("mitx.courseware")
 
 
 class HtmlModule(XModule):
+    js = {'coffee': [resource_string(__name__, 'js/src/html/display.coffee')]}
+    js_module_name = "HTMLModule"
+    
     def get_html(self):
         return self.html
 

common/lib/xmodule/xmodule/js/src/capa/display.coffee

@@ -26,6 +26,13 @@ class @Problem
     @$('section.action input.show').click @show
     @$('section.action input.save').click @save
 
+    # Collapsibles
+    @$('.longform').hide();
+    @$('.shortform').append('<a href="#" class="full">See full output</a>');
+    @$('.collapsible section').hide();
+    @$('.full').click @toggleFull
+    @$('.collapsible header a').click @toggleHint
+
     # Dynamath
     @$('input.math').keyup(@refreshMath)
     @$('input.math').each (index, element) =>
@@ -333,6 +340,17 @@ class @Problem
       element.CodeMirror.save() if element.CodeMirror.save
     @answers = @inputs.serialize()
 
+  toggleFull: (event) =>
+    $(event.target).parent().siblings().slideToggle()
+    $(event.target).parent().parent().toggleClass('open')
+    text = $(event.target).text() == 'See full output' ? 'Hide output' : 'See full output'
+    $(this).text(text)
+
+  toggleHint: (event) =>
+    event.preventDefault()
+    $(event.target).parent().siblings().slideToggle()
+    $(event.target).parent().parent().toggleClass('open')
+
   inputtypeSetupMethods:
 
     'text-input-dynamath': (element) =>

common/lib/xmodule/xmodule/js/src/html/display.coffee

@@ -0,0 +1,26 @@
+class @HTMLModule
+
+  constructor: (@element) ->
+  	@el = $(@element)
+  	@setCollapsibles()
+
+  $: (selector) ->
+    $(selector, @el)
+
+  setCollapsibles: =>
+    $('.longform').hide();
+    $('.shortform').append('<a href="#" class="full">See full output</a>');
+    $('.collapsible section').hide();
+    $('.full').click @toggleFull
+    $('.collapsible header a').click @toggleHint
+
+  toggleFull: (event) =>
+    $(event.target).parent().siblings().slideToggle()
+    $(event.target).parent().parent().toggleClass('open')
+    text = $(event.target).text() == 'See full output' ? 'Hide output' : 'See full output'
+    $(this).text(text)
+
+  toggleHint: (event) =>
+    event.preventDefault()
+    $(event.target).parent().siblings().slideToggle()
+    $(event.target).parent().parent().toggleClass('open')

lms/templates/problem.html

@@ -30,36 +30,4 @@
     </section>
     % endif
   </section>
-</section>
-
-<%block name="js_extra">
-<script type="text/javascript" charset="utf-8">
-  var collapsibleSet;
-  
-  $(function(){
-      // this should be brought back into problems
-      $('.longform').hide();
-      $('.shortform').append('<a href="#" class="full">See full output</a>');
-
-      $('.full').click(function() {
-        $(this).parent().siblings().slideToggle();
-        $(this).parent().parent().toggleClass('open');
-        var text = $(this).text() == 'See full output' ? 'Hide output' : 'See full output';
-        $(this).text(text);
-        return false;
-      });
-
-      function toggleHint(e) {
-        $(this).parent().siblings().slideToggle();
-        $(this).parent().parent().toggleClass('open');
-        return false;
-      }
-
-      if(!collapsibleSet) {
-        collapsibleSet = true;
-        $('.collapsible section').hide();
-        $('.collapsible header a').bind('click', toggleHint);
-      }      
-    });
-</script>
-</%block>
+</section>