Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 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
 * Toggling the visibility of the secondary navigation on mobile.
18
 *
19
 * @module     theme_universe/drawers
20
 * @copyright  2021 Bas Brands
21
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22
 */
1441 ariadna 23
import ModalBackdrop from 'core/modal_backdrop';
24
import Templates from 'core/templates';
25
import * as Aria from 'core/aria';
26
import {dispatchEvent} from 'core/event_dispatcher';
27
import {debounce} from 'core/utils';
28
import {isSmall, isLarge} from 'core/pagehelpers';
29
import Pending from 'core/pending';
30
import {setUserPreference} from 'core_user/repository';
31
import Tooltip from './bootstrap/tooltip';
1 efrain 32
 
1441 ariadna 33
let backdropPromise = null;
1 efrain 34
 
1441 ariadna 35
const drawerMap = new Map();
1 efrain 36
 
1441 ariadna 37
const SELECTORS = {
1 efrain 38
    BUTTONS: '[data-toggler="drawers"]',
39
    CLOSEBTN: '[data-toggler="drawers"][data-action="closedrawer"]',
40
    OPENBTN: '[data-toggler="drawers"][data-action="opendrawer"]',
41
    TOGGLEBTN: '[data-toggler="drawers"][data-action="toggle"]',
42
    DRAWERS: '[data-region="fixed-drawer"]',
1441 ariadna 43
    DRAWERCONTENT: '.drawercontent',
44
    PAGECONTENT: '#page-content',
45
    HEADERCONTENT: '.drawerheadercontent',
46
};
1 efrain 47
 
1441 ariadna 48
const CLASSES = {
49
    SCROLLED: 'scrolled',
50
    SHOW: 'show',
51
    NOTINITIALISED: 'not-initialized',
52
};
1 efrain 53
 
1441 ariadna 54
/**
55
 * Pixel thresshold to auto-hide drawers.
56
 *
57
 * @type {Number}
58
 */
59
const THRESHOLD = 20;
1 efrain 60
 
1441 ariadna 61
/**
62
 * Try to get the drawer z-index from the page content.
63
 *
64
 * @returns {Number|null} the z-index of the drawer.
65
 * @private
66
 */
67
const getDrawerZIndex = () => {
1 efrain 68
    const drawer = document.querySelector(SELECTORS.DRAWERS);
69
    if (!drawer) {
1441 ariadna 70
        return null;
1 efrain 71
    }
72
    return parseInt(window.getComputedStyle(drawer).zIndex, 10);
1441 ariadna 73
};
1 efrain 74
 
1441 ariadna 75
/**
76
 * Add a backdrop to the page.
77
 *
78
 * @returns {Promise} rendering of modal backdrop.
79
 * @private
80
 */
81
const getBackdrop = () => {
1 efrain 82
    if (!backdropPromise) {
1441 ariadna 83
        backdropPromise = Templates.render('core/modal_backdrop', {})
84
        .then(html => new ModalBackdrop(html))
85
        .then(modalBackdrop => {
86
            const drawerZindex = getDrawerZIndex();
87
            if (drawerZindex) {
88
                modalBackdrop.setZIndex(getDrawerZIndex() - 1);
89
            }
90
            modalBackdrop.getAttachmentPoint().get(0).addEventListener('click', e => {
91
                e.preventDefault();
92
                Drawers.closeAllDrawers();
1 efrain 93
            });
1441 ariadna 94
            return modalBackdrop;
1 efrain 95
        })
96
        .catch();
97
    }
98
    return backdropPromise;
1441 ariadna 99
};
1 efrain 100
 
1441 ariadna 101
/**
102
 * Get the button element to open a specific drawer.
103
 *
104
 * @param {String} drawerId the drawer element Id
105
 * @return {HTMLElement|undefined} the open button element
106
 * @private
107
 */
108
const getDrawerOpenButton = (drawerId) => {
109
    let openButton = document.querySelector(`${SELECTORS.OPENBTN}[data-target="${drawerId}"]`);
1 efrain 110
    if (!openButton) {
1441 ariadna 111
        openButton = document.querySelector(`${SELECTORS.TOGGLEBTN}[data-target="${drawerId}"]`);
1 efrain 112
    }
113
    return openButton;
1441 ariadna 114
};
1 efrain 115
 
