733b64f5c86d7669a9a25ca75bf9791ae8bc27d4
[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     };
34     /**
35      * Constructor for the Drawer.
36      *
37      * @param {object} root The root jQuery element for the modal
38      */
39     var Drawer = function() {
41         if (!$(SELECTORS.TOGGLE_REGION).length) {
42             Log.debug('Page is missing a drawer region');
43         }
44         if (!$(SELECTORS.TOGGLE_ACTION).length) {
45             Log.debug('Page is missing a drawer toggle link');
46         }
47         $(SELECTORS.TOGGLE_REGION).each(function(index, ele) {
48             var trigger = $(ele).find(SELECTORS.TOGGLE_ACTION);
49             var drawerid = trigger.attr('aria-controls');
50             var drawer = $(document.getElementById(drawerid));
51             var hidden = trigger.attr('aria-expanded') == 'false';
52             var side = trigger.attr('data-side');
53             var body = $(SELECTORS.BODY);
55             drawer.on('mousewheel DOMMouseScroll', this.preventPageScroll);
57             if (!hidden) {
58                 body.addClass('drawer-open-' + side);
59                 trigger.attr('aria-expanded', 'true');
60             } else {
61                 trigger.attr('aria-expanded', 'false');
62             }
63         }.bind(this));
65         this.registerEventListeners();
66         var small = $(document).width() < 768;
67         if (small) {
68             this.closeAll();
69         }
70     };
72     Drawer.prototype.closeAll = function() {
73         $(SELECTORS.TOGGLE_REGION).each(function(index, ele) {
74             var trigger = $(ele).find(SELECTORS.TOGGLE_ACTION);
75             var side = trigger.attr('data-side');
76             var body = $(SELECTORS.BODY);
77             var drawerid = trigger.attr('aria-controls');
78             var drawer = $(document.getElementById(drawerid));
79             var preference = trigger.attr('data-preference');
81             trigger.attr('aria-expanded', 'false');
82             body.removeClass('drawer-open-' + side);
83             drawer.attr('aria-hidden', 'true');
84             drawer.addClass('closed');
85             M.util.set_user_preference(preference, 'false');
86         }.bind(this));
87     };
89     /**
90      * Open / close the blocks drawer.
91      *
92      * @method toggleDrawer
93      * @param {Event} e
94      */
95     Drawer.prototype.toggleDrawer = function(e) {
96         var trigger = $(e.target).closest('[data-action=toggle-drawer]');
97         var drawerid = trigger.attr('aria-controls');
98         var drawer = $(document.getElementById(drawerid));
99         var body = $(SELECTORS.BODY);
100         var side = trigger.attr('data-side');
101         var preference = trigger.attr('data-preference');
103         body.addClass('drawer-ease');
104         var open = trigger.attr('aria-expanded') == 'true';
105         if (!open) {
106             var small = $(document).width() < 768;
107             if (small) {
108                 this.closeAll();
109             }
110             // Open.
111             trigger.attr('aria-expanded', 'true');
112             drawer.attr('aria-hidden', 'false');
113             drawer.focus();
114             body.addClass('drawer-open-' + side);
115             drawer.removeClass('closed');
116             M.util.set_user_preference(preference, 'true');
117         } else {
118             // Close.
119             body.removeClass('drawer-open-' + side);
120             trigger.attr('aria-expanded', 'false');
121             drawer.attr('aria-hidden', 'true');
122             drawer.addClass('closed');
123             M.util.set_user_preference(preference, 'false');
124         }
125     };
127     /**
128      * Prevent the page from scrolling when the drawer is at max scroll.
129      *
130      * @method preventPageScroll
131      */
132     Drawer.prototype.preventPageScroll = function(e) {
133         var delta = e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.originalEvent.detail,
134             bottomOverflow = (this.scrollTop + $(this).outerHeight() - this.scrollHeight) >= 0,
135             topOverflow = this.scrollTop <= 0;
137         if ((delta < 0 && bottomOverflow) || (delta > 0 && topOverflow)) {
138             e.preventDefault();
139         }
140     };
142     /**
143      * Set up all of the event handling for the modal.
144      *
145      * @method registerEventListeners
146      */
147     Drawer.prototype.registerEventListeners = function() {
149         $(SELECTORS.TOGGLE_ACTION).each(function(index, element) {
150             CustomEvents.define($(element), [CustomEvents.events.activate]);
151             $(element).on(CustomEvents.events.activate, function(e, data) {
152                 this.toggleDrawer(data.originalEvent);
153                 data.originalEvent.preventDefault();
154             }.bind(this));
155         }.bind(this));
157     };
159     return {
160         'init': function() {
161             return new Drawer();
162         }
163     };
164 });