MDL-55074 theme_boost: Navigation and blocks
[moodle.git] / theme / boost / amd / src / drawer.js
CommitLineData
99061152
DW
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 * 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 */
23define(['jquery', 'core/custom_interaction_events', 'core/notification'],
24 function($, CustomEvents, Notification) {
25
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 };
33
34 /**
35 * Constructor for the Drawer.
36 *
37 * @param {object} root The root jQuery element for the modal
38 */
39 var Drawer = function() {
40
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);
52
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));
60
61 this.registerEventListeners();
62 };
63
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');
72
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 };
80
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');
94
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 };
117
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);
125
126 CustomEvents.define(body, [CustomEvents.events.activate]);
127
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 };
133
134 return {
135 'init': function() {
136 return new Drawer();
137 }
138 };
139});