MDL-62449 scorm: Move related data to data in the privacy export
[moodle.git] / theme / boost / amd / src / drawer.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  * Contain the logic for a drawer.
18  *
19  * @package    theme_boost
20  * @copyright  2016 Damyon Wiese
21  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22  */
23 define(['jquery', 'core/custom_interaction_events', 'core/log'],
24      function($, CustomEvents, Log) {
26     var SELECTORS = {
27         TOGGLE_REGION: '[data-region="drawer-toggle"]',
28         TOGGLE_ACTION: '[data-action="toggle-drawer"]',
29         TOGGLE_TARGET: 'aria-controls',
30         TOGGLE_SIDE: 'left',
31         BODY: 'body',
32         SECTION: '.list-group-item[href*="#section-"]'
33     };
35     /**
36      * Constructor for the Drawer.
37      *
38      * @param {object} root The root jQuery element for the modal
39      */
40     var Drawer = function() {
42         if (!$(SELECTORS.TOGGLE_REGION).length) {
43             Log.debug('Page is missing a drawer region');
44         }
45         if (!$(SELECTORS.TOGGLE_ACTION).length) {
46             Log.debug('Page is missing a drawer toggle link');
47         }
48         $(SELECTORS.TOGGLE_REGION).each(function(index, ele) {
49             var trigger = $(ele).find(SELECTORS.TOGGLE_ACTION);
50             var drawerid = trigger.attr('aria-controls');
51             var drawer = $(document.getElementById(drawerid));
52             var hidden = trigger.attr('aria-expanded') == 'false';
53             var side = trigger.attr('data-side');
54             var body = $(SELECTORS.BODY);
56             drawer.on('mousewheel DOMMouseScroll', this.preventPageScroll);
58             if (!hidden) {
59                 body.addClass('drawer-open-' + side);
60                 trigger.attr('aria-expanded', 'true');
61             } else {
62                 trigger.attr('aria-expanded', 'false');
63             }
64         }.bind(this));
66         this.registerEventListeners();
67         var small = $(document).width() < 768;
68         if (small) {
69             this.closeAll();
70         }
71     };
73     Drawer.prototype.closeAll = function() {
74         $(SELECTORS.TOGGLE_REGION).each(function(index, ele) {
75             var trigger = $(ele).find(SELECTORS.TOGGLE_ACTION);
76             var side = trigger.attr('data-side');
77             var body = $(SELECTORS.BODY);
78             var drawerid = trigger.attr('aria-controls');
79             var drawer = $(document.getElementById(drawerid));
80             var preference = trigger.attr('data-preference');
82             trigger.attr('aria-expanded', 'false');
83             body.removeClass('drawer-open-' + side);
84             drawer.attr('aria-hidden', 'true');
85             drawer.addClass('closed');
86             M.util.set_user_preference(preference, 'false');
87         });
88     };
90     /**
91      * Open / close the blocks drawer.
92      *
93      * @method toggleDrawer
94      * @param {Event} e
95      */
96     Drawer.prototype.toggleDrawer = function(e) {
97         var trigger = $(e.target).closest('[data-action=toggle-drawer]');
98         var drawerid = trigger.attr('aria-controls');
99         var drawer = $(document.getElementById(drawerid));
100         var body = $(SELECTORS.BODY);
101         var side = trigger.attr('data-side');
102         var preference = trigger.attr('data-preference');
104         body.addClass('drawer-ease');
105         var open = trigger.attr('aria-expanded') == 'true';
106         if (!open) {
107             // Open.
108             trigger.attr('aria-expanded', 'true');
109             drawer.attr('aria-hidden', 'false');
110             drawer.focus();
111             body.addClass('drawer-open-' + side);
112             drawer.removeClass('closed');
113             M.util.set_user_preference(preference, 'true');
114         } else {
115             // Close.
116             body.removeClass('drawer-open-' + side);
117             trigger.attr('aria-expanded', 'false');
118             drawer.attr('aria-hidden', 'true');
119             drawer.addClass('closed');
120             M.util.set_user_preference(preference, 'false');
121         }
122     };
124     /**
125      * Prevent the page from scrolling when the drawer is at max scroll.
126      *
127      * @method preventPageScroll
128      * @param  {Event} e
129      */
130     Drawer.prototype.preventPageScroll = function(e) {
131         var delta = e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.originalEvent.detail,
132             bottomOverflow = (this.scrollTop + $(this).outerHeight() - this.scrollHeight) >= 0,
133             topOverflow = this.scrollTop <= 0;
135         if ((delta < 0 && bottomOverflow) || (delta > 0 && topOverflow)) {
136             e.preventDefault();
137         }
138     };
140     /**
141      * Set up all of the event handling for the modal.
142      *
143      * @method registerEventListeners
144      */
145     Drawer.prototype.registerEventListeners = function() {
147         $(SELECTORS.TOGGLE_ACTION).each(function(index, element) {
148             CustomEvents.define($(element), [CustomEvents.events.activate]);
149             $(element).on(CustomEvents.events.activate, function(e, data) {
150                 this.toggleDrawer(data.originalEvent);
151                 data.originalEvent.preventDefault();
152             }.bind(this));
153         }.bind(this));
155         $(SELECTORS.SECTION).click(function() {
156             var small = $(document).width() < 768;
157             if (small) {
158                 this.closeAll();
159             }
160         }.bind(this));
161     };
163     return {
164         'init': function() {
165             return new Drawer();
166         }
167     };
168 });