root / drupal7 / sites / all / themes / bootstrap / js / misc / _vertical-tabs.js @ 87dbc3bf
1 | 87dbc3bf | Benjamin Luce | |
---|---|---|---|
2 | (function ($) { |
||
3 | |||
4 | /**
|
||
5 | * This script transforms a set of fieldsets into a stack of vertical
|
||
6 | * tabs. Another tab pane can be selected by clicking on the respective
|
||
7 | * tab.
|
||
8 | *
|
||
9 | * Each tab may have a summary which can be updated by another
|
||
10 | * script. For that to work, each fieldset has an associated
|
||
11 | * 'verticalTabCallback' (with jQuery.data() attached to the fieldset),
|
||
12 | * which is called every time the user performs an update to a form
|
||
13 | * element inside the tab pane.
|
||
14 | */
|
||
15 | Drupal.behaviors.verticalTabs = { |
||
16 | attach: function (context) { |
||
17 | $('.vertical-tabs-panes', context).once('vertical-tabs', function () { |
||
18 | $(this).addClass('tab-content'); |
||
19 | var focusID = $(':hidden.vertical-tabs-active-tab', this).val(); |
||
20 | var tab_focus;
|
||
21 | |||
22 | // Check if there are some fieldsets that can be converted to vertical-tabs
|
||
23 | var $fieldsets = $('> fieldset', this); |
||
24 | if ($fieldsets.length == 0) { |
||
25 | return;
|
||
26 | } |
||
27 | |||
28 | // Create the tab column.
|
||
29 | var tab_list = $('<ul class="nav nav-tabs vertical-tabs-list"></ul>'); |
||
30 | $(this).wrap('<div class="tabbable tabs-left vertical-tabs clearfix"></div>').before(tab_list); |
||
31 | |||
32 | // Transform each fieldset into a tab.
|
||
33 | $fieldsets.each(function () { |
||
34 | var vertical_tab = new Drupal.verticalTab({ |
||
35 | title: $('> legend', this).text(), |
||
36 | fieldset: $(this) |
||
37 | }); |
||
38 | tab_list.append(vertical_tab.item); |
||
39 | $(this) |
||
40 | .removeClass('collapsible collapsed panel panel-default')
|
||
41 | .addClass('tab-pane vertical-tabs-pane')
|
||
42 | .data('verticalTab', vertical_tab)
|
||
43 | .find('> legend').remove();
|
||
44 | if (this.id == focusID) { |
||
45 | tab_focus = $(this); |
||
46 | } |
||
47 | }); |
||
48 | |||
49 | $('> li:first', tab_list).addClass('first'); |
||
50 | $('> li:last', tab_list).addClass('last'); |
||
51 | |||
52 | if (!tab_focus) {
|
||
53 | // If the current URL has a fragment and one of the tabs contains an
|
||
54 | // element that matches the URL fragment, activate that tab.
|
||
55 | if (window.location.hash && $(this).find(window.location.hash).length) { |
||
56 | tab_focus = $(this).find(window.location.hash).closest('.vertical-tabs-pane'); |
||
57 | } |
||
58 | else {
|
||
59 | tab_focus = $('> .vertical-tabs-pane:first', this); |
||
60 | } |
||
61 | } |
||
62 | if (tab_focus.length) {
|
||
63 | tab_focus.data('verticalTab').focus();
|
||
64 | } |
||
65 | }); |
||
66 | } |
||
67 | }; |
||
68 | |||
69 | /**
|
||
70 | * The vertical tab object represents a single tab within a tab group.
|
||
71 | *
|
||
72 | * @param settings
|
||
73 | * An object with the following keys:
|
||
74 | * - title: The name of the tab.
|
||
75 | * - fieldset: The jQuery object of the fieldset that is the tab pane.
|
||
76 | */
|
||
77 | Drupal.verticalTab = function (settings) { |
||
78 | var self = this; |
||
79 | $.extend(this, settings, Drupal.theme('verticalTab', settings)); |
||
80 | |||
81 | this.link.click(function () { |
||
82 | self.focus(); |
||
83 | }); |
||
84 | |||
85 | // Keyboard events added:
|
||
86 | // Pressing the Enter key will open the tab pane.
|
||
87 | this.link.keydown(function(event) { |
||
88 | if (event.keyCode == 13) { |
||
89 | self.focus(); |
||
90 | // Set focus on the first input field of the visible fieldset/tab pane.
|
||
91 | $("fieldset.vertical-tabs-pane :input:visible:enabled:first").focus(); |
||
92 | return false; |
||
93 | } |
||
94 | }); |
||
95 | |||
96 | this.fieldset
|
||
97 | .bind('summaryUpdated', function () { |
||
98 | self.updateSummary(); |
||
99 | }) |
||
100 | .trigger('summaryUpdated');
|
||
101 | }; |
||
102 | |||
103 | Drupal.verticalTab.prototype = { |
||
104 | /**
|
||
105 | * Displays the tab's content pane.
|
||
106 | */
|
||
107 | focus: function () { |
||
108 | this.fieldset
|
||
109 | .siblings('fieldset.vertical-tabs-pane')
|
||
110 | .each(function () {
|
||
111 | $(this).addClass('fade'); |
||
112 | var tab = $(this).data('verticalTab'); |
||
113 | tab.item.removeClass('selected');
|
||
114 | }) |
||
115 | .end() |
||
116 | .addClass('fade in')
|
||
117 | .siblings(':hidden.vertical-tabs-active-tab')
|
||
118 | .val(this.fieldset.attr('id')); |
||
119 | this.fieldset.data('verticalTab').item.find('a').tab('show'); |
||
120 | this.item.addClass('selected'); |
||
121 | // Mark the active tab for screen readers.
|
||
122 | $('#active-vertical-tab').remove(); |
||
123 | this.link.append('<span id="active-vertical-tab" class="element-invisible">' + Drupal.t('(active tab)') + '</span>'); |
||
124 | }, |
||
125 | |||
126 | /**
|
||
127 | * Updates the tab's summary.
|
||
128 | */
|
||
129 | updateSummary: function () { |
||
130 | this.summary.html(this.fieldset.drupalGetSummary()); |
||
131 | }, |
||
132 | |||
133 | /**
|
||
134 | * Shows a vertical tab pane.
|
||
135 | */
|
||
136 | tabShow: function () { |
||
137 | // Display the tab.
|
||
138 | this.item.show();
|
||
139 | // Update .first marker for items. We need recurse from parent to retain the
|
||
140 | // actual DOM element order as jQuery implements sortOrder, but not as public
|
||
141 | // method.
|
||
142 | this.item.parent().children('.vertical-tab-button').removeClass('first') |
||
143 | .filter(':visible:first').addClass('first'); |
||
144 | // Display the fieldset.
|
||
145 | this.fieldset.removeClass('vertical-tab-hidden'); |
||
146 | // Focus this tab.
|
||
147 | this.focus();
|
||
148 | return this; |
||
149 | }, |
||
150 | |||
151 | /**
|
||
152 | * Hides a vertical tab pane.
|
||
153 | */
|
||
154 | tabHide: function () { |
||
155 | // Hide this tab.
|
||
156 | this.item.hide();
|
||
157 | // Update .first marker for items. We need recurse from parent to retain the
|
||
158 | // actual DOM element order as jQuery implements sortOrder, but not as public
|
||
159 | // method.
|
||
160 | this.item.parent().children('.vertical-tab-button').removeClass('first') |
||
161 | .filter(':visible:first').addClass('first'); |
||
162 | // Hide the fieldset.
|
||
163 | this.fieldset.addClass('vertical-tab-hidden'); |
||
164 | // Focus the first visible tab (if there is one).
|
||
165 | var $firstTab = this.fieldset.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first'); |
||
166 | if ($firstTab.length) { |
||
167 | $firstTab.data('verticalTab').focus(); |
||
168 | } |
||
169 | return this; |
||
170 | } |
||
171 | }; |
||
172 | |||
173 | /**
|
||
174 | * Theme function for a vertical tab.
|
||
175 | *
|
||
176 | * @param settings
|
||
177 | * An object with the following keys:
|
||
178 | * - title: The name of the tab.
|
||
179 | * @return
|
||
180 | * This function has to return an object with at least these keys:
|
||
181 | * - item: The root tab jQuery element
|
||
182 | * - link: The anchor tag that acts as the clickable area of the tab
|
||
183 | * (jQuery version)
|
||
184 | * - summary: The jQuery element that contains the tab summary
|
||
185 | */
|
||
186 | Drupal.theme.prototype.verticalTab = function (settings) { |
||
187 | var tab = {};
|
||
188 | tab.item = $('<li class="vertical-tab-button" tabindex="-1"></li>') |
||
189 | .append(tab.link = $('<a href="#' + settings.fieldset[0].id + '" data-toggle="tab"></a>') |
||
190 | .append(tab.title = $('<span></span>').text(settings.title)) |
||
191 | .append(tab.summary = $('<div class="summary"></div>') |
||
192 | ) |
||
193 | ); |
||
194 | return tab;
|
||
195 | }; |
||
196 | |||
197 | })(jQuery); |