Add support for collapsible fieldsets that start expanded. #177

* support collapsible fieldsets that start expanded

* address review comments

README.md

@@ -28,10 +28,12 @@ django-admin-interface is a modern **responsive flat admin interface customizabl
 - Environment name/marker
 - Language chooser
 - List filter dropdown
-- `NEW` **Foldable apps** *(accordions in the navigation bar)*
+- Foldable apps *(accordions in the navigation bar)*
-- `NEW` **List filter sticky**
+- [Collapsible fieldsets](https://docs.djangoproject.com/en/4.0/ref/contrib/admin/#django.contrib.admin.ModelAdmin.fieldsets)
-- `NEW` **Form controls sticky** *(pagination and save/delete buttons)*
+  can have their initial state expanded instead of collapsed
-- Compatibility / Style optimizations for:
+- List filter sticky
+- Form controls sticky *(pagination and save/delete buttons)*
+- Compatibility / style optimizations for:
   - `django-ckeditor`
   - `django-dynamic-raw-id`
   - `django-json-widget`
@@ -65,6 +67,18 @@ SILENCED_SYSTEM_CHECKS = ["security.W019"]
 - Run `python manage.py collectstatic`
 - Restart your application server
 
+#### Optional features
+
+To make a fieldset start expanded with a `Hide` button to collapse:
+```python
+    fieldsets = [
+        ("Section title", {
+            "classes": ("collapse", "expanded"),
+            "fields": (...),
+        }),
+    ]
+```
+
 #### Upgrade
 - Run `pip install django-admin-interface --upgrade`
 - Run `python manage.py migrate` *(add* `--fake-initial` *if you are upgrading from 0.1.0 version)*

admin_interface/static/admin/js/collapse.js

@@ -0,0 +1,49 @@
+/*global gettext*/
+/* copied from django 4.0.7 */
+'use strict';
+{
+    window.addEventListener('load', function() {
+        // Add anchor tag for Show/Hide link
+        const fieldsets = document.querySelectorAll('fieldset.collapse');
+        for (const [i, elem] of fieldsets.entries()) {
+            // Don't hide if fields in this fieldset have errors
+            if (elem.querySelectorAll('div.errors, ul.errorlist').length === 0) {
+                const h2 = elem.querySelector('h2');
+                const link = document.createElement('a');
+                link.id = 'fieldsetcollapser' + i;
+                link.className = 'collapse-toggle';
+                link.href = '#';
+                // changed: can opt into starting visible
+                if (elem.classList.contains('expanded')) {
+                  link.textContent = gettext('Hide');
+                } else {
+                  link.textContent = gettext('Show');
+                  elem.classList.add('collapsed');
+                }
+                h2.appendChild(document.createTextNode(' ('));
+                h2.appendChild(link);
+                h2.appendChild(document.createTextNode(')'));
+            }
+        }
+        // Add toggle to hide/show anchor tag
+        const toggleFunc = function(ev) {
+            if (ev.target.matches('.collapse-toggle')) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                const fieldset = ev.target.closest('fieldset');
+                if (fieldset.classList.contains('collapsed')) {
+                    // Show
+                    ev.target.textContent = gettext('Hide');
+                    fieldset.classList.remove('collapsed');
+                } else {
+                    // Hide
+                    ev.target.textContent = gettext('Show');
+                    fieldset.classList.add('collapsed');
+                }
+            }
+        };
+        document.querySelectorAll('fieldset.module').forEach(function(el) {
+            el.addEventListener('click', toggleFunc);
+        });
+    });
+}