MDL-55074 theme_boost: Navigation and blocks
[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/notification'],
24      function($, CustomEvents, Notification) {
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             Notification.exception({message: 'Page is missing a drawer toggle region'});
43         }
44         if (!$(SELECTORS.TOGGLE_ACTION).length) {
45             Notification.exception({message: '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 hidden = trigger.attr('aria-expanded') == 'false';
50             var side = trigger.attr('data-side');
51             var body = $(SELECTORS.BODY);
53             if (!hidden) {
54                 body.addClass('drawer-open-' + side);
55                 trigger.attr('aria-expanded', 'true');
56             } else {
57                 trigger.attr('aria-expanded', 'false');
58             }
59         }.bind(this));
61         this.registerEventListeners();
62     };
64     Drawer.prototype.closeAll = function() {
65         $(SELECTORS.TOGGLE_REGION).each(function(index, ele) {
66             var trigger = $(ele).find(SELECTORS.TOGGLE_ACTION);
67             var side = trigger.attr('data-side');
68             var body = $(SELECTORS.BODY);
69             var drawerid = trigger.attr('aria-controls');
70             var drawer = $(document.getElementById(drawerid));
71             var preference = trigger.attr('data-preference');
73             trigger.attr('aria-expanded', 'false');
74             body.removeClass('drawer-open-' + side);
75             drawer.attr('aria-hidden', 'true');
76             drawer.addClass('closed');
77             M.util.set_user_preference(preference, 'false');
78         }.bind(this));
79     };
81     /**
82      * Open / close the blocks drawer.
83      *
84      * @method toggleDrawer
85      * @param {Event} e
86      */
87     Drawer.prototype.toggleDrawer = function(e) {
88         var trigger = $(e.target).closest('[data-action=toggle-drawer]');
89         var drawerid = trigger.attr('aria-controls');
90         var drawer = $(document.getElementById(drawerid));
91         var body = $(SELECTORS.BODY);
92         var side = trigger.attr('data-side');
93         var preference = trigger.attr('data-preference');
95         body.addClass('drawer-ease');
96         var open = trigger.attr('aria-expanded') == 'true';
97         if (!open) {
98             var small = $(document).width() < 512;
99             if (small) {
100                 this.closeAll();
101             }
102             // Open.
103             trigger.attr('aria-expanded', 'true');
104             drawer.attr('aria-hidden', 'false');
105             body.addClass('drawer-open-' + side);
106             drawer.removeClass('closed');
107             M.util.set_user_preference(preference, 'true');
108         } else {
109             // Close.
110             body.removeClass('drawer-open-' + side);
111             trigger.attr('aria-expanded', 'false');
112             drawer.attr('aria-hidden', 'true');
113             drawer.addClass('closed');
114             M.util.set_user_preference(preference, 'false');
115         }
116     };
118     /**
119      * Set up all of the event handling for the modal.
120      *
121      * @method registerEventListeners
122      */
123     Drawer.prototype.registerEventListeners = function() {
124         var body = $(SELECTORS.BODY);
126         CustomEvents.define(body, [CustomEvents.events.activate]);
128         body.on(CustomEvents.events.activate, SELECTORS.TOGGLE_ACTION, function(e, data) {
129             this.toggleDrawer(data.originalEvent);
130             data.originalEvent.preventDefault();
131         }.bind(this));
132     };
134     return {
135         'init': function() {
136             return new Drawer();
137         }
138     };
139 });