Merge branch 'MDL-58464-int-fix-2' of git://github.com/ryanwyllie/moodle
[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     {{/coursesview}}
61 </div>
62 {{#js}}
63     require(['jquery', 'core/custom_interaction_events', 'block_myoverview/event_list_by_course'],
64         function($, CustomEvents, EventListByCourse) {
66         var root = $("#sort-by-courses-view-{{uniqid}}");
67         // This flag is used so that we can delay the loading of the events until the tab
68         // is toggled by the user.
69         var seen = false;
71         CustomEvents.define(root, [CustomEvents.events.activate]);
72         // Show more courses and load their events when the user clicks the "more courses"
73         // button.
74         root.on(CustomEvents.events.activate, '[data-action="more-courses"]', function(e, data) {
75             var button = $(e.target);
76             var blocks = root.find('[data-region="course-block"].hidden');
78             if (blocks && blocks.length) {
79                 var block = blocks.first();
80                 EventListByCourse.init(block);
81                 block.removeClass('hidden');
82             }
84             // If there was only one hidden block then we have no more to show now
85             // so we can disable the button.
86             if (blocks && blocks.length == 1) {
87                 button.prop('disabled', true);
88             }
90             if (data) {
91                 data.originalEvent.preventDefault();
92                 data.originalEvent.stopPropagation();
93             }
94             e.stopPropagation();
95         });
97         // Listen for when the user changes tab so that we can show the first set of courses
98         // and load their events when they request the sort by courses view for the first time.
99         root.closest('[data-region="timeline-view"]').on('shown shown.bs.tab', function(e) {
100             if (seen) {
101                 return;
102             }
104             var tab = $(e.target);
105             var tabTarget = $(tab.attr('href'));
107             if (!tabTarget || !tabTarget.length) {
108                 return;
109             }
111             var viewCourses = tabTarget.find('#sort-by-courses-view-{{uniqid}}');
113             if (viewCourses && viewCourses.length && !seen) {
114                 seen = true;
115                 viewCourses.find('[data-action="more-courses"]').trigger(CustomEvents.events.activate);
116             }
117         });
118     });
119 {{/js}}