Add a toggle to collapse/expand all page panels at once. Fix #9152 (#9167)

CHANGELOG.txt

@@ -23,6 +23,7 @@ Changelog
  * Update expanding formset add buttons to use `button` not link for behaviour (LB (Ben) Johnston)
  * Add robust unit testing for authentication scenarios across the user management admin pages (Mehrdad Moradizadeh)
  * Avoid assuming an integer PK named 'id' on multiple upload views (Matt Westcott)
+ * Add a toggle to collapse/expand all page panels at once (Helen Chapman)
  * Fix: Prevent `PageQuerySet.not_public` from returning all pages when no page restrictions exist (Mehrdad Moradizadeh)
  * Fix: Ensure that duplicate block ids are unique when duplicating stream blocks in the page editor (Joshua Munn)
  * Fix: Revise colour usage so that privacy & locked indicators can be seen in Windows High Contrast mode (LB (Ben Johnston))

client/src/entrypoints/admin/wagtailadmin.js

@@ -9,6 +9,7 @@ import initSidePanel from '../../includes/sidePanel';
 import {
   initAnchoredPanels,
   initCollapsiblePanels,
+  initCollapseAllPanels,
 } from '../../includes/panels';
 
 if (process.env.NODE_ENV === 'development') {
@@ -38,6 +39,7 @@ document.addEventListener('DOMContentLoaded', () => {
   initCollapsibleBreadcrumbs();
   initSidePanel();
   initCollapsiblePanels();
+  initCollapseAllPanels();
 });
 
 /**

client/src/includes/panels.ts

@@ -4,13 +4,20 @@
  */
 const toggleCollapsiblePanel = (
   toggle: HTMLButtonElement,
-  content: HTMLElement,
   // If a specific state isn’t requested, read the DOM and toggle.
-  expanded = !(toggle.getAttribute('aria-expanded') === 'true'),
+  isExpanding = !(toggle.getAttribute('aria-expanded') === 'true'),
 ) => {
-  toggle.setAttribute('aria-expanded', `${expanded}`);
+  const content = document.querySelector<HTMLDivElement>(
+    `#${toggle.getAttribute('aria-controls')}`,
+  );
 
-  if (expanded) {
+  if (!content) {
+    return;
+  }
+
+  toggle.setAttribute('aria-expanded', `${isExpanding}`);
+
+  if (isExpanding) {
     content.removeAttribute('hidden');
   } else if ('onbeforematch' in document.body) {
     // Use experimental `until-found` value, so users can search inside the panels.
@@ -27,7 +34,7 @@ const toggleCollapsiblePanel = (
     new CustomEvent('wagtail:panel-toggle', {
       bubbles: true,
       cancelable: false,
-      detail: { expanded },
+      detail: { expanded: isExpanding },
     }),
   );
 };
@@ -46,7 +53,7 @@ function initCollapsiblePanel(toggle: HTMLButtonElement) {
     return;
   }
 
-  const togglePanel = toggleCollapsiblePanel.bind(null, toggle, content);
+  const togglePanel = toggleCollapsiblePanel.bind(null, toggle);
 
   // Collapse panels marked as `collapsed`, unless they contain invalid fields.
   const hasCollapsed = panel.classList.contains('collapsed');
@@ -78,6 +85,51 @@ export function initCollapsiblePanels(
   toggles.forEach(initCollapsiblePanel);
 }
 
+/**
+ * Initialises event handlers for collapsing / expanding all panels
+ */
+export function initCollapseAllPanels(
+  button = document.querySelector<HTMLButtonElement>(
+    '[data-all-panels-toggle]',
+  ),
+) {
+  if (!button) {
+    return;
+  }
+
+  const expandText = button.getAttribute('data-expand-text');
+  const collapseText = button.getAttribute('data-collapse-text');
+
+  if (!button || !expandText || !collapseText) {
+    return;
+  }
+
+  button.addEventListener('click', () => {
+    const isExpanding = !(button.getAttribute('aria-expanded') === 'true');
+
+    // Find all panel toggles within the same form as the button,
+    // excluding the special "title" panel that has no toggle.
+    const toggles = button
+      .closest('form')
+      ?.querySelectorAll<HTMLButtonElement>(
+        '[data-panel]:not(.title) [data-panel-toggle]',
+      );
+
+    if (!toggles) {
+      return;
+    }
+
+    button.setAttribute('aria-expanded', `${isExpanding}`);
+
+    toggles.forEach((toggle: HTMLButtonElement) => {
+      toggleCollapsiblePanel(toggle, isExpanding);
+    });
+
+    // eslint-disable-next-line no-param-reassign
+    button.innerText = isExpanding ? collapseText : expandText;
+  });
+}
+
 /**
  * Smooth scroll onto any active panel.
  * Needs to run after the whole page is loaded so the browser can resolve any

docs/releases/4.1.md

@@ -32,6 +32,7 @@ Wagtail 4.1 is designated a Long Term Support (LTS) release. Long Term Support r
  * Update expanding formset add buttons to use `button` not link for behaviour and remove support for disabled as a class (LB (Ben) Johnston)
  * Add robust unit testing for authentication scenarios across the user management admin pages (Mehrdad Moradizadeh)
  * Avoid assuming an integer PK named 'id' on multiple upload views (Matt Westcott)
+ * Add a toggle to collapse/expand all page panels at once (Helen Chapman)
 
 ### Bug fixes
 

wagtail/admin/templates/wagtailadmin/pages/create.html

@@ -14,6 +14,10 @@
 
     <form id="page-edit-form" action="{% url 'wagtailadmin_pages:add' content_type.app_label content_type.model parent_page.id %}" method="POST" novalidate{% if form.is_multipart %} enctype="multipart/form-data"{% endif %} data-edit-form>
         {% csrf_token %}
+
+        {# Note that the position of the button within the form allows the js to collapse / expand only those panels within the same form #}
+        {% include "wagtailadmin/shared/collapse_all_toggle.html" %}
+
         <input type="hidden" name="next" value="{{ next }}">
 
         {% if parent_page.is_root %}

wagtail/admin/templates/wagtailadmin/pages/edit.html

@@ -15,9 +15,13 @@
     </div>
 
     {% block form %}
+
         <form id="page-edit-form" action="{% url 'wagtailadmin_pages:edit' page.id %}" method="POST" novalidate{% if form.is_multipart %} enctype="multipart/form-data"{% endif %} data-edit-form>
             {% csrf_token %}
 
+            {# Note that the position of the button within the form allows the js to collapse / expand only those panels within the same form #}
+            {% include "wagtailadmin/shared/collapse_all_toggle.html" %}
+
             <input type="hidden" name="next" value="{{ next }}">
             {{ edit_handler.render_form_content }}
 

wagtail/admin/templates/wagtailadmin/shared/collapse_all_toggle.html

@@ -0,0 +1,13 @@
+{% load i18n %}
+
+<button
+    type="button"
+    {# Temporary styles pending addition of the minimap component. #}
+    class="button button-small button-secondary w-absolute w-right-0 w-m-4"
+    data-all-panels-toggle
+    data-expand-text="{% trans 'Expand all' %}"
+    data-collapse-text="{% trans 'Collapse all' %}"
+    aria-expanded="true"
+>
+    {% trans "Collapse all" %}
+</button>