Modularize sequence coffeescript in prepration for CMS preview

common/lib/xmodule/xmodule/js/src/sequence/display.coffee

 class @Sequence
-  constructor: (@id, @element_id, @elements, @tag, position) ->
-    @el = $("##{@element_id}")
-    @buildNavigation()
+  constructor: (element) ->
+    (@id, @element_id, @elements, position) ->
+    @el = $(element)
+    @contents = @$('.seq_contents')
+    @id = @el.data('id')
     @initProgress()
     @bind()
-    @render position
+    @render parseInt(@el.data('position'))
 
   $: (selector) ->
     $(selector, @el)
@@ -58,19 +60,6 @@ class @Sequence
         when 'in_progress' then element.addClass('progress-some')
         when 'done' then element.addClass('progress-done')
 
-  buildNavigation: ->
-    $.each @elements, (index, item) =>
-      link = $('<a>').attr class: "seq_#{item.type}_inactive", 'data-element': index + 1
-      title = $('<p>').html(item.title)
-      # TODO (vshnayder): add item.progress_detail either to the title or somewhere else.
-      # Make sure it gets updated after ajax calls.
-      # implementation note: will need to figure out how to handle combining detail
-      # statuses of multiple modules in js.
-      list_item = $('<li>').append(link.append(title))
-      @setProgress item.progress_status, link
-
-      @$('#sequence-list').append list_item
-
   toggleArrows: =>
     @$('.sequence-nav-buttons a').unbind('click')
 
@@ -79,7 +68,7 @@ class @Sequence
     else
       @$('.sequence-nav-buttons .prev a').removeClass('disabled').click(@previous)
 
-    if @position == @elements.length
+    if @position == @contents.length
       @$('.sequence-nav-buttons .next a').addClass('disabled')
     else
       @$('.sequence-nav-buttons .next a').removeClass('disabled').click(@next)
@@ -91,7 +80,7 @@ class @Sequence
         $.postWithPrefix "/modx/#{@id}/goto_position", position: new_position
 
       @mark_active new_position
-      @$('#seq_content').html @elements[new_position - 1].content
+      @$('#seq_content').html @contents.eq(new_position - 1).text()
 
       MathJax.Hub.Queue(["Typeset", MathJax.Hub])
       @position = new_position
@@ -122,16 +111,14 @@ class @Sequence
 
   mark_visited: (position) ->
     # Don't overwrite class attribute to avoid changing Progress class
-    type = @elements[position - 1].type
     element = @link_for(position)
-    element.removeClass("seq_#{type}_inactive")
-    .removeClass("seq_#{type}_active")
-    .addClass("seq_#{type}_visited")
+    element.removeClass("inactive")
+    .removeClass("active")
+    .addClass("visited")
 
   mark_active: (position) ->
     # Don't overwrite class attribute to avoid changing Progress class
-    type = @elements[position - 1].type
     element = @link_for(position)
-    element.removeClass("seq_#{type}_inactive")
-    .removeClass("seq_#{type}_visited")
-    .addClass("seq_#{type}_active")
+    element.removeClass("inactive")
+    .removeClass("visited")
+    .addClass("active")

common/lib/xmodule/xmodule/seq_module.py

@@ -81,11 +81,7 @@ class SequenceModule(XModule):
                 'type': child.get_icon_class(),
             })
 
