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         "showitemsperpageselector": true,
  26         "itemsperpage": [
  27             { "value": 5, "active": false },
  28             { "value": 10, "active": true },
  29             { "value": 15, "active": false }
  30         ],
  31         "previous": true,
  32         "next": true,
  33         "first": true,
  34         "last": true,
  35         "activepagenumber": 1,
  36         "pages": [
  37             {
  38                 "url": "#",
  39                 "page": "1",
  40                 "active": true
  41             },
  42             {
  43                 "url": "#",
  44                 "page": "2"
  45             }
  46         ]
  47     }
  48 }}
  49 <div
  50     data-region="paging-control-container"
  51     class="d-flex"
  52 >
  53     {{#showitemsperpageselector}}
  54         <div
  55             id="paging-control-limit-container-{{uniqid}}"
  56             data-region="paging-control-limit-container"
  57             class="d-inline-flex align-items-center"
  58         >
  59             <span class="mr-1">{{#str}} show {{/str}}</span>
  60             <div class="btn-group">
  61                 <button
  62                     type="button"
  63                     class="btn btn-outline-secondary dropdown-toggle"
  64                     data-toggle="dropdown"
  65                     aria-haspopup="true"
  66                     aria-expanded="false"
  67                     data-action="limit-toggle"
  68                     {{#arialabels.itemsperpage}}
  69                         aria-label="{{.}}"
  70                     {{/arialabels.itemsperpage}}
  71                     {{^arialabels.itemsperpage}}
  72                         aria-label="{{#str}} pagedcontentpagingbaritemsperpage, core, {{#itemsperpage}}{{#active}}{{#value}}{{.}}{{/value}}{{^value}}{{#str}} all, core {{/str}}{{/value}}{{/active}}{{/itemsperpage}}{{/str}}"
  73                     {{/arialabels.itemsperpage}}
  74                 >
  75                     {{#itemsperpage}}
  76                         {{#active}}
  77                             {{#value}}{{.}}{{/value}}
  78                             {{^value}}{{#str}} all, core {{/str}}{{/value}}
  79                         {{/active}}
  80                     {{/itemsperpage}}
  81                 </button>
  82                 <div
  83                     role="menu"
  84                     class="dropdown-menu"
  85                     data-show-active-item
  86                     data-skip-active-class="true"
  87                     {{#arialabels.itemsperpagecomponents}}
  88                         data-active-item-button-aria-label-components="{{.}}"
  89                     {{/arialabels.itemsperpagecomponents}}
  90                     {{^arialabels.itemsperpagecomponents}}
  91                         data-active-item-button-aria-label-components="pagedcontentpagingbaritemsperpage, core"
  92                     {{/arialabels.itemsperpagecomponents}}
  93                 >
  94                     {{#itemsperpage}}
  95                         <a
  96                             class="dropdown-item {{#active}}active{{/active}}"
  97                             href="#"
  98                             data-limit="{{value}}"
  99                             role="menuitem"
 100                             {{#active}}aria-current="true"{{/active}}
 101                         >
 102                             {{#value}}{{.}}{{/value}}
 103                             {{^value}}{{#str}} all, core {{/str}}{{/value}}
 104                         </a>
 105                     {{/itemsperpage}}
 106                 </div>
 107             </div>
 108         </div>
 109     {{/showitemsperpageselector}}
 110
 111     <nav
 112         id="{{$pagingbarid}}paging-bar-{{uniqid}}{{/pagingbarid}}"
 113         class="{{#showitemsperpageselector}}ml-auto{{/showitemsperpageselector}}"
 114         data-region="paging-bar"
 115         data-ignore-control-while-loading="{{ignorecontrolwhileloading}}"
 116         data-hide-control-on-single-page="{{hidecontrolonsinglepage}}"
 117         {{#activepagenumber}}
 118             data-active-page-number="{{.}}"
 119         {{/activepagenumber}}
 120         {{^activepagenumber}}
 121             data-active-page-number="1"
 122         {{/activepagenumber}}
 123         {{#itemsperpage}}
 124             {{#active}}
 125                 data-items-per-page="{{value}}"
 126             {{/active}}
 127         {{/itemsperpage}}
 128         {{#arialabels.paginationnav}}
 129             aria-label="{{.}}"
 130         {{/arialabels.paginationnav}}
 131         {{^arialabels.paginationnav}}
 132             aria-label="{{#str}} pagedcontentnavigation, core {{/str}}"
 133         {{/arialabels.paginationnav}}
 134         {{#arialabels.paginationnavitemcomponents}}
 135             data-aria-label-components-pagination-item="{{.}}"
 136         {{/arialabels.paginationnavitemcomponents}}
 137         {{^arialabels.paginationnavitemcomponents}}
 138             data-aria-label-components-pagination-item="pagedcontentnavigationitem, core"
 139         {{/arialabels.paginationnavitemcomponents}}
 140         {{#arialabels.paginationactivenavitemcomponents}}
 141             data-aria-label-components-pagination-active-item="{{.}}"
 142         {{/arialabels.paginationactivenavitemcomponents}}
 143         {{^arialabels.paginationactivenavitemcomponents}}
 144             data-aria-label-components-pagination-active-item="pagedcontentnavigationactiveitem, core"
 145         {{/arialabels.paginationactivenavitemcomponents}}
 146         {{#barsize}}
 147             data-bar-size="{{.}}"
 148         {{/barsize}}
 149     >
 150
 151         <ul class="pagination mb-0">
 152             {{#previous}}
 153                 {{< core/paged_content_paging_bar_item }}
 154                     {{$linkattributes}}aria-label="{{#str}}previouspage{{/str}}"{{/linkattributes}}
 155                     {{$item-content}}
 156                         <span class="icon-no-margin dir-rtl-hide" aria-hidden="true">{{#pix}} i/previous, core {{/pix}}</span>
 157                         <span class="icon-no-margin dir-ltr-hide" aria-hidden="true">{{#pix}} i/next, core {{/pix}}</span>
 158                     {{/item-content}}
 159                     {{$attributes}}data-control="previous"{{/attributes}}
 160                 {{/ core/paged_content_paging_bar_item }}
 161             {{/previous}}
 162             {{#first}}
 163                 {{< core/paged_content_paging_bar_item }}
 164                     {{$linkattributes}}aria-label="{{#str}}firstpage{{/str}}"{{/linkattributes}}
 165                     {{$item-content}}
 166                         {{#str}}first{{/str}}
 167                     {{/item-content}}
 168                     {{$attributes}}data-control="first"{{/attributes}}
 169                 {{/ core/paged_content_paging_bar_item }}
 170             {{/first}}
 171             {{#barsize}}
 172                 {{< core/paged_content_paging_bar_item }}
 173                     {{$linkattributes}}aria-hidden="true"{{/linkattributes}}
 174                     {{$item-content}}
 175                         &hellip;
 176                     {{/item-content}}
 177                     {{$attributes}}data-dots="beginning"{{/attributes}}
 178                 {{/ core/paged_content_paging_bar_item }}
 179             {{/barsize}}
 180             {{#pages}}
 181                 {{< core/paged_content_paging_bar_item }}
 182                     {{$attributes}}data-page="true"{{/attributes}}
 183                 {{/ core/paged_content_paging_bar_item }}
 184             {{/pages}}
 185             {{#barsize}}
 186                 {{< core/paged_content_paging_bar_item }}
 187                     {{$linkattributes}}aria-hidden="true"{{/linkattributes}}
 188                     {{$item-content}}
 189                         &hellip;
 190                     {{/item-content}}
 191                     {{$attributes}}data-dots="ending"{{/attributes}}
 192                 {{/ core/paged_content_paging_bar_item }}
 193             {{/barsize}}
 194             {{#last}}
 195                 {{< core/paged_content_paging_bar_item }}
 196                     {{$linkattributes}}aria-label="{{#str}}lastpage{{/str}}"{{/linkattributes}}
 197                     {{$item-content}}
 198                         {{#str}}last{{/str}}
 199                     {{/item-content}}
 200                     {{$attributes}}data-control="last"{{/attributes}}
 201                 {{/ core/paged_content_paging_bar_item }}
 202             {{/last}}
 203             {{#next}}
 204                 {{< core/paged_content_paging_bar_item }}
 205                     {{$linkattributes}}aria-label="{{#str}}nextpage{{/str}}"{{/linkattributes}}
 206                     {{$item-content}}
 207                         <span class="icon-no-margin dir-rtl-hide" aria-hidden="true">{{#pix}} i/next, core {{/pix}}</span>
 208                         <span class="icon-no-margin dir-ltr-hide" aria-hidden="true">{{#pix}} i/previous, core {{/pix}}</span>
 209                     {{/item-content}}
 210                     {{$attributes}}data-control="next"{{/attributes}}
 211                 {{/ core/paged_content_paging_bar_item }}
 212             {{/next}}
 213         </ul>
 214     </nav>
 215 </div>