Ticket #5899: 5899.diff

File 5899.diff, 8.7 KB (added by Alexander Herrmann, 13 years ago)

  • docs/intro/tutorial02.txt

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

  • docs/ref/contrib/admin/index.txt

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

  • django/contrib/admin/media/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");
    2 return false})})})(django.jQuery);
     1(function(a){a(document).ready(function(){var b={init:function(){this.appendShowHideLink();this.initToggling()},appendShowHideLink:function(){a("fieldset.collapse, fieldset.collapsible").each(function(c,d){if(a(d).find("div.errors").length==0){if(!a(d).hasClass("collapsible")){a(d).addClass("collapsed")}a(d).find("h2").first().append(' (<a id="fieldsetcollapser'+c+'" class="collapse-toggle" href="#">'+(!a(d).hasClass("collapsible")?gettext("Show"):gettext("Hide"))+"</a>)")}})},initToggling:function(){a("fieldset.collapse a.collapse-toggle, fieldset.collapsible a.collapse-toggle").toggle(function(c){this.toggleOn(c.target)}.bind(this),function(c){this.toggleOff(c.target)}.bind(this))},toggleOn:function(c){if(a(c).closest("fieldset").hasClass("collapsible")){this.collapseElement(a(c))}else{this.uncollapseElement(a(c))}return false},toggleOff:function(c){if(a(c).closest("fieldset").hasClass("collapsible")){this.uncollapseElement(a(c))}else{this.collapseElement(a(c))}return false},collapseElement:function(c){c.text(gettext("Show"));c.closest("fieldset").addClass("collapsed")},uncollapseElement:function(c){c.text(gettext("Hide"));c.closest("fieldset").removeClass("collapsed")}};b.init()})})(django.jQuery);
     2 No newline at end of file

  • django/contrib/admin/media/js/collapse.js

     
    11(function($) {
    22        $(document).ready(function() {
    3                 // Add anchor tag for Show/Hide link
    4                 $("fieldset.collapse").each(function(i, elem) {
    5                         // Don't hide if fields in this fieldset have errors
    6                         if ( $(elem).find("div.errors").length == 0 ) {
    7                                 $(elem).addClass("collapsed");
    8                                 $(elem).find("h2").first().append(' (<a id="fieldsetcollapser' +
    9                                         i +'" class="collapse-toggle" href="#">' + gettext("Show") +
    10                                         '</a>)');
    11                         }
    12                 });
    13                 // Add toggle to anchor tag
    14                 $("fieldset.collapse a.collapse-toggle").toggle(
    15                         function() { // Show
    16                                 $(this).text(gettext("Hide"));
    17                                 $(this).closest("fieldset").removeClass("collapsed");
     3                /**
     4                 * Structure for handling collapsible fieldsets.
     5                 * There are two opportunities:
     6                 * 1.   using "collapse" as class name of the fieldset the fieldset will
     7                 *              be initially hidden and can be shown by click
     8                 * 2.   using "collapsible" as class name of the fieldset the fielset
     9                 *              will be initially shown but can be hidden by click.
     10                 * This structure adds the click elements and their behaviour to the
     11                 * existing html of the fieldsets.
     12                 */
     13                var CollapsedFieldsets = {
     14                        /**
     15                         * Initializes the structure.
     16                         */
     17                        init: function() {
     18                                this.appendShowHideLink();
     19                                this.initToggling();
     20                        },
     21                       
     22                        /**
     23                         * Appends the clickable elements, either for showing or hiding
     24                         * depending on the current state of the fieldset.
     25                         */
     26                        appendShowHideLink: function() {
     27                                $('fieldset.collapse, fieldset.collapsible').each(function(i, elem) {
     28                                        // Don't hide if fields in this fieldset have errors
     29                                        if ( $(elem).find('div.errors').length == 0 ) {
     30                                                // do not collapse initially shown "collapsibles"
     31                                                if (!$(elem).hasClass('collapsible')) {
     32                                                        $(elem).addClass('collapsed');
     33                                                }
     34                                                $(elem).find('h2').first().append(' (<a id="fieldsetcollapser' +
     35                                                        i +'" class="collapse-toggle" href="#">' +
     36                                                        (!$(elem).hasClass('collapsible') ? gettext('Show') : gettext('Hide')) +
     37                                                        '</a>)');
     38                                        }
     39                                });
     40                        },
     41                       
     42                        /**
     43                         * Initializes the toggling for the clickable elements to show/hide
     44                         * the fieldset.
     45                         */
     46                        initToggling: function() {
     47                                $('fieldset.collapse a.collapse-toggle, fieldset.collapsible a.collapse-toggle').toggle(
     48                                        function(e) { this.toggleOn(e.target);  }.bind(this),
     49                                        function(e) { this.toggleOff(e.target); }.bind(this)
     50                                );
     51                        },
     52                       
     53                        /**
     54                         * The first toggle method moving the clickable element from its
     55                         * initial state to the next one. Collapses the fieldset if it's
     56                         * uncollapsed and vice versa.
     57                         * @param target        the clickable link
     58                         */
     59                        toggleOn: function(target) {
     60                                if ($(target).closest('fieldset').hasClass('collapsible')) {
     61                                        this.collapseElement($(target));
     62                                } else {
     63                                        this.uncollapseElement($(target));
     64                                }
    1865                                return false;
    1966                        },
    20                         function() { // Hide
    21                                 $(this).text(gettext("Show"));
    22                                 $(this).closest("fieldset").addClass("collapsed");
     67                       
     68                        /**
     69                         * The seconds toggle method moving the clickable element from its
     70                         * secomd state back to the initial one. Collapses the fieldset
     71                         * if it's uncollapsed and vice versa.
     72                         * @param target        the clickable link
     73                         */
     74                        toggleOff: function(target) {
     75                                if ($(target).closest('fieldset').hasClass('collapsible')) {
     76                                        this.uncollapseElement($(target));
     77                                } else {
     78                                        this.collapseElement($(target));
     79                                }
    2380                                return false;
     81                        },
     82                       
     83                        /**
     84                         * Collapses the given element by applying the new "Show" label
     85                         * and adding the collapsed class.
     86                         * @param element       the clickable element
     87                         */
     88                        collapseElement: function(element) {
     89                                element.text(gettext('Show'));
     90                                element.closest('fieldset').addClass('collapsed');
     91                        },
     92                       
     93                        /**
     94                         * Uncollapses the given element by applying the new "Hide" label
     95                         * and removing the collapsed class.
     96                         * @param element       the clickable element
     97                         */
     98                        uncollapseElement: function(element) {
     99                                element.text(gettext('Hide'));
     100                                element.closest('fieldset').removeClass('collapsed');
    24101                        }
    25                 );
     102                };
     103               
     104                // Engage!
     105                CollapsedFieldsets.init();
    26106        });
    27 })(django.jQuery);
     107})(django.jQuery);
     108 No newline at end of file

  • django/contrib/admin/helpers.py

     
    7474        self.readonly_fields = readonly_fields
    7575
    7676    def _media(self):
    77         if 'collapse' in self.classes:
     77        if 'collapse' in self.classes or 'collapsible' in self.classes:
    7878            js = ['js/jquery.min.js', 'js/jquery.init.js', 'js/collapse.min.js']
    7979            return forms.Media(js=['%s%s' % (settings.ADMIN_MEDIA_PREFIX, url) for url in js])
    8080        return forms.Media()
Back to Top