807135d83c499d1f58f0378ae5e56ed30836dc23
[moodle.git] / blocks / myoverview / templates / timeline-view-courses.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/timeline-view-courses
20     This template renders the timeline view by courses for the myoverview block.
22     Example context (json):
23     {}
24 }}
25 <div id="sort-by-courses-view-{{uniqid}}">
26     {{#coursesview}}
27         {{#inprogress}}
28             {{#haspages}}
29                 {{#pages}}
30                     <ul class="list-group unstyled hidden" data-region="course-block">
31                         {{#courses}} {{> block_myoverview/course-item }} {{/courses}}
32                     </ul>
33                 {{/pages}}
34                 <div class="text-xs-center text-center m-t-1">
35                     <button type="button" class="btn btn-secondary" data-action="more-courses">
36                         {{#str}} morecourses, block_myoverview {{/str}}
37                         <span class="hidden" data-region="loading-icon-container">
38                             {{> core/loading }}
39                         </span>
40                     </button>
41                 </div>
42             {{/haspages}}
43             {{^haspages}}
44                 <div class="text-xs-center text-center m-t-3">
45                     <img class="empty-placeholder-image-lg"
46                          src="{{urls.noevents}}"
47                          alt="{{#str}} nocoursesinprogress, block_myoverview {{/str}}">
48                     <p class="text-muted m-t-1">{{#str}} nocoursesinprogress, block_myoverview {{/str}}</p>
49                 </div>
50             {{/haspages}}
51         {{/inprogress}}
52         {{^inprogress}}
53             <div class="text-xs-center text-center m-t-3">
54                 <img class="empty-placeholder-image-lg"
55                      src="{{urls.noevents}}"
56                      alt="{{#str}} nocoursesinprogress, block_myoverview {{/str}}">
57                 <p class="text-muted m-t-1">{{#str}} nocoursesinprogress, block_myoverview {{/str}}</p>
58             </div>
59         {{/inprogress}}
60         {{^hascourses}}
61             <div class="text-xs-center text-center m-t-3">
62                 <img class="empty-placeholder-image-lg"
63                      src="{{urls.noevents}}"
64                      alt="{{#str}} nocoursesinprogress, block_myoverview {{/str}}">
65                 <p class="text-muted m-t-1">{{#str}} nocoursesinprogress, block_myoverview {{/str}}</p>
66             </div>
67         {{/hascourses}}
68     {{/coursesview}}
69 </div>
70 {{#js}}
71     require(['jquery', 'core/custom_interaction_events', 'block_myoverview/event_list_by_course'],
72         function($, CustomEvents, EventListByCourse) {
74         var root = $("#sort-by-courses-view-{{uniqid}}");
75         // This flag is used so that we can delay the loading of the events until the tab
76         // is toggled by the user.
77         var seen = false;
79         CustomEvents.define(root, [CustomEvents.events.activate]);
80         // Show more courses and load their events when the user clicks the "more courses"
81         // button.
82         root.on(CustomEvents.events.activate, '[data-action="more-courses"]', function(e) {
83             var button = $(e.target);
84             var blocks = root.find('[data-region="course-block"].hidden');
86             if (blocks && blocks.length) {
87                 var block = blocks.first();
88                 EventListByCourse.init(block);
89                 block.removeClass('hidden');
90             }
92             // If there was only one hidden block then we have no more to show now
93             // so we can disable the button.
94             if (blocks && blocks.length == 1) {
95                 button.prop('disabled', true);
96             }
98             if (data) {
99                 data.originalEvent.preventDefault();
100                 data.originalEvent.stopPropagation();
101             }
102             e.stopPropagation();
103         });
105         // Listen for when the user changes tab so that we can show the first set of courses
106         // and load their events when they request the sort by courses view for the first time.
107         root.closest('[data-region="timeline-view"]').on('shown shown.bs.tab', function(e) {
108             if (seen) {
109                 return;
110             }
112             var tab = $(e.target);
113             var tabTarget = $(tab.attr('href'));
115             if (!tabTarget || !tabTarget.length) {
116                 return;
117             }
119             var viewCourses = tabTarget.find('#sort-by-courses-view-{{uniqid}}');
121             if (viewCourses && viewCourses.length && !seen) {
122                 seen = true;
123                 viewCourses.find('[data-action="more-courses"]').trigger(CustomEvents.events.activate);
124             }
125         });
126     });
127 {{/js}}