Commit e599787b authored by webchick's avatar webchick

Issue #1685140 by frega, seutje, ethanw, nod_: Refactor collapse.js.

parent aa9cb31b
(function ($) {
(function ($, Drupal) {
"use strict";
/**
* Toggle the visibility of a fieldset using smooth animations.
* The collapsible fieldset object represents a single collapsible fieldset.
*/
Drupal.toggleFieldset = function (fieldset) {
var $fieldset = $(fieldset);
if ($fieldset.is('.collapsed')) {
var $content = $fieldset.find('> .fieldset-wrapper').hide();
$fieldset
.removeClass('collapsed')
.trigger({ type: 'collapsed', value: false })
.find('> legend span.fieldset-legend-prefix').html(Drupal.t('Hide'));
$content.slideDown({
duration: 'fast',
easing: 'linear',
complete: function () {
Drupal.collapseScrollIntoView(fieldset);
fieldset.animating = false;
},
step: function () {
// Scroll the fieldset into view.
Drupal.collapseScrollIntoView(fieldset);
}
});
}
else {
$fieldset.trigger({ type: 'collapsed', value: true });
$fieldset.find('> .fieldset-wrapper').slideUp('fast', function () {
$fieldset
.addClass('collapsed')
.find('> legend span.fieldset-legend-prefix').html(Drupal.t('Show'));
fieldset.animating = false;
});
function CollapsibleFieldset(node, settings) {
this.$node = $(node);
this.$node.data('fieldset', this);
this.settings = $.extend({
duration:'fast',
easing:'linear'
},
settings
);
// Expand fieldset if there are errors inside, or if it contains an
// element that is targeted by the uri fragment identifier.
var anchor = location.hash && location.hash !== '#' ? ', ' + location.hash : '';
if (this.$node.find('.error' + anchor).length) {
this.$node.removeClass('collapsed');
}
};
// Initialize and setup the summary,
this.setupSummary();
// Initialize and setup the legend.
this.setupLegend();
}
/**
* Extend CollapsibleFieldset function.
*/
$.extend(CollapsibleFieldset, {
/**
* Holds references to instantiated CollapsibleFieldset objects.
*/
fieldsets: []
});
/**
* Scroll a given fieldset into view as much as possible.
* Extend CollapsibleFieldset prototype.
*/
Drupal.collapseScrollIntoView = function (node) {
var h = document.documentElement.clientHeight || document.body.clientHeight || 0;
var offset = document.documentElement.scrollTop || document.body.scrollTop || 0;
var posY = $(node).offset().top;
var fudge = 55;
if (posY + node.offsetHeight + fudge > h + offset) {
if (node.offsetHeight > h) {
window.scrollTo(0, posY);
$.extend(CollapsibleFieldset.prototype, {
/**
* Flag preventing multiple simultaneous animations.
*/
animating: false,
/**
* Initialize and setup summary events and markup.
*/
setupSummary: function () {
this.$summary = $('<span class="summary"></span>');
this.$node
.bind('summaryUpdated', $.proxy(this.onSummaryUpdated, this))
.trigger('summaryUpdated');
},
/**
* Initialize and setup legend markup.
*/
setupLegend: function () {
// Turn the legend into a clickable link, but retain span.fieldset-legend
// for CSS positioning.
var $legend = this.$node.find('> legend .fieldset-legend');
$('<span class="fieldset-legend-prefix element-invisible"></span>')
.append(this.$node.hasClass('collapsed') ? Drupal.t('Show') : Drupal.t('Hide'))
.prependTo($legend)
.after(' ');
// .wrapInner() does not retain bound events.
var $link = $('<a class="fieldset-title" href="#"></a>')
.prepend($legend.contents())
.appendTo($legend)
.click($.proxy(this.onLegendClick, this));
$legend.append(this.$summary);
},
/**
* Handle legend clicks
*/
onLegendClick: function (e) {
e.preventDefault();
this.toggle();
},
/**
* Update summary
*/
onSummaryUpdated: function () {
var text = $.trim(this.$node.drupalGetSummary());
this.$summary.html(text ? ' (' + text + ')' : '');
},
/**
* Toggle the visibility of a fieldset using smooth animations.
*/
toggle: function () {
// Don't animate multiple times.
if (this.animating) {
return;
}
if (this.$node.is('.collapsed')) {
var $content = this.$node.find('> .fieldset-wrapper').hide();
this.$node
.removeClass('collapsed')
.trigger({ type:'collapsed', value:false })
.find('> legend span.fieldset-legend-prefix').html(Drupal.t('Hide'));
$content.slideDown(
$.extend(this.settings, {
complete:$.proxy(this.onCompleteSlideDown, this)
})
);
}
else {
window.scrollTo(0, posY + node.offsetHeight - h + fudge);
this.$node.trigger({ type:'collapsed', value:true });
this.$node.find('> .fieldset-wrapper').slideUp(
$.extend(this.settings, {
complete:$.proxy(this.onCompleteSlideUp, this)
})
);
}
},
/**
* Completed opening fieldset.
*/
onCompleteSlideDown: function () {
this.$node.trigger('completeSlideDown');
this.animating = false;
},
/**
* Completed closing fieldset.
*/
onCompleteSlideUp: function () {
this.$node
.addClass('collapsed')
.find('> legend span.fieldset-legend-prefix').html(Drupal.t('Show'));
this.$node.trigger('completeSlideUp');
this.animating = false;
}
};
});
Drupal.behaviors.collapse = {
attach: function (context, settings) {
$(context).find('fieldset.collapsible').once('collapse', function () {
var $fieldset = $(this);
// Expand fieldset if there are errors inside, or if it contains an
// element that is targeted by the uri fragment identifier.
var anchor = location.hash && location.hash !== '#' ? ', ' + location.hash : '';
if ($fieldset.find('.error' + anchor).length) {
$fieldset.removeClass('collapsed');
var $collapsibleFieldsets = $(context).find('fieldset.collapsible').once('collapse');
if ($collapsibleFieldsets.length) {
for (var i = 0; i < $collapsibleFieldsets.length; i++) {
CollapsibleFieldset.fieldsets.push(new CollapsibleFieldset($collapsibleFieldsets[i], settings.collapsibleFieldset));
}
var summary = $('<span class="summary"></span>');
$fieldset.
bind('summaryUpdated', function () {
var text = $.trim($fieldset.drupalGetSummary());
summary.html(text ? ' (' + text + ')' : '');
})
.trigger('summaryUpdated');
// Turn the legend into a clickable link, but retain span.fieldset-legend
// for CSS positioning.
var $legend = $fieldset.find('> legend .fieldset-legend');
$('<span class="fieldset-legend-prefix element-invisible"></span>')
.append($fieldset.hasClass('collapsed') ? Drupal.t('Show') : Drupal.t('Hide'))
.prependTo($legend)
.after(' ');
// .wrapInner() does not retain bound events.
var $link = $('<a class="fieldset-title" href="#"></a>')
.prepend($legend.contents())
.appendTo($legend)
.click(function (e) {
e.preventDefault();
var fieldset = $fieldset.get(0);
// Don't animate multiple times.
if (!fieldset.animating) {
fieldset.animating = true;
Drupal.toggleFieldset(fieldset);
}
});
$legend.append(summary);
});
}
}
};
})(jQuery);
// Expose constructor in the public space.
Drupal.CollapsibleFieldset = CollapsibleFieldset;
})(jQuery, Drupal);
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