danielebarchiesi@0: 
danielebarchiesi@0: (function ($) {
danielebarchiesi@0: 
danielebarchiesi@0: /**
danielebarchiesi@0:  * This script transforms a set of fieldsets into a stack of vertical
danielebarchiesi@0:  * tabs. Another tab pane can be selected by clicking on the respective
danielebarchiesi@0:  * tab.
danielebarchiesi@0:  *
danielebarchiesi@0:  * Each tab may have a summary which can be updated by another
danielebarchiesi@0:  * script. For that to work, each fieldset has an associated
danielebarchiesi@0:  * 'verticalTabCallback' (with jQuery.data() attached to the fieldset),
danielebarchiesi@0:  * which is called every time the user performs an update to a form
danielebarchiesi@0:  * element inside the tab pane.
danielebarchiesi@0:  */
danielebarchiesi@0: Drupal.behaviors.verticalTabs = {
danielebarchiesi@0:   attach: function (context) {
danielebarchiesi@0:     $('.vertical-tabs-panes', context).once('vertical-tabs', function () {
danielebarchiesi@0:       var focusID = $(':hidden.vertical-tabs-active-tab', this).val();
danielebarchiesi@0:       var tab_focus;
danielebarchiesi@0: 
danielebarchiesi@0:       // Check if there are some fieldsets that can be converted to vertical-tabs
danielebarchiesi@0:       var $fieldsets = $('> fieldset', this);
danielebarchiesi@0:       if ($fieldsets.length == 0) {
danielebarchiesi@0:         return;
danielebarchiesi@0:       }
danielebarchiesi@0: 
danielebarchiesi@0:       // Create the tab column.
danielebarchiesi@0:       var tab_list = $('<ul class="vertical-tabs-list"></ul>');
danielebarchiesi@0:       $(this).wrap('<div class="vertical-tabs clearfix"></div>').before(tab_list);
danielebarchiesi@0: 
danielebarchiesi@0:       // Transform each fieldset into a tab.
danielebarchiesi@0:       $fieldsets.each(function () {
danielebarchiesi@0:         var vertical_tab = new Drupal.verticalTab({
danielebarchiesi@0:           title: $('> legend', this).text(),
danielebarchiesi@0:           fieldset: $(this)
danielebarchiesi@0:         });
danielebarchiesi@0:         tab_list.append(vertical_tab.item);
danielebarchiesi@0:         $(this)
danielebarchiesi@0:           .removeClass('collapsible collapsed')
danielebarchiesi@0:           .addClass('vertical-tabs-pane')
danielebarchiesi@0:           .data('verticalTab', vertical_tab);
danielebarchiesi@0:         if (this.id == focusID) {
danielebarchiesi@0:           tab_focus = $(this);
danielebarchiesi@0:         }
danielebarchiesi@0:       });
danielebarchiesi@0: 
danielebarchiesi@0:       $('> li:first', tab_list).addClass('first');
danielebarchiesi@0:       $('> li:last', tab_list).addClass('last');
danielebarchiesi@0: 
danielebarchiesi@0:       if (!tab_focus) {
danielebarchiesi@0:         // If the current URL has a fragment and one of the tabs contains an
danielebarchiesi@0:         // element that matches the URL fragment, activate that tab.
danielebarchiesi@0:         if (window.location.hash && $(this).find(window.location.hash).length) {
danielebarchiesi@0:           tab_focus = $(this).find(window.location.hash).closest('.vertical-tabs-pane');
danielebarchiesi@0:         }
danielebarchiesi@0:         else {
danielebarchiesi@0:           tab_focus = $('> .vertical-tabs-pane:first', this);
danielebarchiesi@0:         }
danielebarchiesi@0:       }
danielebarchiesi@0:       if (tab_focus.length) {
danielebarchiesi@0:         tab_focus.data('verticalTab').focus();
danielebarchiesi@0:       }
danielebarchiesi@0:     });
danielebarchiesi@0:   }
danielebarchiesi@0: };
danielebarchiesi@0: 
danielebarchiesi@0: /**
danielebarchiesi@0:  * The vertical tab object represents a single tab within a tab group.
danielebarchiesi@0:  *
danielebarchiesi@0:  * @param settings
danielebarchiesi@0:  *   An object with the following keys:
danielebarchiesi@0:  *   - title: The name of the tab.
danielebarchiesi@0:  *   - fieldset: The jQuery object of the fieldset that is the tab pane.
danielebarchiesi@0:  */
danielebarchiesi@0: Drupal.verticalTab = function (settings) {
danielebarchiesi@0:   var self = this;
danielebarchiesi@0:   $.extend(this, settings, Drupal.theme('verticalTab', settings));
danielebarchiesi@0: 
danielebarchiesi@0:   this.link.click(function () {
danielebarchiesi@0:     self.focus();
danielebarchiesi@0:     return false;
danielebarchiesi@0:   });
danielebarchiesi@0: 
danielebarchiesi@0:   // Keyboard events added:
danielebarchiesi@0:   // Pressing the Enter key will open the tab pane.
danielebarchiesi@0:   this.link.keydown(function(event) {
danielebarchiesi@0:     if (event.keyCode == 13) {
danielebarchiesi@0:       self.focus();
danielebarchiesi@0:       // Set focus on the first input field of the visible fieldset/tab pane.
danielebarchiesi@0:       $("fieldset.vertical-tabs-pane :input:visible:enabled:first").focus();
danielebarchiesi@0:       return false;
danielebarchiesi@0:     }
danielebarchiesi@0:   });
danielebarchiesi@0: 
danielebarchiesi@0:   this.fieldset
danielebarchiesi@0:     .bind('summaryUpdated', function () {
danielebarchiesi@0:       self.updateSummary();
danielebarchiesi@0:     })
danielebarchiesi@0:     .trigger('summaryUpdated');
danielebarchiesi@0: };
danielebarchiesi@0: 
danielebarchiesi@0: Drupal.verticalTab.prototype = {
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Displays the tab's content pane.
danielebarchiesi@0:    */
danielebarchiesi@0:   focus: function () {
danielebarchiesi@0:     this.fieldset
danielebarchiesi@0:       .siblings('fieldset.vertical-tabs-pane')
danielebarchiesi@0:         .each(function () {
danielebarchiesi@0:           var tab = $(this).data('verticalTab');
danielebarchiesi@0:           tab.fieldset.hide();
danielebarchiesi@0:           tab.item.removeClass('selected');
danielebarchiesi@0:         })
danielebarchiesi@0:         .end()
danielebarchiesi@0:       .show()
danielebarchiesi@0:       .siblings(':hidden.vertical-tabs-active-tab')
danielebarchiesi@0:         .val(this.fieldset.attr('id'));
danielebarchiesi@0:     this.item.addClass('selected');
danielebarchiesi@0:     // Mark the active tab for screen readers.
danielebarchiesi@0:     $('#active-vertical-tab').remove();
danielebarchiesi@0:     this.link.append('<span id="active-vertical-tab" class="element-invisible">' + Drupal.t('(active tab)') + '</span>');
danielebarchiesi@0:   },
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Updates the tab's summary.
danielebarchiesi@0:    */
danielebarchiesi@0:   updateSummary: function () {
danielebarchiesi@0:     this.summary.html(this.fieldset.drupalGetSummary());
danielebarchiesi@0:   },
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Shows a vertical tab pane.
danielebarchiesi@0:    */
danielebarchiesi@0:   tabShow: function () {
danielebarchiesi@0:     // Display the tab.
danielebarchiesi@0:     this.item.show();
danielebarchiesi@0:     // Update .first marker for items. We need recurse from parent to retain the
danielebarchiesi@0:     // actual DOM element order as jQuery implements sortOrder, but not as public
danielebarchiesi@0:     // method.
danielebarchiesi@0:     this.item.parent().children('.vertical-tab-button').removeClass('first')
danielebarchiesi@0:       .filter(':visible:first').addClass('first');
danielebarchiesi@0:     // Display the fieldset.
danielebarchiesi@0:     this.fieldset.removeClass('vertical-tab-hidden').show();
danielebarchiesi@0:     // Focus this tab.
danielebarchiesi@0:     this.focus();
danielebarchiesi@0:     return this;
danielebarchiesi@0:   },
danielebarchiesi@0: 
danielebarchiesi@0:   /**
danielebarchiesi@0:    * Hides a vertical tab pane.
danielebarchiesi@0:    */
danielebarchiesi@0:   tabHide: function () {
danielebarchiesi@0:     // Hide this tab.
danielebarchiesi@0:     this.item.hide();
danielebarchiesi@0:     // Update .first marker for items. We need recurse from parent to retain the
danielebarchiesi@0:     // actual DOM element order as jQuery implements sortOrder, but not as public
danielebarchiesi@0:     // method.
danielebarchiesi@0:     this.item.parent().children('.vertical-tab-button').removeClass('first')
danielebarchiesi@0:       .filter(':visible:first').addClass('first');
danielebarchiesi@0:     // Hide the fieldset.
danielebarchiesi@0:     this.fieldset.addClass('vertical-tab-hidden').hide();
danielebarchiesi@0:     // Focus the first visible tab (if there is one).
danielebarchiesi@0:     var $firstTab = this.fieldset.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first');
danielebarchiesi@0:     if ($firstTab.length) {
danielebarchiesi@0:       $firstTab.data('verticalTab').focus();
danielebarchiesi@0:     }
danielebarchiesi@0:     return this;
danielebarchiesi@0:   }
danielebarchiesi@0: };
danielebarchiesi@0: 
danielebarchiesi@0: /**
danielebarchiesi@0:  * Theme function for a vertical tab.
danielebarchiesi@0:  *
danielebarchiesi@0:  * @param settings
danielebarchiesi@0:  *   An object with the following keys:
danielebarchiesi@0:  *   - title: The name of the tab.
danielebarchiesi@0:  * @return
danielebarchiesi@0:  *   This function has to return an object with at least these keys:
danielebarchiesi@0:  *   - item: The root tab jQuery element
danielebarchiesi@0:  *   - link: The anchor tag that acts as the clickable area of the tab
danielebarchiesi@0:  *       (jQuery version)
danielebarchiesi@0:  *   - summary: The jQuery element that contains the tab summary
danielebarchiesi@0:  */
danielebarchiesi@0: Drupal.theme.prototype.verticalTab = function (settings) {
danielebarchiesi@0:   var tab = {};
danielebarchiesi@0:   tab.item = $('<li class="vertical-tab-button" tabindex="-1"></li>')
danielebarchiesi@0:     .append(tab.link = $('<a href="#"></a>')
danielebarchiesi@0:       .append(tab.title = $('<strong></strong>').text(settings.title))
danielebarchiesi@0:       .append(tab.summary = $('<span class="summary"></span>')
danielebarchiesi@0:     )
danielebarchiesi@0:   );
danielebarchiesi@0:   return tab;
danielebarchiesi@0: };
danielebarchiesi@0: 
danielebarchiesi@0: })(jQuery);