MDL-57447 block_myoverview: create paging bar and content modules
[moodle.git] / blocks / myoverview / templates / courses-view.mustache
1 {{!
2     This file is part of Moodle - http://moodle.org/
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.
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.
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 block_myoverview/courses-view
20     This template renders the courses view for the myoverview block.
22     Example context (json):
23     {}
24 }}
25 <div id="courses-view-{{uniqid}}" data-region="courses-view">
26     <div class="row text-xs-center text-center">
27         <div class="btn-group m-y-2" role="group" data-toggle="btns">
28             <a class="btn btn-default active" href="#myoverview_courses_view_in_progress" data-toggle="tab">
29                 {{#str}} inprogress, block_myoverview {{/str}}
30             </a>
31             <a class="btn btn-default" href="#myoverview_courses_view_future" data-toggle="tab">
32                 {{#str}} future, block_myoverview {{/str}}
33             </a>
34             <a class="btn btn-default" href="#myoverview_courses_view_past" data-toggle="tab">
35                 {{#str}} past, block_myoverview {{/str}}
36             </a>
37         </div>
38     </div>
39     <div class="tab-content">
40         <div class="tab-pane active fade in" id="myoverview_courses_view_in_progress">
41             {{< block_myoverview/courses-view-by-status }}
42                 {{$status}}1{{/status}}
43             {{/ block_myoverview/courses-view-by-status }}
44         </div>
45         <div class="tab-pane fade" id="myoverview_courses_view_future">
46             {{> block_myoverview/courses-view-future }}
47         </div>
48         <div class="tab-pane fade" id="myoverview_courses_view_past">
49             {{> block_myoverview/courses-view-past }}
50         </div>
51     </div>
52 </div>
53 {{#js}}
54 require(['jquery', 'core/custom_interaction_events'], function($, customEvents) {
55     var root = $('#courses-view-{{uniqid}}');
56     customEvents.define(root, [customEvents.events.activate]);
57     root.on(customEvents.events.activate, '[data-toggle="btns"] > .btn', function() {
58         root.find('.btn.active').removeClass('active');
59     });
60 });
61 {{/js}}