diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js index 14d0660..6240c84 100644 --- a/core/misc/vertical-tabs.js +++ b/core/misc/vertical-tabs.js @@ -11,185 +11,191 @@ * '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. + * + * These functions are only run when the viewport width of 660px */ -Drupal.behaviors.verticalTabs = { - attach: function (context) { - $('.vertical-tabs-panes', context).once('vertical-tabs', function () { - var focusID = $(':hidden.vertical-tabs-active-tab', this).val(); - var tab_focus; - - // Check if there are some fieldsets that can be converted to vertical-tabs - var $fieldsets = $('> fieldset', this); - if ($fieldsets.length == 0) { - return; - } - // Create the tab column. - var tab_list = $(''); - $(this).wrap('
').before(tab_list); +if (document.documentElement.clientWidth > 640) { - // Transform each fieldset into a tab. - $fieldsets.each(function () { - var vertical_tab = new Drupal.verticalTab({ - title: $('> legend', this).text(), - fieldset: $(this) - }); - tab_list.append(vertical_tab.item); - $(this) - .removeClass('collapsible collapsed') - .addClass('vertical-tabs-pane') - .data('verticalTab', vertical_tab); - if (this.id == focusID) { - tab_focus = $(this); + Drupal.behaviors.verticalTabs = { + attach: function (context) { + $('.vertical-tabs-panes', context).once('vertical-tabs', function () { + var focusID = $(':hidden.vertical-tabs-active-tab', this).val(); + var tab_focus; + + // Check if there are some fieldsets that can be converted to vertical-tabs + var $fieldsets = $('> fieldset', this); + if ($fieldsets.length == 0) { + return; } - }); - $('> li:first', tab_list).addClass('first'); - $('> li:last', tab_list).addClass('last'); + // Create the tab column. + var tab_list = $(''); + $(this).wrap('
').before(tab_list); + + // Transform each fieldset into a tab. + $fieldsets.each(function () { + var vertical_tab = new Drupal.verticalTab({ + title: $('> legend', this).text(), + fieldset: $(this) + }); + tab_list.append(vertical_tab.item); + $(this) + .removeClass('collapsible collapsed') + .addClass('vertical-tabs-pane') + .data('verticalTab', vertical_tab); + if (this.id == focusID) { + tab_focus = $(this); + } + }); - if (!tab_focus) { - // If the current URL has a fragment and one of the tabs contains an - // element that matches the URL fragment, activate that tab. - if (window.location.hash && $(window.location.hash, this).length) { - tab_focus = $(window.location.hash, this).closest('.vertical-tabs-pane'); + $('> li:first', tab_list).addClass('first'); + $('> li:last', tab_list).addClass('last'); + + if (!tab_focus) { + // If the current URL has a fragment and one of the tabs contains an + // element that matches the URL fragment, activate that tab. + if (window.location.hash && $(window.location.hash, this).length) { + tab_focus = $(window.location.hash, this).closest('.vertical-tabs-pane'); + } + else { + tab_focus = $('> .vertical-tabs-pane:first', this); + } } - else { - tab_focus = $('> .vertical-tabs-pane:first', this); + if (tab_focus.length) { + tab_focus.data('verticalTab').focus(); } - } - if (tab_focus.length) { - tab_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; - }); - - // Keyboard events added: - // Pressing the Enter key will open the tab pane. - this.link.keydown(function(event) { - if (event.keyCode == 13) { - self.focus(); - // Set focus on the first input field of the visible fieldset/tab pane. - $("fieldset.vertical-tabs-pane :input:visible:enabled:first").focus(); - return false; + }); } - }); + }; - this.fieldset - .bind('summaryUpdated', function () { - self.updateSummary(); - }) - .trigger('summaryUpdated'); -}; - -Drupal.verticalTab.prototype = { /** - * Displays the tab's content pane. + * 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. */ - 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'); - // Mark the active tab for screen readers. - $('#active-vertical-tab').remove(); - this.link.append('' + Drupal.t('(active tab)') + ''); - }, + Drupal.verticalTab = function (settings) { + var self = this; + $.extend(this, settings, Drupal.theme('verticalTab', settings)); - /** - * Updates the tab's summary. - */ - updateSummary: function () { - this.summary.html(this.fieldset.drupalGetSummary()); - }, + this.link.click(function () { + self.focus(); + return false; + }); - /** - * Shows a vertical tab pane. - */ - tabShow: function () { - // Display the tab. - this.item.show(); - // Update .first marker for items. We need recurse from parent to retain the - // actual DOM element order as jQuery implements sortOrder, but not as public - // method. - this.item.parent().children('.vertical-tab-button').removeClass('first') - .filter(':visible:first').addClass('first'); - // Display the fieldset. - this.fieldset.removeClass('vertical-tab-hidden').show(); - // Focus this tab. - this.focus(); - return this; - }, + // Keyboard events added: + // Pressing the Enter key will open the tab pane. + this.link.keydown(function(event) { + if (event.keyCode == 13) { + self.focus(); + // Set focus on the first input field of the visible fieldset/tab pane. + $("fieldset.vertical-tabs-pane :input:visible:enabled:first").focus(); + return false; + } + }); - /** - * Hides a vertical tab pane. - */ - tabHide: function () { - // Hide this tab. - this.item.hide(); - // Update .first marker for items. We need recurse from parent to retain the - // actual DOM element order as jQuery implements sortOrder, but not as public - // method. - this.item.parent().children('.vertical-tab-button').removeClass('first') - .filter(':visible:first').addClass('first'); - // Hide the fieldset. - this.fieldset.addClass('vertical-tab-hidden').hide(); - // Focus the first visible tab (if there is one). - var $firstTab = this.fieldset.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first'); - if ($firstTab.length) { - $firstTab.data('verticalTab').focus(); + 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'); + // Mark the active tab for screen readers. + $('#active-vertical-tab').remove(); + this.link.append('' + Drupal.t('(active tab)') + ''); + }, + + /** + * Updates the tab's summary. + */ + updateSummary: function () { + this.summary.html(this.fieldset.drupalGetSummary()); + }, + + /** + * Shows a vertical tab pane. + */ + tabShow: function () { + // Display the tab. + this.item.show(); + // Update .first marker for items. We need recurse from parent to retain the + // actual DOM element order as jQuery implements sortOrder, but not as public + // method. + this.item.parent().children('.vertical-tab-button').removeClass('first') + .filter(':visible:first').addClass('first'); + // Display the fieldset. + this.fieldset.removeClass('vertical-tab-hidden').show(); + // Focus this tab. + this.focus(); + return this; + }, + + /** + * Hides a vertical tab pane. + */ + tabHide: function () { + // Hide this tab. + this.item.hide(); + // Update .first marker for items. We need recurse from parent to retain the + // actual DOM element order as jQuery implements sortOrder, but not as public + // method. + this.item.parent().children('.vertical-tab-button').removeClass('first') + .filter(':visible:first').addClass('first'); + // Hide the fieldset. + this.fieldset.addClass('vertical-tab-hidden').hide(); + // Focus the first visible tab (if there is one). + var $firstTab = this.fieldset.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first'); + if ($firstTab.length) { + $firstTab.data('verticalTab').focus(); + } + return this; } - return this; - } -}; + }; -/** - * 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 = $('
  • ') - .append(tab.link = $('') - .append(tab.title = $('').text(settings.title)) - .append(tab.summary = $('') - ) - ); - return tab; -}; + /** + * 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 = $('
  • ') + .append(tab.link = $('') + .append(tab.title = $('').text(settings.title)) + .append(tab.summary = $('') + ) + ); + return tab; + }; +} })(jQuery);