Onglets

$prefix-list: 'tabs-list';
$prefix-header: 'tabs-header';
$prefix-button: 'tabs-button';

.tabs__header {
  --wrap: wrap;

  align-items: stretch;
  display: flex;
  flex-wrap: var(--wrap);
  max-width: 100%;
}

.tabs__header--addon {
  margin-inline-start: auto;

  @media (max-width: $screen-sm) {
    flex-basis: 100%;
  }
}

.tabs__limit-popover:popover-open menu {
  align-items: start;
  display: flex;
  flex-direction: column;
  list-style: none;
}

.tabs__list {
  @include custom-space($prefix-list, true);

  align-items: stretch;
  display: flex;
  flex-wrap: var(--wrap);
  list-style: none;
  margin: var(--space-0);
}

.tabs__button,
.tabs__button.button--tertiary.button--accent { // pour le dropdown
  @include custom-typo($prefix-button, true);
  @include custom-color($prefix-button, true);
  @include custom-space($prefix-button, true);
  @include custom-border($prefix-button, true);

  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  white-space: nowrap;

  .icon {
    @include custom-icon;
  }

  svg {
    flex-shrink: 0;
  }
}

.tabs__button--current,
.tabs__button[aria-selected='true'] {
  @include custom-color($prefix-button);

  .icon {
    @include custom-icon-color;
  }
}

.tabs__panel {
  padding-block: var(--space-4);
}

.tabs--box {
  .tabs__header {
    border-bottom: var(--line-2xs) solid var(--neutral-30);
    justify-content: center;
    max-width: none;
    padding-block-start: var(--space-4);
  }

  .tabs__item {
    border-bottom: none;
  }

  .tabs__panel:has(> .box) {
    padding-block: var(--space-0);
  }
}

.tabs--skin-tabs {
  .tabs__header {
    @include custom-color-fill($prefix-header, true);
    @include custom-color-stroke($prefix-header, true);
    @include custom-border($prefix-header, true);
  }

  .button[aria-selected='true'] {
    --button-content: var(--color1-10);
    --button-fill: var(--color1-70);
    --icon-foreground: var(--color1-10);
  }
}

.tabs--skin-tabs, .tabs--skin-pills {
  &.tabs--sm,
  &.tabs--md,
  &.tabs--lg,
  &.tabs--xl {
    .tabs__button,
    .tabs__button.button--tertiary.button--accent {
      @include custom-space($prefix-button);
      @include custom-border($prefix-button);

      .icon {
        @include custom-icon-size;
      }
    }
  }

  .button {
    --button-stroke: transparent;
  }

  .tabs__button:hover {
    @include custom-color($prefix-button);

    text-decoration: none;

    .icon {
      @include custom-icon-color;
    }
  }

  .tabs__button:focus {
    @include custom-color($prefix-button);

    .icon {
      @include custom-icon-color;
    }
  }
}

/**
 * Affiche un élement.
 * @param {HTMLElement} element - Element à afficher
 * @return {undefined}
 */
export function show(element) {
  element?.classList.remove('hidden');
}

/**
 * Cache un élement.
 * @param {HTMLElement} element - Element à cacher
 * @return {undefined}
 */
export function hide(element) {
  element?.classList.add('hidden');
}

/**
 * Sélectionne tab parmi les tabs.
 * @param {HTMLElement} tab le tab à sélectionner
 * @return {undefined}
 */
export function select(tab) {
  if (!tab) {
    return;
  }

  tab.closest('.js-tabs__list').querySelectorAll('.js-tabs__button').forEach((currentTab) => {
    currentTab.setAttribute('aria-selected', 'false');
    currentTab.setAttribute('tabindex', '-1');
    hide(getPanel(currentTab));
  });
  tab.setAttribute('aria-selected', 'true');
  tab.removeAttribute('tabindex');
  const panel = getPanel(tab);
  show(panel);
  tab.dispatchEvent(new CustomEvent('tab:change'));
}

/**
 * Récupère le panel associé à un tab.
 * @param {HTMLElement} tab le tab
 * @return {HTMLElement} le panel associé au tab
 */
function getPanel(tab) {
  return document.getElementById(tab.getAttribute('aria-controls'));
}

