(function ($) {
$(document).ready(function() {
if (location.hash) {
window.scrollTo(0, 0);
}
});
/**
* This script transforms a set of fieldsets into a stack of horizontal
* tabs. Another tab pane can be selected by clicking on the respective
* tab.
*
* Each tab may have a summary which can be updated by another
* script. For that to work, each fieldset has an associated
* 'horizontalTabCallback' (with jQuery.data() attached to the fieldset),
* which is called every time the user performs an update to a form
* element inside the tab pane.
*/
Drupal.behaviors.horizontalTabs = {
attach: function (context) {
$('.horizontal-tabs-panes', context).once('horizontal-tabs', function () {
var focusID = $(':hidden.horizontal-tabs-active-tab', this).val();
var tab_focus;
// Check if there are some fieldsets that can be converted to horizontal-tabs
var $fieldsets = $('> fieldset', this);
if ($fieldsets.length == 0) {
return;
};
// Create the tab column.
var tab_list = $('
');
$(this).wrap('').before(tab_list);
// Transform each fieldset into a tab.
$fieldsets.each(function () {
var horizontal_tab = new Drupal.horizontalTab({
title: $('> legend', this).text(),
fieldset: $(this)
});
tab_list.append(horizontal_tab.item);
$(this)
.removeClass('collapsible collapsed')
.addClass('horizontal-tabs-pane')
.data('horizontalTab', horizontal_tab);
if (this.id == focusID) {
tab_focus = $(this);
}
});
$('> li:first', tab_list).addClass('first');
$('> li:last', tab_list).addClass('last');
if (!tab_focus) {
// If the current URL has a fragment and one of the tabs contains an
// element that matches the URL fragment, activate that tab.
if (window.location.hash && $(window.location.hash, this).length) {
tab_focus = $(window.location.hash, this).closest('.horizontal-tabs-pane');
}
else {
tab_focus = $('> .horizontal-tabs-pane:first', this);
}
}
if (tab_focus.length) {
tab_focus.data('horizontalTab').focus();
}
});
}
};
/**
* The horizontal tab object represents a single tab within a tab group.
*
* @param settings
* An object with the following keys:
* - title: The name of the tab.
* - fieldset: The jQuery object of the fieldset that is the tab pane.
*/
Drupal.horizontalTab = function (settings) {
var self = this;
$.extend(this, settings, Drupal.theme('horizontalTab', settings));
this.link.click(function () {
self.focus();
return false;
});
// Keyboard events added:
// Pressing the Enter key will open the tab pane.
this.link.keydown(function(event) {
if (event.keyCode == 13) {
self.focus();
// Set focus on the first input field of the visible fieldset/tab pane.
$("fieldset.horizontal-tabs-pane :input:visible:enabled:first").focus();
return false;
}
});
// Pressing the Enter key lets you leave the tab again.
this.fieldset.keydown(function(event) {
// Enter key should not trigger inside