Popsu-coloque/web/core/themes/claro/js/vertical-tabs.es6.js

/**
 * @file
 * Defines vertical tabs functionality.
 *
 * This file replaces core/misc/vertical-tabs.js to fix some bugs in the
 * original implementation, as well as makes minor changes to enable Claro
 * designs:
 * 1. Replaces hard-coded markup and adds 'js-' prefixed CSS classes for the
 *    JavaScript functionality (https://www.drupal.org/node/3081489).
 *    - The original Drupal.behavior and Drupal.verticalTab object hard-code
 *      markup of the tab list and (the outermost) wrapper of the vertical tabs
 *      component.
 *    - The original Drupal.verticalTab object is built on the same (unprefixed)
 *      CSS classes that should be used only for theming the component:
 *      - .vertical-tabs__pane - replaced by .js-vertical-tabs-pane;
 *      - .vertical-tabs__menu-item - replaced by .js-vertical-tabs-menu-item;
 *      - .vertical-tab--hidden - replaced by .js-vertical-tab-hidden.
 * 2. Fixes accessibility bugs (https://www.drupal.org/node/3081500):
 *    - The original Drupal.verticalTab object doesn't take care of the right
 *      aria attributes. Every details summary element is described with
 *      aria-expanded="false" and aria-pressed="false".
 *    - The original Drupal.verticalTab object uses a non-unique CSS id
 *      '#active-vertical-tab' for the marker of the active menu tab. This leads
 *      to broken behavior on filter format and editor configuration form where
 *      multiple vertical tabs may appear
 *      (/admin/config/content/formats/manage/basic_html).
 *    - Auto-focus bug: if the vertical tab is activated by pressing enter on
 *      the vertical tab menu link, the original Drupal.verticalTab object tries
 *      to focus the first visible :input element in a vertical tab content. The
 *      implementation doesn't work in all scenarios. For example, on the
 *      'Filter format and editor' form
 *      (/admin/config/content/formats/manage/basic_html), if the user presses
 *      the enter key on the last vertical tabs element's menu link ('Filter
 *      settings'), the focused element will be the first vertical tabs
 *      ('CKEditor plugin settings') active input, and not the expected one.
 * 3. Consistency between browsers (https://www.drupal.org/node/3081508):
 *    We have to display the setting summary on the 'accordion look' as well.
 *    Using the original file, these are displayed only on browsers without
 *    HTML5 details support, where core's built-in core/misc/collapse.js HTML5
 *    details polyfill is in action.
 * 4. Help fulfill our custom needs (https://www.drupal.org/node/3081519):
 *    The original behavior applies its features only when the actual screen
 *    width is bigger than 640 pixels (or the value of the
 *    drupalSettings.widthBreakpoint). But we want to switch between the
 *    'accordion look' and 'tab look' dynamically, right after the browser
 *    viewport was resized, and not only on page load.
 *    This would be possible even by defining drupalSettings.widthBreakpoint
 *    with '0' value. But since the name of this configuration does not suggest
 *    that it is (and will be) used only by vertical tabs, it is much cleaner
 *    to remove the unneeded condition from the functionality.
 */

/**
 * Triggers when form values inside a vertical tab changes.
 *
 * This is used to update the summary in vertical tabs in order to know what
 * are the important fields' values.
 *
 * @event summaryUpdated
 */

