MDL-63337 block_myoverview: add improved block myoverview
[moodle.git] / blocks / myoverview / amd / src / view_nav.js
CommitLineData
e4b4b9e7
BB
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
24define(
25[
26 'jquery',
27 'core/custom_interaction_events',
28 'block_myoverview/view'
29],
30function(
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});