blocks/timeline/amd/src/view_nav.js

   1 // This file is part of Moodle - http://moodle.org/
   2 //
   3 // Moodle is free software: you can redistribute it and/or modify
   4 // it under the terms of the GNU General Public License as published by
   5 // the Free Software Foundation, either version 3 of the License, or
   6 // (at your option) any later version.
   7 //
   8 // Moodle is distributed in the hope that it will be useful,
   9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11 // GNU General Public License for more details.
  12 //
  13 // You should have received a copy of the GNU General Public License
  14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  15
  16 /**
  17  * Manage the timeline view navigation for the timeline block.
  18  *
  19  * @package    block_timeline
  20  * @copyright  2018 Ryan Wyllie <ryan@moodle.com>
  21  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22  */
  23
  24 define(
  25 [
  26     'jquery',
  27     'core/custom_interaction_events',
  28     'block_timeline/view'
  29 ],
  30 function(
  31     $,
  32     CustomEvents,
  33     View
  34 ) {
  35
  36     var SELECTORS = {
  37         TIMELINE_DAY_FILTER: '[data-region="day-filter"]',
  38         TIMELINE_DAY_FILTER_OPTION: '[data-from]',
  39         TIMELINE_VIEW_SELECTOR: '[data-region="view-selector"]',
  40         DATA_DAYS_OFFSET: '[data-days-offset]',
  41         DATA_DAYS_LIMIT: '[data-days-limit]',
  42     };
  43
  44     /**
  45      * Event listener for the day selector ("Next 7 days", "Next 30 days", etc).
  46      *
  47      * @param {object} root The root element for the timeline block
  48      * @param {object} timelineViewRoot The root element for the timeline view
  49      */
  50     var registerTimelineDaySelector = function(root, timelineViewRoot) {
  51         var timelineDaySelectorContainer = root.find(SELECTORS.TIMELINE_DAY_FILTER);
  52
  53         CustomEvents.define(timelineDaySelectorContainer, [CustomEvents.events.activate]);
  54         timelineDaySelectorContainer.on(
  55             CustomEvents.events.activate,
  56             SELECTORS.TIMELINE_DAY_FILTER_OPTION,
  57             function(e, data) {
  58                 var option = $(e.target).closest(SELECTORS.TIMELINE_DAY_FILTER_OPTION);
  59
  60                 if (option.hasClass('active')) {
  61                     // If it's already active then we don't need to do anything.
  62                     return;
  63                 }
  64
  65                 var daysOffset = option.attr('data-from');
  66                 var daysLimit = option.attr('data-to');
  67                 var elementsWithDaysOffset = root.find(SELECTORS.DATA_DAYS_OFFSET);
  68
  69                 elementsWithDaysOffset.attr('data-days-offset', daysOffset);
  70
  71                 if (daysLimit != undefined) {
  72                     elementsWithDaysOffset.attr('data-days-limit', daysLimit);
  73                 } else {
  74                     elementsWithDaysOffset.removeAttr('data-days-limit');
  75                 }
  76
  77                 // Reset the views to reinitialise the event lists now that we've
  78                 // updated the day limits.
  79                 View.reset(timelineViewRoot);
  80
  81                 data.originalEvent.preventDefault();
  82             }
  83         );
  84     };
  85
  86     /**
  87      * Event listener for the "sort" button in the timeline navigation that allows for
  88      * changing between the timeline dates and courses views.
  89      *
  90      * On a view change we tell the timeline view module that the view has been shown
  91      * so that it can handle how to display the appropriate view.
  92      *
  93      * @param {object} root The root element for the timeline block
  94      * @param {object} timelineViewRoot The root element for the timeline view
  95      */
  96     var registerViewSelector = function(root, timelineViewRoot) {
  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.find(SELECTORS.TIMELINE_VIEW_SELECTOR).on('shown shown.bs.tab', function() {
 100             View.shown(timelineViewRoot);
 101         });
 102     };
 103
 104     /**
 105      * Initialise the timeline view navigation by adding event listeners to
 106      * the navigation elements.
 107      *
 108      * @param {object} root The root element for the timeline block
 109      * @param {object} timelineViewRoot The root element for the timeline view
 110      */
 111     var init = function(root, timelineViewRoot) {
 112         root = $(root);
 113         registerTimelineDaySelector(root, timelineViewRoot);
 114         registerViewSelector(root, timelineViewRoot);
 115     };
 116
 117     return {
 118         init: init
 119     };
 120 });