Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**
 * Toggling the visibility of the secondary navigation on mobile.
 *
 * @module     theme_universe/drawers
 * @copyright  2021 Bas Brands
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

define(function (require) {
  "use strict";

  const ModalBackdrop = require("core/modal_backdrop");
  const Templates = require("core/templates");
  const Aria = require("core/aria");
  const { dispatchEvent } = require("core/event_dispatcher");
  const { debounce } = require("core/utils");
  const { isSmall, isLarge } = require("core/pagehelpers");
  const Pending = require("core/pending");
  const UserRepository = require("core_user/repository");
  // The jQuery module is only used for interacting with Boostrap 4. It can we removed when MDL-71979 is integrated.
  const jQuery = require("jquery");

  let backdropPromise = null;

  const drawerMap = new Map();

  const SELECTORS = {
    BUTTONS: '[data-toggler="drawers"]',
    CLOSEBTN: '[data-toggler="drawers"][data-action="closedrawer"]',
    OPENBTN: '[data-toggler="drawers"][data-action="opendrawer"]',
    TOGGLEBTN: '[data-toggler="drawers"][data-action="toggle"]',
    DRAWERS: '[data-region="fixed-drawer"]',
    DRAWERCONTENT: ".drawercontent",
    PAGECONTENT: "#page-content",
    HEADERCONTENT: ".drawerheadercontent",
  };

  const CLASSES = {
    SCROLLED: "scrolled",
    SHOW: "show",
    NOTINITIALISED: "not-initialized",
  };

  /**
   * Pixel thresshold to auto-hide drawers.
   *
   * @type {Number}
   */
  const THRESHOLD = 20;

  /**
   * Try to get the drawer z-index from the page content.
   *
   * @returns {Number|null} the z-index of the drawer.
   * @private
   */
  const getDrawerZIndex = () => {
    const drawer = document.querySelector(SELECTORS.DRAWERS);
    if (!drawer) {
      return null;
    }
    return parseInt(window.getComputedStyle(drawer).zIndex, 10);
  };

  /**
   * Add a backdrop to the page.
   *
   * @returns {Promise} rendering of modal backdrop.
   * @private
   */
  const getBackdrop = () => {
    if (!backdropPromise) {
      backdropPromise = Templates.render("core/modal_backdrop", {})
        .then((html) => new ModalBackdrop(html))
        .then((modalBackdrop) => {
          const drawerZindex = getDrawerZIndex();
          if (drawerZindex) {
            modalBackdrop.setZIndex(getDrawerZIndex() - 1);
          }
          modalBackdrop
            .getAttachmentPoint()
            .get(0)
            .addEventListener("click", (e) => {
              e.preventDefault();
              Drawers.closeAllDrawers();
            });
          return modalBackdrop;
        })
        .catch();
    }
    return backdropPromise;
  };

  /**
   * Get the button element to open a specific drawer.
   *
   * @param {String} drawerId the drawer element Id
   * @return {HTMLElement|undefined} the open button element
   * @private
   */
  const getDrawerOpenButton = (drawerId) => {
    let openButton = document.querySelector(
      `${SELECTORS.OPENBTN}[data-target="${drawerId}"]`
    );
    if (!openButton) {
      openButton = document.querySelector(
        `${SELECTORS.TOGGLEBTN}[data-target="${drawerId}"]`
      );
    }
    return openButton;
  };

  /**
   * Disable drawer tooltips.
   *
   * @param {HTMLElement} drawerNode the drawer main node
   * @private
   */
  const disableDrawerTooltips = (drawerNode) => {
    const buttons = [
      drawerNode.querySelector(SELECTORS.CLOSEBTN),
      getDrawerOpenButton(drawerNode.id),
    ];
    buttons.forEach((button) => {
      if (!button) {
        return;
      }
      disableButtonTooltip(button);
    });
  };

  /**
   * Disable the button tooltips.
   *
   * @param {HTMLElement} button the button element
   * @param {boolean} enableOnBlur if the tooltip must be re-enabled on blur.
   * @private
   */
  const disableButtonTooltip = (button, enableOnBlur) => {
    if (button.hasAttribute("data-original-title")) {
      // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.
      jQuery(button).tooltip("disable");
      button.setAttribute("title", button.dataset.originalTitle);
    } else {
      button.dataset.disabledToggle = button.dataset.toggle;
      button.removeAttribute("data-toggle");
    }
    if (enableOnBlur) {
      button.dataset.restoreTooltipOnBlur = true;
    }
  };

  /**
   * Enable drawer tooltips.
   *
   * @param {HTMLElement} drawerNode the drawer main node
   * @private
   */
  const enableDrawerTooltips = (drawerNode) => {
    const buttons = [
      drawerNode.querySelector(SELECTORS.CLOSEBTN),
      getDrawerOpenButton(drawerNode.id),
    ];
    buttons.forEach((button) => {
      if (!button) {
        return;
      }
      enableButtonTooltip(button);
    });
  };

  /**
   * Enable the button tooltips.
   *
   * @param {HTMLElement} button the button element
   * @private
   */
  const enableButtonTooltip = (button) => {
    // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.
    if (button.hasAttribute("data-original-title")) {
      jQuery(button).tooltip("enable");
      button.removeAttribute("title");
    } else if (button.dataset.disabledToggle) {
      button.dataset.toggle = button.dataset.disabledToggle;
      jQuery(button).tooltip();
    }
    delete button.dataset.restoreTooltipOnBlur;
  };

  /**
   * Add scroll listeners to a drawer element.
   *
   * @param {HTMLElement} drawerNode the drawer main node
   * @private
   */
  const addInnerScrollListener = (drawerNode) => {
    const content = drawerNode.querySelector(SELECTORS.DRAWERCONTENT);
    if (!content) {
      return;
    }
    content.addEventListener("scroll", () => {
      drawerNode.classList.toggle(CLASSES.SCROLLED, content.scrollTop != 0);
    });
  };

  /**
   * The Drawers class is used to control on-screen drawer elements.
   *
   * It handles opening, and closing of drawer elements, as well as more detailed behaviours such as closing a drawer when
   * another drawer is opened, and supports closing a drawer when the screen is resized.
   *
   * Drawers are instantiated on page load, and can also be toggled lazily when toggling any drawer toggle, open button,
   * or close button.
   *
   * A range of show and hide events are also dispatched as detailed in the class
   * {@link module:theme_universe/drawers#eventTypes eventTypes} object.
   *
   * @example <caption>Standard usage</caption>
   *
   * // The module just needs to be included to add drawer support.
   * import 'theme_universe/drawers';
   *
   * @example <caption>Manually open or close any drawer</caption>
   *
   * import Drawers from 'theme_universe/drawers';
   *
   * const myDrawer = Drawers.getDrawerInstanceForNode(document.querySelector('.myDrawerNode');
   * myDrawer.closeDrawer();
   *
   * @example <caption>Listen to the before show event and cancel it</caption>
   *
   * import Drawers from 'theme_universe/drawers';
   *
   * document.addEventListener(Drawers.eventTypes.drawerShow, e => {
   *     // The drawer which will be shown.
   *     window.console.log(e.target);
   *
   *     // The instance of the Drawers class for this drawer.
   *     window.console.log(e.detail.drawerInstance);
   *
   *     // Prevent this drawer from being shown.
   *     e.preventDefault();
   * });
   *
   * @example <caption>Listen to the shown event</caption>
   *
   * document.addEventListener(Drawers.eventTypes.drawerShown, e => {
   *     // The drawer which was shown.
   *     window.console.log(e.target);
   *
   *     // The instance of the Drawers class for this drawer.
   *     window.console.log(e.detail.drawerInstance);
   * });
   */
  class Drawers {
    /**
     * The underlying HTMLElement which is controlled.
     */
    drawerNode = null;

    /**
     * The drawer page bounding box dimensions.
     * @var {DOMRect} boundingRect
     */
    boundingRect = null;

    constructor(drawerNode) {
      // Some behat tests may use fake drawer divs to test components in drawers.
      if (drawerNode.dataset.behatFakeDrawer !== undefined) {
        return;
      }

      this.drawerNode = drawerNode;

      if (isSmall()) {
        this.closeDrawer({
          focusOnOpenButton: false,
          updatePreferences: false,
        });
      }

      if (this.drawerNode.classList.contains(CLASSES.SHOW)) {
        this.openDrawer({ focusOnCloseButton: false });
      } else if (this.drawerNode.dataset.forceopen == 1) {
        if (!isSmall()) {
          this.openDrawer({ focusOnCloseButton: false });
        }
      } else {
        Aria.hide(this.drawerNode);
      }

      // Disable tooltips in small screens.
      if (isSmall()) {
        disableDrawerTooltips(this.drawerNode);
      }

      addInnerScrollListener(this.drawerNode);

      drawerMap.set(drawerNode, this);

      drawerNode.classList.remove(CLASSES.NOTINITIALISED);
    }

    /**
     * Whether the drawer is open.
     *
     * @returns {boolean}
     */
    get isOpen() {
      return this.drawerNode.classList.contains(CLASSES.SHOW);
    }

    /**
     * Whether the drawer should close when the window is resized
     *
     * @returns {boolean}
     */
    get closeOnResize() {
      return !!parseInt(this.drawerNode.dataset.closeOnResize);
    }

    /**
     * The list of event types.
     *
     * @static
     * @property {String} drawerShow See {@link event:theme_universe/drawers:show}
     * @property {String} drawerShown See {@link event:theme_universe/drawers:shown}
     * @property {String} drawerHide See {@link event:theme_universe/drawers:hide}
     * @property {String} drawerHidden See {@link event:theme_universe/drawers:hidden}
     */
    static eventTypes = {
      /**
       * An event triggered before a drawer is shown.
       *
       * @event theme_universe/drawers:show
       * @type {CustomEvent}
       * @property {HTMLElement} target The drawer that will be opened.
       */
      drawerShow: "theme_universe/drawers:show",

      /**
       * An event triggered after a drawer is shown.
       *
       * @event theme_universe/drawers:shown
       * @type {CustomEvent}
       * @property {HTMLElement} target The drawer that was be opened.
       */
      drawerShown: "theme_universe/drawers:shown",

      /**
       * An event triggered before a drawer is hidden.
       *
       * @event theme_universe/drawers:hide
       * @type {CustomEvent}
       * @property {HTMLElement} target The drawer that will be hidden.
       */
      drawerHide: "theme_universe/drawers:hide",

      /**
       * An event triggered after a drawer is hidden.
       *
       * @event theme_universe/drawers:hidden
       * @type {CustomEvent}
       * @property {HTMLElement} target The drawer that was be hidden.
       */
      drawerHidden: "theme_universe/drawers:hidden",
    };

    /**
     * Get the drawer instance for the specified node
     *
     * @param {HTMLElement} drawerNode
     * @returns {module:theme_universe/drawers}
     */
    static getDrawerInstanceForNode(drawerNode) {
      if (!drawerMap.has(drawerNode)) {
        new Drawers(drawerNode);
      }

      return drawerMap.get(drawerNode);
    }

    /**
     * Dispatch a drawer event.
     *
     * @param {string} eventname the event name
     * @param {boolean} cancelable if the event is cancelable
     * @returns {CustomEvent} the resulting custom event
     */
    dispatchEvent(eventname, cancelable = false) {
      return dispatchEvent(
        eventname,
        {
          drawerInstance: this,
        },
        this.drawerNode,
        {
          cancelable,
        }
      );
    }

    /**
     * Open the drawer.
     *
     * By default, openDrawer sets the page focus to the close drawer button. However, when a drawer is open at page
     * load, this represents an accessibility problem as the initial focus changes without any user interaction. The
     * focusOnCloseButton parameter can be set to false to prevent this behaviour.
     *
     * @param {object} args
     * @param {boolean} [args.focusOnCloseButton=true] Whether to alter page focus when opening the drawer
     */
    openDrawer({ focusOnCloseButton = true } = {}) {
      const pendingPromise = new Pending("theme_universe/drawers:open");
      const showEvent = this.dispatchEvent(Drawers.eventTypes.drawerShow, true);
      if (showEvent.defaultPrevented) {
        return;
      }

      // Hide close button and header content while the drawer is showing to prevent glitchy effects.
      this.drawerNode
        .querySelector(SELECTORS.CLOSEBTN)
        ?.classList.toggle("hidden", true);
      this.drawerNode
        .querySelector(SELECTORS.HEADERCONTENT)
        ?.classList.toggle("hidden", true);

      // Remove open tooltip if still visible.
      let openButton = getDrawerOpenButton(this.drawerNode.id);
      if (openButton && openButton.hasAttribute("data-original-title")) {
        // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.
        jQuery(openButton)?.tooltip("hide");
      }

      Aria.unhide(this.drawerNode);
      this.drawerNode.classList.add(CLASSES.SHOW);

      const preference = this.drawerNode.dataset.preference;
      if (preference && !isSmall() && this.drawerNode.dataset.forceopen != 1) {
        UserRepository.setUserPreference(preference, true);
      }

      const state = this.drawerNode.dataset.state;
      if (state) {
        const page = document.getElementById("page");
        page.classList.add(state);
      }

      this.boundingRect = this.drawerNode.getBoundingClientRect();

      if (isSmall()) {
        getBackdrop()
          .then((backdrop) => {
            backdrop.show();

            const pageWrapper = document.getElementById("page");
            pageWrapper.style.overflow = "hidden";
            return backdrop;
          })
          .catch();
      }

      // Show close button and header content once the drawer is fully opened.
      const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);
      const headerContent = this.drawerNode.querySelector(
        SELECTORS.HEADERCONTENT
      );
      if (focusOnCloseButton && closeButton) {
        disableButtonTooltip(closeButton, true);
      }
      setTimeout(() => {
        closeButton.classList.toggle("hidden", false);
        headerContent.classList.toggle("hidden", false);
        if (focusOnCloseButton) {
          closeButton.focus();
        }
        pendingPromise.resolve();
      }, 300);

      this.dispatchEvent(Drawers.eventTypes.drawerShown);
    }

    /**
     * Close the drawer.
     *
     * @param {object} args
     * @param {boolean} [args.focusOnOpenButton=true] Whether to alter page focus when opening the drawer
     * @param {boolean} [args.updatePreferences=true] Whether to update the user prewference
     */
    closeDrawer({ focusOnOpenButton = true, updatePreferences = true } = {}) {
      const pendingPromise = new Pending("theme_universe/drawers:close");

      const hideEvent = this.dispatchEvent(Drawers.eventTypes.drawerHide, true);
      if (hideEvent.defaultPrevented) {
        return;
      }

      // Hide close button and header content while the drawer is hiding to prevent glitchy effects.
      const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);
      closeButton?.classList.toggle("hidden", true);
      const headerContent = this.drawerNode.querySelector(
        SELECTORS.HEADERCONTENT
      );
      headerContent?.classList.toggle("hidden", true);
      // Remove the close button tooltip if visible.
      if (closeButton.hasAttribute("data-original-title")) {
        // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.
        jQuery(closeButton)?.tooltip("hide");
      }

      const preference = this.drawerNode.dataset.preference;
      if (preference && updatePreferences && !isSmall()) {
        UserRepository.setUserPreference(preference, false);
      }

      const state = this.drawerNode.dataset.state;
      if (state) {
        const page = document.getElementById("page");
        page.classList.remove(state);
      }

      Aria.hide(this.drawerNode);
      this.drawerNode.classList.remove(CLASSES.SHOW);

      getBackdrop()
        .then((backdrop) => {
          backdrop.hide();

          if (isSmall()) {
            const pageWrapper = document.getElementById("page");
            pageWrapper.style.overflow = "visible";
          }
          return backdrop;
        })
        .catch();

      // Move focus to the open drawer (or toggler) button once the drawer is hidden.
      let openButton = getDrawerOpenButton(this.drawerNode.id);
      if (openButton) {
        disableButtonTooltip(openButton, true);
      }
      setTimeout(() => {
        if (openButton && focusOnOpenButton) {
          openButton.focus();
        }
        pendingPromise.resolve();
      }, 300);

      this.dispatchEvent(Drawers.eventTypes.drawerHidden);
    }

    /**
     * Toggle visibility of the drawer.
     */
    toggleVisibility() {
      if (this.drawerNode.classList.contains(CLASSES.SHOW)) {
        this.closeDrawer();
      } else {
        this.openDrawer();
      }
    }

    /**
     * Displaces the drawer outsite the page.
     *
     * @param {Number} scrollPosition the page current scroll position
     */
    displace(scrollPosition) {
      let displace = scrollPosition;
      let openButton = getDrawerOpenButton(this.drawerNode.id);
      if (scrollPosition === 0) {
        this.drawerNode.style.transform = "";
        if (openButton) {
          openButton.style.transform = "";
        }
        return;
      }
      const state = this.drawerNode.dataset?.state;
      const drawrWidth = this.drawerNode.offsetWidth;
      let scrollThreshold = drawrWidth;
      let direction = -1;
      if (state === "show-drawer-right") {
        direction = 1;
        scrollThreshold = THRESHOLD;
      }
      // LTR scroll is positive while RTL scroll is negative.
      if (Math.abs(scrollPosition) > scrollThreshold) {
        displace = Math.sign(scrollPosition) * (drawrWidth + THRESHOLD);
      }
      displace *= direction;
      const transform = `translateX(${displace}px)`;
      if (openButton) {
        openButton.style.transform = transform;
      }
      this.drawerNode.style.transform = transform;
    }

    /**
     * Prevent drawer from overlapping an element.
     *
     * @param {HTMLElement} currentFocus
     */
    preventOverlap(currentFocus) {
      // Start position drawer (aka. left drawer) will never overlap with the page content.
      if (
        !this.isOpen ||
        this.drawerNode.dataset?.state === "show-drawer-left"
      ) {
        return;
      }
      const drawrWidth = this.drawerNode.offsetWidth;
      const element = currentFocus.getBoundingClientRect();

      // The this.boundingRect is calculated only once and it is reliable
      // for horizontal overlapping (which is the most common). However,
      // it is not reliable for vertical overlapping because the drawer
      // height can be changed by other elements like sticky footer.
      // To prevent recalculating the boundingRect on every
      // focusin event, we use horizontal overlapping as first fast check.
      let overlapping =
        element.right + THRESHOLD > this.boundingRect.left &&
        element.left - THRESHOLD < this.boundingRect.right;
      if (overlapping) {
        const currentBoundingRect = this.drawerNode.getBoundingClientRect();
        overlapping =
          element.bottom > currentBoundingRect.top &&
          element.top < currentBoundingRect.bottom;
      }

      if (overlapping) {
        // Force drawer to displace out of the page.
        let displaceOut = drawrWidth + 1;
        if (window.right_to_left()) {
          displaceOut *= -1;
        }
        this.displace(displaceOut);
      } else {
        // Reset drawer displacement.
        this.displace(window.scrollX);
      }
    }

    /**
     * Close all drawers.
     */
    static closeAllDrawers() {
      drawerMap.forEach((drawerInstance) => {
        drawerInstance.closeDrawer();
      });
    }

    /**
     * Close all drawers except for the specified drawer.
     *
     * @param {module:theme_universe/drawers} comparisonInstance
     */
    static closeOtherDrawers(comparisonInstance) {
      drawerMap.forEach((drawerInstance) => {
        if (drawerInstance === comparisonInstance) {
          return;
        }

        drawerInstance.closeDrawer();
      });
    }

    /**
     * Prevent drawers from covering the focused element.
     */
    static preventCoveringFocusedElement() {
      const currentFocus = document.activeElement;
      // Focus on page layout elements should be ignored.
      const pagecontent = document.querySelector(SELECTORS.PAGECONTENT);
      if (!currentFocus || !pagecontent?.contains(currentFocus)) {
        Drawers.displaceDrawers(window.scrollX);
        return;
      }
      drawerMap.forEach((drawerInstance) => {
        drawerInstance.preventOverlap(currentFocus);
      });
    }

    /**
     * Prevent drawer from covering the content when the page content covers the full page.
     *
     * @param {Number} displace
     */
    static displaceDrawers(displace) {
      drawerMap.forEach((drawerInstance) => {
        drawerInstance.displace(displace);
      });
    }
  }

  /**
   * Set the last used attribute for the last used toggle button for a drawer.
   *
   * @param {object} toggleButton The clicked button.
   */
  const setLastUsedToggle = (toggleButton) => {
    if (toggleButton.dataset.target) {
      document
        .querySelectorAll(
          `${SELECTORS.BUTTONS}[data-target="${toggleButton.dataset.target}"]`
        )
        .forEach((btn) => {
          btn.dataset.lastused = false;
        });
      toggleButton.dataset.lastused = true;
    }
  };

  /**
   * Set the focus to the last used button to open this drawer.
   * @param {string} target The drawer target.
   */
  const focusLastUsedToggle = (target) => {
    const lastUsedButton = document.querySelector(
      `${SELECTORS.BUTTONS}[data-target="${target}"][data-lastused="true"`
    );
    if (lastUsedButton) {
      lastUsedButton.focus();
    }
  };

  /**
   * Register the event listeners for the drawer.
   *
   * @private
   */
  const registerListeners = () => {
    // Listen for show/hide events.
    document.addEventListener("click", (e) => {
      const toggleButton = e.target.closest(SELECTORS.TOGGLEBTN);
      if (toggleButton && toggleButton.dataset.target) {
        e.preventDefault();
        const targetDrawer = document.getElementById(
          toggleButton.dataset.target
        );
        const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);
        setLastUsedToggle(toggleButton);

        drawerInstance.toggleVisibility();
      }

      const openDrawerButton = e.target.closest(SELECTORS.OPENBTN);
      if (openDrawerButton && openDrawerButton.dataset.target) {
        e.preventDefault();
        const targetDrawer = document.getElementById(
          openDrawerButton.dataset.target
        );
        const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);
        setLastUsedToggle(toggleButton);

        drawerInstance.openDrawer();
      }

      const closeDrawerButton = e.target.closest(SELECTORS.CLOSEBTN);
      if (closeDrawerButton && closeDrawerButton.dataset.target) {
        e.preventDefault();
        const targetDrawer = document.getElementById(
          closeDrawerButton.dataset.target
        );
        const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);

        drawerInstance.closeDrawer();
        focusLastUsedToggle(closeDrawerButton.dataset.target);
      }
    });

    // Close drawer when another drawer opens.
    document.addEventListener(Drawers.eventTypes.drawerShow, (e) => {
      if (isLarge()) {
        return;
      }
      Drawers.closeOtherDrawers(e.detail.drawerInstance);
    });

    // Tooglers and openers blur listeners.
    const btnSelector = `${SELECTORS.TOGGLEBTN}, ${SELECTORS.OPENBTN}, ${SELECTORS.CLOSEBTN}`;
    document.addEventListener("focusout", (e) => {
      const button = e.target.closest(btnSelector);
      if (button?.dataset.restoreTooltipOnBlur !== undefined) {
        enableButtonTooltip(button);
      }
    });

    const closeOnResizeListener = () => {
      if (isSmall()) {
        let anyOpen = false;
        drawerMap.forEach((drawerInstance) => {
          disableDrawerTooltips(drawerInstance.drawerNode);
          if (drawerInstance.isOpen) {
            if (drawerInstance.closeOnResize) {
              drawerInstance.closeDrawer();
            } else {
              anyOpen = true;
            }
          }
        });

        if (anyOpen) {
          getBackdrop()
            .then((backdrop) => backdrop.show())
            .catch();
        }
      } else {
        drawerMap.forEach((drawerInstance) => {
          enableDrawerTooltips(drawerInstance.drawerNode);
        });
        getBackdrop()
          .then((backdrop) => backdrop.hide())
          .catch();
      }
    };

    document.addEventListener("scroll", () => {
      const body = document.querySelector("body");
      if (window.scrollY >= window.innerHeight) {
        body.classList.add(CLASSES.SCROLLED);
      } else {
        body.classList.remove(CLASSES.SCROLLED);
      }
      // Horizontal scroll listener to displace the drawers to prevent covering
      // any possible sticky content.
      Drawers.displaceDrawers(window.scrollX);
    });

    const preventOverlap = debounce(Drawers.preventCoveringFocusedElement, 100);
    document.addEventListener("focusin", preventOverlap);
    document.addEventListener("focusout", preventOverlap);

    window.addEventListener("resize", debounce(closeOnResizeListener, 400));
  };

  registerListeners();

  const drawers = document.querySelectorAll(SELECTORS.DRAWERS);
  drawers.forEach((drawerNode) => Drawers.getDrawerInstanceForNode(drawerNode));

  return Drawers;
});