1 files changed, 120 insertions, 0 deletions
diff --git a/misc/vertical-tabs.js b/misc/vertical-tabs.js
new file mode 100644
index 000000000..a27a3d3ec
--- /dev/null
+++ b/misc/vertical-tabs.js
@@ -0,0 +1,120 @@
+// $Id$
+
+(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:not(.vertical-tabs-processed)', context).each(function() {
+      var focusID = $(':hidden.vertical-tabs-active-tab', this).val();
+      var focus;
+      // Create the tab column.
+      var list = $('<ul class="vertical-tabs-list"></ul>');
+      $(this).wrap('<div class="vertical-tabs clearfix"></div>').before(list);
+
+      // Transform each fieldset into a tab.
+      $('> fieldset', this).each(function() {
+        var tab = new Drupal.verticalTab({ title: $('> legend', this).text(), fieldset: $(this) });
+        list.append(tab.item);
+        $(this)
+          .removeClass('collapsible collapsed')
+          .addClass('vertical-tabs-pane')
+          .data('verticalTab', tab);
+        if (this.id == focusID) {
+          focus = $(this);
+        }
+      });
+
+      $('> li:first', list).addClass('first');
+      $('> li:last', list).addClass('last');
+
+      if (!focus) {
+        focus = $('> .vertical-tabs-pane:first', this);
+      }
+      focus.data('verticalTab').focus();
+    }).addClass('vertical-tabs-processed');
+  }
+};
+
+/**
+ * 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 that = this;
+  $.extend(this, settings, Drupal.theme('verticalTab', settings));
+
+  this.link.click(function() {
+    that.focus();
+    return false;
+  });
+
+  this.fieldset
+    .bind('summaryUpdated', function() {
+      that.updateSummary();
+    })
+    .trigger('summaryUpdated');
+};
+
+Drupal.verticalTab.prototype = {
+  // Displays the tab's content pane.
+  focus: function() {
+    this.fieldset
+      .siblings('fieldset.vertical-tabs-pane')
+        .each(function() {
+          var tab = $(this).data('verticalTab');
+          tab.fieldset.hide();
+          tab.item.removeClass('selected');
+        })
+        .end()
+      .show()
+      .siblings(':hidden.vertical-tabs-active-tab')
+        .val(this.fieldset.attr('id'));
+    this.item.addClass('selected');
+  },
+
+  // Updates the tab's summary.
+  updateSummary: function() {
+    this.summary.html(this.fieldset.getSummary());
+  }
+};
+
+/**
+ * Theme function for a vertical tab.
+ *
+ * @param settings
+ *   An object with the following keys:
+ *   - title: The name of the tab.
+ * @return
+ *   This function has to return an object with at least these keys:
+ *   - item: The root tab jQuery element
+ *   - link: The anchor tag that acts as the clickable area of the tab
+ *       (jQuery version)
+ *   - summary: The jQuery element that contains the tab summary
+ */
+Drupal.theme.prototype.verticalTab = function(settings) {
+  var tab = {};
+  tab.item = $('<li class="vertical-tab-button"></li>')
+    .append(tab.link = $('<a href="#"></a>')
+      .append(tab.title = $('<span class="title"></span>').text(settings.title))
+      .append(tab.summary = $('<span class="summary"></span>')
+    )
+  );
+  return tab;
+};
+
+})(jQuery);