import {show, hide, select} from './tabs-core.js'
import {throttle} from './tabs-utils.js';

/**
 * Préparation de la limite des onglets basée sur la largeur du header.
 * @param {HTMLElement} tabs les onglets
 */
export function initEventsDropdown(tabs) {
  const dropdown = getDropdown(tabs);
  if (!dropdown) {
    return;
  }
  dropdown.addEventListener('keyup', handleKeyupDropdownButton(dropdown));
  dropdown.addEventListener('keydown', noGlobalScroll, {capture: true});
  dropdown.popoverTargetElement.addEventListener('keyup', handleKeyupDropdown(dropdown));
  dropdown.popoverTargetElement.addEventListener('click', handleClickDropdown(dropdown));
  dropdown.popoverTargetElement.addEventListener('keydown', noGlobalScroll, {capture: true});
}

/**
 * Préparation de la limite des onglets basée sur la largeur du header.
 * @param {HTMLElement} tabs les onglets
 */
export function prepareLimit(tabs) {
  const tabsHeader = tabs.querySelector(':scope > .js-tabs__header');
  const tabsList = tabsHeader.querySelector(':scope > .js-tabs__list');
  const dropdown = tabsList.querySelector(`[data-dropdown="${tabsList.dataset.scope}"]`);
  const dropdownMenu = document.createElement('ul');
  dropdownMenu.classList.add('u-list-naked');
  dropdown.popoverTargetElement.appendChild(dropdownMenu);
  createResizeObserver(tabsHeader, tabsList, dropdown, dropdownMenu);
  createMutationObserver(tabsHeader, tabsList, dropdown, dropdownMenu);
}

/**
 * Observe les modifications de taille de la barre d'onglets
 * @param {HTMLElement} tabsHeader conteneur sur lequel la largeur est testée
 * @param {HTMLElement} tabsList liste des onglets
 * @param {HTMLButtonElement} dropdown bouton dropdown
 * @param {HTMLElement} popoverTarget cible de rangement des onglets
 */
function createResizeObserver(tabsHeader, tabsList, dropdown, popoverTarget) {
  const resizeObserver = new ResizeObserver(() => {
    throttledAdapt(tabsHeader, tabsList, dropdown, popoverTarget);
  });
  resizeObserver.observe(tabsHeader);
  adapt(tabsHeader, tabsList, dropdown, popoverTarget);
}

/**
 * Observe les modifications de taille de la barre d'onglets
 * @param {HTMLElement} tabsHeader conteneur sur lequel la largeur est testée
 * @param {HTMLElement} tabsList liste des onglets
 * @param {HTMLButtonElement} dropdown bouton dropdown
 * @param {HTMLElement} popoverTarget cible de rangement des onglets
 */
function createMutationObserver(tabsHeader, tabsList, dropdown, popoverTarget) {
  const mutationObserver = new MutationObserver(() => {
    updateDropdown(tabsHeader, dropdown, popoverTarget);
  });
  mutationObserver.observe(popoverTarget, {subtree: true, attributes: true, attributeFilter: ['aria-selected']});
}

/**
 * Décide du titre à afficher pour le bouton « plus d'onglets»
 * @param {HTMLElement} tabsHeader conteneur sur lequel la largeur est testée
 * @param {HTMLButtonElement} dropdown bouton dropdown
 * @param {HTMLElement} popoverTarget cible de rangement des onglets
 */
function updateDropdown(tabsHeader, dropdown, popoverTarget) {
  const selectedEntry = popoverTarget.querySelector(':scope [aria-selected="true"]');
  const dropdownTitleElement = dropdown.querySelector(':scope .u-popover__title');
  if (selectedEntry) {
    if (!dropdownTitleElement.dataset.oldTitle) {
      dropdownTitleElement.dataset.oldTitle = dropdownTitleElement.innerHTML;
    }
    dropdownTitleElement.innerHTML = selectedEntry.querySelector('.js-tabs__label').innerHTML;
    dropdown.setAttribute('aria-selected', 'true');
    dropdown.setAttribute('tabindex', '0');
  } else {
    dropdown.setAttribute('aria-selected', 'false');
    dropdown.setAttribute('tabindex', '-1');
  }
  if (!selectedEntry && dropdownTitleElement.dataset.oldTitle) {
    dropdownTitleElement.innerHTML = dropdownTitleElement.dataset.oldTitle;
  }
}

