Fixed #105 -- collapsable fieldsets now work in both ways (thanks, Simon)

git-svn-id: http://code.djangoproject.com/svn/django/trunk@387 bcc190cf-cafb-0310-a4f2-bffc1f526a37
This commit is contained in:
Jacob Kaplan-Moss 2005-08-02 17:49:49 +00:00
parent b3b27d2593
commit 623863d0a4
2 changed files with 31 additions and 29 deletions

View File

@ -228,10 +228,9 @@ form .wide p.help { padding-left:38px; }
/* COLLAPSED FIELDSETS */ /* COLLAPSED FIELDSETS */
fieldset.collapsed * { display:none; } fieldset.collapsed * { display:none; }
fieldset.collapsed h2, fieldset.collapsed .collapse-toggle { display:block !important; } fieldset.collapsed h2, fieldset.collapsed { display:block !important; }
fieldset.collapsed .collapse-toggle { display: inline !important; }
fieldset.collapsed h2 { background-image:url(../img/admin/nav-bg.gif); background-position:bottom left; color:#999; } fieldset.collapsed h2 { background-image:url(../img/admin/nav-bg.gif); background-position:bottom left; color:#999; }
fieldset.collapsed .collapse-toggle { padding:3px 5px !important; background:#efefef; }
fieldset.collapsed .collapse-toggle a { display:inline !important; }
/* MESSAGES & ERRORS */ /* MESSAGES & ERRORS */

View File

@ -1,5 +1,6 @@
// Finds all fieldsets with class="collapse", collapses them, and gives each // Finds all fieldsets with class="collapse", collapses them, and gives each
// one a "Show foo" link that uncollapses it. // one a "Show" link that uncollapses it. The "Show" link becomes a "Hide"
// link when the fieldset is visible.
function findForm(node) { function findForm(node) {
// returns the node of the form containing the given node // returns the node of the form containing the given node
@ -16,35 +17,25 @@ var CollapsedFieldsets = {
init: function() { init: function() {
var fieldsets = document.getElementsByTagName('fieldset'); var fieldsets = document.getElementsByTagName('fieldset');
var collapsed_seen = false; var collapsed_seen = false;
for (var i=0; i<fieldsets.length; i++) { for (var i = 0, fs; fs = fieldsets[i]; i++) {
var fs = fieldsets[i];
// Collapse this fieldset if it has the correct class, and if it // Collapse this fieldset if it has the correct class, and if it
// doesn't have any errors. (Collapsing shouldn't apply in the case // doesn't have any errors. (Collapsing shouldn't apply in the case
// of error messages.) // of error messages.)
if (fs.className.match(CollapsedFieldsets.collapse_re) && !CollapsedFieldsets.fieldset_has_errors(fs)) { if (fs.className.match(CollapsedFieldsets.collapse_re) && !CollapsedFieldsets.fieldset_has_errors(fs)) {
collapsed_seen = true; collapsed_seen = true;
// Give it an additional class, used by CSS to hide it. // Give it an additional class, used by CSS to hide it.
fs.className += ' ' + CollapsedFieldsets.collapsed_class; fs.className += ' ' + CollapsedFieldsets.collapsed_class;
// (<a id="fieldsetcollapser3" class="collapse-toggle" href="#">Show</a>)
// Get plural verbose name of object.
var verbose_name = fs.getElementsByTagName('h2')[0].innerHTML;
// <div class="form-row collapse-toggle" id="fieldsetcollapser1">
// <a href="javascript:toggleDisplay;">Show section priorities&hellip;</a>
// </div>
var div = document.createElement('div');
// Give it a hook so we can remove it later.
div.id = 'fieldsetcollapser' + i;
div.className = 'form-row collapse-toggle'; // CSS hook
var collapse_link = document.createElement('a'); var collapse_link = document.createElement('a');
collapse_link.setAttribute('href', 'javascript:CollapsedFieldsets.display(' + i + ');'); collapse_link.className = 'collapse-toggle';
collapse_link.appendChild(document.createTextNode('Show ' + verbose_name)); collapse_link.id = 'fieldsetcollapser' + i;
div.appendChild(collapse_link); collapse_link.onclick = new Function('CollapsedFieldsets.show('+i+'); return false;');
fs.appendChild(div); collapse_link.href = '#';
collapse_link.innerHTML = 'Show';
var h2 = fs.getElementsByTagName('h2')[0];
h2.appendChild(document.createTextNode(' ('));
h2.appendChild(collapse_link);
h2.appendChild(document.createTextNode(')'));
} }
} }
if (collapsed_seen) { if (collapsed_seen) {
@ -62,18 +53,30 @@ var CollapsedFieldsets = {
} }
return false; return false;
}, },
display: function(fieldset_index) { show: function(fieldset_index) {
var fs = document.getElementsByTagName('fieldset')[fieldset_index]; var fs = document.getElementsByTagName('fieldset')[fieldset_index];
// Remove the class name that causes the "display: none". // Remove the class name that causes the "display: none".
fs.className = fs.className.replace(CollapsedFieldsets.collapsed_re, ''); fs.className = fs.className.replace(CollapsedFieldsets.collapsed_re, '');
// Remove the "Show foo" link. // Toggle the "Show" link to a "Hide" link
fs.removeChild(document.getElementById('fieldsetcollapser' + fieldset_index)); var collapse_link = document.getElementById('fieldsetcollapser' + fieldset_index);
collapse_link.onclick = new Function('CollapsedFieldsets.hide('+fieldset_index+'); return false;');
collapse_link.innerHTML = 'Hide';
}, },
hide: function(fieldset_index) {
var fs = document.getElementsByTagName('fieldset')[fieldset_index];
// Add the class name that causes the "display: none".
fs.className += ' ' + CollapsedFieldsets.collapsed_class;
// Toggle the "Hide" link to a "Show" link
var collapse_link = document.getElementById('fieldsetcollapser' + fieldset_index);
collapse_link.onclick = new Function('CollapsedFieldsets.show('+fieldset_index+'); return false;');
collapse_link.innerHTML = 'Show';
},
uncollapse_all: function() { uncollapse_all: function() {
var fieldsets = document.getElementsByTagName('fieldset'); var fieldsets = document.getElementsByTagName('fieldset');
for (var i=0; i<fieldsets.length; i++) { for (var i=0; i<fieldsets.length; i++) {
if (fieldsets[i].className.match(CollapsedFieldsets.collapsed_re)) { if (fieldsets[i].className.match(CollapsedFieldsets.collapsed_re)) {
CollapsedFieldsets.display(i); CollapsedFieldsets.show(i);
} }
} }
} }