visibility_editor.html

<%page expression_filter="h"/>
<%
from django.conf import settings
from django.utils.translation import ugettext as _
from contentstore.utils import ancestor_has_staff_lock, get_visibility_partition_info
from openedx.core.djangolib.markup import HTML, Text

partition_info = get_visibility_partition_info(xblock)
selectable_partitions = partition_info["selectable_partitions"]
selected_partition_index = partition_info["selected_partition_index"]
selected_groups_label = partition_info["selected_groups_label"]

is_staff_locked = ancestor_has_staff_lock(xblock)
%>

<div class="modal-section visibility-summary">
    % if len(selectable_partitions) == 0:
        <div class="is-not-configured has-actions">
            <h3 class="title">${_('No visibility settings')}</h3>
            <div class="copy">
                <p>${_('No visibility settings are defined for this component, but visibility might be affected by inherited settings.')}</p>
                % if settings.FEATURES.get('ENABLE_ENROLLMENT_TRACK_USER_PARTITION'):
                <p>${_('You can make this component visible only to specific groups of learners based either on their enrollment track, or by content groups that you create.')}</p>
                % else:
                <p>${_('You can make this component visible only to specific groups of learners based on content groups that you create.')}</p>
                % endif
            </div>

            <div class="actions">
                <a href="${manage_groups_url}" class="action action-primary action-settings">${_('Manage content groups')}</a>
            </div>
        </div>
    % elif is_staff_locked:
        <div class="summary-message summary-message-warning visibility-summary-message">
            <span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
            <p class="copy">
                ## Translators: Any text between {screen_reader_start} and {screen_reader_end} is only read by screen readers and never shown in the browser.
                ${Text(_(
                    "{screen_reader_start}Warning:{screen_reader_end} The unit that contains this component is hidden from learners. The unit setting overrides the component visibility settings defined here."
                    )).format(
                        screen_reader_start=HTML('<span class="sr">'),
                        screen_reader_end=HTML('</span>'),
                    )
                }
            </p>
        </div>
    % endif
</div>

% if len(selectable_partitions) > 0:
    <form class="visibility-controls-form" method="post" action="">
        <div role="group" aria-labelledby="visibility-title">
        <div class="modal-section visibility-controls">
            <h3 class="modal-section-title visibility-header" id="visibility-title">
                <span class="current-visibility-title">
                    <span class="icon fa fa-eye" aria-hidden="true"></span>
                    <span>${_('Currently visible to:')}</span>
                </span>
                % if selected_partition_index == -1:
                <span>${_('All Learners and Staff')}</span>
                % else:
                <span>${selected_groups_label}</span>
                % endif
            </h3>
            <div class="modal-section-content partition-visibility">
                <label class="group-select-title">${_('Change visibility to:')}
                    <select>
                        <option value="-1" selected ="selected">
                            % if selected_partition_index == -1:
                                ${_('Choose one')}
                            % else:
                                ${_('All Learners and Staff')}
                            % endif
                        </option>
                        % for index, partition in enumerate(selectable_partitions):
                            <option value="${partition["id"]}" id="visibility-partition-${partition["id"]}" ${'selected="selected"' if selected_partition_index == index else ''}}>
                                ${partition["name"]}
                            </option>
                        % endfor
                    </select>
                </label>

                % for index, partition in enumerate(selectable_partitions):
                <div role="group" aria-labelledby="partition-group-directions-${partition["id"]}" aria-describedby="visibility-partition-${partition["id"]}"
                    class="partition-group-control partition-group-control-${partition["id"]} ${'is-hidden' if selected_partition_index != index else ''}">
                    <div class="partition-group-directions" id="partition-group-directions-${partition["id"]}">${_('Select one or more groups:')}
                        % for group in partition["groups"]:
                        <div class="field partition-group-visibility partition-group-visibility-${partition["id"]} ${'was-removed' if group["deleted"] else ''}">
                            <input type="checkbox"
                                id="visibility-group-${partition["id"]}-${group["id"]}"
                                name="visibility-group"
                                value="${group["id"]}"
                                class="input input-checkbox"
                                ${'checked="checked"' if group["selected"] else ''}
                            />
                            % if group["deleted"]:
                            <label for="visibility-group-${partition["id"]}-${group["id"]}" class="label">
                                ${_("Deleted Group")}
                                <span class="note">${_('This group no longer exists. Choose another group or make this component visible to All Learners and Staff.')}</span>
                            </label>
                            % else:
                            <label for="visibility-group-${partition["id"]}-${group["id"]}" class="label">${group["name"]}</label>
                            % endif
                         </div>
                        % endfor
                    </div>
                </div>
                % endfor
            </div>
        </div>
    </form>
% endif