/**
 * Adaptation des onglets si trop large
 * @param {HTMLElement} tabsHeader conteneur sur lequel la largeur est testée
 * @param {HTMLElement} tabsList liste des onglets
 * @param {HTMLButtonElement} dropdown bouton dropdown
 * @param {HTMLElement} popoverTarget cible de rangement des onglets
 */
function adapt(tabsHeader, tabsList, dropdown, popoverTarget) {
  updateDropdown(tabsHeader, dropdown, popoverTarget);
  popAllTabs(tabsList, popoverTarget);
  show(dropdown);
  while (isOverflown(tabsList, tabsHeader) && tabsList.querySelectorAll(':scope > .js-tabs__item').length > 0) {
    const toMove = Array.from(tabsList.querySelectorAll(':scope > .js-tabs__item')).at(-1);
    toMove.removeAttribute('tabindex');
    popoverTarget.prepend(toMove);
  }
  if (popoverTarget.querySelectorAll(':scope > .js-tabs__item').length === 0) {
    hide(dropdown);
  }
  tabsList.append(dropdown.parentElement);
  updateDropdown(tabsHeader, dropdown, popoverTarget);
}

/**
 * Version limitée de `adapt`.
 * @type {Function}
 */
const throttledAdapt = throttle(adapt, 50);

/**
 * Sort tous les boutons du popover s'arrête si l'un d'entre eux est sélectionné.
 * @param {HTMLElement} tabsList liste des onglets
 * @param {HTMLElement} popoverTarget cible de rangement des onglets
 */
function popAllTabs(tabsList, popoverTarget) {
  let nextTab = popoverTarget.querySelector('.js-tabs__item');
  while (nextTab) {
    tabsList.append(nextTab);
    nextTab = popoverTarget.querySelector('.js-tabs__item');
  }
}

/**
 * Vérifie si un élément est plus large que l'espace qui lui ai réversé
 * @param {HTMLElement} element élément sur lequel la largeur est testée
 * @param {HTMLElement} parent conteneur dans lequel la largeur est testée
 * @return {boolean} true si le flex du conteneur a déclenché le wrap et qu'un élément est plus «bas» que le conteneur
 */
function isOverflown(element, parent) {

  const availableWidth = parent.getBoundingClientRect().width - Array.from(parent.children)
    .filter(i => i !== element)
    .map(i => i.getBoundingClientRect().width)
    .reduce((a,c) => a+c, 0);

  return element.getBoundingClientRect().width > availableWidth - 50;
}

/**
 * Fabrique de gestionnaire d'événements clavier pour les items du dropdown.
 * @param {HTMLButtonElement} dropdown bouton du menu
 * @return {EventListener} le gestionnaire
 */
function handleKeyupDropdown(dropdown) {
  const keysAction = {
    ArrowDown: focusNextItemDropdown,
    ArrowUp: focusPreviousItemDropdown,
    Home: openFirstItemDropdown,
    End: openLastItemDropdown
  };

  /**
   * Gestionnaire d'événement clavier pour les dropdowns.
   * @param {KeyboardEvent} event event
   */
  return function handleKeyupEventHandler(event) {
    event.stopPropagation();
    const buttons = Array.from(dropdown.popoverTargetElement.querySelectorAll('.js-tabs__button'));
    const currentButtonIndex = buttons.findIndex((b) => b.id === event.target.id);
    if (Object.hasOwn(keysAction, event.key)) {
      keysAction[event.key]({currentButtonIndex, event, buttons, dropdown});
    }
  }
}

/**
 * Fabrique de gestionnaire d'événements clavier pour les items du dropdown.
 * @param {HTMLButtonElement} dropdown bouton du menu
 * @return {EventListener} le gestionnaire
 */
function handleKeyupDropdownButton(dropdown) {

  /**
   * Gestionnaire d'événement clavier pour les dropdowns.
   * @param {KeyboardEvent} event event
   */
  return function handleKeyupEventHandler(event) {
    event.stopPropagation();
    event.preventDefault();
    const buttons = Array.from(dropdown.popoverTargetElement.querySelectorAll('.js-tabs__button'));
    if (event.key === 'ArrowDown') {
      openFirstItemDropdown({buttons});
    }
  }
}
/**
 * Empêche le scroll lorsque l'utilisateur utilise les flèches haut et bas sur le dropdown.
 * @param {KeyboardEvent} event event
 */
