moodle/course/format/tiles/templates/multi_section_page.mustache

{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}

{{!
    @template format_tiles/multi_section_page

    Multi section page template.

    The purpose of this template is to render the course landing page
    i.e. all of the tiles representing all of the sections in the course

    Either this or single_section_page will be the first template called
    when the user launches a page from PHP

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Context variables required for this template:
        * from_ajax - is this called from AJAX?
        * completionenabled - is completion enabled?
        * section_zero - info for section_zero template,
        * tiles - info for multi_section_tile and multi_section_tilebar templates
        * all_tiles_expanded - are we expanding all tiles?
        * activity_clipboard - moodle activity clipboard (not tiles),
        * course_activity_clipboard: moodle course activity clipboard (not tiles)

    Example context (json):
    {
        "from_ajax": 1,
        "completionenabled": 1,
        "section_zero": [],
        "tiles": [],
        "all_tiles_expanded": 0,
        "activity_clipboard": "",
        "course_activity_clipboard": ""
    }
}}

{{^from_ajax}}
    {{#completionenabled}}
    {{!
     This value apparently tracks whether there has been a dynamic change to the page.
     I copied it from the standard core page and included it just in case
     The note said it is used so that if a user does this - (a) set some tickmarks, (b)
     go to another page, (c) clicks Back button - the page will
     automatically reload. Otherwise it would start with the wrong tick values.
     }}
        <form action="." method="get">
            <div>
                <input type="hidden" id="completion_dynamic_change" name="completion_dynamic_change" value="0"/>
            </div>
        </form>
    {{/completionenabled}}
    {{> format_tiles/above_tiles}}
{{/from_ajax}}

{{#userdisabledjsnav}}
    <div id="jswarning" class="alert alert-info">
        {{#str}}jsdeactivated, format_tiles{{/str}}
        <a href="{{{config.wwwroot}}}/course/view.php?id={{courseid}}&stopjsnav=1">({{#str}}reactivate, format_tiles{{/str}})</a>
    </div>
{{/userdisabledjsnav}}
{{^userdisabledjsnav}}
    <noscript>
        {{^jsSessionDisabled}}
            <div id="jswarning" class="alert alert-warning">{{#str}}nojswarning, format_tiles{{/str}}
                {{#showJScancelLink}}
                        <a href="{{{config.wwwroot}}}/course/view.php?id={{courseid}}&canceljssession=1">{{#str}}refresh{{/str}}</a>
                {{/showJScancelLink}}
            </div>
        {{/jsSessionDisabled}}
    </noscript>
{{/userdisabledjsnav}}

{{#showinitialpageloadingicon}}
    <a id="page-loading-icon" href="{{config.wwwroot}}/course/view.php?id={{courseid}}&skipcheck=1">
        <div class="text-center mt-5">
        {{> format_tiles/loading}}
            <div class="text-center" style="text-decoration: none;"><small>{{#str}}clickiffailstoload, format_tiles{{/str}}</small></div>
        </div>
    </a>
{{/showinitialpageloadingicon}}

{{#isediting}}
    <div class="expand-collapse-all-btns">
        <a class="btn btn-secondary" data-action="expand-all" title="{{#str}}expandall, format_tiles{{/str}}"
           href="{{{config.wwwroot}}}/course/view.php?id={{courseid}}&expanded=1" id="expand-all-btn">
        {{#pix}}expand, format_tiles{{/pix}}&nbsp;{{#str}}expandall, format_tiles{{/str}}
        </a>
        <a class="btn btn-secondary" data-action="collaspse-all" title="{{#str}}collapsesections, format_tiles{{/str}}"
            href="{{{config.wwwroot}}}/course/view.php?id={{courseid}}&expanded=-1" id="collapse-all-btn">
        {{#pix}}collapse, format_tiles{{/pix}}&nbsp;{{#str}}collapsesections, format_tiles{{/str}}
        </a>
    </div>
{{/isediting}}

<ul class="tiles" id="multi_section_tiles">
    {{#section_zero}}
        {{> format_tiles/section_zero}}
    {{/section_zero}}

    {{#tiles}}
        {{^isediting}}
            {{> format_tiles/multi_section_tile}}
        {{/isediting}}
        {{#isediting}}
            {{> format_tiles/multi_section_tilebar}}
        {{/isediting}}
    {{/tiles}}

    {{^isediting}}
    {{!empty tiles at end to ensure correct flex spacing of last row}}
        <li class="tile spacer" aria-hidden="true"></li>
        <li class="tile spacer" aria-hidden="true"></li>
        <li class="tile spacer" aria-hidden="true"></li>
        <li class="tile spacer" aria-hidden="true"></li>
        <li class="tile spacer" aria-hidden="true"></li>
        <li class="tile spacer" aria-hidden="true"></li>
        <li class="tile spacer" aria-hidden="true" id="lasttile"></li>

        {{!moveable sections for JS to add content to and move around (one relating to each tile)}}
        {{#tiles}}
            <li class="section main moveablesection" style="display: none;" id="section-{{tileid}}"
                data-section="{{tileid}}"></li>
        {{/tiles}}
    {{/isediting}}
</ul>
<span class="pull-right" id="coursecontrolbuttons">
    {{#isediting}}
        <span id="changenumsections" data-toggle="tooltip" title="{{#str}}addsections, format_tiles{{/str}}">
            <a data-add-sections="{{#str}}addsections, format_tiles{{/str}}"
               href="{{{ config.wwwroot }}}/course/changenumsections.php?courseid={{courseid}}&sesskey={{sesskey}}&insertsection=0&sectionreturn=0">
                {{#pix}}t/switch_plus, core, {{#str}}addsections, format_tiles{{/str}}{{/pix}}
            </a>
        </span>
    {{/isediting}}
</span>

{{#isediting}}
    {{^from_ajax}}
        {{activity_clipboard}}
    {{/from_ajax}}
    {{{course_activity_clipboard}}}
{{/isediting}}