drupal/misc/vertical-tabs.js

// $Id: vertical-tabs.js,v 1.6 2009/08/25 13:30:54 dries Exp $

(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 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();
    });
  }
};

/**
 * 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;
  });

  this.fieldset
    .bind('summaryUpdated', function () {
      self.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 = $('<strong></strong>').text(settings.title))
      .append(tab.summary = $('<small class="summary"></small>')
    )
  );
  return tab;
};

})(jQuery);
1	// $Id: vertical-tabs.js,v 1.6 2009/08/25 13:30:54 dries Exp $
2
3	(function ($) {
4
5	/**
6	* This script transforms a set of fieldsets into a stack of vertical
7	* tabs. Another tab pane can be selected by clicking on the respective
8	* tab.
9	*
10	* Each tab may have a summary which can be updated by another
11	* script. For that to work, each fieldset has an associated
12	* 'verticalTabCallback' (with jQuery.data() attached to the fieldset),
13	* which is called every time the user performs an update to a form
14	* element inside the tab pane.
15	*/
16	Drupal.behaviors.verticalTabs = {
17	attach: function (context) {
18	$('.vertical-tabs-panes', context).once('vertical-tabs', function () {
19	var focusID = $(':hidden.vertical-tabs-active-tab', this).val();
20	var focus;
21	// Create the tab column.
22	var list = $('<ul class="vertical-tabs-list"></ul>');
23	$(this).wrap('<div class="vertical-tabs clearfix"></div>').before(list);
24
25	// Transform each fieldset into a tab.
26	$('> fieldset', this).each(function () {
27	var tab = new Drupal.verticalTab({ title: $('> legend', this).text(), fieldset: $(this) });
28	list.append(tab.item);
29	$(this)
30	.removeClass('collapsible collapsed')
31	.addClass('vertical-tabs-pane')
32	.data('verticalTab', tab);
33	if (this.id == focusID) {
34	focus = $(this);
35	}
36	});
37
38	$('> li:first', list).addClass('first');
39	$('> li:last', list).addClass('last');
40
41	if (!focus) {
42	focus = $('> .vertical-tabs-pane:first', this);
43	}
44	focus.data('verticalTab').focus();
45	});
46	}
47	};
48
49	/**
50	* The vertical tab object represents a single tab within a tab group.
51	*
52	* @param settings
53	* An object with the following keys:
54	* - title: The name of the tab.
55	* - fieldset: The jQuery object of the fieldset that is the tab pane.
56	*/
57	Drupal.verticalTab = function (settings) {
58	var self = this;
59	$.extend(this, settings, Drupal.theme('verticalTab', settings));
60
61	this.link.click(function () {
62	self.focus();
63	return false;
64	});
65
66	this.fieldset
67	.bind('summaryUpdated', function () {
68	self.updateSummary();
69	})
70	.trigger('summaryUpdated');
71	};
72
73	Drupal.verticalTab.prototype = {
74	// Displays the tab's content pane.
75	focus: function () {
76	this.fieldset
77	.siblings('fieldset.vertical-tabs-pane')
78	.each(function () {
79	var tab = $(this).data('verticalTab');
80	tab.fieldset.hide();
81	tab.item.removeClass('selected');
82	})
83	.end()
84	.show()
85	.siblings(':hidden.vertical-tabs-active-tab')
86	.val(this.fieldset.attr('id'));
87	this.item.addClass('selected');
88	},
89
90	// Updates the tab's summary.
91	updateSummary: function () {
92	this.summary.html(this.fieldset.getSummary());
93	}
94	};
95
96	/**
97	* Theme function for a vertical tab.
98	*
99	* @param settings
100	* An object with the following keys:
101	* - title: The name of the tab.
102	* @return
103	* This function has to return an object with at least these keys:
104	* - item: The root tab jQuery element
105	* - link: The anchor tag that acts as the clickable area of the tab
106	* (jQuery version)
107	* - summary: The jQuery element that contains the tab summary
108	*/
109	Drupal.theme.prototype.verticalTab = function (settings) {
110	var tab = {};
111	tab.item = $('<li class="vertical-tab-button"></li>')
112	.append(tab.link = $('<a href="#"></a>')
113	.append(tab.title = $('<strong></strong>').text(settings.title))
114	.append(tab.summary = $('<small class="summary"></small>')
115	)
116	);
117	return tab;
118	};
119
120	})(jQuery);