Rewrite Courseware navigation

djangoapps/courseware/views.py

@@ -84,7 +84,7 @@ def render_accordion(request,course,chapter,section):
         parameter. Returns (initialization_javascript, content)'''
     if not course:
         course = "6.002 Spring 2012"
-    
+
     toc=content_parser.toc_from_xml(content_parser.course_file(request.user), chapter, section)
     active_chapter=1
     for i in range(len(toc)):
@@ -96,8 +96,7 @@ def render_accordion(request,course,chapter,section):
                   ['format_url_params',content_parser.format_url_params],
                   ['csrf',csrf(request)['csrf_token']]] + \
                      template_imports.items())
-    return {'init_js':render_to_string('accordion_init.js',context), 
-            'content':render_to_string('accordion.html',context)}
+    return render_to_string('accordion.html',context)
 
 @cache_control(no_cache=True, no_store=True, must_revalidate=True)
 def render_section(request, section):
@@ -124,8 +123,8 @@ def render_section(request, section):
     if 'init_js' not in module:
         module['init_js']=''
 
-    context={'init':accordion['init_js']+module['init_js'],
-             'accordion':accordion['content'],
+    context={'init':module['init_js'],
+             'accordion':accordion,
              'content':module['content'],
              'csrf':csrf(request)['csrf_token']}
 
@@ -179,8 +178,8 @@ def index(request, course="6.002 Spring 2012", chapter="Using the System", secti
     if 'init_js' not in module:
         module['init_js']=''
 
-    context={'init':accordion['init_js']+module['init_js'],
-             'accordion':accordion['content'],
+    context={'init':module['init_js'],
+             'accordion':accordion,
              'content':module['content'],
              'csrf':csrf(request)['csrf_token']}
 

static/js/application.js

@@ -39,6 +39,50 @@
 
   })();
 
+  window.Courseware = (function() {
+
+    function Courseware() {}
+
+    Courseware.bind = function() {
+      return this.Navigation.bind();
+    };
+
+    Courseware.Navigation = (function() {
+
+      function Navigation() {}
+
+      Navigation.bind = function() {
+        var navigation;
+        if ($('#accordion').length) {
+          navigation = new Navigation;
+          $('#accordion').bind('accordionchange', navigation.log).accordion({
+            active: $('#accordion ul:has(li.active)').index('#accordion ul'),
+            header: 'h3',
+            autoHeight: false
+          });
+          return $('#open_close_accordion a').click(navigation.toggle);
+        }
+      };
+
+      Navigation.prototype.log = function(event, ui) {
+        return log_event('accordion', {
+          newheader: ui.newHeader.text(),
+          oldheader: ui.oldHeader.text()
+        });
+      };
+
+      Navigation.prototype.toggle = function() {
+        return $('.course-wrapper').toggleClass('closed');
+      };
+
+      return Navigation;
+
+    })();
+
+    return Courseware;
+
+  }).call(this);
+
   window.FeedbackForm = (function() {
 
     function FeedbackForm() {}
@@ -67,8 +111,9 @@
         'X-CSRFToken': $.cookie('csrftoken')
       }
     });
-    FeedbackForm.bind();
     Calculator.bind();
+    Courseware.bind();
+    FeedbackForm.bind();
     return $("a[rel*=leanModal]").leanModal();
   });
 

templates/accordion_init.js

-$("#accordion").accordion({
-  active: ${ active_chapter },
-  header: 'h3',
-  autoHeight: false,
-});
-
-$("#open_close_accordion a").click(function(){
-  if ($(".course-wrapper").hasClass("closed")){
-    $(".course-wrapper").removeClass("closed");
-  } else {
-    $(".course-wrapper").addClass("closed");
-  }
-});
-
-$('.ui-accordion').bind('accordionchange', function(event, ui) {
-   var event_data = {'newheader':ui.newHeader.text(),
-         'oldheader':ui.oldHeader.text()};
-   log_event('accordion', event_data);
-});

templates/coffee/files.json

 {
   "js_files": [
-    "/static/js/jquery-1.6.2.min.js"
+    "/static/js/jquery-1.6.2.min.js",
+    "/static/js/jquery-ui-1.8.16.custom.min.js",
+    "/static/js/jquery.leanModal.js"
   ],
   "static_files": [
     "js/application.js"

templates/coffee/fixtures/accordion.html

+<div class="course-wrapper">
+  <header id="open_close_accordion">
+    <a href="#">close</a>
+  </header>
+  <div id="accordion"></div>
+</div>

templates/coffee/spec/courseware_spec.coffee

+describe 'Courseware', ->
+  describe 'bind', ->
+    it 'bind the navigation', ->
+      spyOn Courseware.Navigation, 'bind'
+      Courseware.bind()
+      expect(Courseware.Navigation.bind).toHaveBeenCalled()
+
+  describe 'Navigation', ->
+    beforeEach ->
+      loadFixtures 'accordion.html'
+      @navigation = new Courseware.Navigation
+
+    describe 'bind', ->
+      describe 'when the #accordion exists', ->
+        it 'activate the accordion with correct active section', ->
+          spyOn $.fn, 'accordion'
+          $('#accordion').append('<ul><li></li></ul><ul><li class="active"></li></ul>')
+          Courseware.Navigation.bind()
+          expect($('#accordion').accordion).toHaveBeenCalledWith
+            active: 1
+            header: 'h3'
+            autoHeight: false
+
+        it 'binds the accordionchange event', ->
+          Courseware.Navigation.bind()
+          expect($('#accordion')).toHandleWith 'accordionchange', @navigation.log
+
+        it 'bind the navigation toggle', ->
+          Courseware.Navigation.bind()
+          expect($('#open_close_accordion a')).toHandleWith 'click', @navigation.toggle
+
+      describe 'when the #accordion does not exists', ->
+        beforeEach ->
+          $('#accordion').remove()
+
+        it 'does not activate the accordion', ->
+          spyOn $.fn, 'accordion'
+          Courseware.Navigation.bind()
+          expect($('#accordion').accordion).wasNotCalled()
+
+    describe 'toggle', ->
+      it 'toggle closed class on the wrapper', ->
+        $('.course-wrapper').removeClass('closed')
+
+        @navigation.toggle()
+        expect($('.course-wrapper')).toHaveClass('closed')
+
+        @navigation.toggle()
+        expect($('.course-wrapper')).not.toHaveClass('closed')
+
+    describe 'log', ->
+      beforeEach ->
+        window.log_event = ->
+        spyOn window, 'log_event'
+
+      it 'submit event log', ->
+        @navigation.log {}, {
+          newHeader:
+            text: -> "new"
+          oldHeader:
+            text: -> "old"
+        }
+
+        expect(window.log_event).toHaveBeenCalledWith 'accordion',
+          newheader: 'new'
+          oldheader: 'old'

templates/coffee/spec/courseware_spec.js

+// Generated by CoffeeScript 1.3.2-pre
+(function() {
+
+  describe('Courseware', function() {
+    describe('bind', function() {
+      return it('bind the navigation', function() {
+        spyOn(Courseware.Navigation, 'bind');
+        Courseware.bind();
+        return expect(Courseware.Navigation.bind).toHaveBeenCalled();
+      });
+    });
+    return describe('Navigation', function() {
+      beforeEach(function() {
+        loadFixtures('accordion.html');
+        return this.navigation = new Courseware.Navigation;
+      });
+      describe('bind', function() {
+        describe('when the #accordion exists', function() {
+          it('activate the accordion with correct active section', function() {
+            spyOn($.fn, 'accordion');
+            $('#accordion').append('<ul><li></li></ul><ul><li class="active"></li></ul>');
+            Courseware.Navigation.bind();
+            return expect($('#accordion').accordion).toHaveBeenCalledWith({
+              active: 1,
+              header: 'h3',
+              autoHeight: false
+            });
+          });
+          it('binds the accordionchange event', function() {
+            Courseware.Navigation.bind();
+            return expect($('#accordion')).toHandleWith('accordionchange', this.navigation.log);
+          });
+          return it('bind the navigation toggle', function() {
+            Courseware.Navigation.bind();
+            return expect($('#open_close_accordion a')).toHandleWith('click', this.navigation.toggle);
+          });
+        });
+        return describe('when the #accordion does not exists', function() {
+          beforeEach(function() {
+            return $('#accordion').remove();
+          });
+          return it('does not activate the accordion', function() {
+            spyOn($.fn, 'accordion');
+            Courseware.Navigation.bind();
+            return expect($('#accordion').accordion).wasNotCalled();
+          });
+        });
+      });
+      describe('toggle', function() {
+        return it('toggle closed class on the wrapper', function() {
+          $('.course-wrapper').removeClass('closed');
+          this.navigation.toggle();
+          expect($('.course-wrapper')).toHaveClass('closed');
+          this.navigation.toggle();
+          return expect($('.course-wrapper')).not.toHaveClass('closed');
+        });
+      });
+      return describe('log', function() {
+        beforeEach(function() {
+          window.log_event = function() {};
+          return spyOn(window, 'log_event');
+        });
+        return it('submit event log', function() {
+          this.navigation.log({}, {
+            newHeader: {
+              text: function() {
+                return "new";
+              }
+            },
+            oldHeader: {
+              text: function() {
+                return "old";
+              }
+            }
+          });
+          return expect(window.log_event).toHaveBeenCalledWith('accordion', {
+            newheader: 'new',
+            oldheader: 'old'
+          });
+        });
+      });
+    });
+  });
+
+}).call(this);

templates/coffee/src/courseware.coffee

+class window.Courseware
+  @bind: ->
+    @Navigation.bind()
+
+  class @Navigation
+    @bind: ->
+      if $('#accordion').length
+        navigation = new Navigation
+        $('#accordion').bind('accordionchange', navigation.log).accordion
+          active: $('#accordion ul:has(li.active)').index('#accordion ul')
+          header: 'h3'
+          autoHeight: false
+        $('#open_close_accordion a').click navigation.toggle
+
+    log: (event, ui) ->
+      log_event 'accordion',
+        newheader: ui.newHeader.text()
+        oldheader: ui.oldHeader.text()
+
+    toggle: ->
+      $('.course-wrapper').toggleClass('closed')

templates/coffee/src/main.coffee

@@ -3,5 +3,6 @@ $ ->
     headers : { 'X-CSRFToken': $.cookie 'csrftoken' }
 
   Calculator.bind()
+  Courseware.bind()
   FeedbackForm.bind()
   $("a[rel*=leanModal]").leanModal()