(($, Drupal) => {
  /**
   * Show the parent vertical tab pane of a targeted page fragment.
   *
   * In order to make sure a targeted element inside a vertical tab pane is
   * visible on a hash change or fragment link click, show all parent panes.
   *
   * @param {jQuery.Event} e
   *   The event triggered.
   * @param {jQuery} $target
   *   The targeted node as a jQuery object.
   */
  const handleFragmentLinkClickOrHashChange = (e, $target) => {
    $target.parents('.js-vertical-tabs-pane').each((index, pane) => {
      $(pane)
        .data('verticalTab')
        .focus();
    });
  };

  /**
   * This script transforms a set of details into a stack of vertical tabs.
   *
   * Each tab may have a summary which can be updated by another
   * script. For that to work, each details element has an associated
   * 'verticalTabCallback' (with jQuery.data() attached to the details),
   * which is called every time the user performs an update to a form
   * element inside the tab pane.
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *   Attaches behaviors for vertical tabs.
   */
  Drupal.behaviors.claroVerticalTabs = {
    attach(context) {
      /**
       * Binds a listener to handle fragment link clicks and URL hash changes.
       */
      $('body')
        .once('vertical-tabs-fragments')
        .on(
          'formFragmentLinkClickOrHashChange.verticalTabs',
          handleFragmentLinkClickOrHashChange,
        );

      $(context)
        .find('[data-vertical-tabs-panes]')
        .once('vertical-tabs')
        .each(function initializeVerticalTabs() {
          const $this = $(this).addClass('vertical-tabs__items--processed');
          const focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
          let tabFocus;

          // Check if there are some details that can be converted to
          // vertical-tabs.
          const $details = $this.find('> details');
          if ($details.length === 0) {
            return;
          }

          // Create the tab column.
          const tabList = $(Drupal.theme.verticalTabListWrapper());
          $this
            .wrap(
              $(Drupal.theme.verticalTabsWrapper()).addClass(
                'js-vertical-tabs',
              ),
            )
            .before(tabList);

          // Transform each details into a tab.
          $details.each(function initializeVerticalTabItems() {
            const $that = $(this);
            /* eslint-disable new-cap */
            const verticalTab = new Drupal.verticalTab({
              title: $that.find('> summary').text(),
              details: $that,
            });
            /* eslint-enable new-cap */
            tabList.append(verticalTab.item);
            $that
              // prop() can't be used on browsers not supporting details
              // element, the style won't apply to them if prop() is used.
              .removeAttr('open')
              .addClass('js-vertical-tabs-pane')
              .data('verticalTab', verticalTab);
            if (this.id === focusID) {
              tabFocus = $that;
            }
          });

          if (!tabFocus) {
            // If the current URL has a fragment and one of the tabs contains an
            // element that matches the URL fragment, activate that tab.
            const $locationHash = $this.find(window.location.hash);
            if (window.location.hash && $locationHash.length) {
              tabFocus = $locationHash.is('.js-vertical-tabs-pane')
                ? $locationHash
                : $locationHash.closest('.js-vertical-tabs-pane');
            } else {
              tabFocus = $this.find('> .js-vertical-tabs-pane').eq(0);
            }
          }
          if (tabFocus.length) {
            tabFocus.data('verticalTab').focus(false);
          }
        });
    },
  };

  /**
   * The vertical tab object represents a single tab within a tab group.
   *
   * @constructor
   *
   * @param {object} settings
   *   Settings object.
   * @param {string} settings.title
   *   The name of the tab.
   * @param {jQuery} settings.details
   *   The jQuery object of the details element that is the tab pane.
   *
   * @fires event:summaryUpdated
   *
   * @listens event:summaryUpdated
   */
  Drupal.verticalTab = function verticalTab(settings) {
    const self = this;
    $.extend(this, settings, Drupal.theme('verticalTab', settings));

    this.item.addClass('js-vertical-tabs-menu-item');

    this.link.attr('href', `#${settings.details.attr('id')}`);

    this.detailsSummaryDescription = $(
      Drupal.theme.verticalTabDetailsDescription(),
    ).appendTo(this.details.find('> summary'));

    this.link.on('click', event => {
      event.preventDefault();
      self.focus();
    });

    this.details.on('toggle', event => {
      // We will control this by summary clicks.
      event.preventDefault();
    });

    // Open the tab for every browser, with or without details support.
    this.details
      .find('> summary')
      .on('click', event => {
        event.preventDefault();
        self.details.attr('open', true);
        if (self.details.hasClass('collapse-processed')) {
          setTimeout(() => {
            self.focus();
          }, 10);
        } else {
          self.focus();
        }
      })
      .on('keydown', event => {
        if (event.keyCode === 13) {
          // Set focus on the first input field of the current visible details/tab
          // pane.
          setTimeout(() => {
            self.details
              .find(':input:visible:enabled')
              .eq(0)
              .trigger('focus');
          }, 10);
        }
      });

    // Keyboard events added:
    // Pressing the Enter key will open the tab pane.
    this.link.on('keydown', event => {
      if (event.keyCode === 13) {
        event.preventDefault();
        self.focus();
        // Set focus on the first input field of the current visible details/tab
        // pane.
        self.details
          .find(':input:visible:enabled')
          .eq(0)
          .trigger('focus');
      }
    });

    this.details
      .on('summaryUpdated', () => {
        self.updateSummary();
      })
      .trigger('summaryUpdated');
  };

  Drupal.verticalTab.prototype = {
    /**
     * Displays the tab's content pane.
     *
     * @param {bool} triggerFocus
     *   Whether focus should be triggered for the summary element.
     */
    focus(triggerFocus = true) {
      this.details
        .siblings('.js-vertical-tabs-pane')
        .each(function closeOtherTabs() {
          const tab = $(this).data('verticalTab');
          if (tab.details.attr('open')) {
            tab.details
              .removeAttr('open')
              .find('> summary')
              .attr({
                'aria-expanded': 'false',
                'aria-pressed': 'false',
              });
            tab.item.removeClass('is-selected');
          }
        })
        .end()
        .siblings(':hidden.vertical-tabs__active-tab')
        .val(this.details.attr('id'));

      this.details
        .attr('open', true)
        .find('> summary')
        .attr({
          'aria-expanded': 'true',
          'aria-pressed': 'true',
        })
        .closest('.js-vertical-tabs')
        .find('.js-vertical-tab-active')
        .remove();

      if (triggerFocus) {
        const $summary = this.details.find('> summary');
        if ($summary.is(':visible')) {
          $summary.trigger('focus');
        }
      }
      this.item.addClass('is-selected');
      // Mark the active tab for screen readers.
      this.title.after(
        $(Drupal.theme.verticalTabActiveTabIndicator()).addClass(
          'js-vertical-tab-active',
        ),
      );
    },

    /**
     * Updates the tab's summary.
     */
    updateSummary() {
      const summary = this.details.drupalGetSummary();
      this.detailsSummaryDescription.html(summary);
      this.summary.html(summary);
    },

    /**
     * Shows a vertical tab pane.
     *
     * @return {Drupal.verticalTab}
     *   The verticalTab instance.
     */
    tabShow() {
      // Display the tab.
      this.item.removeClass('vertical-tabs__menu-item--hidden').show();
      // Show the vertical tabs.
      this.item.closest('.js-form-type-vertical-tabs').show();
      // Display the details element.
      this.details
        .removeClass('vertical-tab--hidden js-vertical-tab-hidden')
        .show();
      // Update first and last CSS classes for details.
      this.details
        .parent()
        .children('.js-vertical-tabs-pane')
        .removeClass('vertical-tabs__item--first vertical-tabs__item--last')
        .filter(':visible')
        .eq(0)
        .addClass('vertical-tabs__item--first');
      this.details
        .parent()
        .children('.js-vertical-tabs-pane')
        .filter(':visible')
        .eq(-1)
        .addClass('vertical-tabs__item--last');
      // Make tab active, but without triggering focus.
      this.focus(false);
      return this;
    },

    /**
     * Hides a vertical tab pane.
     *
     * @return {Drupal.verticalTab}
     *   The verticalTab instance.
     */
    tabHide() {
      // Hide this tab.
      this.item.addClass('vertical-tabs__menu-item--hidden').hide();
      // Hide the details element.
      this.details
        .addClass('vertical-tab--hidden js-vertical-tab-hidden')
        .hide();
      // Update first and last CSS classes for details.
      this.details
        .parent()
        .children('.js-vertical-tabs-pane')
        .removeClass('vertical-tabs__item--first vertical-tabs__item--last')
        .filter(':visible')
        .eq(0)
        .addClass('vertical-tabs__item--first');
      this.details
        .parent()
        .children('.js-vertical-tabs-pane')
        .filter(':visible')
        .eq(-1)
        .addClass('vertical-tabs__item--last');
      // Focus the first visible tab (if there is one).
      const $firstTab = this.details
        .siblings('.js-vertical-tabs-pane:not(.js-vertical-tab-hidden)')
        .eq(0);
      if ($firstTab.length) {
        $firstTab.data('verticalTab').focus(false);
      }
      // Hide the vertical tabs (if no tabs remain).
      else {
        this.item.closest('.js-form-type-vertical-tabs').hide();
      }
      return this;
    },
  };

  /**
   * Theme function for a vertical tab.
   *
   * @param {object} settings
   *   An object with the following keys:
   * @param {string} settings.title
   *   The name of the tab.
   *
   * @return {object}
   *   This function has to return an object with at least these keys:
   *   - item: The root tab jQuery element
   *   - link: The anchor tag that acts as the clickable area of the tab
   *       (jQuery version)
   *   - summary: The jQuery element that contains the tab summary
   */
  Drupal.theme.verticalTab = settings => {
    const tab = {};
    tab.item = $(
      '<li class="vertical-tabs__menu-item" tabindex="-1"></li>',
    ).append(
      (tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append(
        $('<span class="vertical-tabs__menu-link-content"></span>')
          .append(
            (tab.title = $(
              '<strong class="vertical-tabs__menu-link-title"></strong>',
            ).text(settings.title)),
          )
          .append(
            (tab.summary = $(
              '<span class="vertical-tabs__menu-link-summary"></span>',
            )),
          ),
      )),
    );
    return tab;
  };

  /**
   * Wrapper of the menu and the panes.
   *
   * @return {string}
   *   A string representing the DOM fragment.
   */
  Drupal.theme.verticalTabsWrapper = () =>
    '<div class="vertical-tabs clearfix"></div>';

  /**
   * The wrapper of the vertical tab menu items.
   *
   * @return {string}
   *   A string representing the DOM fragment.
   */
  Drupal.theme.verticalTabListWrapper = () =>
    '<ul class="vertical-tabs__menu"></ul>';

  /**
   * The wrapper of the details summary message added to the summary element.
   *
   * @return {string}
   *   A string representing the DOM fragment.
   */
  Drupal.theme.verticalTabDetailsDescription = () =>
    '<span class="vertical-tabs__details-summary-summary"></span>';

  /**
   * Themes the active vertical tab menu item message.
   *
   * @return {string}
   *   A string representing the DOM fragment.
   */
  Drupal.theme.verticalTabActiveTabIndicator = () =>
    `<span class="visually-hidden">${Drupal.t('(active tab)')}</span>`;
})(jQuery, Drupal);