bgneal@1: // Finds all fieldsets with class="collapse", collapses them, and gives each
bgneal@1: // one a "Show" link that uncollapses it. The "Show" link becomes a "Hide"
bgneal@1: // link when the fieldset is visible.
bgneal@1: 
bgneal@1: function findForm(node) {
bgneal@1:     // returns the node of the form containing the given node
bgneal@1:     if (node.tagName.toLowerCase() != 'form') {
bgneal@1:         return findForm(node.parentNode);
bgneal@1:     }
bgneal@1:     return node;
bgneal@1: }
bgneal@1: 
bgneal@1: var CollapsedFieldsets = {
bgneal@1:     collapse_re: /\bcollapse\b/,   // Class of fieldsets that should be dealt with.
bgneal@1:     collapsed_re: /\bcollapsed\b/, // Class that fieldsets get when they're hidden.
bgneal@1:     collapsed_class: 'collapsed',
bgneal@1:     init: function() {
bgneal@1:         var fieldsets = document.getElementsByTagName('fieldset');
bgneal@1:         var collapsed_seen = false;
bgneal@1:         for (var i = 0, fs; fs = fieldsets[i]; i++) {
bgneal@1:             // Collapse this fieldset if it has the correct class, and if it
bgneal@1:             // doesn't have any errors. (Collapsing shouldn't apply in the case
bgneal@1:             // of error messages.)
bgneal@1:             if (fs.className.match(CollapsedFieldsets.collapse_re) && !CollapsedFieldsets.fieldset_has_errors(fs)) {
bgneal@1:                 collapsed_seen = true;
bgneal@1:                 // Give it an additional class, used by CSS to hide it.
bgneal@1:                 fs.className += ' ' + CollapsedFieldsets.collapsed_class;
bgneal@1:                 // (<a id="fieldsetcollapser3" class="collapse-toggle" href="#">Show</a>)
bgneal@1:                 var collapse_link = document.createElement('a');
bgneal@1:                 collapse_link.className = 'collapse-toggle';
bgneal@1:                 collapse_link.id = 'fieldsetcollapser' + i;
bgneal@1:                 collapse_link.onclick = new Function('CollapsedFieldsets.show('+i+'); return false;');
bgneal@1:                 collapse_link.href = '#';
bgneal@1:                 collapse_link.innerHTML = gettext('Show');
bgneal@1:                 var h2 = fs.getElementsByTagName('h2')[0];
bgneal@1:                 h2.appendChild(document.createTextNode(' ('));
bgneal@1:                 h2.appendChild(collapse_link);
bgneal@1:                 h2.appendChild(document.createTextNode(')'));
bgneal@1:             }
bgneal@1:         }
bgneal@1:         if (collapsed_seen) {
bgneal@1:             // Expand all collapsed fieldsets when form is submitted.
bgneal@1:             addEvent(findForm(document.getElementsByTagName('fieldset')[0]), 'submit', function() { CollapsedFieldsets.uncollapse_all(); });
bgneal@1:         }
bgneal@1:     },
bgneal@1:     fieldset_has_errors: function(fs) {
bgneal@1:         // Returns true if any fields in the fieldset have validation errors.
bgneal@1:         var divs = fs.getElementsByTagName('div');
bgneal@1:         for (var i=0; i<divs.length; i++) {
bgneal@1:             if (divs[i].className.match(/\berrors\b/)) {
bgneal@1:                 return true;
bgneal@1:             }
bgneal@1:         }
bgneal@1:         return false;
bgneal@1:     },
bgneal@1:     show: function(fieldset_index) {
bgneal@1:         var fs = document.getElementsByTagName('fieldset')[fieldset_index];
bgneal@1:         // Remove the class name that causes the "display: none".
bgneal@1:         fs.className = fs.className.replace(CollapsedFieldsets.collapsed_re, '');
bgneal@1:         // Toggle the "Show" link to a "Hide" link
bgneal@1:         var collapse_link = document.getElementById('fieldsetcollapser' + fieldset_index);
bgneal@1:         collapse_link.onclick = new Function('CollapsedFieldsets.hide('+fieldset_index+'); return false;');
bgneal@1:         collapse_link.innerHTML = gettext('Hide');
bgneal@1:     },
bgneal@1:     hide: function(fieldset_index) {
bgneal@1:         var fs = document.getElementsByTagName('fieldset')[fieldset_index];
bgneal@1:         // Add the class name that causes the "display: none".
bgneal@1:         fs.className += ' ' + CollapsedFieldsets.collapsed_class;
bgneal@1:         // Toggle the "Hide" link to a "Show" link
bgneal@1:         var collapse_link = document.getElementById('fieldsetcollapser' + fieldset_index);
bgneal@1:         collapse_link.onclick = new Function('CollapsedFieldsets.show('+fieldset_index+'); return false;');
bgneal@1:         collapse_link.innerHTML = gettext('Show');
bgneal@1:     },
bgneal@1: 
bgneal@1:     uncollapse_all: function() {
bgneal@1:         var fieldsets = document.getElementsByTagName('fieldset');
bgneal@1:         for (var i=0; i<fieldsets.length; i++) {
bgneal@1:             if (fieldsets[i].className.match(CollapsedFieldsets.collapsed_re)) {
bgneal@1:                 CollapsedFieldsets.show(i);
bgneal@1:             }
bgneal@1:         }
bgneal@1:     }
bgneal@1: }
bgneal@1: 
bgneal@1: addEvent(window, 'load', CollapsedFieldsets.init);