[Summary view] [Print] [Text view]

   1  // packages/block-library/build-module/accordion/view.mjs
   2  import { store, getContext } 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        get isHidden() {
  16          const { id, accordionItems } = getContext();
  17          const accordionItem = accordionItems.find(
  18            (item) => item.id === id
  19          );
  20          return accordionItem?.isOpen ? null : "until-found";
  21        }
  22      },
  23      actions: {
  24        toggle: () => {
  25          const context = getContext();
  26          const { id, autoclose, accordionItems } = context;
  27          const accordionItem = accordionItems.find(
  28            (item) => item.id === id
  29          );
  30          if (autoclose) {
  31            accordionItems.forEach((item) => {
  32              item.isOpen = item.id === id ? !accordionItem.isOpen : false;
  33            });
  34          } else {
  35            accordionItem.isOpen = !accordionItem.isOpen;
  36          }
  37        },
  38        openPanelByHash: () => {
  39          if (hashHandled || !window.location?.hash?.length) {
  40            return;
  41          }
  42          const context = getContext();
  43          const { id, accordionItems, autoclose } = context;
  44          const hash = decodeURIComponent(
  45            window.location.hash.slice(1)
  46          );
  47          const targetElement = window.document.getElementById(hash);
  48          if (!targetElement) {
  49            return;
  50          }
  51          const panelElement = window.document.querySelector(
  52            '.wp-block-accordion-panel[aria-labelledby="' + id + '"]'
  53          );
  54          if (!panelElement || !panelElement.contains(targetElement)) {
  55            return;
  56          }
  57          hashHandled = true;
  58          if (autoclose) {
  59            accordionItems.forEach((item) => {
  60              item.isOpen = item.id === id;
  61            });
  62          } else {
  63            const targetItem = accordionItems.find(
  64              (item) => item.id === id
  65            );
  66            if (targetItem) {
  67              targetItem.isOpen = true;
  68            }
  69          }
  70          window.setTimeout(() => {
  71            targetElement.scrollIntoView();
  72          }, 0);
  73        },
  74        handleBeforeMatch: () => {
  75          const context = getContext();
  76          const { id, autoclose, accordionItems } = context;
  77          const accordionItem = accordionItems.find(
  78            (item) => item.id === id
  79          );
  80          if (accordionItem) {
  81            if (autoclose) {
  82              accordionItems.forEach((item) => {
  83                item.isOpen = item.id === id;
  84              });
  85            } else {
  86              accordionItem.isOpen = true;
  87            }
  88          }
  89        }
  90      },
  91      callbacks: {
  92        initAccordionItems: () => {
  93          const context = getContext();
  94          const { id, openByDefault, accordionItems } = context;
  95          accordionItems.push({
  96            id,
  97            isOpen: openByDefault
  98          });
  99          actions.openPanelByHash();
 100        },
 101        hashChange: () => {
 102          hashHandled = false;
 103          actions.openPanelByHash();
 104        }
 105      }
 106    },
 107    { lock: true }
 108  );