Ticket #5899: 5899.collapsible-fieldsets.diff

django/contrib/admin/helpers.py

@@ -74 +74 @@
         self.readonly_fields = readonly_fields
 
     def _media(self):
-        if 'collapse' in self.classes:
+        if 'collapse' in self.classes or 'collapsible' in self.classes:
             js = ['jquery.min.js', 'jquery.init.js', 'collapse.min.js']
             return forms.Media(js=[static('admin/js/%s' % url) for url in js])
         return forms.Media()

django/contrib/admin/static/admin/js/collapse.js

@@ -1 +1 @@
 (function($) {
         $(document).ready(function() {
-                // Add anchor tag for Show/Hide link
-                $("fieldset.collapse").each(function(i, elem) {
-                        // Don't hide if fields in this fieldset have errors
-                        if ( $(elem).find("div.errors").length == 0 ) {
-                                $(elem).addClass("collapsed");
-                                $(elem).find("h2").first().append(' (<a id="fieldsetcollapser' +
-                                        i +'" class="collapse-toggle" href="#">' + gettext("Show") +
-                                        '</a>)');
-                        }
-                });
-                // Add toggle to anchor tag
-                $("fieldset.collapse a.collapse-toggle").toggle(
-                        function() { // Show
-                                $(this).text(gettext("Hide"));
-                                $(this).closest("fieldset").removeClass("collapsed");
+                /**
+                 * Structure for handling collapsible fieldsets.
+                 * There are two opportunities:
+                 * 1.   using "collapse" as class name of the fieldset the fieldset will
+                 *              be initially hidden and can be shown by click
+                 * 2.   using "collapsible" as class name of the fieldset the fielset
+                 *              will be initially shown but can be hidden by click.
+                 * This structure adds the click elements and their behaviour to the
+                 * existing html of the fieldsets.
+                 */
+                var CollapsedFieldsets = {
+                        /**
+                         * Initializes the structure.
+                         */
+                        init: function() {
+                                this.appendShowHideLink();
+                                this.initToggling();
+                        },
+
+                        /**
+                         * Appends the clickable elements, either for showing or hiding
+                         * depending on the current state of the fieldset.
+                         */
+                        appendShowHideLink: function() {
+                                $('fieldset.collapse, fieldset.collapsible').each(function(i, elem) {
+                                        // Don't hide if fields in this fieldset have errors
+                                        if ( $(elem).find('div.errors').length == 0 ) {
+                                                // do not collapse initially shown "collapsibles"
+                                                if (!$(elem).hasClass('collapsible')) {
+                                                        $(elem).addClass('collapsed');
+                                                }
+                                                $(elem).find('h2').first().append(' (<a id="fieldsetcollapser' +
+                                                        i +'" class="collapse-toggle" href="#">' +
+                                                        (!$(elem).hasClass('collapsible') ? gettext('Show') : gettext('Hide')) +
+                                                        '</a>)');
+                                        }
+                                });
+                        },
+
+                        /**
+                         * Initializes the toggling for the clickable elements to show/hide
+                         * the fieldset.
+                         */
+                        initToggling: function() {
+                                $('fieldset.collapse a.collapse-toggle, fieldset.collapsible a.collapse-toggle').toggle(
+                                        function(e) { this.toggleOn(e.target);  }.bind(this),
+                                        function(e) { this.toggleOff(e.target); }.bind(this)
+                                );
+                        },
+
+                        /**
+                         * The first toggle method moving the clickable element from its
+                         * initial state to the next one. Collapses the fieldset if it's
+                         * uncollapsed and vice versa.
+                         * @param target        the clickable link
+                         */
+                        toggleOn: function(target) {
+                                if ($(target).closest('fieldset').hasClass('collapsible')) {
+                                        this.collapseElement($(target));
+                                } else {
+                                        this.uncollapseElement($(target));
+                                }
                                 return false;
                         },
-                        function() { // Hide
-                                $(this).text(gettext("Show"));
-                                $(this).closest("fieldset").addClass("collapsed");
+
+                        /**
+                         * The seconds toggle method moving the clickable element from its
+                         * second state back to the initial one. Collapses the fieldset
+                         * if it's uncollapsed and vice versa.
+                         * @param target        the clickable link
+                         */
+                        toggleOff: function(target) {
+                                if ($(target).closest('fieldset').hasClass('collapsible')) {
+                                        this.uncollapseElement($(target));
+                                } else {
+                                        this.collapseElement($(target));
+                                }
                                 return false;
+                        },
+
+                        /**
+                         * Collapses the given element by applying the new "Show" label
+                         * and adding the collapsed class.
+                         * @param element       the clickable element
+                         */
+                        collapseElement: function(element) {
+                                element.text(gettext('Show'));
+                                element.closest('fieldset').addClass('collapsed');
+                        },
+
+                        /**
+                         * Uncollapses the given element by applying the new "Hide" label
+                         * and removing the collapsed class.
+                         * @param element       the clickable element
+                         */
+                        uncollapseElement: function(element) {
+                                element.text(gettext('Hide'));
+                                element.closest('fieldset').removeClass('collapsed');
                         }
-                );
+                };
+
+                // Engage!
+                CollapsedFieldsets.init();
         });
 })(django.jQuery);

django/contrib/admin/static/admin/js/collapse.min.js

@@ -1 @@
-(function(a){a(document).ready(function(){a("fieldset.collapse").each(function(c,b){if(a(b).find("div.errors").length==0){a(b).addClass("collapsed");a(b).find("h2").first().append(' (<a id="fieldsetcollapser'+c+'" class="collapse-toggle" href="#">'+gettext("Show")+"</a>)")}});a("fieldset.collapse a.collapse-toggle").toggle(function(){a(this).text(gettext("Hide"));a(this).closest("fieldset").removeClass("collapsed");return false},function(){a(this).text(gettext("Show"));a(this).closest("fieldset").addClass("collapsed");
-return false})})})(django.jQuery);
+(function(b){b(document).ready(function(){({init:function(){this.appendShowHideLink();this.initToggling()},appendShowHideLink:function(){b("fieldset.collapse, fieldset.collapsible").each(function(a,c){if(b(c).find("div.errors").length==0){b(c).hasClass("collapsible")||b(c).addClass("collapsed");b(c).find("h2").first().append(' (<a id="fieldsetcollapser'+a+'" class="collapse-toggle" href="#">'+(!b(c).hasClass("collapsible")?gettext("Show"):gettext("Hide"))+"</a>)")}})},initToggling:function(){b("fieldset.collapse a.collapse-toggle, fieldset.collapsible a.collapse-toggle").toggle(function(a){this.toggleOn(a.target)}.bind(this),
+function(a){this.toggleOff(a.target)}.bind(this))},toggleOn:function(a){b(a).closest("fieldset").hasClass("collapsible")?this.collapseElement(b(a)):this.uncollapseElement(b(a));return false},toggleOff:function(a){b(a).closest("fieldset").hasClass("collapsible")?this.uncollapseElement(b(a)):this.collapseElement(b(a));return false},collapseElement:function(a){a.text(gettext("Show"));a.closest("fieldset").addClass("collapsed")},uncollapseElement:function(a){a.text(gettext("Hide"));a.closest("fieldset").removeClass("collapsed")}}).init()})})(django.jQuery);

docs/intro/tutorial02.txt

@@ -212 +212 @@
    :alt: Form has fieldsets now
 
 You can assign arbitrary HTML classes to each fieldset. Django provides a
-``"collapse"`` class that displays a particular fieldset initially collapsed.
-This is useful when you have a long form that contains a number of fields that
-aren't commonly used::
+``"collapse"`` and ``"collapsible"` classes that allow a particular fieldset to 
+be initially collapsed, respectively to be collapsible. This is useful when 
+you have a long form that contains a number of fields that aren't commonly 
+used::
 
         class PollAdmin(admin.ModelAdmin):
             fieldsets = [

docs/ref/contrib/admin/index.txt

@@ -274 +274 @@
             Two useful classes defined by the default admin site stylesheet are
             ``collapse`` and ``wide``. Fieldsets with the ``collapse`` style
             will be initially collapsed in the admin and replaced with a small
-            "click to expand" link. Fieldsets with the ``wide`` style will be
+            "click to expand" link. Alternatively you can use ``collapsible`` 
+            which has the same effect as ``collapse``, but fieldsets will be 
+            initially expanded. Fieldsets with the ``wide`` style will be
             given extra horizontal space.
 
         * ``description``