[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) {
  40            return;
  41          }
  42          const context = getContext();
  43          const { id, accordionItems, autoclose } = context;
  44          const targetElement = document.querySelector(":target");
  45          if (!targetElement) {
  46            return;
  47          }
  48          const panelElement = window.document.querySelector(
  49            '.wp-block-accordion-panel[aria-labelledby="' + id + '"]'
  50          );
  51          if (!panelElement || !panelElement.contains(targetElement)) {
  52            return;
  53          }
  54          hashHandled = true;
  55          if (autoclose) {
  56            accordionItems.forEach((item) => {
  57              item.isOpen = item.id === id;
  58            });
  59          } else {
  60            const targetItem = accordionItems.find(
  61              (item) => item.id === id
  62            );
  63            if (targetItem) {
  64              targetItem.isOpen = true;
  65            }
  66          }
  67          window.setTimeout(() => {
  68            targetElement.scrollIntoView();
  69          }, 0);
  70        },
  71        handleBeforeMatch: () => {
  72          const context = getContext();
  73          const { id, autoclose, accordionItems } = context;
  74          const accordionItem = accordionItems.find(
  75            (item) => item.id === id
  76          );
  77          if (accordionItem) {
  78            if (autoclose) {
  79              accordionItems.forEach((item) => {
  80                item.isOpen = item.id === id;
  81              });
  82            } else {
  83              accordionItem.isOpen = true;
  84            }
  85          }
  86        }
  87      },
  88      callbacks: {
  89        initAccordionItems: () => {
  90          const context = getContext();
  91          const { id, openByDefault, accordionItems } = context;
  92          accordionItems.push({
  93            id,
  94            isOpen: openByDefault
  95          });
  96          actions.openPanelByHash();
  97        },
  98        hashChange: () => {
  99          hashHandled = false;
 100          actions.openPanelByHash();
 101        }
 102      }
 103    },
 104    { lock: true }
 105  );