lib/templates/paged_content_paging_bar.mustache

   1 {{!
   2     This file is part of Moodle - http://moodle.org/
   3
   4     Moodle is free software: you can redistribute it and/or modify
   5     it under the terms of the GNU General Public License as published by
   6     the Free Software Foundation, either version 3 of the License, or
   7     (at your option) any later version.
   8
   9     Moodle is distributed in the hope that it will be useful,
  10     but WITHOUT ANY WARRANTY; without even the implied warranty of
  11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  12     GNU General Public License for more details.
  13
  14     You should have received a copy of the GNU General Public License
  15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  16 }}
  17 {{!
  18     @template core/paged_content_paging_bar
  19
  20     This template renders the bootstrap style paging bar to control a paged
  21     content section.
  22
  23     Example context (json):
  24     {
  25         "itemsperpage": 2,
  26         "previous": true,
  27         "next": true,
  28         "first": true,
  29         "last": true,
  30         "activepagenumber": 1,
  31         "pages": [
  32             {
  33                 "url": "#",
  34                 "page": "1",
  35                 "active": true
  36             },
  37             {
  38                 "url": "#",
  39                 "page": "2"
  40             }
  41         ]
  42     }
  43 }}
  44 <div
  45     data-region="paging-control-container"
  46     class="d-flex"
  47 >
  48     {{#showitemsperpageselector}}
  49         <div
  50             id="paging-control-limit-container-{{uniqid}}"
  51             data-region="paging-control-limit-container"
  52             class="d-inline-flex align-items-center"
  53         >
  54             <span class="mr-1">{{#str}} show {{/str}}</span>
  55             <div class="btn-group">
  56                 <button
  57                     type="button"
  58                     class="btn btn-outline-secondary dropdown-toggle"
  59                     data-toggle="dropdown"
  60                     aria-haspopup="true"
  61                     aria-expanded="false"
  62                     data-action="limit-toggle"
  63                     {{#arialabels.itemsperpage}}
  64                         aria-label="{{.}}"
  65                     {{/arialabels.itemsperpage}}
  66                     {{^arialabels.itemsperpage}}
  67                         aria-label="{{#str}} pagedcontentpagingbaritemsperpage, core, {{#itemsperpage}}{{#active}}{{value}}{{/active}}{{/itemsperpage}}{{/str}}"
  68                     {{/arialabels.itemsperpage}}
  69                 >
  70                     {{#itemsperpage}}
  71                         {{#active}}
  72                             {{value}}
  73                         {{/active}}
  74                     {{/itemsperpage}}
  75                 </button>
  76                 <div
  77                     role="menu"
  78                     class="dropdown-menu"
  79                     data-show-active-item
  80                     {{#arialabels.itemsperpagecomponents}}
  81                         data-active-item-button-aria-label-components="{{.}}"
  82                     {{/arialabels.itemsperpagecomponents}}
  83                     {{^arialabels.itemsperpagecomponents}}
  84                         data-active-item-button-aria-label-components="pagedcontentpagingbaritemsperpage, core"
  85                     {{/arialabels.itemsperpagecomponents}}
  86                 >
  87                     {{#itemsperpage}}
  88                         <a
  89                             class="dropdown-item {{#active}}active{{/active}}"
  90                             href="#"
  91                             data-limit={{value}}
  92                             {{#active}}aria-current="true"{{/active}}
  93                         >
  94                             {{#value}}{{.}}{{/value}}
  95                             {{^value}}{{#str}} all, core {{/str}}{{/value}}
  96                         </a>
  97                     {{/itemsperpage}}
  98                 </div>
  99             </div>
 100         </div>
 101     {{/showitemsperpageselector}}
 102
 103     <nav
 104         role="navigation"
 105         id="{{$pagingbarid}}paging-bar-{{uniqid}}{{/pagingbarid}}"
 106         class="{{#showitemsperpageselector}}ml-auto{{/showitemsperpageselector}}"
 107         data-region="paging-bar"
 108         data-ignore-control-while-loading="{{ignorecontrolwhileloading}}"
 109         data-hide-control-on-single-page="{{hidecontrolonsinglepage}}"
 110         {{#activepagenumber}}
 111             data-active-page-number="{{.}}"
 112         {{/activepagenumber}}
 113         {{^activepagenumber}}
 114             data-active-page-number="1"
 115         {{/activepagenumber}}
 116         {{#showitemsperpageselector}}
 117             {{#itemsperpage}}
 118                 {{#active}}
 119                     data-items-per-page="{{value}}"
 120                 {{/active}}
 121             {{/itemsperpage}}
 122         {{/showitemsperpageselector}}
 123         {{^showitemsperpageselector}}
 124             data-items-per-page="{{itemsperpage}}"
 125         {{/showitemsperpageselector}}
 126         {{#arialabels.paginationnav}}
 127             aria-label="{{.}}"
 128         {{/arialabels.paginationnav}}
 129         {{^arialabels.paginationnav}}
 130             aria-label="{{#str}} pagedcontentnavigation, core {{/str}}"
 131         {{/arialabels.paginationnav}}
 132         {{#arialabels.paginationnavitemcomponents}}
 133             data-aria-label-components-pagination-item="{{.}}"
 134         {{/arialabels.paginationnavitemcomponents}}
 135         {{^arialabels.paginationnavitemcomponents}}
 136             data-aria-label-components-pagination-item="pagedcontentnavigationitem, core"
 137         {{/arialabels.paginationnavitemcomponents}}
 138         {{#arialabels.paginationactivenavitemcomponents}}
 139             data-aria-label-components-pagination-active-item="{{.}}"
 140         {{/arialabels.paginationactivenavitemcomponents}}
 141         {{^arialabels.paginationactivenavitemcomponents}}
 142             data-aria-label-components-pagination-active-item="pagedcontentnavigationactiveitem, core"
 143         {{/arialabels.paginationactivenavitemcomponents}}
 144     >
 145
 146         <ul class="pagination mb-0">
 147             {{#previous}}
 148                 {{< core/paged_content_paging_bar_item }}
 149                     {{$item-content}}
 150                         <span class="icon-no-margin dir-rtl-hide" aria-hidden="true">{{#pix}} i/previous, core {{/pix}}</span>
 151                         <span class="icon-no-margin dir-ltr-hide" aria-hidden="true">{{#pix}} i/next, core {{/pix}}</span>
 152                     {{/item-content}}
 153                     {{$attributes}}data-control="previous"{{/attributes}}
 154                 {{/ core/paged_content_paging_bar_item }}
 155             {{/previous}}
 156             {{#first}}
 157                 {{< core/paged_content_paging_bar_item }}
 158                     {{$item-content}}
 159                         <span aria-hidden="true">{{#str}}first{{/str}}</span>
 160                     {{/item-content}}
 161                     {{$attributes}}data-control="first"{{/attributes}}
 162                 {{/ core/paged_content_paging_bar_item }}
 163             {{/first}}
 164             {{#pages}}
 165                 {{< core/paged_content_paging_bar_item }}
 166                     {{$attributes}}data-page="true"{{/attributes}}
 167                 {{/ core/paged_content_paging_bar_item }}
 168             {{/pages}}
 169             {{#last}}
 170                 {{< core/paged_content_paging_bar_item }}
 171                     {{$item-content}}
 172                         <span aria-hidden="true">{{#str}}last{{/str}}</span>
 173                     {{/item-content}}
 174                     {{$attributes}}data-control="last"{{/attributes}}
 175                 {{/ core/paged_content_paging_bar_item }}
 176             {{/last}}
 177             {{#next}}
 178                 {{< core/paged_content_paging_bar_item }}
 179                     {{$item-content}}
 180                         <span class="icon-no-margin dir-rtl-hide" aria-hidden="true">{{#pix}} i/next, core {{/pix}}</span>
 181                         <span class="icon-no-margin dir-ltr-hide" aria-hidden="true">{{#pix}} i/previous, core {{/pix}}</span>
 182                     {{/item-content}}
 183                     {{$attributes}}data-control="next"{{/attributes}}
 184                 {{/ core/paged_content_paging_bar_item }}
 185             {{/next}}
 186         </ul>
 187     </nav>
 188 </div>