moodle/lib/templates/paged_content.mustache
Jun Pataleta 63f06e0d96 MDL-69008 core: Fix accessibility issues in paged content templates
* Added menuitem role for the "Show x per page" menu.
* Added appropriate aria-labels for the links in the paging bar.
2020-06-17 15:05:07 +08:00

140 lines
3.8 KiB
Plaintext

{{!
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
This template renders each of the content regions for a paginated
content section.
Example context (json):
{
"pagingbar": {
"showitemsperpageselector": true,
"itemsperpage": [
{ "value": 5, "active": false },
{ "value": 10, "active": true },
{ "value": 15, "active": false }
],
"previous": true,
"next": true,
"first": true,
"last": true,
"barsize": 5,
"pages": [
{
"page": "1",
"active": true
},
{
"url": "#",
"page": "2"
},
{
"url": "#",
"page": "3"
},
{
"url": "#",
"page": "4"
},
{
"url": "#",
"page": "5"
},
{
"url": "#",
"page": "6"
},
{
"url": "#",
"page": "7"
}
]
},
"pages": [
{
"active": true,
"page": 1,
"content": "<p>Some page 1 content</p>"
},
{
"page": 2,
"content": "<p>Some page 2 content</p>"
},
{
"page": 3,
"content": "<p>Some page 3 content</p>"
},
{
"page": 4,
"content": "<p>Some page 4 content</p>"
},
{
"page": 5,
"content": "<p>Some page 5 content</p>"
},
{
"page": 6,
"content": "<p>Some page 6 content</p>"
},
{
"page": 7,
"content": "<p>Some page 7 content</p>"
}
]
}
}}
<div id="paged-content-container-{{uniqid}}" data-region="paged-content-container">
{{^controlplacementbottom}}
<div class="mb-1">
{{#pagingbar}}
{{> core/paged_content_paging_bar }}
{{/pagingbar}}
{{#pagingdropdown}}
{{> core/paged_content_paging_dropdown }}
{{/pagingdropdown}}
</div>
{{/controlplacementbottom}}
{{> core/paged_content_pages }}
{{#controlplacementbottom}}
<div class="mt-1">
{{#pagingbar}}
{{> core/paged_content_paging_bar }}
{{/pagingbar}}
{{#pagingdropdown}}
{{> core/paged_content_paging_dropdown }}
{{/pagingdropdown}}
</div>
{{/controlplacementbottom}}
</div>
{{^skipjs}}
{{#js}}
require(
[
'jquery',
'core/paged_content'
],
function(
$,
PagedContent
) {
var container = $("#paged-content-container-{{uniqid}}");
PagedContent.init(container);
});
{{/js}}
{{/skipjs}}