Make all edit panels collapsible (#7365)

* Make more panels type collapsible
* Remove duplicate js in homepage template
* Move collapsible code into its own js file
* Change $li to $target in collapsible.js, as in #6342

Closes #7364, #6342, #6187, #2123

Co-authored by: Fabien Le Frapper <contact@fabienlefrapper.me>
Co-authored-by: Robbie Mackay <rm@robbiemackay.com>
Co-authored-by: Scott Cranfill <scott.cranfill@jpl.nasa.gov>

CHANGELOG.txt

@@ -15,6 +15,7 @@ Changelog
  * Isolate admin URLs for Documents and Images search listing results with the name `'listing_results'` (Matt Westcott)
  * Removed `request.is_ajax()` usage in Documents, Image and Snippet views (Matt Westcott)
  * Simplify generic admin view templates plus ensure `page_title` and `page_subtitle` are used consistently (Matt Westcott)
+ * Extend support for collapsing edit panels from just MultiFieldPanels to all kinds of panels (Fabien Le Frapper, Robbie Mackay)
  * Fix: Delete button is now correct colour on snippets and modeladmin listings (Brandon Murch)
  * Fix: Ensure that StreamBlock / ListBlock-level validation errors are counted towards error counts (Matt Westcott)
  * Fix: InlinePanel add button is now keyboard navigatable (Jesse Menn)

CONTRIBUTORS.rst

@@ -21,7 +21,7 @@ Core team
 * Matthew Westcott (Torchbox)
 * Mike Dingjan (Lab Digital)
 * Naomi Morduch Toubman
-* Scott Cranfill (consumerfinance.gov)
+* Scott Cranfill (JPL)
 * Storm Heg
 * Thibaud Colas (Torchbox)
 * Tom Dyson (Torchbox)
@@ -531,6 +531,7 @@ Contributors
 * Amy Chan
 * Stefan Hammer
 * Chakita Muttaraju
+* Fabien Le Frapper
 
 Translators
 ===========
@@ -555,7 +556,7 @@ Translators
 * Dutch (Netherlands): Bram, Storm Heg, Kees Hink, Ramon de Jezus, Coen van der Kamp, Franklin Kingma, Maarten Kling, Thijs Kramer, Meteor0id
 * Estonian: Erlend Eelmets, Ragnar Rebase
 * Finnish: Jiri Grönroos, Eetu Häivälä, Niklas Jerva, Aarni Koskela, Rauli Laine, Valter Maasalo, Glen Somerville, Juha Yrjölä
-* French: Adrien, Timothy Allen, Sebastien Andrivet, Bertrand Bordage, André Bouatchidzé, Aurélien Debord, Romain Dorgueil, Tom Dyson, Antonin Enfrun, Axel Haustant, Fabien Heureux, Léo, Pierre Marfoure, nahuel, Sophy O, Dominique Peretti, fpoulain, Loïc Teixeira, Benoît Vogel
+* French: Adrien, Timothy Allen, Sebastien Andrivet, Bertrand Bordage, André Bouatchidzé, Aurélien Debord, Romain Dorgueil, Tom Dyson, Antonin Enfrun, Axel Haustant, Fabien Le Frapper, Léo, Pierre Marfoure, nahuel, Sophy O, Dominique Peretti, fpoulain, Loïc Teixeira, Benoît Vogel
 * Galician: Amós Oviedo
 * Georgian: André Bouatchidzé
 * German: Ettore Atalan, Bohreromir, Benedikt Breinbauer, Patrick Craston, Peter Dreuw, Oliver Engel, Patrick Hebner, Benjamin Kaspar, Henrik Kröger, Tibor L, Tammo van Lessen, Martin Löhle, Wasilis Mandratzis-Walz, Daniel Manser, Matthias Martin, m0rph3u5, Max Pfeiffer, Moritz Pfeiffer, Herbert Poul, Karl Sander, Tobias Schmidt, Scriptim, Johannes Spielmann, Raphael Stolt, Benjamin Thurm, Norman Uekermann, unicode_it, Jannis Vajen, Vorlif, Matthew Westcott, Benedikt Willi

client/src/entrypoints/admin/collapsible.js

@@ -0,0 +1,41 @@
+import $ from 'jquery';
+
+function initCollapsibleBlocks() {
+  // eslint-disable-next-line func-names
+  $('.object.collapsible').each(function () {
+    const $target = $(this);
+    const $content = $target.find('.object-layout');
+    const onAnimationComplete = () =>
+      $content
+        .get(0)
+        .dispatchEvent(
+          new CustomEvent('commentAnchorVisibilityChange', { bubbles: true })
+        );
+    if ($target.hasClass('collapsed') && $target.find('.error-message').length === 0) {
+      $content.hide({
+        complete: onAnimationComplete,
+      });
+    }
+
+    $target.find('> .title-wrapper').on('click', () => {
+      if (!$target.hasClass('collapsed')) {
+        $target.addClass('collapsed');
+        $content.hide({
+          duration: 'slow',
+          complete: onAnimationComplete,
+        });
+      } else {
+        $target.removeClass('collapsed');
+        $content.show({
+          duration: 'slow',
+          complete: onAnimationComplete,
+        });
+      }
+    });
+  });
+}
+window.initCollapsibleBlocks = initCollapsibleBlocks;
+
+$(() => {
+  initCollapsibleBlocks();
+});

client/src/entrypoints/admin/page-editor.js

@@ -240,39 +240,6 @@ function initErrorDetection() {
 }
 window.initErrorDetection = initErrorDetection;
 
-function initCollapsibleBlocks() {
-  // eslint-disable-next-line func-names
-  $('.object.multi-field.collapsible').each(function () {
-    const $li = $(this);
-    const $fieldset = $li.find('fieldset');
-    const onAnimationComplete = () => $fieldset.get(0).dispatchEvent(
-      new CustomEvent('commentAnchorVisibilityChange', { bubbles: true })
-    );
-    if ($li.hasClass('collapsed') && $li.find('.error-message').length === 0) {
-      $fieldset.hide({
-        complete: onAnimationComplete
-      });
-    }
-
-    $li.find('> .title-wrapper').on('click', () => {
-      if (!$li.hasClass('collapsed')) {
-        $li.addClass('collapsed');
-        $fieldset.hide({
-          duration: 'slow',
-          complete: onAnimationComplete
-        });
-      } else {
-        $li.removeClass('collapsed');
-        $fieldset.show({
-          duration: 'slow',
-          complete: onAnimationComplete
-        });
-      }
-    });
-  });
-}
-window.initCollapsibleBlocks = initCollapsibleBlocks;
-
 function initKeyboardShortcuts() {
   // eslint-disable-next-line no-undef
   Mousetrap.bind(['mod+p'], () => {
@@ -296,7 +263,6 @@ $(() => {
 
   initSlugCleaning();
   initErrorDetection();
-  initCollapsibleBlocks();
   initKeyboardShortcuts();
 
   //

client/webpack.config.js

@@ -26,6 +26,7 @@ const exposedDependencies = {
 module.exports = function exports() {
   const entrypoints = {
     'admin': [
+      'collapsible',
       'comments',
       'core',
       'date-time-chooser',

docs/reference/pages/panels.rst

@@ -75,23 +75,6 @@ MultiFieldPanel
 
         A heading for the fields
 
-.. topic:: Collapsing MultiFieldPanels to save space
-
-    By default, ``MultiFieldPanel`` s are expanded and not collapsible. Adding ``collapsible`` to ``classname`` will enable the collapse control. Adding both ``collapsible`` and ``collapsed`` to the ``classname`` parameter will load the editor page with the ``MultiFieldPanel`` collapsed under its heading.
-
-    .. code-block:: python
-
-        content_panels = [
-            MultiFieldPanel(
-                [
-                    ImageChooserPanel('cover'),
-                    DocumentChooserPanel('book_file'),
-                    PageChooserPanel('publisher'),
-                ],
-                heading="Collection of Book Fields",
-                classname="collapsible collapsed"
-            ),
-        ]
 
 InlinePanel
 ~~~~~~~~~~~
@@ -102,6 +85,13 @@ InlinePanel
 
     This is a powerful but complex feature which will take some space to cover, so we'll skip over it for now. For a full explanation on the usage of ``InlinePanel``, see :ref:`inline_panels`.
 
+.. topic:: Collapsing InlinePanels to save space
+
+    Note that you can use ``classname="collapsible collapsed"`` to load the panel collapsed under its heading in order to save space in the Wagtail admin.
+    See :ref:`collapsible` for more details on ``collapsible`` usage.
+
+
+
 FieldRowPanel
 ~~~~~~~~~~~~~
 
@@ -305,6 +295,34 @@ Titles
 Use ``classname="title"`` to make Page's built-in title field stand out with more vertical padding.
 
 
+.. _collapsible:
+
+Collapsible
+~~~~~~~~~~~
+
+By default, panels are expanded and not collapsible.
+Use ``classname="collapsible"`` to enable the collapse control.
+Use ``classname="collapsible collapsed"`` will load the editor page with the panel collapsed under its heading.
+
+You must define a ``heading`` when using ``collapsible`` with ``MultiFieldPanel``.
+You must define a ``heading`` or ``label`` when using ``collapsible`` with ``InlinePanel``.
+
+
+.. code-block:: python
+
+    content_panels = [
+        MultiFieldPanel(
+            [
+                ImageChooserPanel('cover'),
+                DocumentChooserPanel('book_file'),
+                PageChooserPanel('publisher'),
+            ],
+            heading="Collection of Book Fields",
+            classname="collapsible collapsed"
+        ),
+    ]
+
+
 Placeholder Text
 ~~~~~~~~~~~~~~~~
 

docs/releases/2.15.rst

@@ -26,6 +26,7 @@ Other features
  * Isolate admin URLs for Documents and Images search listing results with the name `'listing_results'` (Matt Westcott)
  * Removed ``request.is_ajax()`` usage in Documents, Image and Snippet views (Matt Westcott)
  * Simplify generic admin view templates plus ensure ``page_title`` and ``page_subtitle`` are used consistently (Matt Westcott)
+ * Extend support for :ref:`collapsing edit panels <collapsible>` from just MultiFieldPanels to all kinds of panels (Fabien Le Frapper, Robbie Mackay)
 
 Bug fixes
 ~~~~~~~~~

wagtail/admin/templates/wagtailadmin/home.html

@@ -35,26 +35,6 @@
 
 {% block extra_js %}
 {{ block.super }}
-<script>
-$(function() {
-    $('.object.collapsible').each(function() {
-        var $target = $(this);
-        var $content = $target.find('.object-layout');
-        if ($target.hasClass('collapsed') && $target.find('.error-message').length == 0) {
-            $content.hide();
-        }
-
-        $target.find('> .title-wrapper').on('click', function() {
-            if (!$target.hasClass('collapsed')) {
-                $target.addClass('collapsed');
-                $content.hide('slow');
-            } else {
-                $target.removeClass('collapsed');
-                $content.show('show');
-            }
-        });
-    });
-});
-</script>
+<script src="{% versioned_static 'wagtailadmin/js/collapsible.js' %}"></script>
 {{ media.js }}
 {% endblock %}

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

@@ -16,6 +16,7 @@
     window.unicodeSlugsEnabled = {% if unicode_slugs_enabled %}true{% else %}false{% endif %};
 </script>
 
+<script src="{% versioned_static 'wagtailadmin/js/collapsible.js' %}"></script>
 <script src="{% versioned_static 'wagtailadmin/js/comments.js' %}"></script>
 <script src="{% versioned_static 'wagtailadmin/js/vendor/rangy-core.js' %}"></script>
 <script src="{% versioned_static 'wagtailadmin/js/vendor/mousetrap.min.js' %}"></script>