-        # Split </script> tags -- browsers handle this as end
-        # of script, even if it occurs mid-string. Do this after json.dumps()ing
-        # so that we can be sure of the quotations being used
-        import re
-        params = {'items': re.sub(r'(?i)</(script)', r'\u003c/\1', json.dumps(contents)),	 # ?i = re.IGNORECASE for py2.6 compatability
+        params = {'items': contents,
                   'element_id': self.location.html_id(),
                   'item_id': self.id,
                   'position': self.position,

lms/static/sass/.gitignore

+*.css

lms/static/sass/course/old/courseware/_sequence-nav.scss

@@ -87,60 +87,66 @@ nav.sequence-nav {
         }
 
         //video
-        &.seq_video_inactive {
-          @extend .inactive;
-          background-image: url('../images/sequence-nav/video-icon-normal.png');
-          background-position: center;
-        }
+        &.seq_video {
+          &.inactive {
+            @extend .inactive;
+            background-image: url('../images/sequence-nav/video-icon-normal.png');
+            background-position: center;
+          }
 
-        &.seq_video_visited {
-          @extend .visited;
-          background-image: url('../images/sequence-nav/video-icon-visited.png');
-          background-position: center;
-        }
+          &.visited {
+            @extend .visited;
+            background-image: url('../images/sequence-nav/video-icon-visited.png');
+            background-position: center;
+          }
 
-        &.seq_video_active {
-          @extend .active;
-          background-image: url('../images/sequence-nav/video-icon-current.png');
-          background-position: center;
+          &.active {
+            @extend .active;
+            background-image: url('../images/sequence-nav/video-icon-current.png');
+            background-position: center;
+          }
         }
 
         //other
-        &.seq_other_inactive {
-          @extend .inactive;
-          background-image: url('../images/sequence-nav/document-icon-normal.png');
-          background-position: center;
-        }
+        &.seq_other {
+          &.inactive {
+            @extend .inactive;
+            background-image: url('../images/sequence-nav/document-icon-normal.png');
+            background-position: center;
+          }
 
-        &.seq_other_visited {
-          @extend .visited;
-          background-image: url('../images/sequence-nav/document-icon-visited.png');
-          background-position: center;
-        }
+          &.visited {
+            @extend .visited;
+            background-image: url('../images/sequence-nav/document-icon-visited.png');
+            background-position: center;
+          }
 
-        &.seq_other_active {
-          @extend .active;
-          background-image: url('../images/sequence-nav/document-icon-current.png');
-          background-position: center;
+          &.active {
+            @extend .active;
+            background-image: url('../images/sequence-nav/document-icon-current.png');
+            background-position: center;
+          }
         }
 
         //vertical & problems
-        &.seq_vertical_inactive, &.seq_problem_inactive {
-          @extend .inactive;
-          background-image: url('../images/sequence-nav/list-icon-normal.png');
-          background-position: center;
-        }
+        &.seq_vertical, &.seq_problem {
+          &.inactive {
+            @extend .inactive;
+            background-image: url('../images/sequence-nav/list-icon-normal.png');
+            background-position: center;
+          }
 
-        &.seq_vertical_visited, &.seq_problem_visited {
-          @extend .visited;
-          background-image: url('../images/sequence-nav/list-icon-visited.png');
-          background-position: center;
-        }
+          &.visited {
+            @extend .visited;
+            background-image: url('../images/sequence-nav/list-icon-visited.png');
+            background-position: center;
+          }
 
-        &.seq_vertical_active, &.seq_problem_active {
-          @extend .active;
-          background-image: url('../images/sequence-nav/list-icon-current.png');
-          background-position: center;
+          &.active {
+            @extend .active;
+            background-image: url('../images/sequence-nav/list-icon-current.png');
+            background-position: center;
+          }
         }
 
         p {
@@ -265,6 +271,10 @@ section.course-content {
     }
   }
 
+  div.seq_contents {
+    display: none;
+  }
+
   nav.sequence-bottom {
     margin: lh(2) 0 0;
     text-align: center;

lms/templates/seq_module.html

-<div id="sequence_${element_id}" class="sequence">
+<div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" >
   <nav aria-label="Section Navigation" class="sequence-nav">
     <ol id="sequence-list">
+      % for idx, item in enumerate(items):
+      ## TODO (vshnayder): add item.progress_detail either to the title or somewhere else.
+      ## Make sure it gets updated after ajax calls.
+      ## implementation note: will need to figure out how to handle combining detail
+      ## statuses of multiple modules in js.
+      <li>
+        <a class="seq_${item['type']} inactive progress-${item['progress_status']}" data-element="${idx+1}">
+          <p>${item['title']}</p>
+        </a>
+      </li>
+      % endfor
     </ol>
 
     <ul class="sequence-nav-buttons">
@@ -9,6 +20,9 @@
     </ul>
   </nav>
 
+  % for item in items:
+  <div class="seq_contents">${item['content'] | h}</div>
+  % endfor
   <div id="seq_content"></div>
 
   <nav class="sequence-bottom">
@@ -22,7 +36,7 @@
 <%block name="js_extra">
 <script type="text/javascript">
   $(function(){
-    new Sequence('${item_id}', 'sequence_${element_id}', ${items}, '${tag}', ${position});
+    new Sequence($("#sequence_${element_id}"));
   });
 </script>
 </%block>