seq_module.html

<%! 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}" >
  <div class="sequence-nav">
    <button class="sequence-nav-button button-previous">${_('Previous')}</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>
        <a class="seq_${item['type']} inactive progress-${item['progress_status']}"
           data-id="${item['id']}"
           data-element="${idx+1}"
           href="javascript:void(0);"
           title="${item['title']|h}"
           data-page-title="${item['page_title']|h}"
           aria-controls="seq_contents_${idx}"
           id="tab_${idx}"
           tabindex="0">
            <i class="icon fa seq_${item['type']}" aria-hidden="true"></i>
            <p><span class="sr">${item['type']}</span> ${item['title']}</p>
          </a>
        </li>
        % endfor
      </ol>
    </nav>
    <button class="sequence-nav-button button-next">${_('Next')}</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'] | h}
  </div>
  % endfor
  <div id="seq_content"></div>

  <nav class="sequence-bottom" aria-label="${_('Section')}">
    <button class="sequence-nav-button button-previous">${_('Previous')}</button>
    <button class="sequence-nav-button button-next">${_('Next')}</button>
  </nav>
</div>



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