1441 ariadna 116
/**
117
 * Disable drawer tooltips.
118
 *
119
 * @param {HTMLElement} drawerNode the drawer main node
120
 * @private
121
 */
122
const disableDrawerTooltips = (drawerNode) => {
1 efrain 123
    const buttons = [
1441 ariadna 124
        drawerNode.querySelector(SELECTORS.CLOSEBTN),
125
        getDrawerOpenButton(drawerNode.id),
1 efrain 126
    ];
1441 ariadna 127
    buttons.forEach(button => {
128
        if (!button) {
129
            return;
130
        }
131
        disableButtonTooltip(button);
1 efrain 132
    });
1441 ariadna 133
};
1 efrain 134
 
1441 ariadna 135
/**
136
 * Disable the button tooltips.
137
 *
138
 * @param {HTMLElement} button the button element
139
 * @param {boolean} enableOnBlur if the tooltip must be re-enabled on blur.
140
 * @private
141
 */
142
const disableButtonTooltip = (button, enableOnBlur) => {
143
    if (button.hasAttribute('data-original-title')) {
144
        Tooltip.getInstance(button).disable();
145
        button.setAttribute('title', button.dataset.originalTitle);
1 efrain 146
    } else {
1441 ariadna 147
        button.dataset.disabledToggle = button.dataset.toggle;
148
        button.removeAttribute('data-bs-toggle');
1 efrain 149
    }
150
    if (enableOnBlur) {
1441 ariadna 151
        button.dataset.restoreTooltipOnBlur = true;
1 efrain 152
    }
1441 ariadna 153
};
1 efrain 154
 
1441 ariadna 155
/**
156
 * Enable drawer tooltips.
157
 *
158
 * @param {HTMLElement} drawerNode the drawer main node
159
 * @private
160
 */
161
const enableDrawerTooltips = (drawerNode) => {
1 efrain 162
    const buttons = [
1441 ariadna 163
        drawerNode.querySelector(SELECTORS.CLOSEBTN),
164
        getDrawerOpenButton(drawerNode.id),
1 efrain 165
    ];
1441 ariadna 166
    buttons.forEach(button => {
167
        if (!button) {
168
            return;
169
        }
170
        enableButtonTooltip(button);
1 efrain 171
    });
1441 ariadna 172
};
1 efrain 173
 
1441 ariadna 174
/**
175
 * Enable the button tooltips.
176
 *
177
 * @param {HTMLElement} button the button element
178
 * @private
179
 */
180
const enableButtonTooltip = (button) => {
181
    if (button.hasAttribute('data-bs-original-title')) {
182
        Tooltip.getInstance(button).enable();
183
        button.removeAttribute('title');
1 efrain 184
    } else if (button.dataset.disabledToggle) {
1441 ariadna 185
        button.dataset.toggle = button.dataset.disabledToggle;
186
        new Tooltip(button);
1 efrain 187
    }
188
    delete button.dataset.restoreTooltipOnBlur;
1441 ariadna 189
};
1 efrain 190
 
1441 ariadna 191
/**
192
 * Add scroll listeners to a drawer element.
193
 *
194
 * @param {HTMLElement} drawerNode the drawer main node
195
 * @private
196
 */
197
const addInnerScrollListener = (drawerNode) => {
1 efrain 198
    const content = drawerNode.querySelector(SELECTORS.DRAWERCONTENT);
199
    if (!content) {
1441 ariadna 200
        return;
1 efrain 201
    }
202
    content.addEventListener("scroll", () => {
1441 ariadna 203
        drawerNode.classList.toggle(
204
            CLASSES.SCROLLED,
205
            content.scrollTop != 0
206
        );
1 efrain 207
    });
1441 ariadna 208
};
1 efrain 209
 
