MDL-63817 block_timeline: Persist page limits when sorting by dates
[moodle.git] / blocks / timeline / amd / src / view_dates.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 dates view 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  */
24 define(
25 [
26     'jquery',
27     'core/str',
28     'block_timeline/event_list',
29     'core/pubsub',
30     'core/paged_content_events'
31 ],
32 function(
33     $,
34     Str,
35     EventList,
36     PubSub,
37     PagedContentEvents
38 ) {
40     var SELECTORS = {
41         EVENT_LIST_CONTAINER: '[data-region="event-list-container"]',
42     };
44     var DEFAULT_PAGE_LIMIT = [5, 10, 25];
46     /**
47      * Generate a paged content array of limits taking into account user preferences
48      *
49      * @param {object} root The root element for the timeline dates view.
50      * @return {array} Array of limit objects
51      */
52     var getPagingLimits = function(root) {
53         var limitPref = parseInt(root.data('limit'), 10);
54         var isDefaultSet = false;
55         var limits = DEFAULT_PAGE_LIMIT.map(function(value) {
56             if (limitPref == value) {
57                 isDefaultSet = true;
58             }
60             return {
61                 value: value,
62                 active: limitPref == value
63             };
64         });
66         if (!isDefaultSet) {
67             limits[0].active = true;
68         }
70         return limits;
71     };
73     /**
74      * Setup the listeners for the timeline block
75      *
76      * @param {string} root view dates container
77      * @param {string} namespace The namespace for the paged content
78      */
79     var registerEventListeners = function(root, namespace) {
80         var event = namespace + PagedContentEvents.SET_ITEMS_PER_PAGE_LIMIT;
81         PubSub.subscribe(event, function(limit) {
82             $(root).data('limit', limit);
83         });
84     };
86     /**
87      * Initialise the event list and being loading the events.
88      *
89      * @param {object} root The root element for the timeline dates view.
90      */
91     var load = function(root) {
92         var eventListContainer = root.find(SELECTORS.EVENT_LIST_CONTAINER);
93         var namespace = $(eventListContainer).attr('id') + "user_block_timeline" + Math.random();
94         registerEventListeners(root, namespace);
96         var limits = getPagingLimits(root);
97         var config = {
98             persistentLimitKey: "block_timeline_user_limit_preference",
99             eventNamespace: namespace
100         };
101         Str.get_string('ariaeventlistpaginationnavdates', 'block_timeline')
102             .then(function(string) {
103                 EventList.init(eventListContainer, limits, {}, string, config);
104                 return string;
105             })
106             .catch(function() {
107                 // Ignore if we can't load the string. Still init the event list.
108                 EventList.init(eventListContainer, limits, {}, "", config);
109             });
110     };
112     /**
113      * Initialise the timeline dates view. Begin loading the events
114      * if this view is active.
115      *
116      * @param {object} root The root element for the timeline courses view.
117      */
118     var init = function(root) {
119         root = $(root);
120         if (root.hasClass('active')) {
121             load(root);
122             root.data('seen', true);
123         }
124     };
126     /**
127      * Reset the view back to it's initial state. If this view is active then
128      * beging loading the events.
129      *
130      * @param {object} root The root element for the timeline courses view.
131      */
132     var reset = function(root) {
133         root.removeAttr('data-seen');
134         if (root.hasClass('active')) {
135             load(root);
136             root.data('seen', true);
137         }
138     };
140     /**
141      * Load the events if this is the first time the view is displayed.
142      *
143      * @param {object} root The root element for the timeline courses view.
144      */
145     var shown = function(root) {
146         if (!root.data('seen')) {
147             load(root);
148             root.data('seen', true);
149         }
150     };
152     return {
153         init: init,
154         reset: reset,
155         shown: shown
156     };
157 });