Rewrite Tab module, refactor Sequence module

djangoapps/courseware/modules/seq_module.py

@@ -52,13 +52,12 @@ class Module(XModule):
         child_classes = [set([i.tag for i in e.iter()]) for e in self.xmltree]
 
         titles = ["\n".join([i.get("name").strip() for i in e.iter() if i.get("name") != None]) \
-                           for e in self.xmltree]
+                       for e in self.xmltree]
 
-        self.contents = [j(self.render_function(e)) \
-                             for e in self.xmltree]
+        self.contents = [j(self.render_function(e)) for e in self.xmltree]
 
         for i in range(len(self.contents)):
-          self.contents[i]['title'] = titles[i]
+            self.contents[i]['title'] = titles[i]
 
         for (content, element_class) in zip(self.contents, child_classes):
             new_class = 'other'
@@ -83,7 +82,6 @@ class Module(XModule):
         if self.xmltree.tag in ['sequential', 'videosequence']:
             self.content=render_to_string('seq_module.html',params)
         if self.xmltree.tag == 'tab':
-            params['id'] = 'tab'
             self.content=render_to_string('tab_module.html',params)
         self.rendered = True
 

static/coffee/spec/courseware_spec.coffee

@@ -23,11 +23,15 @@ describe 'Courseware', ->
   describe 'bind', ->
     beforeEach ->
       @courseware = new Courseware
-      setFixtures """<div id="seq_content"></div>"""
+      setFixtures """
+        <div class="course-content">
+          <div class="sequence"></div>
+        </div>
+        """
 
-    it 'binds the sequential content change event', ->
+    it 'binds the content change event', ->
       @courseware.bind()
-      expect($('#seq_content')).toHandleWith 'contentChanged', @courseware.render
+      expect($('.course-content .sequence')).toHandleWith 'contentChanged', @courseware.render
 
   describe 'render', ->
     beforeEach ->

static/coffee/spec/courseware_spec.js