1441 ariadna 210
/**
211
 * The Drawers class is used to control on-screen drawer elements.
212
 *
213
 * It handles opening, and closing of drawer elements, as well as more detailed behaviours such as closing a drawer when
214
 * another drawer is opened, and supports closing a drawer when the screen is resized.
215
 *
216
 * Drawers are instantiated on page load, and can also be toggled lazily when toggling any drawer toggle, open button,
217
 * or close button.
218
 *
219
 * A range of show and hide events are also dispatched as detailed in the class
220
 * {@link module:theme_universe/drawers#eventTypes eventTypes} object.
221
 *
222
 * @example <caption>Standard usage</caption>
223
 *
224
 * // The module just needs to be included to add drawer support.
225
 * import 'theme_universe/drawers';
226
 *
227
 * @example <caption>Manually open or close any drawer</caption>
228
 *
229
 * import Drawers from 'theme_universe/drawers';
230
 *
231
 * const myDrawer = Drawers.getDrawerInstanceForNode(document.querySelector('.myDrawerNode');
232
 * myDrawer.closeDrawer();
233
 *
234
 * @example <caption>Listen to the before show event and cancel it</caption>
235
 *
236
 * import Drawers from 'theme_universe/drawers';
237
 *
238
 * document.addEventListener(Drawers.eventTypes.drawerShow, e => {
239
 *     // The drawer which will be shown.
240
 *     window.console.log(e.target);
241
 *
242
 *     // The instance of the Drawers class for this drawer.
243
 *     window.console.log(e.detail.drawerInstance);
244
 *
245
 *     // Prevent this drawer from being shown.
246
 *     e.preventDefault();
247
 * });
248
 *
249
 * @example <caption>Listen to the shown event</caption>
250
 *
251
 * document.addEventListener(Drawers.eventTypes.drawerShown, e => {
252
 *     // The drawer which was shown.
253
 *     window.console.log(e.target);
254
 *
255
 *     // The instance of the Drawers class for this drawer.
256
 *     window.console.log(e.detail.drawerInstance);
257
 * });
258
 */
