From 59b453488ac528b1573bbb53788d06eda3a277bc Mon Sep 17 00:00:00 2001 From: Prem Sichanugrist Date: Thu, 10 May 2012 21:04:53 -0400 Subject: [PATCH] Rewrite Tab module, refactor Sequence module --- djangoapps/courseware/modules/seq_module.py | 8 ++-- static/coffee/spec/courseware_spec.coffee | 10 +++-- static/coffee/spec/courseware_spec.js | 6 +-- static/coffee/src/courseware.coffee | 4 +- templates/coffee/src/modules/sequence.coffee | 28 +++++++----- .../coffee/src/modules/tab_module.coffee | 23 ++++++++++ templates/tab_module.html | 22 +++++----- templates/tab_module.js | 44 ------------------- 8 files changed, 64 insertions(+), 81 deletions(-) create mode 100644 templates/coffee/src/modules/tab_module.coffee delete mode 100644 templates/tab_module.js diff --git a/djangoapps/courseware/modules/seq_module.py b/djangoapps/courseware/modules/seq_module.py index 4239bc492f..a9c6138cc9 100644 --- a/djangoapps/courseware/modules/seq_module.py +++ b/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 diff --git a/static/coffee/spec/courseware_spec.coffee b/static/coffee/spec/courseware_spec.coffee index 3baaf73acd..91b9187668 100644 --- a/static/coffee/spec/courseware_spec.coffee +++ b/static/coffee/spec/courseware_spec.coffee @@ -23,11 +23,15 @@ describe 'Courseware', -> describe 'bind', -> beforeEach -> @courseware = new Courseware - setFixtures """
""" + setFixtures """ +
+
+
+ """ - 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 -> diff --git a/static/coffee/spec/courseware_spec.js b/static/coffee/spec/courseware_spec.js index 346fd46e20..adb04adc49 100644 --- a/static/coffee/spec/courseware_spec.js +++ b/static/coffee/spec/courseware_spec.js @@ -26,11 +26,11 @@ describe('bind', function() { beforeEach(function() { this.courseware = new Courseware; - return setFixtures("
"); + return setFixtures("
\n
\n
"); }); - 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() { diff --git a/static/coffee/src/courseware.coffee b/static/coffee/src/courseware.coffee index c27db29006..e2f015baef 100644 --- a/static/coffee/src/courseware.coffee +++ b/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 -> diff --git a/templates/coffee/src/modules/sequence.coffee b/templates/coffee/src/modules/sequence.coffee index 9c5fd7b7c0..42e9cde71f 100644 --- a/templates/coffee/src/modules/sequence.coffee +++ b/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 = $('').attr class: "seq_#{item.type}_inactive", 'data-element': index + 1 title = $('

').html(item.title) list_item = $('

  • ').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" diff --git a/templates/coffee/src/modules/tab_module.coffee b/templates/coffee/src/modules/tab_module.coffee new file mode 100644 index 0000000000..69d833b86e --- /dev/null +++ b/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 = $('').attr(href: "##{@tabId(index)}").html(item.title) + @$('.navigation').append($('
  • ').append(tab)) + @element.append($('
    ').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}" diff --git a/templates/tab_module.html b/templates/tab_module.html index b2f2e3280e..21f69fc359 100644 --- a/templates/tab_module.html +++ b/templates/tab_module.html @@ -1,13 +1,11 @@ -
    - - -% for t in items: -
    -
    -% endfor - +
    +
      + +<%block name="js_extra"> + + diff --git a/templates/tab_module.js b/templates/tab_module.js deleted file mode 100644 index e8e5adc7e7..0000000000 --- a/templates/tab_module.js +++ /dev/null @@ -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; - }, - });