@@ -26,11 +26,11 @@
     describe('bind', function() {
       beforeEach(function() {
         this.courseware = new Courseware;
-        return setFixtures("<div id=\"seq_content\"></div>");
+        return setFixtures("<div class=\"course-content\">\n  <div class=\"sequence\"></div>\n</div>");
       });
-      return it('binds the sequential content change event', function() {
+      return it('binds the content change event', function() {
         this.courseware.bind();
-        return expect($('#seq_content')).toHandleWith('contentChanged', this.courseware.render);
+        return expect($('.course-content .sequence')).toHandleWith('contentChanged', this.courseware.render);
       });
     });
     return describe('render', function() {

static/coffee/src/courseware.coffee

@@ -11,8 +11,8 @@ class @Courseware
     new Courseware
 
   bind: ->
-    if $('#seq_content').length
-      $('#seq_content').bind 'contentChanged', @render
+    $('.course-content .sequence, .course-content .tab')
+      .bind 'contentChanged', @render
 
   render: ->
     $('.course-content .video').each ->

templates/coffee/src/modules/sequence.coffee

@@ -1,32 +1,36 @@
-class window.Sequence
+class @Sequence
   constructor: (@id, @elements, @tag, position) ->
+    @element = $("#sequence_#{@id}")
     @buildNavigation()
     @bind()
     @render position
 
+  $: (selector) ->
+    $(selector, @element)
+
   bind: ->
-    $('#sequence-list a').click @goto
-    $('#seq_content').change @toggleArrows
+    @element.bind 'contentChanged', @toggleArrows
+    @$('#sequence-list a').click @goto
 
   buildNavigation: ->
     $.each @elements, (index, item) ->
       link = $('<a>').attr class: "seq_#{item.type}_inactive", 'data-element': index + 1
       title = $('<p>').html(item.title)
       list_item = $('<li>').append(link.append(title))
-      $('#sequence-list').append list_item
+      @$('#sequence-list').append list_item
 
   toggleArrows: =>
-    $('.sequence-nav-buttons a').unbind('click')
+    @$('.sequence-nav-buttons a').unbind('click')
 
     if @position == 1
-      $('.sequence-nav-buttons .prev a').addClass('disabled')
+      @$('.sequence-nav-buttons .prev a').addClass('disabled')
     else
-      $('.sequence-nav-buttons .prev a').removeClass('disabled').click(@previous)
+      @$('.sequence-nav-buttons .prev a').removeClass('disabled').click(@previous)
 
     if @position == @elements.length
-      $('.sequence-nav-buttons .next a').addClass('disabled')
+      @$('.sequence-nav-buttons .next a').addClass('disabled')
     else
-      $('.sequence-nav-buttons .next a').removeClass('disabled').click(@next)
+      @$('.sequence-nav-buttons .next a').removeClass('disabled').click(@next)
 
   render: (new_position) ->
     if @position != undefined
@@ -35,11 +39,11 @@ class window.Sequence
 
     if @position != new_position
       @mark_active new_position
-      $('#seq_content').html eval(@elements[new_position - 1].content)
+      @$('#seq_content').html eval(@elements[new_position - 1].content)
 
       MathJax.Hub.Queue(["Typeset",MathJax.Hub])
       @position = new_position
-      $('#seq_content').trigger 'contentChanged'
+      @element.trigger 'contentChanged'
 
   goto: (event) =>
     event.preventDefault()
@@ -60,7 +64,7 @@ class window.Sequence
     @render new_position
 
   link_for: (position) ->
-    $("#sequence-list a[data-element=#{position}]")
+    @$("#sequence-list a[data-element=#{position}]")
 
   mark_visited: (position) ->
     @link_for(position).attr class: "seq_#{@elements[position - 1].type}_visited"

templates/coffee/src/modules/tab_module.coffee

@@ -0,0 +1,23 @@
+class @Tab
+  constructor: (@id, @items) ->
+    @element = $("#tab_#{id}")
+    @render()
+
+  $: (selector) ->
+    $(selector, @element)
+
+  render: ->
+    $.each @items, (index, item) =>
+      tab = $('<a>').attr(href: "##{@tabId(index)}").html(item.title)
+      @$('.navigation').append($('<li>').append(tab))
+      @element.append($('<section>').attr(id: @tabId(index)))
+    @element.tabs
+      show: @onShow
+
+  onShow: (element, ui) =>
+    @$('section.ui-tabs-hide').html('')
+    @$("##{@tabId(ui.index)}").html(eval(@items[ui.index]['content']))
+    @element.trigger 'contentChanged'
+
+  tabId: (index) ->
+    "tab-#{@id}-#{index}"

templates/tab_module.html

@@ -1,13 +1,11 @@
-<div id="tabs">
-<ul>
-  % for t in items:
-  <li> <a href="#tabs-${items.index(t)}">${t[0]}</a>
-  % endfor
-</ul>
-
-% for t in items:
-  <div id="tabs-${items.index(t)}">
-  </div>
-% endfor
-
+<div id="tab_${id}" class="tab">
+  <ul class="navigation"></ul>
 </div>
+
+<%block name="js_extra">
+<script type="text/javascript">
+  $(function(){
+      new Tab('${id}', ${items});
+  });
+</script>
+</%block>

templates/tab_module.js

@@ -1,44 +0,0 @@
-// IMPORTANT TODO: Namespace
-
-var ${ id }contents=["",
- %for t in items:
- ${t[1]['content']} , 
- %endfor
- ""
-       ];
-
-var ${ id }init_functions=["",
- %for t in items:
-	       function(){ ${t[1]['init_js']} }, 
- %endfor
-	       ""];
-
-var ${ id }destroy_functions=["",
- %for t in items:
-	       function(){ ${t[1]['destroy_js']} }, 
- %endfor
-	       ""];
-
-var ${ id }loc = -1;
-
-function ${ id }goto(i) {
-    if (${ id }loc!=-1)
-	${ id }destroy_functions[ ${ id }loc ]();
-    $('#tabs-'+(i-1)).html(${ id }contents[i]);
-    ${ id }init_functions[i]()
-	       $('#tt_'+${ id }loc).attr("style", "background-color:grey");
-    ${ id }loc=i;
-    $('#tt_'+i).attr("style", "background-color:red");
-    MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
-}
-
-$("#tabs").tabs({select:function(event, ui){
-	    //global=ui;
-	    return true;
-	},
-        show:function(event,ui){
-	    //global=ui;
-	    ${ id }goto(ui.index+1);
-	    return true;
-        },
-        });