259
export default class Drawers {
1 efrain 260
    /**
261
     * The underlying HTMLElement which is controlled.
262
     */
263
    drawerNode = null;
264
 
265
    /**
266
     * The drawer page bounding box dimensions.
267
     * @var {DOMRect} boundingRect
268
     */
269
    boundingRect = null;
270
 
271
    constructor(drawerNode) {
1441 ariadna 272
        // Some behat tests may use fake drawer divs to test components in drawers.
273
        if (drawerNode.dataset.behatFakeDrawer !== undefined) {
274
            return;
275
        }
1 efrain 276
 
1441 ariadna 277
        this.drawerNode = drawerNode;
1 efrain 278
 
1441 ariadna 279
        if (isSmall()) {
280
            this.closeDrawer({focusOnOpenButton: false, updatePreferences: false});
281
        }
1 efrain 282
 
1441 ariadna 283
        if (this.drawerNode.classList.contains(CLASSES.SHOW)) {
284
            this.openDrawer({focusOnCloseButton: false, setUserPref: false});
285
        } else if (this.drawerNode.dataset.forceopen == 1) {
286
            if (!isSmall()) {
287
                this.openDrawer({focusOnCloseButton: false, setUserPref: false});
288
            }
289
        } else {
290
            Aria.hide(this.drawerNode);
1 efrain 291
        }
292
 
1441 ariadna 293
        // Disable tooltips in small screens.
294
        if (isSmall()) {
295
            disableDrawerTooltips(this.drawerNode);
296
        }
1 efrain 297
 
1441 ariadna 298
        addInnerScrollListener(this.drawerNode);
1 efrain 299
 
1441 ariadna 300
        drawerMap.set(drawerNode, this);
1 efrain 301
 
1441 ariadna 302
        drawerNode.classList.remove(CLASSES.NOTINITIALISED);
1 efrain 303
    }
304
 
305
    /**
306
     * Whether the drawer is open.
307
     *
308
     * @returns {boolean}
309
     */
310
    get isOpen() {
1441 ariadna 311
        return this.drawerNode.classList.contains(CLASSES.SHOW);
1 efrain 312
    }
313
 
314
    /**
315
     * Whether the drawer should close when the window is resized
316
     *
317
     * @returns {boolean}
318
     */
319
    get closeOnResize() {
1441 ariadna 320
        return !!parseInt(this.drawerNode.dataset.closeOnResize);
1 efrain 321
    }
322
 
323
    /**
324
     * The list of event types.
325
     *
326
     * @static
327
     * @property {String} drawerShow See {@link event:theme_universe/drawers:show}
328
     * @property {String} drawerShown See {@link event:theme_universe/drawers:shown}
329
     * @property {String} drawerHide See {@link event:theme_universe/drawers:hide}
330
     * @property {String} drawerHidden See {@link event:theme_universe/drawers:hidden}
331
     */
332
    static eventTypes = {
1441 ariadna 333
        /**
334
         * An event triggered before a drawer is shown.
335
         *
336
         * @event theme_universe/drawers:show
337
         * @type {CustomEvent}
338
         * @property {HTMLElement} target The drawer that will be opened.
339
         */
340
        drawerShow: 'theme_universe/drawers:show',
1 efrain 341
 
1441 ariadna 342
        /**
343
         * An event triggered after a drawer is shown.
344
         *
345
         * @event theme_universe/drawers:shown
346
         * @type {CustomEvent}
347
         * @property {HTMLElement} target The drawer that was be opened.
348
         */
349
        drawerShown: 'theme_universe/drawers:shown',
1 efrain 350
 
1441 ariadna 351
        /**
352
         * An event triggered before a drawer is hidden.
353
         *
354
         * @event theme_universe/drawers:hide
355
         * @type {CustomEvent}
356
         * @property {HTMLElement} target The drawer that will be hidden.
357
         */
358
        drawerHide: 'theme_universe/drawers:hide',
1 efrain 359
 
1441 ariadna 360
        /**
361
         * An event triggered after a drawer is hidden.
362
         *
363
         * @event theme_universe/drawers:hidden
364
         * @type {CustomEvent}
365
         * @property {HTMLElement} target The drawer that was be hidden.
366
         */
367
        drawerHidden: 'theme_universe/drawers:hidden',
1 efrain 368
    };
369
 
1441 ariadna 370
 
1 efrain 371
    /**
372
     * Get the drawer instance for the specified node
373
     *
374
     * @param {HTMLElement} drawerNode
375
     * @returns {module:theme_universe/drawers}
376
     */
377
    static getDrawerInstanceForNode(drawerNode) {
1441 ariadna 378
        if (!drawerMap.has(drawerNode)) {
379
            new Drawers(drawerNode);
380
        }
1 efrain 381
 
1441 ariadna 382
        return drawerMap.get(drawerNode);
1 efrain 383
    }
384
 
385
    /**
386
     * Dispatch a drawer event.
387
     *
388
     * @param {string} eventname the event name
389
     * @param {boolean} cancelable if the event is cancelable
390
     * @returns {CustomEvent} the resulting custom event
391
     */
392
    dispatchEvent(eventname, cancelable = false) {
1441 ariadna 393
        return dispatchEvent(
394
            eventname,
395
            {
396
                drawerInstance: this,
397
            },
398
            this.drawerNode,
399
            {
400
                cancelable,
401
            }
402
        );
1 efrain 403
    }
404
 
405
    /**
406
     * Open the drawer.
407
     *
408
     * By default, openDrawer sets the page focus to the close drawer button. However, when a drawer is open at page
409
     * load, this represents an accessibility problem as the initial focus changes without any user interaction. The
410
     * focusOnCloseButton parameter can be set to false to prevent this behaviour.
411
     *
412
     * @param {object} args
413
     * @param {boolean} [args.focusOnCloseButton=true] Whether to alter page focus when opening the drawer
1441 ariadna 414
     * @param {boolean} [args.setUserPref=true] Whether to store the opened drawer state as a user preference
1 efrain 415
     */
1441 ariadna 416
    openDrawer({focusOnCloseButton = true, setUserPref = true} = {}) {
1 efrain 417
 
1441 ariadna 418
        const pendingPromise = new Pending('theme_universe/drawers:open');
419
        const showEvent = this.dispatchEvent(Drawers.eventTypes.drawerShow, true);
420
        if (showEvent.defaultPrevented) {
421
            return;
422
        }
1 efrain 423
 
1441 ariadna 424
        // Hide close button and header content while the drawer is showing to prevent glitchy effects.
425
        this.drawerNode.querySelector(SELECTORS.CLOSEBTN)?.classList.toggle('hidden', true);
426
        this.drawerNode.querySelector(SELECTORS.HEADERCONTENT)?.classList.toggle('hidden', true);
1 efrain 427
 
428
 
1441 ariadna 429
        // Remove open tooltip if still visible.
430
        let openButton = getDrawerOpenButton(this.drawerNode.id);
431
        if (openButton && openButton.hasAttribute('data-original-title')) {
432
            Tooltip.getInstance(openButton)?.hide();
433
        }
1 efrain 434
 
1441 ariadna 435
        Aria.unhide(this.drawerNode);
436
        this.drawerNode.classList.add(CLASSES.SHOW);
1 efrain 437
 
1441 ariadna 438
        const preference = this.drawerNode.dataset.preference;
439
        if (preference && !isSmall() && (this.drawerNode.dataset.forceopen != 1) && setUserPref) {
440
            setUserPreference(preference, true);
441
        }
1 efrain 442
 
1441 ariadna 443
        const state = this.drawerNode.dataset.state;
444
        if (state) {
445
            const page = document.getElementById('page');
446
            page.classList.add(state);
447
        }
1 efrain 448
 
1441 ariadna 449
        this.boundingRect = this.drawerNode.getBoundingClientRect();
1 efrain 450
 
1441 ariadna 451
        if (isSmall()) {
452
            getBackdrop().then(backdrop => {
453
                backdrop.show();
454
 
455
                const pageWrapper = document.getElementById('page');
456
                pageWrapper.style.overflow = 'hidden';
457
                return backdrop;
458
            })
459
            .catch();
1 efrain 460
        }
461
 
1441 ariadna 462
        // Show close button and header content once the drawer is fully opened.
463
        const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);
464
        const headerContent = this.drawerNode.querySelector(SELECTORS.HEADERCONTENT);
465
        if (focusOnCloseButton && closeButton) {
466
            disableButtonTooltip(closeButton, true);
467
        }
468
        setTimeout(() => {
469
            closeButton.classList.toggle('hidden', false);
470
            headerContent.classList.toggle('hidden', false);
471
            if (focusOnCloseButton) {
472
                closeButton.focus();
473
            }
474
            pendingPromise.resolve();
475
        }, 300);
476
 
477
        this.dispatchEvent(Drawers.eventTypes.drawerShown);
1 efrain 478
    }
