library.html

<%page expression_filter="h"/>
<%inherit file="base.html" />
<%def name="online_help_token()">
    <% return "content_libraries" %>
</%def>
<%!
from cms.djangoapps.contentstore.helpers import xblock_studio_url, xblock_type_display_name
from django.utils.translation import gettext as _
from openedx.core.djangolib.js_utils import dump_js_escaped_json
from openedx.core.djangolib.markup import HTML, Text
%>
<%block name="title">${context_library.display_name_with_default} ${xblock_type_display_name(context_library)}</%block>
<%block name="bodyclass">is-signedin course container view-container view-library</%block>

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

<%block name="header_extras">
% for template_name in templates:
<script type="text/template" id="${template_name}-tpl">
    <%static:include path="js/${template_name}.underscore" />
</script>
% endfor
<script type="text/template" id="image-modal-tpl">
    <%static:include path="common/templates/image-modal.underscore" />
</script>
</%block>

<%block name="page_bundle">
    <%static:webpack entry="js/factories/library">
        LibraryFactory(
            ${component_templates | n, dump_js_escaped_json},
            ${xblock_info | n, dump_js_escaped_json},
            {
                isUnitPage: false,
                page_size: 10,
                canEdit: ${can_edit | n, dump_js_escaped_json},
                showChildrenPreviews: ${context_library.show_children_previews | n, dump_js_escaped_json}
            }
        );
    </%static:webpack>
</%block>

<%block name="content">


<div class="wrapper-mast wrapper">
    <header class="mast has-actions has-navigation has-subtitle">
        <div class="page-header">
            <small class="subtitle">${_("Content Library")}</small>
            <div class="wrapper-xblock-field incontext-editor is-editable"
                 data-field="display_name" data-field-display-name="${_("Display Name")}">
                <h1 class="page-header-title xblock-field-value incontext-editor-value"><span class="title-value">${context_library.display_name_with_default}</span></h1>
            </div>
        </div>

        <nav class="nav-actions" aria-label="${_('Page Actions')}">
            <h3 class="sr">${_("Page Actions")}</h3>
            <ul>
                <li class="nav-item">
                    <a href="#" class="button new-button new-component-button">
                        <span class="icon fa fa-plus icon-inline" aria-hidden="true"></span> <span class="action-button-text">${_("Add Component")}</span>
                    </a>
                </li>
                <li class="action-item action-toggle-preview nav-item">
                    <a href="#" class="button button-toggle-preview action-button toggle-preview-button is-hidden">
                        <span class="icon fa fa-refresh" aria-hidden="true"></span>
                        <span class="action-button-text preview-text"></span>
                    </a>
                </li>
            </ul>
        </nav>
    </header>
</div>

<div class="wrapper-content wrapper">
    <div class="inner-wrapper">
        <div class="content-area">

            <div class="content-primary">
                <div class="container-message wrapper-message"></div>
                <div class="wrapper-xblock level-page is-hidden studio-xblock-wrapper" data-locator="${context_library.location}" data-course-key="${context_library.location.library_key}">
                </div>
                <div class="ui-loading">
                    <p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span><span class="copy">${_("Loading")}</span></p>
                </div>
            </div>
            <div class="content-supplementary" role="complementary">
                % if can_edit:
                <div class="bit">
                    <h3 class="title-3">${_("Adding content to your library")}</h3>
                    <p>${_("Add components to your library for use in courses, using Add New Component at the bottom of this page.")}</p>
                    <p>${_("Components are listed in the order in which they are added, with the most recently added at the bottom. Use the pagination arrows to navigate from page to page if you have more than one page of components in your library.")}</p>
                    <h3 class="title-3">${_("Using library content in courses")}</h3>
                    <p>${Text(_("Use library content in courses by adding the {em_start}library_content{em_end} policy key to the Advanced Module List in the course's Advanced Settings, then adding a Randomized Content Block to your courseware. In the settings for each Randomized Content Block, select this library as the source library, and specify the number of problems to be randomly selected and displayed to each student.")).format(
                            em_start=HTML("<strong>"),
                            em_end=HTML("</strong>")
                        )}</p>
                </div>
                % endif
                <div class="bit external-help">
                    <a href="${get_online_help_info(online_help_token())['doc_url']}" rel="noopener" target="_blank" class="button external-help-button">${_("Learn more about content libraries")}</a>
                </div>
            </div>
        </div>
    </div>
</div>
</%block>