function noGlobalScroll(event) {
  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
    event.stopImmediatePropagation();
    event.preventDefault();
  }
}

/**
 * Sélectionne l'onglet du popover.
 * @param {HTMLButtonElement} dropdown le bouton de popover
 * @param {Event} event l'événement déclencheur
 */
function selectTab({dropdown, event}) {
  const currentTab = event.target.closest('.js-tabs__button');
  select(currentTab);
  dropdown.setAttribute('aria-selected', 'true');
  dropdown.setAttribute('tabindex', '0');
  dropdown.popoverTargetElement.hidePopover();
}

/**
 * Fabrique de gestionnaire d'événements de click pour le dropdown.
 * @param {HTMLButtonElement} dropdown bouton du menu
 * @return {EventListener} le gestionnaire
 */
function handleClickDropdown(dropdown) {

  /**
   * Gestionnaire d'événement click pour le dropdown.
   * @param {MouseEvent} event event
   */
  return function handleClickDropdownHandler(event) {
    selectTab({dropdown, event});
  }
}

/**
 * Active l'élément suivant dans le dropdown.
 * @param {Number} currentButtonIndex index du menu courrant
 * @param {HTMLButtonElement[]} buttons tableau des buttons du menu
 */
function focusNextItemDropdown({currentButtonIndex, buttons}) {
  if (currentButtonIndex < buttons.length) {
    buttons[currentButtonIndex + 1]?.focus();
  }
}

/**
 * Active l'élément précédent dans le dropdown.
 * @param {Number} currentButtonIndex index du menu courrant
 * @param {HTMLButtonElement[]} buttons tableau des buttons du menu
 */
function focusPreviousItemDropdown({currentButtonIndex, buttons}) {
  if (currentButtonIndex > 0) {
    buttons[currentButtonIndex - 1]?.focus();
  }
}

/**
 * Active le premier élément dans le dropdown.
 * @param {HTMLButtonElement[]} buttons tableau des buttons du menu
 */
function openFirstItemDropdown({buttons}) {
  buttons[0]?.focus();
}

/**
 * Active le dernier élément dans le dropdown.
 * @param {HTMLButtonElement[]} buttons tableau des buttons du menu
 */
function openLastItemDropdown({buttons}) {
  buttons[buttons.length - 1]?.focus();
}

/**
 * Récupère le dropdown si présent.
 * @param {HTMLElement} tabs
 * @return {HTMLButtonElement} dropdown
 */
export function getDropdown(tabs) {
  return tabs.querySelector(`[data-dropdown="${tabs.dataset.key}"]`);
}

import {select} from './tabs-core.js'
import {getDropdown} from './tabs-limit.js';

/**
 * Application des recommandations présentent ici : https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 */
/**
 * Initialise les événements des boutons des onglets.
 * @param {HTMLElement} tabs les onglets
 * @param {HTMLButtonElement[]} tabButtons les boutons des onglets
 * @return {undefined}
 */
export function initEventsButton(tabs, tabButtons) {
  tabs.addEventListener('keyup', handleTabsKeyup(tabs), true);
  for (const currentTab of tabButtons) {
    currentTab.addEventListener('focus', handleClickHandler, true);
  }
}

/**
 * Fonction permettant de gérer les événements de type 'focus' sur les onglets.
 * @param {Event} event l'événement créé par le click.
 * @return {undefined}
 */
function handleClickHandler(event) {
  event.preventDefault();
  select(event.currentTarget);
}

/**
 * Active l'onglet ou le dropdown.
 * @param {HTMLButtonElement} tab l'onglet à activer
 */
function focusTab(tab) {
  tab?.focus();
}

/**
 * Active l'onglet précédent.
 * @param {Number} currentTabIndex index de l'onglet courant
 * @param {HTMLButtonElement[]} tabs tableau des onglets
 */
