moodle/lib/templates/paged_content_paging_bar.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 core/paged_content_paging_bar

    This template renders the bootstrap style paging bar to control a paged
    content section.

    Example context (json):
    {
        "itemsperpage": 2,
        "previous": true,
        "next": true,
        "first": true,
        "last": true,
        "activepagenumber": 1,
        "pages": [
            {
                "url": "#",
                "page": "1",
                "active": true
            },
            {
                "url": "#",
                "page": "2"
            }
        ]
    }
}}
<div
    data-region="paging-control-container"
    class="d-flex"
>
    {{#showitemsperpageselector}}
        <div
            id="paging-control-limit-container-{{uniqid}}"
            data-region="paging-control-limit-container"
            class="d-inline-flex align-items-center"
        >
            <span class="mr-1">{{#str}} show {{/str}}</span>
            <div class="btn-group">
                <button
                    type="button"
                    class="btn btn-outline-secondary dropdown-toggle"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                    data-action="limit-toggle"
                    {{#arialabels.itemsperpage}}
                        aria-label="{{.}}"
                    {{/arialabels.itemsperpage}}
                    {{^arialabels.itemsperpage}}
                        aria-label="{{#str}} pagedcontentpagingbaritemsperpage, core, {{#itemsperpage}}{{#active}}{{value}}{{/active}}{{/itemsperpage}}{{/str}}"
                    {{/arialabels.itemsperpage}}
                >
                    {{#itemsperpage}}
                        {{#active}}
                            {{value}}
                        {{/active}}
                    {{/itemsperpage}}
                </button>
                <div
                    role="menu"
                    class="dropdown-menu"
                    data-show-active-item
                    {{#arialabels.itemsperpagecomponents}}
                        data-active-item-button-aria-label-components="{{.}}"
                    {{/arialabels.itemsperpagecomponents}}
                    {{^arialabels.itemsperpagecomponents}}
                        data-active-item-button-aria-label-components="pagedcontentpagingbaritemsperpage, core"
                    {{/arialabels.itemsperpagecomponents}}
                >
                    {{#itemsperpage}}
                        <a
                            class="dropdown-item {{#active}}active{{/active}}"
                            href="#"
                            data-limit={{value}}
                            {{#active}}aria-current="true"{{/active}}
                        >
                            {{#value}}{{.}}{{/value}}
                            {{^value}}{{#str}} all, core {{/str}}{{/value}}
                        </a>
                    {{/itemsperpage}}
                </div>
            </div>
        </div>
    {{/showitemsperpageselector}}

    <nav
        role="navigation"
        id="{{$pagingbarid}}paging-bar-{{uniqid}}{{/pagingbarid}}"
        class="{{#showitemsperpageselector}}ml-auto{{/showitemsperpageselector}}"
        data-region="paging-bar"
        data-ignore-control-while-loading="{{ignorecontrolwhileloading}}"
        data-hide-control-on-single-page="{{hidecontrolonsinglepage}}"
        {{#activepagenumber}}
            data-active-page-number="{{.}}"
        {{/activepagenumber}}
        {{^activepagenumber}}
            data-active-page-number="1"
        {{/activepagenumber}}
        {{#showitemsperpageselector}}
            {{#itemsperpage}}
                {{#active}}
                    data-items-per-page="{{value}}"
                {{/active}}
            {{/itemsperpage}}
        {{/showitemsperpageselector}}
        {{^showitemsperpageselector}}
            data-items-per-page="{{itemsperpage}}"
        {{/showitemsperpageselector}}
        {{#arialabels.paginationnav}}
            aria-label="{{.}}"
        {{/arialabels.paginationnav}}
        {{^arialabels.paginationnav}}
            aria-label="{{#str}} pagedcontentnavigation, core {{/str}}"
        {{/arialabels.paginationnav}}
        {{#arialabels.paginationnavitemcomponents}}
            data-aria-label-components-pagination-item="{{.}}"
        {{/arialabels.paginationnavitemcomponents}}
        {{^arialabels.paginationnavitemcomponents}}
            data-aria-label-components-pagination-item="pagedcontentnavigationitem, core"
        {{/arialabels.paginationnavitemcomponents}}
        {{#arialabels.paginationactivenavitemcomponents}}
            data-aria-label-components-pagination-active-item="{{.}}"
        {{/arialabels.paginationactivenavitemcomponents}}
        {{^arialabels.paginationactivenavitemcomponents}}
            data-aria-label-components-pagination-active-item="pagedcontentnavigationactiveitem, core"
        {{/arialabels.paginationactivenavitemcomponents}}
    >

        <ul class="pagination mb-0">
            {{#previous}}
                {{< core/paged_content_paging_bar_item }}
                    {{$item-content}}
                        <span class="icon-no-margin dir-rtl-hide" aria-hidden="true">{{#pix}} i/previous, core {{/pix}}</span>
                        <span class="icon-no-margin dir-ltr-hide" aria-hidden="true">{{#pix}} i/next, core {{/pix}}</span>
                    {{/item-content}}
                    {{$attributes}}data-control="previous"{{/attributes}}
                {{/ core/paged_content_paging_bar_item }}
            {{/previous}}
            {{#first}}
                {{< core/paged_content_paging_bar_item }}
                    {{$item-content}}
                        <span aria-hidden="true">{{#str}}first{{/str}}</span>
                    {{/item-content}}
                    {{$attributes}}data-control="first"{{/attributes}}
                {{/ core/paged_content_paging_bar_item }}
            {{/first}}
            {{#pages}}
                {{< core/paged_content_paging_bar_item }}
                    {{$attributes}}data-page="true"{{/attributes}}
                {{/ core/paged_content_paging_bar_item }}
            {{/pages}}
            {{#last}}
                {{< core/paged_content_paging_bar_item }}
                    {{$item-content}}
                        <span aria-hidden="true">{{#str}}last{{/str}}</span>
                    {{/item-content}}
                    {{$attributes}}data-control="last"{{/attributes}}
                {{/ core/paged_content_paging_bar_item }}
            {{/last}}
            {{#next}}
                {{< core/paged_content_paging_bar_item }}
                    {{$item-content}}
                        <span class="icon-no-margin dir-rtl-hide" aria-hidden="true">{{#pix}} i/next, core {{/pix}}</span>
                        <span class="icon-no-margin dir-ltr-hide" aria-hidden="true">{{#pix}} i/previous, core {{/pix}}</span>
                    {{/item-content}}
                    {{$attributes}}data-control="next"{{/attributes}}
                {{/ core/paged_content_paging_bar_item }}
            {{/next}}
        </ul>
    </nav>
</div>