#92849: Simplify JS code for collapsed fieldsets, and fix cut-off content in wide fieldsets.

1 files changed, 51 insertions, 74 deletions

diff --git a/misc/collapse.js b/misc/collapse.js
index 521e4e3f0..6d31d86a2 100644
--- a/misc/collapse.js
+++ b/misc/collapse.js
@@ -1,79 +1,35 @@
 // $Id$
 
-Drupal.collapseAutoAttach = function () {
-  $('fieldset.collapsible legend').each(function () {
-    // Turn the legend into clickable link
-    var a = document.createElement('a');
-    a.href = '#';
-    $(a)
-      .click(function() {
-        var fieldset = this.parentNode.parentNode;
-
-        // Prevent double animations
-        if (fieldset.animating) {
-          return false;
-        }
-        fieldset.animating = true;
-
-        if ($(fieldset).is('.collapsed')) {
-          // Open fieldset with animation
-          $(fieldset.contentWrapper).hide();
-          $(fieldset).removeClass('collapsed');
-          $(fieldset.contentWrapper).slideDown(300,
-            {
-              // Make sure we open to height auto
-              complete: function() {
-                $(fieldset.contentWrapper).css('height', 'auto');
-                Drupal.collapseScrollIntoView(fieldset);
-                fieldset.animating = false;
-              },
-              // Scroll the fieldset into view
-              step: function() {
-                Drupal.collapseScrollIntoView(fieldset);
-              }
-            }
-          );
-          if (typeof Drupal.textareaAttach != 'undefined') {
-            // Initialize resizable textareas that are now revealed
-            Drupal.textareaAttach(null, fieldset);
-          }
-        }
-        else {
-          // Collapse fieldset with animation (reverse of opening)
-          $(fieldset.contentWrapper)
-            .slideUp('medium', function () { $(fieldset).addClass('collapsed'); fieldset.animating = false; } )
-            .show();
-        }
-        return false;
-      })
-      .html(this.innerHTML);
-    $(this)
-      .empty()
-      .append(a);
-
-    // Wrap fieldsets contents (except for the legend) into wrapper divs for animating.
-    // div1 is used to avoid margin problems inside fieldsets,
-    // div2 is the one that is actually animated.
-    var div1 = document.createElement('div');
-    var div2 = document.createElement('div');
-    this.parentNode.contentWrapper = div2;
-    $(this).after(div1);
-    $(div1).append(div2);
-    var el = div1.nextSibling;
-    while (el != null) {
-      var next = el.nextSibling;
-      $(el).remove();
-      $(div2).append(el);
-      el = next;
-    }
-    // Avoid jumping around due to margins collapsing into fieldset border
-    $(div1).css('overflow', 'hidden');
-
-    // Expand if there are errors inside
-    if ($('input.error, textarea.error, select.error', this.parentNode).size() > 0) {
-      $(this.parentNode).removeClass('collapsed');
+/**
+ * Toggle the visibility of a fieldset using smooth animations
+ */
+Drupal.toggleFieldset = function(fieldset) {
+  if ($(fieldset).is('.collapsed')) {
+    var content = $('> div', fieldset).hide();
+    $(fieldset).removeClass('collapsed');
+    content.slideDown(300, {
+      complete: function() {
+        // Make sure we open to height auto
+        $(this).css('height', 'auto');
+        Drupal.collapseScrollIntoView(this.parentNode);
+        this.parentNode.animating = false;
+      },
+      step: function() {
+         // Scroll the fieldset into view
+        Drupal.collapseScrollIntoView(this.parentNode);
+      }
+    });
+    if (typeof Drupal.textareaAttach != 'undefined') {
+      // Initialize resizable textareas that are now revealed
+      Drupal.textareaAttach(null, fieldset);
     }
-  });
+  }
+  else {
+    var content = $('> div', fieldset).slideUp('medium', function() {
+      $(this.parentNode).addClass('collapsed');
+      this.parentNode.animating = false;
+    });
+  }
 }
 
 /**
@@ -95,5 +51,26 @@ Drupal.collapseScrollIntoView = function (node) {
 
 // Global Killswitch
 if (Drupal.jsEnabled) {
-  $(document).ready(Drupal.collapseAutoAttach);
+  $(document).ready(function() {
+    $('fieldset.collapsible > legend').each(function() {
+      var fieldset = $(this.parentNode);
+      // Expand if there are errors inside
+      if ($('input.error, textarea.error, select.error', fieldset).size() > 0) {
+        fieldset.removeClass('collapsed');
+      }
+
+      // Turn the legend into a clickable link and wrap the contents of the fieldset
+      // in a div for easier animation
+      var text = this.innerHTML;
+      $(this).empty().append($('<a href="#">'+ text +'</a>').click(function() {
+        var fieldset = $(this).parents('fieldset:first')[0];
+        // Don't animate multiple times
+        if (!fieldset.animating) {
+          fieldset.animating = true;
+          Drupal.toggleFieldset(fieldset);
+        }
+        return false;
+      })).after($('<div class="fieldset-wrapper"></div>').append(fieldset.children(':not(legend)')));
+    });
+  });
 }