edx-platform/lms/templates/preview_menu.html

## mako

<%page args="active_page=None" expression_filter="h" />
<%namespace name='static' file='/static_content.html'/>
<%!
from django.utils.translation import gettext as _
from django.conf import settings
from openedx.core.djangolib.js_utils import dump_js_escaped_json
from openedx.core.djangolib.markup import HTML, Text
from xmodule.partitions.partitions_service import get_all_partitions_for_course
%>

<%
show_preview_menu = course and can_masquerade and supports_preview_menu
%>

% if show_preview_menu:
    <%
    def selected(is_selected):
      return "selected" if is_selected else ""

    course_partitions = get_all_partitions_for_course(course)
    masquerade_user_name = masquerade.user_name if masquerade else None
    masquerade_group_id = masquerade.group_id if masquerade else None
    masquerade_user_partition_id = masquerade.user_partition_id if masquerade else None
    staff_selected = selected(not masquerade or masquerade.role != "student")
    specific_student_selected = selected(not staff_selected and masquerade.user_name)
    student_selected = selected(not staff_selected and not specific_student_selected and not masquerade_group_id)

    if settings.HTTPS == 'on':
        protocol = 'https'
    else:
        protocol = 'http'
    insights_base_url = ''
    if settings.ANALYTICS_DASHBOARD_URL:
        insights_base_url = settings.ANALYTICS_DASHBOARD_URL + '/courses'
    studio_base_url = ''
    if settings.CMS_BASE:
        studio_base_url = protocol + '://' + settings.CMS_BASE
    insights_url = insights_base_url
    studio_url = studio_base_url
    if course and course.id:
        if insights_base_url:
            insights_url = "{base_url}/{course_id}".format(
                base_url=insights_base_url,
                course_id=course.id,
            )
        if studio_base_url:
            studio_url = "{base_url}/course/{course_id}".format(
                base_url=studio_base_url,
                course_id=course.id,
            )
    %>
    <nav class="wrapper-preview-menu" aria-label="${_('Course View')}">
        <div class="preview-menu" style="display: flex; align-items: center;">
            <ol class="preview-actions" style="flex-grow: 1;">
                <li class="action-preview">
                    <form action="#" class="action-preview-form" method="post">
                        <label for="action-preview-select" class="action-preview-label">${_("View this course as:")}</label>
                        <select class="action-preview-select" id="action-preview-select" name="select">
                            <option value="staff" ${staff_selected}>${_("Staff")}</option>
                            <option value="student" ${student_selected}>${_("Learner")}</option>
                            <option value="specific student" ${specific_student_selected}>${_("Specific learner")}</option>
                            % if course_partitions:
                                % for course_partition in course_partitions:
                                    % for group in sorted(course_partition.groups, key=lambda group: group.name):
                                    <option value="group.id" data-group-id="${group.id}" data-partition-id="${course_partition.id}" ${selected(masquerade_user_partition_id == course_partition.id and masquerade_group_id == group.id)}>
                                        ${_("Learner in {content_group}").format(content_group=group.name)}
                                    </option>
                                    % endfor
                                % endfor
                            % endif
                        </select>
                        <div class="action-preview-username-container">
                          <label for="action-preview-username" class="action-preview-label">${_("Username or email:")}</label>
                          <input type="text" class="action-preview-username" id="action-preview-username">
                        </div>
                        <button type="submit" class="sr-only" name="submit" value="submit">${_("Set preview mode")}</button>
                    </form>
                </li>
            </ol>
            % if specific_student_selected:
                <div class="preview-specific-student-notice">
                    <p>
                        ${Text(_("You are now viewing the course as {i_start}{user_name}{i_end}.")).format(
                            user_name=masquerade_user_name,
                            i_start=HTML(u'<i>'),
                            i_end=HTML(u'</i>'),
                        )}
                    </p>
                </div>
            % endif
            <div style="flex-shrink: 1; text-align: center;">
            % if studio_url:
                <a
                    class="btn btn-primary view-in-studio"
                    style="border: solid 1px white;"
                    href="${studio_url}"
                    data-studio-base-url="${studio_base_url}"
                >
                    ${_("View in Studio")}
                </a>
                <script type="text/javascript">
                  $(function () {
                      $('.wrapper-preview-menu a.view-in-studio').focus(function (event) {
                          /*
                          When we start rendering this template, we
                          don't yet have a vertical in the context
                          (that happens in a separate `render` call,
                          if this is even on a unit-level page),
                          so we dynamically lookup the vertical element in
                          the DOM and use its data-* attributes to
                          construct a Studio link directly to this unit
                          and replace the href attribute with it. If no
                          vertical is present, the link directs to the
                          course outline page in Studio.

                          */
                          var verticals = $('.xblock-student_view-vertical');
                          if (verticals.length > 0) {
                              var blockId = verticals[0].dataset.usageId;
                              var url = [
                                this.dataset.studioBaseUrl,
                                'container',
                                blockId,
                              ].join('/');
                              $(this).attr("href", url);
                          }
                      });
                    });
                  </script>
            % endif
            % if insights_url:
                <a class="btn btn-primary" style="border: solid 1px white;" href="${insights_url}">
                    ${_("View in Insights")}
                </a>
            % endif
            </div>
        </div>
    </nav>

    <%
    preview_options = {
        "courseId": course.id,
        "disableStudentAccess": disable_student_access if disable_student_access is not UNDEFINED else False,
        "specificStudentSelected": specific_student_selected,
        "masqueradeUsername" : masquerade_user_name if masquerade_user_name is not UNDEFINED else None,
    }
    %>
    <%static:require_module_async module_name="lms/js/preview/preview_factory" class_name="PreviewFactory">
        PreviewFactory(${preview_options | n, dump_js_escaped_json});
    </%static:require_module_async>
% endif