65 lines
2.8 KiB
HTML
65 lines
2.8 KiB
HTML
<%page expression_filter="h"/>
|
|
<%! from django.utils.translation import ugettext as _ %>
|
|
|
|
<div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-ajax-url="${ajax_url}" data-next-url="${next_url}" data-prev-url="${prev_url}">
|
|
<div class="path"></div>
|
|
<div class="sequence-nav">
|
|
<button class="sequence-nav-button button-previous">
|
|
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span><span class="sr">${_('Previous')}</span>
|
|
</button>
|
|
<nav class="sequence-list-wrapper" aria-label="${_('Unit')}">
|
|
<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>
|
|
<button class="seq_${item['type']} inactive progress-${item['progress_status']} nav-item"
|
|
data-id="${item['id']}"
|
|
data-element="${idx+1}"
|
|
data-page-title="${item['page_title']}"
|
|
data-path="${item['path']}"
|
|
id="tab_${idx}">
|
|
<span class="icon fa seq_${item['type']}" aria-hidden="true"></span>
|
|
<span class="fa fa-fw fa-bookmark bookmark-icon ${"is-hidden" if not item['bookmarked'] else "bookmarked"}" aria-hidden="true"></span>
|
|
<div class="sequence-tooltip sr"><span class="sr">${item['type']} </span>${item['page_title']}<span class="sr bookmark-icon-sr"> ${_("Bookmarked") if item['bookmarked'] else ""}</span></div>
|
|
</button>
|
|
</li>
|
|
% endfor
|
|
</ol>
|
|
</nav>
|
|
<button class="sequence-nav-button button-next">
|
|
<span class="icon fa fa-chevron-next" aria-hidden="true"></span><span class="sr">${_('Next')}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="sr-is-focusable" tabindex="-1"></div>
|
|
|
|
% for idx, item in enumerate(items):
|
|
<div id="seq_contents_${idx}"
|
|
aria-labelledby="tab_${idx}"
|
|
aria-hidden="true"
|
|
class="seq_contents tex2jax_ignore asciimath2jax_ignore">
|
|
${item['content']}
|
|
</div>
|
|
% endfor
|
|
<div id="seq_content"></div>
|
|
|
|
<nav class="sequence-bottom" aria-label="${_('Section')}">
|
|
<button class="sequence-nav-button button-previous">
|
|
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span><span class="sr">${_('Previous')}</span>
|
|
</button>
|
|
<button class="sequence-nav-button button-next">
|
|
<span class="icon fa fa-chevron-next" aria-hidden="true"></span><span class="sr">${_('Next')}</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var sequenceNav;
|
|
$(document).ready(function() {
|
|
sequenceNav = new SequenceNav($('.sequence-nav'));
|
|
});
|
|
</script>
|