blocks/myoverview/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 overview block.
  18  *
  19  * @package    block_myoverview
  20  * @copyright  2018 Bas Brands <bas@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_myoverview/view'
  29 ],
  30 function(
  31     $,
  32     CustomEvents,
  33     View
  34 ) {
  35
  36     var SELECTORS = {
  37         FILTERS: '[data-region="filter"]',
  38         FILTER_OPTION: '[data-filter]',
  39         DISPLAY_OPTION: '[data-display-option]'
  40     };
  41
  42     /**
  43      * Event listener for the Display filter (cards, list).
  44      *
  45      * @param {object} root The root element for the overview block
  46      * @param {object} viewRoot The root element for displaying courses.
  47      * @param {object} viewContent content The content element for the courses view.
  48      */
  49     var registerSelector = function(root, viewRoot, viewContent) {
  50
  51         var Selector = root.find(SELECTORS.FILTERS);
  52
  53         CustomEvents.define(Selector, [CustomEvents.events.activate]);
  54         Selector.on(
  55             CustomEvents.events.activate,
  56             SELECTORS.FILTER_OPTION,
  57             function(e, data) {
  58                 var option = $(e.target);
  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 attributename = 'data-' + option.attr('data-filter');
  66                 viewRoot.attr(attributename, option.attr('data-value'));
  67
  68                 // Reset the views.
  69                 View.init(viewRoot, viewContent);
  70
  71                 data.originalEvent.preventDefault();
  72             }
  73         );
  74
  75         CustomEvents.define(Selector, [CustomEvents.events.activate]);
  76         Selector.on(
  77             CustomEvents.events.activate,
  78             SELECTORS.DISPLAY_OPTION,
  79             function(e, data) {
  80                 var option = $(e.target);
  81
  82                 if (option.hasClass('active')) {
  83                     return;
  84                 }
  85
  86                 viewRoot.attr('data-display', option.attr('data-value'));
  87                 View.reset(viewRoot, viewContent);
  88                 data.originalEvent.preventDefault();
  89             }
  90         );
  91     };
  92
  93     /**
  94      * Initialise the timeline view navigation by adding event listeners to
  95      * the navigation elements.
  96      *
  97      * @param {object} root The root element for the myoverview block
  98      * @param {object} viewRoot The root element for the myoverview block
  99      * @param {object} viewContent The content element for the myoverview block
 100      */
 101     var init = function(root, viewRoot, viewContent) {
 102         root = $(root);
 103         registerSelector(root, viewRoot, viewContent);
 104     };
 105
 106     return {
 107         init: init
 108     };
 109 });