seq_module.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}">
  % if banner_text:
    <div class="pattern-library-shim alert alert-information subsection-header" tabindex="-1">
      <span class="pattern-library-shim icon alert-icon fa fa-bullhorn" aria-hidden="true"></span>
      <div class="pattern-library-shim alert-message">
        <p class="pattern-library-shim alert-copy">
          ${banner_text}
        </p>
      </div>
    </div>
  % endif
  <div class="sequence-nav">
    <button class="sequence-nav-button button-previous">
      <span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
      <span>${_('Previous')}</span>
    </button>
    <nav class="sequence-list-wrapper" aria-label="${_('Unit')}">
      <ol id="sequence-list">
        % for idx, item in enumerate(items):
        <li>
        <button class="seq_${item['type']} inactive 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']}&nbsp;</span>${item['page_title']}<span class="sr bookmark-icon-sr">&nbsp;${_("Bookmarked") if item['bookmarked'] else ""}</span></div>
          </button>
        </li>
        % endfor
      </ol>
    </nav>
    <button class="sequence-nav-button button-next">
      <span>${_('Next')}</span>
      <span class="icon fa fa-chevron-next" aria-hidden="true"></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>${_('Previous')}</span>
    </button>
    <button class="sequence-nav-button button-next">
      <span>${_('Next')}</span>
      <span class="icon fa fa-chevron-next" aria-hidden="true"></span>
    </button>
  </nav>
</div>

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