479
 
480
    /**
481
     * Close the drawer.
482
     *
483
     * @param {object} args
484
     * @param {boolean} [args.focusOnOpenButton=true] Whether to alter page focus when opening the drawer
485
     * @param {boolean} [args.updatePreferences=true] Whether to update the user prewference
486
     */
1441 ariadna 487
    closeDrawer({focusOnOpenButton = true, updatePreferences = true} = {}) {
1 efrain 488
 
1441 ariadna 489
        const pendingPromise = new Pending('theme_universe/drawers:close');
1 efrain 490
 
1441 ariadna 491
        const hideEvent = this.dispatchEvent(Drawers.eventTypes.drawerHide, true);
492
        if (hideEvent.defaultPrevented) {
493
            return;
494
        }
1 efrain 495
 
1441 ariadna 496
        // Hide close button and header content while the drawer is hiding to prevent glitchy effects.
497
        const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);
498
        closeButton?.classList.toggle('hidden', true);
499
        const headerContent = this.drawerNode.querySelector(SELECTORS.HEADERCONTENT);
500
        headerContent?.classList.toggle('hidden', true);
501
        // Remove the close button tooltip if visible.
502
        if (closeButton.hasAttribute('data-original-title')) {
503
            Tooltip.getInstance(closeButton)?.hide();
504
        }
1 efrain 505
 
1441 ariadna 506
        const preference = this.drawerNode.dataset.preference;
507
        if (preference && updatePreferences && !isSmall()) {
508
            setUserPreference(preference, false);
509
        }
1 efrain 510
 
1441 ariadna 511
        const state = this.drawerNode.dataset.state;
512
        if (state) {
513
            const page = document.getElementById('page');
514
            page.classList.remove(state);
515
        }
1 efrain 516
 
1441 ariadna 517
        Aria.hide(this.drawerNode);
518
        this.drawerNode.classList.remove(CLASSES.SHOW);
1 efrain 519
 
1441 ariadna 520
        getBackdrop().then(backdrop => {
521
            backdrop.hide();
522
 
523
            if (isSmall()) {
524
                const pageWrapper = document.getElementById('page');
525
                pageWrapper.style.overflow = 'visible';
526
            }
527
            return backdrop;
1 efrain 528
        })
