ElementorPro/assets/js/menu-title-keyboard-handler.255f6b16a2f292e5c260.bundle.js

/*! elementor-pro - v3.21.0 - 30-04-2024 */
"use strict";
(self["webpackChunkelementor_pro"] = self["webpackChunkelementor_pro"] || []).push([["menu-title-keyboard-handler"],{

/***/ "../modules/mega-menu/assets/js/frontend/handlers/menu-title-keyboard-handler.js":
/*!***************************************************************************************!*\
  !*** ../modules/mega-menu/assets/js/frontend/handlers/menu-title-keyboard-handler.js ***!
  \***************************************************************************************/
/***/ ((__unused_webpack_module, exports) => {



Object.defineProperty(exports, "__esModule", ({
  value: true
}));
exports["default"] = void 0;
class MenuTitleKeyboardHandler extends elementorModules.frontend.handlers.Base {
  __construct() {
    super.__construct(...arguments);
    this.focusableElementSelector = 'audio, button, canvas, details, iframe, input, select, summary, textarea, video, [accesskey], [contenteditable], a[href], area[href], [tabindex]';
    this.handleMenuToggleKeydown = this.handleMenuToggleKeydown.bind(this);
  }
  getDefaultSettings() {
    return {
      selectors: {
        widgetInnerWrapper: '.e-n-menu',
        menuItemWrapper: '.e-n-menu-title',
        menuItemElement: '.e-focus',
        itemContainer: '.e-n-menu-content > .e-con',
        menuToggle: '.e-n-menu-toggle'
      },
      ariaAttributes: {
        titleStateAttribute: 'aria-expanded',
        activeTitleSelector: '[aria-expanded="true"]',
        titleControlAttribute: 'aria-controls'
      },
      datasets: {
        titleIndex: 'data-focus-index'
      }
    };
  }
  getDefaultElements() {
    const selectors = this.getSettings('selectors');
    return {
      $menuItemWrappers: this.findElement(selectors.menuItemWrapper),
      $menuItemElements: this.findElement(selectors.menuItemElement),
      $itemContainers: this.findElement(selectors.itemContainer),
      $focusableContainerElements: this.getFocusableElements(this.findElement(selectors.itemContainer)),
      $menuToggle: this.findElement(selectors.menuToggle)
    };
  }
  getFocusableElements($elements) {
    return $elements.find(this.focusableElementSelector).not('[disabled], [inert], [tabindex="-1"]');
  }
  getTitleIndex(menuItemElement) {
    const {
      titleIndex: indexAttribute
    } = this.getSettings('datasets');
    return parseInt(menuItemElement?.getAttribute(indexAttribute));
  }
  getTitleFilterSelector(titleIndex) {
    const {
      titleIndex: indexAttribute
    } = this.getSettings('datasets');
    return `[${indexAttribute}="${titleIndex}"]`;
  }
  getActiveTitleElement() {
    const activeTitleFilter = this.getSettings('ariaAttributes').activeTitleSelector;
    return this.elements.$menuItemElements.filter(activeTitleFilter);
  }
  onInit() {
    super.onInit(...arguments);
    let focusTitleCount = 1;
    this.elements.$menuItemElements.each((index, title) => {
      title.setAttribute(this.getSettings('datasets').titleIndex, focusTitleCount++);
    });
  }
  getTitleEvents() {
    return {
      keydown: this.handleTitleKeyboardNavigation.bind(this)
    };
  }
  getContentElementEvents() {
    return {
      keydown: this.handleContentElementKeyboardNavigation.bind(this)
    };
  }
  bindEvents() {
    this.elements.$menuItemElements.on(this.getTitleEvents());
    this.elements.$focusableContainerElements.on(this.getContentElementEvents());
    this.elements.$menuToggle.on('keydown', this.handleMenuToggleKeydown);
  }
  unbindEvents() {
    this.elements.$menuItemElements.off();
    this.elements.$focusableContainerElements.off(this.getContentElementEvents());
    this.elements.$menuToggle.off('keydown', this.handleMenuToggleKeydown);
  }
  handleMenuToggleKeydown(event) {
    if ('Escape' !== event.key) {
      return;
    }
    event.preventDefault();
    event.stopPropagation();
    this.closeMenuDropdown();
  }
  handleTitleKeyboardNavigation(event) {
    switch (event.key) {
      case 'Tab':
        if (event.shiftKey) {
          this.closeActiveContentElements();
        } else {
          this.handleTitleTab(event);
        }
        break;
      case 'Home':
      case 'End':
        this.handleTitleHomeOrEndKey(event);
        break;
      case 'Enter':
      case ' ':
        this.handleTitleActivationKey(event);
        break;
      case 'Escape':
        this.handleTitleEscapeKey(event);
        break;
    }
  }
  handleTitleTab(event) {
    const currentTitleIndex = this.getTitleIndex(event.currentTarget);
    this.maybeFocusMenuToggle(event, currentTitleIndex);
    const $activeTitle = this.getActiveTitleElement(),
      activeTitleIndex = this.getTitleIndex($activeTitle[0]) || false,
      isActiveTitle = currentTitleIndex === activeTitleIndex,
      activeTitleControl = $activeTitle.attr(this.getSettings('ariaAttributes').titleControlAttribute),
      $activeContainer = this.elements.$itemContainers.filter(`#${activeTitleControl}`),
      activeContainerHasFocusableItems = 0 !== this.getFocusableElements($activeContainer).length;
    if (!isActiveTitle || !activeContainerHasFocusableItems) {
      this.closeActiveContentElements();
      return;
    }
    this.focusFirstFocusableContainerElement(event, activeTitleControl);
  }
  maybeFocusMenuToggle(event, titleIndex) {
    const isLastTitle = this.isLastTitle(titleIndex);
    if (!isLastTitle || !this.isDropdownLayout()) {
      return;
    }
    const activeStateAttribute = this.getSettings('ariaAttributes').titleStateAttribute,
      currentTitle = event.currentTarget,
      isContainerOpen = 'true' === currentTitle.getAttribute(activeStateAttribute),
      containerHasFocusableItems = 0 !== this.getFocusableElements(this.elements.$itemContainers.last()).length;
    if (isContainerOpen && containerHasFocusableItems) {
      return;
    }
    this.setFocusToMenuToggle();
    event.preventDefault();
    event.stopPropagation();
  }
  setFocusToMenuToggle() {
    const selectors = this.getSettings('selectors');
    this.$element.find(selectors.menuToggle).trigger('focus');
  }
  isDropdownLayout() {
    const selectors = this.getSettings('selectors');
    return 'dropdown' === this.$element.find(selectors.widgetInnerWrapper).attr('data-layout');
  }
  closeMenuDropdown() {
    elementorFrontend.elements.$window.trigger('elementor/mega-menu/dropdown-toggle-by-keyboard', {
      widgetId: this.getID(),
      show: false
    });
  }
  handleTitleHomeOrEndKey(event) {
    event.preventDefault();
    const currentTitleIndex = this.getTitleIndex(event.currentTarget) || 1,
      numberOfTitles = this.elements.$menuItemElements.length,
      titleIndexUpdated = this.getTitleIndexFocusUpdated(event, currentTitleIndex, numberOfTitles);
    this.setTitleFocus(titleIndexUpdated);
    event.stopPropagation();
  }
  handleTitleActivationKey(event) {
    event.preventDefault();
    if (this.handleTitleLinkEnterOrSpaceEvent(event)) {
      return;
    }
    const titleIndex = this.getTitleIndex(event.currentTarget);
    elementorFrontend.elements.$window.trigger('elementor/nested-elements/activate-by-keyboard', {
      widgetId: this.getID(),
      titleIndex
    });
  }
  setTitleFocus(titleIndexUpdated) {
    const $newTitle = this.elements.$menuItemElements.filter(this.getTitleFilterSelector(titleIndexUpdated));
    $newTitle.trigger('focus');
  }
  isLastTitle(titleIndex) {
    return this.elements.$menuItemElements.length === titleIndex;
  }
  handleTitleLinkEnterOrSpaceEvent(event) {
    const isLinkElement = 'a' === event?.currentTarget?.tagName?.toLowerCase();
    if (!elementorFrontend.isEditMode() && isLinkElement) {
      event?.currentTarget?.click();
      event.stopPropagation();
    }
    return isLinkElement;
  }
  handleTitleEscapeKey(event) {
    event.preventDefault();
    event.stopPropagation();
    if (this.isDropdownLayout()) {
      elementorFrontend.elements.$window.trigger('elementor/mega-menu/dropdown-toggle-by-keyboard', {
        widgetId: this.getID()
      });
      this.setFocusToMenuToggle();
    }
    elementorFrontend.elements.$window.trigger('elementor/nested-elements/activate-by-keyboard', {
      widgetId: this.getID()
    });
  }
  handleContentElementKeyboardNavigation(event) {
    switch (event.key) {
      case 'Tab':
        const tabDirection = event.shiftKey ? 'previous' : 'next';
        this.handleContentElementTabEvents(event, tabDirection);
        break;
      case 'Escape':
        event.preventDefault();
        event.stopPropagation();
        this.handleContentElementEscapeEvents(event);
        break;
    }
  }
  handleContentElementTabEvents(event, direction) {
    const $currentElement = jQuery(event.currentTarget),
      containerSelector = this.getSettings('selectors').itemContainer,
      $currentContainer = $currentElement.closest(containerSelector),
      $focusableContainerElements = this.getFocusableElements($currentContainer);
    let $lastFocusableElement;
    if ('previous' === direction) {
      $lastFocusableElement = $focusableContainerElements.first();
    } else {
      $lastFocusableElement = $focusableContainerElements.last();
    }
    const isCurrentElementLastFocusableElement = $currentElement.is($lastFocusableElement);
    if (!isCurrentElementLastFocusableElement) {
      return;
    }
    event.preventDefault();
    const $activeTitle = this.getActiveTitleElement(),
      activeTitleIndex = this.getTitleIndex($activeTitle[0]);
    this.setTitleFocus(activeTitleIndex);
    event.stopPropagation();
  }
  handleContentElementEscapeEvents() {
    this.getActiveTitleElement().trigger('focus');
    this.closeActiveContentElements();
  }
  focusFirstFocusableContainerElement(event, titleControl) {
    const currentContainerSelector = `#${titleControl}`,
      $activeContainer = this.elements.$itemContainers.filter(currentContainerSelector),
      $firstFocusableContainer = this.getFocusableElements($activeContainer).first();
    if (0 === $firstFocusableContainer.length) {
      return;
    }
    event.preventDefault();
    $firstFocusableContainer[0]?.focus();
    event.stopPropagation();
  }
  closeActiveContentElements() {
    elementorFrontend.elements.$window.trigger('elementor/nested-elements/activate-by-keyboard', {
      widgetId: this.getID()
    });
  }
}
exports["default"] = MenuTitleKeyboardHandler;

/***/ })

}]);
//# sourceMappingURL=menu-title-keyboard-handler.255f6b16a2f292e5c260.bundle.js.map