131c3865f5a5973026fef0d790bfabfd3f986e13
[moodle.git] / 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/>.
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  */
24 define(
25 [
26     'jquery',
27     'core/custom_interaction_events',
28     'block_myoverview/view'
29 ],
30 function(
31     $,
32     CustomEvents,
33     View
34 ) {
36     var SELECTORS = {
37         FILTERS: '[data-region="filter"]',
38         FILTER_OPTION: '[data-filter]',
39         DISPLAY_OPTION: '[data-display-option]'
40     };
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) {
51         var Selector = root.find(SELECTORS.FILTERS);
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);
60                 if (option.hasClass('active')) {
61                     // If it's already active then we don't need to do anything.
62                     return;
63                 }
65                 var attributename = 'data-' + option.attr('data-filter');
66                 viewRoot.attr(attributename, option.attr('data-value'));
68                 // Reset the views.
69                 View.init(viewRoot, viewContent);
71                 data.originalEvent.preventDefault();
72             }
73         );
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);
82                 if (option.hasClass('active')) {
83                     return;
84                 }
86                 viewRoot.attr('data-display', option.attr('data-value'));
87                 View.reset(viewRoot, viewContent);
88                 data.originalEvent.preventDefault();
89             }
90         );
91     };
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     };
106     return {
107         init: init
108     };
109 });