(function ($) { /** * This script transforms a set of fieldsets into a stack of vertical * 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 * 'verticalTabCallback' (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.verticalTabs = { attach: function (context) { $('.vertical-tabs-panes', context).once('vertical-tabs', function () { var focusID = $(':hidden.vertical-tabs-active-tab', this).val(); var tab_focus; // Check if there are some fieldsets that can be converted to vertical-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 vertical_tab = new Drupal.verticalTab({ title: $('> legend', this).text(), fieldset: $(this) }); tab_list.append(vertical_tab.item); $(this) .removeClass('collapsible collapsed') .addClass('vertical-tabs-pane') .data('verticalTab', vertical_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('.vertical-tabs-pane'); } else { tab_focus = $('> .vertical-tabs-pane:first', this); } } if (tab_focus.length) { tab_focus.data('verticalTab').focus(); } }); } }; /** * The vertical 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.verticalTab = function (settings) { var self = this; $.extend(this, settings, Drupal.theme('verticalTab', 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.vertical-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