seq_module.html 2.15 KB
Newer Older
1 2
<%! from django.utils.translation import ugettext as _ %>

3
<div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-ajax-url="${ajax_url}" >
4
  <nav class="sequence-nav">
5
    <ul class="sequence-nav-buttons">
6
      <li class="prev"><a role="button" href="#">${_('Previous')}</a></li>
7
    </ul>
8

9
    <div class="sequence-list-wrapper">
10
      <ol role="tablist" aria-label="${_('Section Navigation')}" id="sequence-list">
11 12 13 14 15
        % 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.
16
        <li>
17 18
        <a class="seq_${item['type']} inactive progress-${item['progress_status']}"
           data-id="${item['id']}"
19
           data-element="${idx+1}"
20 21
           href="javascript:void(0);"
           title="${item['title']|h}"
22
           data-page-title="${item['page_title']|h}"
23 24 25 26
           aria-controls="seq_contents_${idx}"
           id="tab_${idx}"
           tabindex="0"
           role="tab">
27
            <p aria-hidden="false">${item['title']}</p>
28 29 30 31 32
          </a>
        </li>
        % endfor
      </ol>
    </div>
33

34
    <ul class="sequence-nav-buttons">
35
      <li class="next"><a role="button" href="#">${_("Next")}</a></li>
36 37
    </ul>
  </nav>
Piotr Mitros committed
38

39
  % for idx, item in enumerate(items):
40
  <div id="seq_contents_${idx}"
41 42 43 44 45
       aria-labelledby="tab_${idx}"
       aria-hidden="true"
       class="seq_contents tex2jax_ignore asciimath2jax_ignore">
     ${item['content'] | h}
  </div>
46
  % endfor
47
  <div id="seq_content" role="tabpanel"></div>
48

49
  <nav class="sequence-bottom">
50
    <ul aria-label="${_('Section Navigation')}" class="sequence-nav-buttons">
51 52
      <li class="prev"><a role="button" href="#">${_("Previous")}</a></li>
      <li class="next"><a role="button" href="#">${_("Next")}</a></li>
53 54 55
    </ul>
  </nav>
</div>
56 57 58 59 60 61 62 63



<script type="text/javascript">
  var sequenceNav;
  $(document).ready(function() {
    sequenceNav = new SequenceNav($('.sequence-nav'));
  });
64
</script>