Ticket #105: show-hide-toggle-fixed.diff

File show-hide-toggle-fixed.diff, 4.9 KB (added by Simon Willison, 10 years ago)

Ignore previous patch - it includes unrelated changes to the template system

  • django/conf/admin_media/css/global.css

     
    228228/*  COLLAPSED FIELDSETS  */
    229229
    230230fieldset.collapsed * { display:none; }
    231 fieldset.collapsed h2, fieldset.collapsed .collapse-toggle  { display:block !important; }
     231fieldset.collapsed h2, fieldset.collapsed { display:block !important; }
     232fieldset.collapsed .collapse-toggle { display: inline !important; }
    232233fieldset.collapsed h2 { background-image:url(../img/admin/nav-bg.gif); background-position:bottom left; color:#999; }
    233 fieldset.collapsed .collapse-toggle { padding:3px 5px !important; background:#efefef; }
    234 fieldset.collapsed .collapse-toggle a { display:inline !important; }
    235234
    236235/* MESSAGES & ERRORS  */
    237236
  • django/conf/admin_media/js/admin/CollapsedFieldsets.js

     
    11// Finds all fieldsets with class="collapse", collapses them, and gives each
    2 // one a "Show foo" link that uncollapses it.
     2// one a "Show" link that uncollapses it. The "Show" link becomes a "Hide"
     3// link when the fieldset is visible.
    34
    45function findForm(node) {
    56        // returns the node of the form containing the given node
     
    1617        init: function() {
    1718                var fieldsets = document.getElementsByTagName('fieldset');
    1819                var collapsed_seen = false;
    19                 for (var i=0; i<fieldsets.length; i++) {
    20                         var fs = fieldsets[i];
     20                for (var i = 0, fs; fs = fieldsets[i]; i++) {
    2121                        // Collapse this fieldset if it has the correct class, and if it
    2222                        // doesn't have any errors. (Collapsing shouldn't apply in the case
    2323                        // of error messages.)
    2424                        if (fs.className.match(CollapsedFieldsets.collapse_re) && !CollapsedFieldsets.fieldset_has_errors(fs)) {
    25 
    2625                                collapsed_seen = true;
    27 
    2826                                // Give it an additional class, used by CSS to hide it.
    2927                                fs.className += ' ' + CollapsedFieldsets.collapsed_class;
    30 
    31                                 // Get plural verbose name of object.
    32                                 var verbose_name = fs.getElementsByTagName('h2')[0].innerHTML;
    33 
    34                                 // <div class="form-row collapse-toggle" id="fieldsetcollapser1">
    35                                 // <a href="javascript:toggleDisplay;">Show section priorities&hellip;</a>
    36                                 // </div>
    37                                 var div = document.createElement('div');
    38 
    39                                 // Give it a hook so we can remove it later.
    40                                 div.id = 'fieldsetcollapser' + i;
    41 
    42                                 div.className = 'form-row collapse-toggle'; // CSS hook
     28                                // (<a id="fieldsetcollapser3" class="collapse-toggle" href="#">Show</a>)
    4329                                var collapse_link = document.createElement('a');
    44                                 collapse_link.setAttribute('href', 'javascript:CollapsedFieldsets.display(' + i + ');');
    45                                 collapse_link.appendChild(document.createTextNode('Show ' + verbose_name));
    46                                 div.appendChild(collapse_link);
    47                                 fs.appendChild(div);
     30                                collapse_link.className = 'collapse-toggle';
     31                                collapse_link.id = 'fieldsetcollapser' + i;
     32                                collapse_link.onclick = new Function('CollapsedFieldsets.show('+i+'); return false;');
     33                                collapse_link.href = '#';
     34                                collapse_link.innerHTML = 'Show';
     35                                var h2 = fs.getElementsByTagName('h2')[0];
     36                                h2.appendChild(document.createTextNode(' ('));
     37                                h2.appendChild(collapse_link);
     38                                h2.appendChild(document.createTextNode(')'));
    4839                        }
    4940                }
    5041                if (collapsed_seen) {
     
    6253                }
    6354                return false;
    6455        },
    65         display: function(fieldset_index) {
     56        show: function(fieldset_index) {
    6657                var fs = document.getElementsByTagName('fieldset')[fieldset_index];
    6758                // Remove the class name that causes the "display: none".
    6859                fs.className = fs.className.replace(CollapsedFieldsets.collapsed_re, '');
    69                 // Remove the "Show foo" link.
    70                 fs.removeChild(document.getElementById('fieldsetcollapser' + fieldset_index));
     60                // Toggle the "Show" link to a "Hide" link
     61                var collapse_link = document.getElementById('fieldsetcollapser' + fieldset_index);
     62                collapse_link.onclick = new Function('CollapsedFieldsets.hide('+fieldset_index+'); return false;');
     63                collapse_link.innerHTML = 'Hide';
    7164        },
     65        hide: function(fieldset_index) {
     66                var fs = document.getElementsByTagName('fieldset')[fieldset_index];
     67                // Add the class name that causes the "display: none".
     68                fs.className += ' ' + CollapsedFieldsets.collapsed_class;
     69                // Toggle the "Hide" link to a "Show" link
     70                var collapse_link = document.getElementById('fieldsetcollapser' + fieldset_index);
     71        collapse_link.onclick = new Function('CollapsedFieldsets.show('+fieldset_index+'); return false;');
     72                collapse_link.innerHTML = 'Show';
     73        },
     74       
    7275        uncollapse_all: function() {
    7376                var fieldsets = document.getElementsByTagName('fieldset');
    7477                for (var i=0; i<fieldsets.length; i++) {
    7578                        if (fieldsets[i].className.match(CollapsedFieldsets.collapsed_re)) {
    76                                 CollapsedFieldsets.display(i);
     79                                CollapsedFieldsets.show(i);
    7780                        }
    7881                }
    7982        }
Back to Top