diff --git a/README.md b/README.md index 4fe39df..89623c9 100644 --- a/README.md +++ b/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)* -- `NEW` **List filter sticky** -- `NEW` **Form controls sticky** *(pagination and save/delete buttons)* -- Compatibility / Style optimizations for: +- Foldable apps *(accordions in the navigation bar)* +- [Collapsible fieldsets](https://docs.djangoproject.com/en/4.0/ref/contrib/admin/#django.contrib.admin.ModelAdmin.fieldsets) + can have their initial state expanded instead of collapsed +- 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)* diff --git a/admin_interface/static/admin/js/collapse.js b/admin_interface/static/admin/js/collapse.js new file mode 100644 index 0000000..efe0b1b --- /dev/null +++ b/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); + }); + }); +}