lms/templates/seq_block.html - release-ulmo - githubmirror/edx-platform

lms/templates/seq_block.html
169 строк7 KB
kshitij.sobti
feat: Use dropdown for units when more then 15
21 авг 2025, 15:12
21 авг 2025, 15:120fbfc1c
<%page expression_filter="h"/>
<%!
  from django.utils.translation import pgettext, gettext as _
  from django.conf import settings
%>

<script type="text/template" id="dropdown-button-tpl">
    <li id="dropdown-container" class="h-100">
        <button
            id="dropdown-sequence-list-button"
            class="dropdown-toggle"
            type="button"
        >
            <span class="icon fa fa-chevron-down" aria-hidden="true"></span>
        </button>
        <div id="dropdown-sequence-list" style="display: none; position: absolute; width: 240px; right: 0;">
            <ol class="d-block dropdown-menu bg-white py-0 shadow-sm border"
                aria-labelledby="dropdown-sequence-list-button">
            </ol>
        </div>
    </li>
</script>

<div id="sequence_${element_id}" class="sequence" data-id="${item_id}"
     data-position="${position}"
     data-next-url="${next_url}" data-prev-url="${prev_url}"
     data-save-position="${'true' if save_position else 'false'}"
     data-show-completion="${'true' if show_completion else 'false'}"
>
  % if not exclude_units:

  % if banner_text:
    <div class="pattern-library-shim alert alert-information subsection-header" role="note" tabindex="-1">
      <span class="pattern-library-shim icon alert-icon fa fa-info-circle" aria-hidden="true"></span>
      <span class="sr">${_('Important!')}&nbsp;</span>
      <div class="pattern-library-shim alert-message">
        <p class="pattern-library-shim alert-copy">
          ${banner_text}
        </p>
      </div>
    </div>
  % endif
  % endif
  % if not gated_sequence_paywall:
  <div class="sequence-nav">
    <button class="sequence-nav-button button-previous">
      <span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
      ## Translators: A button for showing the Previous Unit
      <span class="sequence-nav-button-label">${pgettext('unit', 'Previous')}</span>
    </button>
    <button class="sequence-nav-button button-next">
      ## Translators: A button for showing the Next Unit
      <span class="sequence-nav-button-label">${pgettext('unit', 'Next')}</span>
      <span class="icon fa fa-chevron-next" aria-hidden="true"></span>
    </button>
    <nav class="sequence-list-wrapper" aria-label="${_('Sequence')}">
      <ol id="sequence-list" role="tablist">
        % if gated_content['gated']:
        <li>
          <button class="active nav-item tab" title="${_('Content Locked')}" id="tab_0" role="tab" tabindex="-1" aria-selected="true" aria-expanded="true" aria-controls="content_locked" disabled>
            <span class="icon fa fa-lock" aria-hidden="true"></span>
          </button>
        </li>
        % else:
        % for idx, item in enumerate(items):
        <li role="presentation" class="sequence-list-item">
          <button class="seq_${item['type']} inactive nav-item tab"
            role="tab"
            tabindex="-1"
            aria-selected="false"
            aria-expanded="false"
            aria-controls="seq_content"
            data-index="${idx}"
            data-id="${item['id']}"
            data-element="${idx+1}"
            data-page-title="${item['page_title']}"
            data-path="${item['path']}"
            data-graded="${item['graded']}"
            % if item.get('href'):
            data-href="${item['href']}"
            % endif
            id="tab_${idx}">
            <span class="icon fa seq_${item['type']}" aria-hidden="true"></span>
            % if 'complete' in item:
              <span class="check-circle ${"is-hidden" if not item['complete'] else ""}">
                <span
                  class="fa fa-check-circle"
                  style="color:green"
                  aria-hidden="true"
                ></span>
              </span>
              % if item['complete']:
                <span class="sr">${_("Completed")}</span>
              %endif
            % endif
            <span class="bookmark-icon ${"is-hidden" if not item['bookmarked'] else "bookmarked"}">
              <span class="fa fa-fw fa-bookmark" aria-hidden="true"></span>
            </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
        % endif
        % if exclude_units:
        <li role="presentation" class="custom-dropdown">
          <button id="new-unit-button" class="dropdown-main-button" data-parent="${item_id}" data-category="vertical" data-default-name="${_('Unit')}">
            <span class="icon fa fa-plus" aria-hidden="true"></span>
            ${_("New Unit")}
          </button>
          <button class="dropdown-toggle-button" aria-haspopup="true" aria-expanded="false" style="display: none;">
            <span class="icon fa fa-caret-down" aria-hidden="true"></span>
          </button>
          <ul class="dropdown-options" style="display: none;">
            <li><a href="#" class="seq_paste_unit" data-parent="${item_id}" data-category="vertical" data-default-name="${_('Unit')}">${_("Paste as new unit")}</a></li>
          </ul>
        </li>
        % endif
        % if show_dropdown:
          ## <%include file='seq_dropdown.html' args="items=items[15:], start_index=15"/>
        % endif
      </ol>
    </nav>
  </div>
  % endif
  % if not exclude_units:
  % if gated_content['gated']:
    <%include file="_gated_content.html" args="prereq_url=gated_content['prereq_url'], prereq_section_name=gated_content['prereq_section_name'], gated_section_name=gated_content['gated_section_name']"/>
  % elif gated_sequence_paywall:
    <h2 class="hd hd-2 unit-title">
        ${sequence_name}<span class="sr">${_("Content Locked")}</span>
    </h2>
    ${gated_sequence_paywall | n, decode.utf8}
  % else:
  <div class="sr-is-focusable" tabindex="-1"></div>
  % if settings.FEATURES.get("SHOW_PROGRESS_BAR", False) and getattr(settings, 'COMPLETION_AGGREGATOR_URL', ''):
    <div class="progress-container">
      <iframe id="progress-frame" style="border: none; width: 100%; height: 70px;" src="${chapter_completion_aggregator_url}"></iframe>
    </div>
  % endif

  % 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" role="tabpanel"></div>
  % endif
% else:
  <div id="seq_content" role="tabpanel"></div>
% endif

% if not exclude_units:
  <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>
      ## Translators: A button for showing the Previous Unit
      <span>${pgettext('unit', 'Previous')}</span>
    </button>
    <button class="sequence-nav-button button-next">
      ## Translators: A button for showing the Next Unit
      <span>${pgettext('unit', 'Next')}</span>
      <span class="icon fa fa-chevron-next" aria-hidden="true"></span>
    </button>
  </nav>
</div>
% endif