function focusPreviousTab({currentTabIndex, tabs}) {
  if (currentTabIndex > 0) {
    focusTab(tabs[currentTabIndex - 1]);
  }
}

/**
 * Active l'onglet suivant.
 * @param {Number} currentTabIndex index de l'onglet courant
 * @param {HTMLButtonElement[]} tabs tableau des onglets
 */
function focusNextTab({currentTabIndex, tabs}) {
  if (currentTabIndex !== -1 && currentTabIndex < tabs.length - 1) {
    focusTab(tabs[currentTabIndex + 1]);
  }
}

/**
 * Active le premier onglet.
 * @param {HTMLElement[]} tabs tableau des onglets
 */
function focusFirstTab({tabs}) {
  focusTab(tabs[0]);
}

/**
 * Active le dernier onglet.
 * @param {HTMLElement[]} tabs tableau des onglets
 */
function focusLastTab({tabs}) {
  focusTab(tabs[tabs.length - 1]);
}

/**
 * Fabrique pour la gestion des événements des onglets.
 * @param {HTMLElement} tabs les onglets
 * @return {EventListener} le gestionnaire
 */
function handleTabsKeyup(tabs) {
  /**
   * Fonction permettant de gérer les événements de type 'click' sur les onglets.
   * @param {Event} event l'événement créé par le click.
   * @returns {void}
   */
  return function tabsKeyupHandler(event) {
    if (event.target.closest(`[data-key]`).dataset.key !== tabs.dataset.key) {
      return;
    }
    const tabButtonsList = Array.from(tabs.querySelectorAll(`[data-scope="${tabs.dataset.key}"] > .js-tabs__item > .js-tabs__button--focusable`));
    const dropdown = getDropdown(tabs);
    if (dropdown) {
      tabButtonsList.push(dropdown);
    }
    const currentTabIndex = tabButtonsList.findIndex((t) => t.getAttribute('aria-selected') === 'true');
    const keysAction = {
      ArrowLeft: focusPreviousTab,
      ArrowRight: focusNextTab,
      Home: focusFirstTab,
      End: focusLastTab
    };
    if (Object.hasOwn(keysAction, event.key)) {
      keysAction[event.key]({currentTabIndex, tabs: tabButtonsList});
    }
  };
}

/**
 * Évite qu'une fonction soit appelée trop fréquemment.
 * @param {Function} func la function
 * @param {number} limit
 * @return {Function} la même fonction mais avec la limite
 */
export function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return (...args) => {
    const delta = Date.now() - (lastRan ?? 0);
    if (!lastRan) {
      func(...args);
      lastRan = Date.now();
    } else {
      if (delta > limit) {
        func(...args);
        lastRan = Date.now();
      } else {
        clearTimeout(lastFunc);
        lastFunc = setTimeout(() => {
          func(...args);
          lastRan = Date.now();
        }, Math.max(0, limit - delta));
      }
    }
  };
}

import {initEventsDropdown, prepareLimit} from './tabs-limit.js';
import {initEventsButton} from './tabs-navigation.js';
import {select} from './tabs-core.js';
import {onPageReady} from '/static/js/script-loader-helper.js';

export function initTabs(tabs) {
  const tabButtonsList = Array.from(tabs.querySelectorAll(`[data-scope="${tabs.dataset.key}"] > .js-tabs__item > .js-tabs__button`));
  initEventsButton(tabs, tabButtonsList);
  let selectedTab = tabs.querySelector(`[data-scope="${tabs.dataset.key}"] > .js-tabs__item > .js-tabs__button[data-selected="true"]`);
  if (selectedTab) {
    selectedTab.removeAttribute('data-selected');
  } else {
    selectedTab = tabButtonsList[0];
  }
  select(selectedTab);
}

/**
 * Attente que la page soit entièrement chargée.
 */
onPageReady(() => {

  /**
   * Initialisation des onglets.
   */
  document.querySelectorAll('.js-tabs').forEach((tabs) => {
    initTabs(tabs);
  });

  /**
   * Préparation des limites
   */
  document.querySelectorAll('.js-tabs.tabs--limited:not(.js-limit--initialized)').forEach((tabs) => {
    prepareLimit(tabs);
    initEventsDropdown(tabs);
    tabs.classList.add('js-limit--initialized');
  });
});