pyfedi/app/static/js/coolfieldset.js

(function () {
  function hideFieldsetContent(fieldset, options) {
    const content = fieldset.querySelectorAll('*:not(legend)');
    if (options.animation) {
      content.forEach((element) => {
        element.style.display = 'none';
      });
    } else {
      content.forEach((element) => {
        element.style.display = 'none';
      });
    }
    fieldset.classList.remove('expanded');
    fieldset.classList.add('collapsed');
    content.forEach((element) => {
      element.setAttribute('aria-expanded', 'false');
    });
    if (!options.animation) {
      fieldset.dispatchEvent(new Event('update'));
    }
  }

  function showFieldsetContent(fieldset, options) {
    const content = fieldset.querySelectorAll('*:not(legend)');
    if (options.animation) {
      content.forEach((element) => {
        element.style.display = '';
      });
    } else {
      content.forEach((element) => {
        element.style.display = '';
      });
    }
    fieldset.classList.remove('collapsed');
    fieldset.classList.add('expanded');
    content.forEach((element) => {
      element.setAttribute('aria-expanded', 'true');
    });
    if (!options.animation) {
      fieldset.dispatchEvent(new Event('update'));
    }
  }

  function doToggle(fieldset, setting) {
    if (fieldset.classList.contains('collapsed')) {
      showFieldsetContent(fieldset, setting);
    } else if (fieldset.classList.contains('expanded')) {
      hideFieldsetContent(fieldset, setting);
    }
  }

  function coolfieldset(selector, options) {
    const fieldsets = document.querySelectorAll(selector);
    const setting = { collapsed: false, animation: true, speed: 'medium', ...options };

    fieldsets.forEach((fieldset) => {
      const legend = fieldset.querySelector('legend');
      const content = fieldset.querySelectorAll('*:not(legend)');

      content.forEach((element) => {
        const wrapper = document.createElement('div');
        wrapper.classList.add('wrapper');
        element.parentNode.insertBefore(wrapper, element);
        wrapper.appendChild(element);
      });

      if (setting.collapsed) {
        hideFieldsetContent(fieldset, { animation: false });
      } else {
        fieldset.classList.add('expanded');
      }

      legend.addEventListener('click', () => doToggle(fieldset, setting));
    });
  }

  window.coolfieldset = coolfieldset;
})();

// Usage:
// coolfieldset('.coolfieldset', { collapsed: true, animation: true, speed: 'slow' });

document.addEventListener('DOMContentLoaded', function () {
  coolfieldset('.coolfieldset', { collapsed: true, animation: true, speed: 'slow' });
});