Commit 57eecc45 authored by Steven Wittens's avatar Steven Wittens
Browse files

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

parent e90e2f2a
// $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)')));
});
});
}
......@@ -329,6 +329,10 @@ html.js fieldset.collapsed legend a {
html.js fieldset.collapsible legend a {
display: block;
}
/* Avoid jumping around due to margins collapsing into collapsible fieldset border */
html.js fieldset.collapsible .fieldset-wrapper {
overflow: auto;
}
/*
** Resizable text areas
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment