accordion.html

<%page expression_filter="h"/>
<%namespace name='static' file='../static_content.html'/>
<%!
    from django.core.urlresolvers import reverse
    from util.date_utils import get_time_display
    from django.utils.translation import ugettext as _
    from django.conf import settings
    from openedx.core.djangolib.markup import HTML, Text
%>

<%def name="make_chapter(chapter)">
<%
if chapter.get('active'):
    aria_label = _('{chapter} current chapter').format(chapter=chapter['display_name'])
    active_class = 'active'
else:
    aria_label = chapter['display_name']
    active_class = ''
%>
<a href="#${chapter['display_id']}-child" role="button" class="button-chapter chapter ${active_class}" id="${chapter['display_id']}-parent" aria-controls="${chapter['display_id']}-child" aria-expanded="false">
    <span class="group-heading ${active_class}" aria-label="${aria_label}">
        <span class="icon fa fa-caret-right" aria-hidden="true"></span>
        ${chapter['display_name']}
    </span>
</a>
<div class="chapter-content-container" id="${chapter['display_id']}-child" tabindex="-1" role="group" aria-label="${chapter['display_name']} submenu">
    <div class="chapter-menu">
        % for section in chapter['sections']:
        <div class="menu-item ${'active' if 'active' in section and section['active'] else ''} ${'graded'  if 'graded' in section and section['graded'] else ''}">
            <a class="accordion-nav" href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">
                <p class="accordion-display-name">${section['display_name']} ${Text(_('{span_start}current section{span_end}')).format(
                        span_start=HTML('<span class="sr">'),
                        span_end=HTML('</span>'),
                    ) if 'active' in section and section['active'] else ''}</p>
                <%
                if section.get('due') is None:
                    due_date = ''
                else:
                    formatted_string = get_time_display(section['due'], due_date_display_format, coerce_tz=time_zone)
                    due_date = '' if len(formatted_string)==0 else _('due {date}').format(date=formatted_string)
                %>

                ## There is behavior differences between
                ## rendering of sections which have proctoring/timed examinations
                ## and those that do not.
                ##
                ## Proctoring exposes a exam status message field as well as
                ## a status icon

                % if section['format'] or due_date or 'proctoring' in section:
                <p class="subtitle">
                    % if 'proctoring' in section:
                        ## Display the proctored exam status icon and status message
                        <span class="menu-icon icon fa ${section['proctoring'].get('suggested_icon', 'fa-pencil-square-o')} ${section['proctoring'].get('status', 'eligible')}" aria-hidden="true"></span>
                        <span class="subtitle-name">${section['proctoring'].get('short_description', '')}</span>

                        ## completed proctored exam statuses should not show the due date
                        ## since the exam has already been submitted by the user
                        % if not section['proctoring'].get('in_completed_state', False):
                            <span class="subtitle-name">${due_date}</span>
                        % endif
                    % else:
                        ## non-proctored section, we just show the exam format and the due date
                        ## this is the standard case in edx-platform
                        <span class="subtitle-name">${section['format']} ${due_date}</span>

                        % if 'graded' in section and section['graded']:
                            <span class="menu-icon icon fa fa-pencil-square-o" aria-hidden="true"></span>
                            <span class="sr">${_("This content is graded")}</span>
                        % endif
                    % endif
                </p>
                % endif
            </a>
        </div>
        % endfor
    </div>
</div>
</%def>

% for chapter in toc:
    ${make_chapter(chapter)}
% endfor


% if toc:
    <%static:require_module_async module_name="js/courseware/accordion_events" class_name="AccordionEvents">
        AccordionEvents();
    </%static:require_module_async>
% endif