container.html

<%inherit file="base.html" />
<%def name="online_help_token()">
<%
if is_unit_page:
    return "unit"
else:
    return "container"
%>
</%def>
<%!
import json

from contentstore.views.helpers import xblock_studio_url, xblock_type_display_name
from django.utils.translation import ugettext as _
%>
<%block name="title">${xblock.display_name_with_default} ${xblock_type_display_name(xblock)}</%block>
<%block name="bodyclass">is-signedin course container view-container</%block>

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

<%!
templates = ["basic-modal", "modal-button", "edit-xblock-modal",
    "editor-mode-button", "upload-dialog", "image-modal",
    "add-xblock-component", "add-xblock-component-button", "add-xblock-component-menu",
    "add-xblock-component-menu-problem", "xblock-string-field-editor", "publish-xblock", "publish-history",
    "unit-outline", "container-message"]
%>
<%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
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
</%block>

<%block name="jsextra">
<script type='text/javascript'>
    require(["domReady!", "jquery", "js/models/xblock_info", "js/views/pages/container",
        "js/collections/component_template", "xmodule", "coffee/src/main", "xblock/cms.runtime.v1"],
            function(doc, $, XBlockInfo, ContainerPage, ComponentTemplates, xmoduleLoader) {
                var templates = new ComponentTemplates(${component_templates | n}, {parse: true});
                var mainXBlockInfo = new XBlockInfo(${json.dumps(xblock_info) | n}, {parse: true});
                var isUnitPage = ${json.dumps(is_unit_page)}

                xmoduleLoader.done(function () {
                    var view = new ContainerPage({
                        el: $('#content'),
                        model: mainXBlockInfo,
                        action: "${action}",
                        templates: templates,
                        isUnitPage: isUnitPage
                    });
                    view.render();
                });
            });
</script>

</%block>

<%block name="content">


<div class="wrapper-mast wrapper">
    <header class="mast has-actions has-navigation has-subtitle">
        <div class="page-header">
            <small class="navigation navigation-parents subtitle">
                % for ancestor in ancestor_xblocks:
                    <%
                    ancestor_url = xblock_studio_url(ancestor)
                    %>
                    % if ancestor_url:
                        <a href="${ancestor_url}" class="navigation-item navigation-link navigation-parent">${ancestor.display_name_with_default | h}</a>
                    % else:
                        <span class="navigation-item navigation-parent">${ancestor.display_name_with_default | h}</span>
                    % endif
                % endfor
            </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">${xblock.display_name_with_default | h}</span></h1>
            </div>
        </div>

        <nav class="nav-actions">
            <h3 class="sr">${_("Page Actions")}</h3>
            <ul>
                % if is_unit_page:
                    <li class="action-item action-view nav-item">
                        <a href="${published_preview_link}" class="button button-view action-button is-disabled" rel="external">
                            <span class="action-button-text">${_("View Live Version")}</span>
                        </a>
                    </li>
                    <li class="action-item action-preview nav-item">
                        <a href="${draft_preview_link}" class="button button-preview action-button is-disabled" rel="external">
                            <span class="action-button-text">${_("Preview Changes")}</span>
                        </a>
                    </li>
                % else:
                    <li class="action-item action-edit nav-item">
                        <a href="#" class="button button-edit action-button edit-button">
                            <i class="icon-pencil"></i>
                            <span class="action-button-text">${_("Edit")}</span>
                        </a>
                    </li>
                % endif
            </ul>
        </nav>
    </header>
</div>

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

            <article class="content-primary">
                <div class="container-message wrapper-message"></div>
                <section class="wrapper-xblock level-page is-hidden studio-xblock-wrapper" data-locator="${xblock_locator}" data-course-key="${xblock_locator.course_key}">
                </section>
                <div class="ui-loading">
                    <p><span class="spin"><i class="icon-refresh"></i></span> <span class="copy">${_("Loading...")}</span></p>
                </div>
            </article>
            <aside class="content-supplementary" role="complimentary">
                % if not is_unit_page:
                    <div class="bit">
                        <h3 class="title-3">${_("Adding components")}</h3>
                        <p>${_("Select a component type under {em_start}Add New Component{em_end}. Then select a template.").format(em_start='<strong>', em_end="</strong>")}</p>
                        <p>${_("The new component is added at the bottom of the page or group. You can then edit and move the component.")}</p>
                        <h3 class="title-3">${_("Editing components")}</h3>
                        <p>${_("Click the {em_start}Edit{em_end} icon in a component to edit its content.").format(em_start='<strong>', em_end="</strong>")}</p>
                        <h3 class="title-3">${_("Reorganizing components")}</h3>
                        <p>${_("Drag components to new locations within this component.")}</p>
                        <p>${_("For content experiments, you can drag components to other groups.")}</p>
                        <h3 class="title-3">${_("Working with content experiments")}</h3>
                        <p>${_("Confirm that you have properly configured content in each of your experiment groups.")}</p>
                    </div>
                    <div class="bit external-help">
                        <a href="${get_online_help_info(online_help_token())['doc_url']}" target="_blank" class="button external-help-button">${_("Learn more about component containers")}</a>
                    </div>
                % endif
                % if is_unit_page:
                    <div id="publish-unit"></div>
                    <div id="publish-history" class="unit-publish-history"></div>
                    <div class="unit-location is-hidden">
                        <h4 class="bar-mod-title">${_("Unit Location")}</h4>
                        <div class="wrapper-unit-id bar-mod-content">
                            <h5 class="title">${_("Location ID")}</h5>
                            <p class="unit-id">
                                <span class="unit-id-value" id="unit-location-id-input">${unit.location.name}</span>
                                <span class="tip"><span class="sr">Tip: </span>${_("Use this ID when you create links to this unit from other course content. You enter the ID in the URL field.")}</span>
                            </p>
                        </div>
                        <div class="wrapper-unit-tree-location bar-mod-content">
                            <h5 class="title">${_("Location in Course Outline")}</h5>
                            <div class="wrapper-unit-overview outline outline-simple">
                            </div>
                        </div>
                    </div>
                % endif
            </aside>
        </section>
    </div>
</div>
</%block>