accordion.html

<%page expression_filter="h"/>
<%namespace name='static' file='../static_content.html'/>
<%!
    from django.core.urlresolvers import reverse
    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>
        ${HTML(chapter['display_name'])}
    </span>
</a>
<div class="chapter-content-container" id="${chapter['display_id']}-child" tabindex="-1" role="region" 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">${HTML(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>

                ## There are 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.get('due') is None:
                        data_string = section['format']
                    else:
                        if 'proctoring' in section:
                            data_string = _('due {date}')
                        else:
                            data_string = _("{section_format} due {{date}}").format(section_format=section['format'])
               %>
                % 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="localized-datetime subtitle-name" data-datetime="${section['due']}" data-string="${data_string}" data-timezone="${user_timezone}" data-language="${user_language}"></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="localized-datetime subtitle-name" data-datetime="${section['due']}" data-string="${data_string}" data-timezone="${user_timezone}" data-language="${user_language}"></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>

    <%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
        DateUtilFactory.transform(iterationKey=".localized-datetime");
    </%static:require_module_async>
% endif