Rewrite Tab module, refactor Sequence module

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;
-        },
-        });