529
        .catch();
530
 
1441 ariadna 531
        // Move focus to the open drawer (or toggler) button once the drawer is hidden.
532
        let openButton = getDrawerOpenButton(this.drawerNode.id);
533
        if (openButton) {
534
            disableButtonTooltip(openButton, true);
1 efrain 535
        }
1441 ariadna 536
        setTimeout(() => {
537
            if (openButton && focusOnOpenButton) {
538
                openButton.focus();
539
            }
540
            pendingPromise.resolve();
541
        }, 300);
1 efrain 542
 
1441 ariadna 543
        this.dispatchEvent(Drawers.eventTypes.drawerHidden);
1 efrain 544
    }
545
 
546
    /**
547
     * Toggle visibility of the drawer.
548
     */
549
    toggleVisibility() {
1441 ariadna 550
        if (this.drawerNode.classList.contains(CLASSES.SHOW)) {
551
            this.closeDrawer();
552
        } else {
553
            this.openDrawer();
554
        }
1 efrain 555
    }
556
 
557
    /**
558
     * Displaces the drawer outsite the page.
559
     *
560
     * @param {Number} scrollPosition the page current scroll position
561
     */
562
    displace(scrollPosition) {
1441 ariadna 563
        let displace = scrollPosition;
564
        let openButton = getDrawerOpenButton(this.drawerNode.id);
565
        if (scrollPosition === 0) {
566
            this.drawerNode.style.transform = '';
567
            if (openButton) {
568
                openButton.style.transform = '';
569
            }
570
            return;
571
        }
572
        const state = this.drawerNode.dataset?.state;
573
        const drawrWidth = this.drawerNode.offsetWidth;
574
        let scrollThreshold = drawrWidth;
575
        let direction = -1;
576
        if (state === 'show-drawer-right') {
577
            direction = 1;
578
            scrollThreshold = THRESHOLD;
579
        }
580
        // LTR scroll is positive while RTL scroll is negative.
581
        if (Math.abs(scrollPosition) > scrollThreshold) {
582
            displace = Math.sign(scrollPosition) * (drawrWidth + THRESHOLD);
583
        }
584
        displace *= direction;
585
        const transform = `translateX(${displace}px)`;
1 efrain 586
        if (openButton) {
1441 ariadna 587
            openButton.style.transform = transform;
1 efrain 588
        }
1441 ariadna 589
        this.drawerNode.style.transform = transform;
1 efrain 590
    }
591
 
592
    /**
593
     * Prevent drawer from overlapping an element.
594
     *
595
     * @param {HTMLElement} currentFocus
596
     */
597
    preventOverlap(currentFocus) {
1441 ariadna 598
        // Start position drawer (aka. left drawer) will never overlap with the page content.
599
        if (!this.isOpen || this.drawerNode.dataset?.state === 'show-drawer-left') {
600
            return;
601
        }
602
        const drawrWidth = this.drawerNode.offsetWidth;
603
        const element = currentFocus.getBoundingClientRect();
1 efrain 604
 
1441 ariadna 605
        // The this.boundingRect is calculated only once and it is reliable
606
        // for horizontal overlapping (which is the most common). However,
607
        // it is not reliable for vertical overlapping because the drawer
608
        // height can be changed by other elements like sticky footer.
609
        // To prevent recalculating the boundingRect on every
610
        // focusin event, we use horizontal overlapping as first fast check.
611
        let overlapping = (
612
            (element.right + THRESHOLD) > this.boundingRect.left &&
613
            (element.left - THRESHOLD) < this.boundingRect.right
614
        );
615
        if (overlapping) {
616
            const currentBoundingRect = this.drawerNode.getBoundingClientRect();
617
            overlapping = (
618
                (element.bottom) > currentBoundingRect.top &&
619
                (element.top) < currentBoundingRect.bottom
620
            );
621
        }
1 efrain 622
 
1441 ariadna 623
        if (overlapping) {
624
            // Force drawer to displace out of the page.
625
            let displaceOut = drawrWidth + 1;
626
            if (window.right_to_left()) {
627
                displaceOut *= -1;
628
            }
629
            this.displace(displaceOut);
630
        } else {
631
            // Reset drawer displacement.
632
            this.displace(window.scrollX);
1 efrain 633
        }
634
    }
