Refactor module loading using class detection

djangoapps/courseware/modules/video_module.py

@@ -32,9 +32,7 @@ class Module(XModule):
         return ["video"]
 
     def video_list(self):
-        l = self.youtube.split(',')
-        l = [i.split(":") for i in l]
-        return json.dumps(dict(l))
+        return self.youtube
 
     def get_html(self):
         return render_to_string('video.html',{'streams':self.video_list(),

static/coffee/src/calculator.coffee

@@ -1,10 +1,9 @@
-class window.Calculator
-  @bind: ->
-    calculator = new Calculator
-    $('.calc').click calculator.toggle
-    $('form#calculator').submit(calculator.calculate).submit (e) ->
+class Calculator
+  constructor: ->
+    $('.calc').click @toggle
+    $('form#calculator').submit(@calculate).submit (e) ->
       e.preventDefault()
-    $('div.help-wrapper a').hover(calculator.helpToggle).click (e) ->
+    $('div.help-wrapper a').hover(@helpToggle).click (e) ->
       e.preventDefault()
 
   toggle: ->

static/coffee/src/courseware.coffee

@@ -1,24 +1,14 @@
 class window.Courseware
-  @bind: ->
-    @Navigation.bind()
+  constructor: ->
+    new CoursewareNavigation
+    new Calculator
+    new FeedbackForm
+    @renderModules()
 
-  class @Navigation
-    @bind: ->
-      if $('#accordion').length
-        navigation = new Navigation
-        active = $('#accordion ul:has(li.active)').index('#accordion ul')
-        $('#accordion').bind('accordionchange', navigation.log).accordion
-          active: if active >= 0 then active else 1
-          header: 'h3'
-          autoHeight: false
-        $('#open_close_accordion a').click navigation.toggle
+  @start: ->
+    new Courseware
 
-        $('#accordion').show()
-
-    log: (event, ui) ->
-      log_event 'accordion',
-        newheader: ui.newHeader.text()
-        oldheader: ui.oldHeader.text()
-
-    toggle: ->
-      $('.course-wrapper').toggleClass('closed')
+  renderModules: ->
+    $('.course-content .video').each ->
+      id = $(this).attr('id').replace(/video_/, '')
+      new Video id, $(this).data('streams')

static/coffee/src/feedback_form.coffee

@@ -1,5 +1,5 @@
-class window.FeedbackForm
-  @bind: ->
+class FeedbackForm
+  constructor: ->
     $('#feedback_button').click ->
       data =
         subject: $('#feedback_subject').val()

static/coffee/src/main.coffee

@@ -5,8 +5,7 @@ $ ->
   window.onTouchBasedDevice = ->
     navigator.userAgent.match /iPhone|iPod|iPad/i
 
-  Calculator.bind()
-  Courseware.bind()
-  FeedbackForm.bind()
   $("a[rel*=leanModal]").leanModal()
 
+  if $('body').hasClass('courseware')
+    Courseware.start()

static/sass/courseware/_video.scss

@@ -351,7 +351,6 @@ section.course-content {
       float: left;
       max-height: 460px;
       overflow: auto;
-      padding-top: 10px;
       width: flex-grid(3, 9);
 
       li {

templates/coffee/src/courseware_navigation.coffee

@@ -0,0 +1,19 @@
+class CoursewareNavigation
+  constructor: ->
+    if $('#accordion').length
+      active = $('#accordion ul:has(li.active)').index('#accordion ul')
+      $('#accordion').bind('accordionchange', @log).accordion
+        active: if active >= 0 then active else 1
+        header: 'h3'
+        autoHeight: false
+      $('#open_close_accordion a').click @toggle
+
+      $('#accordion').show()
+
+  log: (event, ui) ->
+    log_event 'accordion',
+      newheader: ui.newHeader.text()
+      oldheader: ui.oldHeader.text()
+
+  toggle: ->
+    $('.course-wrapper').toggleClass('closed')

templates/coffee/src/modules/sequence.coffee

@@ -40,20 +40,20 @@ class window.Sequence
       @position = new_position
       @toggleArrows()
 
-  goto: (e) =>
-    e.preventDefault()
-    new_position = $(e.srcElement).data('element')
+  goto: (event) =>
+    event.preventDefault()
+    new_position = $(event.target).data('element')
     log_event("seq_goto", old: @position, new: new_position, id: @id)
     @render new_position
 
-  next: (e) =>
-    e.preventDefault()
+  next: (event) =>
+    event.preventDefault()
     new_position = @position + 1
     log_event("seq_next", old: @position, new: new_position, id: @id)
     @render new_position
 
-  previous: (e) =>
-    e.preventDefault()
+  previous: (event) =>
+    event.preventDefault()
     new_position = @position - 1
     log_event("seq_prev", old: @position, new: new_position, id: @id)
     @render new_position

templates/coffee/src/modules/video.coffee

@@ -1,4 +1,4 @@
-class window.Video
+class Video
   constructor: (@id, videos) ->
     @element = $("#video_#{@id}")
     @parseVideos videos
@@ -14,9 +14,10 @@ class window.Video
 
   parseVideos: (videos) ->
     @videos = {}
-    $.each videos, (speed, url) =>
-      speed = parseFloat(speed).toFixed(2).replace /\.00$/, '.0'
-      @videos[speed] = url
+    $.each videos.split(/,/), (index, video) =>
+      video = video.split(/:/)
+      speed = parseFloat(video[0]).toFixed(2).replace /\.00$/, '.0'
+      @videos[speed] = video[1]
 
   parseSpeed: ->
     @setSpeed($.cookie('video_speed'))

templates/coffee/src/navigation.coffee

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

templates/video.html

@@ -2,7 +2,7 @@
   <h1> ${name} </h1>
 % endif
 
-<div id="video_${id}" class="video">
+<div id="video_${id}" class="video" data-streams="${streams}">
   <div class="tc-wrapper">
     <article class="video-wrapper">
       <section class="video-player">
@@ -41,14 +41,6 @@
   </div>
 </div>
 
-<%block name="js_extra">
-<script type="text/javascript">
-  $(function(){
-    new Video('${id}', ${streams});
-  });
-</script>
-</%block>
-
 <ol class="video-mod">
 % for t in annotations:
   <li id="video-${annotations.index(t)}">