blocks/myoverview/templates/timeline-view-courses.mustache

   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 block_myoverview/timeline-view-courses
  19
  20     This template renders the timeline view by courses for the myoverview block.
  21
  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) {
  65
  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;
  70
  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) {
  75             var button = $(e.target);
  76             var blocks = root.find('[data-region="course-block"].hidden');
  77
  78             if (blocks && blocks.length) {
  79                 var block = blocks.first();
  80                 EventListByCourse.init(block);
  81                 block.removeClass('hidden');
  82             }
  83
  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             }
  89
  90             if (data) {
  91                 data.originalEvent.preventDefault();
  92                 data.originalEvent.stopPropagation();
  93             }
  94             e.stopPropagation();
  95         });
  96
  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             }
 103
 104             var tab = $(e.target);
 105             var tabTarget = $(tab.attr('href'));
 106
 107             if (!tabTarget || !tabTarget.length) {
 108                 return;
 109             }
 110
 111             var viewCourses = tabTarget.find('#sort-by-courses-view-{{uniqid}}');
 112
 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}}