635
 
636
    /**
637
     * Close all drawers.
638
     */
639
    static closeAllDrawers() {
1441 ariadna 640
        drawerMap.forEach(drawerInstance => {
641
            drawerInstance.closeDrawer();
642
        });
1 efrain 643
    }
644
 
645
    /**
646
     * Close all drawers except for the specified drawer.
647
     *
648
     * @param {module:theme_universe/drawers} comparisonInstance
649
     */
650
    static closeOtherDrawers(comparisonInstance) {
1441 ariadna 651
        drawerMap.forEach(drawerInstance => {
652
            if (drawerInstance === comparisonInstance) {
653
                return;
654
            }
1 efrain 655
 
1441 ariadna 656
            drawerInstance.closeDrawer();
657
        });
1 efrain 658
    }
659
 
660
    /**
661
     * Prevent drawers from covering the focused element.
662
     */
663
    static preventCoveringFocusedElement() {
1441 ariadna 664
        const currentFocus = document.activeElement;
665
        // Focus on page layout elements should be ignored.
666
        const pagecontent = document.querySelector(SELECTORS.PAGECONTENT);
667
        if (!currentFocus || !pagecontent?.contains(currentFocus)) {
668
            Drawers.displaceDrawers(window.scrollX);
669
            return;
670
        }
671
        drawerMap.forEach(drawerInstance => {
672
            drawerInstance.preventOverlap(currentFocus);
673
        });
1 efrain 674
    }
675
 
676
    /**
677
     * Prevent drawer from covering the content when the page content covers the full page.
678
     *
679
     * @param {Number} displace
680
     */
681
    static displaceDrawers(displace) {
1441 ariadna 682
        drawerMap.forEach(drawerInstance => {
683
            drawerInstance.displace(displace);
684
        });
1 efrain 685
    }
1441 ariadna 686
}
1 efrain 687
 
1441 ariadna 688
/**
689
 * Set the last used attribute for the last used toggle button for a drawer.
690
 *
691
 * @param {object} toggleButton The clicked button.
692
 */
693
const setLastUsedToggle = (toggleButton) => {
1 efrain 694
    if (toggleButton.dataset.target) {
1441 ariadna 695
        document.querySelectorAll(`${SELECTORS.BUTTONS}[data-target="${toggleButton.dataset.target}"]`)
696
        .forEach(btn => {
697
            btn.dataset.lastused = false;
1 efrain 698
        });
1441 ariadna 699
        toggleButton.dataset.lastused = true;
1 efrain 700
    }
1441 ariadna 701
};
1 efrain 702
 
1441 ariadna 703
/**
704
 * Set the focus to the last used button to open this drawer.
705
 * @param {string} target The drawer target.
706
 */
707
const focusLastUsedToggle = (target) => {
708
    const lastUsedButton = document.querySelector(`${SELECTORS.BUTTONS}[data-target="${target}"][data-lastused="true"`);
1 efrain 709
    if (lastUsedButton) {
1441 ariadna 710
        lastUsedButton.focus();
1 efrain 711
    }
1441 ariadna 712
};
1 efrain 713
 
1441 ariadna 714
/**
715
 * Register the event listeners for the drawer.
716
 *
717
 * @private
718
 */
719
const registerListeners = () => {
1 efrain 720
    // Listen for show/hide events.
1441 ariadna 721
    document.addEventListener('click', e => {
722
        const toggleButton = e.target.closest(SELECTORS.TOGGLEBTN);
723
        if (toggleButton && toggleButton.dataset.target) {
724
            e.preventDefault();
725
            const targetDrawer = document.getElementById(toggleButton.dataset.target);
726
            const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);
727
            setLastUsedToggle(toggleButton);
1 efrain 728
 
1441 ariadna 729
            drawerInstance.toggleVisibility();
730
        }
1 efrain 731
 
1441 ariadna 732
        const openDrawerButton = e.target.closest(SELECTORS.OPENBTN);
733
        if (openDrawerButton && openDrawerButton.dataset.target) {
734
            e.preventDefault();
735
            const targetDrawer = document.getElementById(openDrawerButton.dataset.target);
736
            const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);
737
            setLastUsedToggle(toggleButton);
1 efrain 738
 
1441 ariadna 739
            drawerInstance.openDrawer();
740
        }
1 efrain 741
 
1441 ariadna 742
        const closeDrawerButton = e.target.closest(SELECTORS.CLOSEBTN);
743
        if (closeDrawerButton && closeDrawerButton.dataset.target) {
744
            e.preventDefault();
745
            const targetDrawer = document.getElementById(closeDrawerButton.dataset.target);
746
            const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);
1 efrain 747
 
1441 ariadna 748
            drawerInstance.closeDrawer();
749
            focusLastUsedToggle(closeDrawerButton.dataset.target);
750
        }
