Skip to content

E
edx-platform
Commit 18be1797 by Calen Pennington
Options

Modularize sequence coffeescript in prepration for CMS preview

parent 5fb23acd
Showing with 84 additions and 72 deletions
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
......@@ -84,7 +84,7 @@ class SequenceModule(XModule):
# 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
params = {'items': json.dumps(contents).replace('</script>', '<"+"/script>'),
params = {'items': contents,
'element_id': self.location.html_id(),
'item_id': self.id,
'position': self.position,
......
lms/static/sass/application.css deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
lms/static/sass/sass_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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment