1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
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 = $('<strong></strong>').text(settings.title))
.append(tab.summary = $('<small class="summary"></small>')
)
);
return tab;
};
})(jQuery);
|