1 efrain 751
    });
752
 
753
    // Close drawer when another drawer opens.
1441 ariadna 754
    document.addEventListener(Drawers.eventTypes.drawerShow, e => {
755
        if (isLarge()) {
756
            return;
757
        }
758
        Drawers.closeOtherDrawers(e.detail.drawerInstance);
1 efrain 759
    });
760
 
761
    // Tooglers and openers blur listeners.
762
    const btnSelector = `${SELECTORS.TOGGLEBTN}, ${SELECTORS.OPENBTN}, ${SELECTORS.CLOSEBTN}`;
1441 ariadna 763
    document.addEventListener('focusout', (e) => {
764
        const button = e.target.closest(btnSelector);
765
        if (button?.dataset.restoreTooltipOnBlur !== undefined) {
766
            enableButtonTooltip(button);
767
        }
1 efrain 768
    });
769
 
770
    const closeOnResizeListener = () => {
1441 ariadna 771
        if (isSmall()) {
772
            let anyOpen = false;
773
            drawerMap.forEach(drawerInstance => {
774
                disableDrawerTooltips(drawerInstance.drawerNode);
775
                if (drawerInstance.isOpen) {
776
                    const currentFocus = document.activeElement;
777
                    const drawerContent = drawerInstance.drawerNode.querySelector(SELECTORS.DRAWERCONTENT);
778
                    const shouldClose = drawerInstance.closeOnResize && (!drawerContent || !drawerContent.contains(currentFocus));
779
                    if (shouldClose) {
780
                        drawerInstance.closeDrawer();
781
                    } else {
782
                        anyOpen = true;
783
                    }
784
                }
785
            });
786
 
787
            if (anyOpen) {
788
                getBackdrop().then(backdrop => backdrop.show()).catch();
1 efrain 789
            }
1441 ariadna 790
        } else {
791
            drawerMap.forEach(drawerInstance => {
792
                enableDrawerTooltips(drawerInstance.drawerNode);
793
            });
794
            getBackdrop().then(backdrop => backdrop.hide()).catch();
1 efrain 795
        }
796
    };
797
 
1441 ariadna 798
    document.addEventListener('scroll', () => {
799
        const currentFocus = document.activeElement;
800
        const drawerContentElements = document.querySelectorAll(SELECTORS.DRAWERCONTENT);
801
        // Check if the current focus is within any drawer content.
802
        if (Array.from(drawerContentElements).some(drawer => drawer.contains(currentFocus))) {
803
            return;
804
        }
805
        const body = document.querySelector('body');
806
        if (window.scrollY >= window.innerHeight) {
807
            body.classList.add(CLASSES.SCROLLED);
808
        } else {
809
            body.classList.remove(CLASSES.SCROLLED);
810
        }
811
        // Horizontal scroll listener to displace the drawers to prevent covering
812
        // any possible sticky content.
813
        Drawers.displaceDrawers(window.scrollX);
1 efrain 814
    });
815
 
816
    const preventOverlap = debounce(Drawers.preventCoveringFocusedElement, 100);
1441 ariadna 817
    document.addEventListener('focusin', preventOverlap);
818
    document.addEventListener('focusout', preventOverlap);
1 efrain 819
 
1441 ariadna 820
    window.addEventListener('resize', debounce(closeOnResizeListener, 400, {pending: true}));
821
};
1 efrain 822
 
1441 ariadna 823
registerListeners();
1 efrain 824
 
1441 ariadna 825
const drawers = document.querySelectorAll(SELECTORS.DRAWERS);
826
drawers.forEach(drawerNode => Drawers.getDrawerInstanceForNode(drawerNode));