[Summary view] [Print] [Text view]

   1  // packages/block-library/build-module/accordion/view.js
   2  import { store, getContext, withSyncEvent } from "@wordpress/interactivity";
   3  var hashHandled = false;
   4  var { actions } = store(
   5    "core/accordion",
   6    {
   7      state: {
   8        get isOpen() {
   9          const { id, accordionItems } = getContext();
  10          const accordionItem = accordionItems.find(
  11            (item) => item.id === id
  12          );
  13          return accordionItem ? accordionItem.isOpen : false;
  14        }
  15      },
  16      actions: {
  17        toggle: () => {
  18          const context = getContext();
  19          const { id, autoclose, accordionItems } = context;
  20          const accordionItem = accordionItems.find(
  21            (item) => item.id === id
  22          );
  23          if (autoclose) {
  24            accordionItems.forEach((item) => {
  25              item.isOpen = item.id === id ? !accordionItem.isOpen : false;
  26            });
  27          } else {
  28            accordionItem.isOpen = !accordionItem.isOpen;
  29          }
  30        },
  31        handleKeyDown: withSyncEvent((event) => {
  32          if (event.key !== "ArrowUp" && event.key !== "ArrowDown" && event.key !== "Home" && event.key !== "End") {
  33            return;
  34          }
  35          event.preventDefault();
  36          const context = getContext();
  37          const { id, accordionItems } = context;
  38          const currentIndex = accordionItems.findIndex(
  39            (item) => item.id === id
  40          );
  41          let nextIndex;
  42          switch (event.key) {
  43            case "ArrowUp":
  44              nextIndex = Math.max(0, currentIndex - 1);
  45              break;
  46            case "ArrowDown":
  47              nextIndex = Math.min(
  48                currentIndex + 1,
  49                accordionItems.length - 1
  50              );
  51              break;
  52            case "Home":
  53              nextIndex = 0;
  54              break;
  55            case "End":
  56              nextIndex = accordionItems.length - 1;
  57              break;
  58          }
  59          const nextId = accordionItems[nextIndex].id;
  60          const nextButton = document.getElementById(nextId);
  61          if (nextButton) {
  62            nextButton.focus();
  63          }
  64        }),
  65        openPanelByHash: () => {
  66          if (hashHandled || !window.location?.hash?.length) {
  67            return;
  68          }
  69          const context = getContext();
  70          const { id, accordionItems, autoclose } = context;
  71          const hash = decodeURIComponent(
  72            window.location.hash.slice(1)
  73          );
  74          const targetElement = window.document.getElementById(hash);
  75          if (!targetElement) {
  76            return;
  77          }
  78          const panelElement = window.document.querySelector(
  79            '.wp-block-accordion-panel[aria-labelledby="' + id + '"]'
  80          );
  81          if (!panelElement || !panelElement.contains(targetElement)) {
  82            return;
  83          }
  84          hashHandled = true;
  85          if (autoclose) {
  86            accordionItems.forEach((item) => {
  87              item.isOpen = item.id === id;
  88            });
  89          } else {
  90            const targetItem = accordionItems.find(
  91              (item) => item.id === id
  92            );
  93            if (targetItem) {
  94              targetItem.isOpen = true;
  95            }
  96          }
  97          window.setTimeout(() => {
  98            targetElement.scrollIntoView();
  99          }, 0);
 100        }
 101      },
 102      callbacks: {
 103        initAccordionItems: () => {
 104          const context = getContext();
 105          const { id, openByDefault, accordionItems } = context;
 106          accordionItems.push({
 107            id,
 108            isOpen: openByDefault
 109          });
 110          actions.openPanelByHash();
 111        },
 112        hashChange: () => {
 113          hashHandled = false;
 114          actions.openPanelByHash();
 115        }
 116      }
 117    },
 118    { lock: true }
 119  );