MDL-62142 navigation: accessibility
[moodle.git] / theme / boost / templates / flat_navigation.mustache
CommitLineData
7a9309f3
DW
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 theme_boost/flat_navigation
19
20 Display the flat navigation for the boost theme
21
22 Classes required for JS:
23 * none
24
25 Data attributes required for JS:
26 * none
27
28 Context variables required for this template:
29 * flatnavigation - array of flat_navigation_nodes
30 * showdivider - boolean
31 * action - string
32 * isactive - boolean
33 * get_indent - integer
34 * is_section - boolean
35 * text - HTML
36
37 Example context (json):
38 {
39 "flatnavigation" : [
40 {
41 "showdivider": false,
42 "action": "#",
43 "isactive": true,
44 "get_indent": 1,
45 "is_section": false,
46 "text": "First"
47 },{
48 "showdivider": true,
49 "action": "#",
50 "isactive": false,
51 "get_indent": 0,
52 "is_section": true,
53 "text": "Last &amp; Second"
54 }
55 ]
56 }
57}}
9df03b19 58<nav class="list-group" aria-label="{{firstcollectionlabel}}">
99061152 59{{# flatnavigation }}
598b3f09
DW
60 {{#showdivider}}
61</nav>
9df03b19 62<nav class="list-group m-t-1" aria-label="{{get_collectionlabel}}">
598b3f09 63 {{/showdivider}}
99061152 64 {{#action}}
3ec69c2e 65 <a class="list-group-item list-group-item-action {{#isactive}}active{{/isactive}}" href="{{{action}}}" data-key="{{key}}" data-isexpandable="{{isexpandable}}" data-indent="{{get_indent}}" data-showdivider="{{showdivider}}" data-type="{{type}}" data-nodetype="{{nodetype}}" data-collapse="{{collapse}}" data-forceopen="{{forceopen}}" data-isactive="{{isactive}}" data-hidden="{{hidden}}" data-preceedwithhr="{{preceedwithhr}}" {{#parent.key}}data-parent-key="{{.}}"{{/parent.key}}>
cee482ca 66 <div class="m-l-{{get_indent}}">
ea91e4f9 67 <div class="media">
64448e1e 68 {{#icon.pix}}
ea91e4f9 69 <span class="media-left">
64448e1e 70 {{#pix}}{{{icon.pix}}}, {{{icon.component}}}, {{{icon.alt}}}{{/pix}}
ea91e4f9 71 </span>
64448e1e
KO
72 {{/icon.pix}}
73 <span class="media-body {{#isactive}}font-weight-bold{{/isactive}}">{{{text}}}</span>
ea91e4f9 74 </div>
cee482ca 75 </div>
7a9309f3 76 </a>
99061152
DW
77 {{/action}}
78 {{^action}}
d7d2a72f 79 <div class="list-group-item" data-key="{{key}}" data-isexpandable="{{isexpandable}}" data-indent="{{get_indent}}" data-showdivider="{{showdivider}}" data-type="{{type}}" data-nodetype="{{nodetype}}" data-collapse="{{collapse}}" data-forceopen="{{forceopen}}" data-isactive="{{isactive}}" data-hidden="{{hidden}}" data-preceedwithhr="{{preceedwithhr}}" {{#parent.key}}data-parent-key="{{.}}"{{/parent.key}}>
cee482ca 80 <div class="m-l-{{get_indent}}">
ea91e4f9 81 <div class="media">
64448e1e 82 {{#icon.pix}}
ea91e4f9 83 <span class="media-left">
64448e1e 84 {{#pix}}{{{icon.pix}}}, {{{icon.component}}}, {{{icon.alt}}}{{/pix}}
ea91e4f9 85 </span>
64448e1e 86 {{/icon.pix}}
ea91e4f9
KO
87 <span class="media-body">{{{text}}}</span>
88 </div>
cee482ca 89 </div>
99061152 90 </div>
7a9309f3 91 {{/action}}
99061152 92{{/ flatnavigation }}
598b3f09 93</nav>