edx-platform/cms/templates/studio_xblock_wrapper.html

<%page expression_filter="h"/>
<%!
from django.utils.translation import ugettext as _
from contentstore.views.helpers import xblock_studio_url
from contentstore.utils import is_visible_to_specific_partition_groups
from openedx.core.djangolib.js_utils import (
    dump_js_escaped_json, js_escaped_string
)
%>
<%
xblock_url = xblock_studio_url(xblock)
show_inline = xblock.has_children and not xblock_url
section_class = "level-nesting" if show_inline else "level-element"
collapsible_class = "is-collapsible" if xblock.has_children else ""
label = xblock.display_name_with_default or xblock.scope_ids.block_type
messages = xblock.validate().to_json()
%>

<%namespace name='static' file='static_content.html'/>

<%block name="header_extras">
<script type="text/template" id="xblock-validation-messages-tpl">
    <%static:include path="js/xblock-validation-messages.underscore" />
</script>
</%block>

<script>
    require(["jquery", "js/factories/xblock_validation"], function($, XBlockValidationFactory) {
        XBlockValidationFactory(
            ${messages | n, dump_js_escaped_json},
            ${bool(xblock_url) | n, dump_js_escaped_json},  // xblock_url will be None or a string
            ${bool(is_root) | n, dump_js_escaped_json},  // is_root will be None or a boolean
            $('div.xblock-validation-messages[data-locator="${xblock.location | n, js_escaped_string}"]')
        );
    });
</script>

% if not is_root:
    % if is_reorderable:
    <li class="studio-xblock-wrapper is-draggable" data-locator="${xblock.location}" data-course-key="${xblock.location.course_key}">
    % else:
    <div class="studio-xblock-wrapper" data-locator="${xblock.location}" data-course-key="${xblock.location.course_key}">
    % endif

    <section class="wrapper-xblock ${section_class} ${collapsible_class}
    % if is_visible_to_specific_partition_groups(xblock):
        has-group-visibility-set
    % endif
    ">
% endif

<header class="xblock-header xblock-header-${xblock.category}">
    <div class="xblock-header-primary
    % if not show_preview:
        is-collapsed
    % endif
    ">
        <div class="header-details">
            % if show_inline:
            <a href="#" data-tooltip="${_('Expand or Collapse')}" class="action expand-collapse collapse">
                <span class="icon fa fa-caret-down ui-toggle-expansion" aria-hidden="true"></span>
                <span class="sr">${_('Expand or Collapse')}</span>
            </a>
            % endif
            <div class="xblock-display-title">
                <span class="xblock-display-name">${label}</span>
                % if selected_groups_label:
                <p class="xblock-group-visibility-label">${selected_groups_label}</p>
                % endif
            </div>
        </div>
        <div class="header-actions">
            <ul class="actions-list">
                % if not is_root:
                    % if can_edit:
                        % if not show_inline:
                            <li class="action-item action-edit">
                                <button class="btn-default edit-button action-button">
                                    <span class="icon fa fa-pencil" aria-hidden="true"></span>
                                    <span class="action-button-text">${_("Edit")}</span>
                                </button>
                            </li>
                            % if can_edit_visibility:
                                <li class="action-item action-visibility">
                                    <button data-tooltip="${_("Access Settings")}" class="btn-default visibility-button action-button">
                                        <span class="icon fa fa-gear" aria-hidden="true"></span>
                                        <span class="sr">${_("Set Access")}</span>
                                    </button>
                                </li>
                            % endif
                            % if can_add:
                                <li class="action-item action-duplicate">
                                    <button data-tooltip="${_("Duplicate")}" class="btn-default duplicate-button action-button">
                                    <span class="icon fa fa-copy" aria-hidden="true"></span>
                                    <span class="sr">${_("Duplicate")}</span>
                                    </button>
                                </li>
                            % endif
                            % if can_move:
                                <li class="action-item action-move">
                                    <button data-tooltip="${_("Move")}" class="btn-default move-button action-button">
                                        <span class="stack-move-icon fa-stack fa-lg ">
                                            <span class="fa fa-file-o fa-stack-2x fa-fw" aria-hidden="true"></span>
                                            <span class="fa fa-arrow-right fa-stack-1x fa-fw" aria-hidden="true"></span>
                                        </span>
                                        <span class="sr">${_("Move")}</span>
                                    </button>
                                </li>
                            % endif
                        % endif
                        % if can_add:
                            <!-- If we can add, we can delete. -->
                            <li class="action-item action-delete">
                                <button data-tooltip="${_("Delete")}" class="btn-default delete-button action-button">
                                <span class="icon fa fa-trash-o" aria-hidden="true"></span>
                                <span class="sr">${_("Delete")}</span>
                                </button>
                            </li>
                        % endif
                        % if is_reorderable:
                            <li class="action-item action-drag">
                                <span data-tooltip="${_('Drag to reorder')}" class="drag-handle action"></span>
                            </li>
                        % endif
                    % elif not show_inline:
                        <li class="action-item action-edit action-edit-view-only">
                            <a href="#" class="edit-button action-button">
                                <span class="action-button-text">${_("Details")}</span>
                            </a>
                        </li>
                    % endif
                % endif
            </ul>
        </div>
    </div>
    % if not is_root:
        <div class="wrapper-xblock-message xblock-validation-messages" data-locator="${xblock.location}"/>
        % if xblock_url:
        <div class="xblock-header-secondary">
            <div class="meta-info">${_('This block contains multiple components.')}</div>
            <ul class="actions-list">
                <li class="action-item action-view">
                    <a href="${xblock_url}" class="action-button">
                        ## Translators: this is a verb describing the action of viewing more details
                        <span class="action-button-text">${_('View')}</span>
                        <span class="icon fa fa-arrow-right" aria-hidden="true"></span>
                    </a>
                </li>
            </ul>
        </div>
        % endif
    % endif
 </header>

% if is_root:
    <div class="wrapper-xblock-message xblock-validation-messages" data-locator="${xblock.location}"/>
% endif

% if show_preview:
    % if is_root or not xblock_url:
        % if not is_root and language:
            <article class="xblock-render" lang="${language}">
        % else:
            <article class="xblock-render">
        % endif
        ${content | n, decode.utf8}
        </article>
    % else:
        <div class="xblock-message-area">
        ${content | n, decode.utf8}
        </div>
    % endif
 % endif

% if not is_root:
    <!-- footer for xblock_aside -->
    </section>

    % if is_reorderable:
        </li>
    % else:
        </div>
    % endif
% endif