X-Git-Url: http://aleph1.co.uk/gitweb/?a=blobdiff_plain;ds=sidebyside;f=web%2Fcore%2Fmisc%2Fvertical-tabs.js;h=18270073cbb65c5a05624efb720ae6b9e71db641;hb=4f1b9b4ab48a8498afac9e2213a02a23ccf4a06c;hp=c7ad2fd2b44b1b15058ab5520fa082da5b450c5c;hpb=a2bd1bf0c2c1f1a17d188f4dc0726a45494cefae;p=yaffs-website
diff --git a/web/core/misc/vertical-tabs.js b/web/core/misc/vertical-tabs.js
index c7ad2fd2b..18270073c 100644
--- a/web/core/misc/vertical-tabs.js
+++ b/web/core/misc/vertical-tabs.js
@@ -1,37 +1,19 @@
/**
- * @file
- * Define vertical tabs functionality.
- */
-
-/**
- * Triggers when form values inside a vertical tab changes.
- *
- * This is used to update the summary in vertical tabs in order to know what
- * are the important fields' values.
- *
- * @event summaryUpdated
- */
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
(function ($, Drupal, drupalSettings) {
+ var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e, $target) {
+ $target.parents('.vertical-tabs__pane').each(function (index, pane) {
+ $(pane).data('verticalTab').focus();
+ });
+ };
- 'use strict';
-
- /**
- * This script transforms a set of details into a stack of vertical tabs.
- *
- * Each tab may have a summary which can be updated by another
- * script. For that to work, each details element has an associated
- * 'verticalTabCallback' (with jQuery.data() attached to the details),
- * which is called every time the user performs an update to a form
- * element inside the tab pane.
- *
- * @type {Drupal~behavior}
- *
- * @prop {Drupal~behaviorAttach} attach
- * Attaches behaviors for vertical tabs.
- */
Drupal.behaviors.verticalTabs = {
- attach: function (context) {
+ attach: function attach(context) {
var width = drupalSettings.widthBreakpoint || 640;
var mq = '(max-width: ' + width + 'px)';
@@ -39,79 +21,52 @@
return;
}
+ $('body').once('vertical-tabs-fragments').on('formFragmentLinkClickOrHashChange.verticalTabs', handleFragmentLinkClickOrHashChange);
+
$(context).find('[data-vertical-tabs-panes]').once('vertical-tabs').each(function () {
var $this = $(this).addClass('vertical-tabs__panes');
var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
- var tab_focus;
+ var tabFocus = void 0;
- // Check if there are some details that can be converted to
- // vertical-tabs.
var $details = $this.find('> details');
if ($details.length === 0) {
return;
}
- // Create the tab column.
- var tab_list = $('');
- $this.wrap('').before(tab_list);
+ var tabList = $('');
+ $this.wrap('').before(tabList);
- // Transform each details into a tab.
$details.each(function () {
var $that = $(this);
- var vertical_tab = new Drupal.verticalTab({
+ var verticalTab = new Drupal.verticalTab({
title: $that.find('> summary').text(),
details: $that
});
- tab_list.append(vertical_tab.item);
- $that
- .removeClass('collapsed')
- // prop() can't be used on browsers not supporting details element,
- // the style won't apply to them if prop() is used.
- .attr('open', true)
- .addClass('vertical-tabs__pane')
- .data('verticalTab', vertical_tab);
+ tabList.append(verticalTab.item);
+ $that.removeClass('collapsed').attr('open', true).addClass('vertical-tabs__pane').data('verticalTab', verticalTab);
if (this.id === focusID) {
- tab_focus = $that;
+ tabFocus = $that;
}
});
- $(tab_list).find('> li').eq(0).addClass('first');
- $(tab_list).find('> li').eq(-1).addClass('last');
+ $(tabList).find('> li').eq(0).addClass('first');
+ $(tabList).find('> li').eq(-1).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 (!tabFocus) {
var $locationHash = $this.find(window.location.hash);
if (window.location.hash && $locationHash.length) {
- tab_focus = $locationHash.closest('.vertical-tabs__pane');
- }
- else {
- tab_focus = $this.find('> .vertical-tabs__pane').eq(0);
+ tabFocus = $locationHash.closest('.vertical-tabs__pane');
+ } else {
+ tabFocus = $this.find('> .vertical-tabs__pane').eq(0);
}
}
- if (tab_focus.length) {
- tab_focus.data('verticalTab').focus();
+ if (tabFocus.length) {
+ tabFocus.data('verticalTab').focus();
}
});
}
};
- /**
- * The vertical tab object represents a single tab within a tab group.
- *
- * @constructor
- *
- * @param {object} settings
- * Settings object.
- * @param {string} settings.title
- * The name of the tab.
- * @param {jQuery} settings.details
- * The jQuery object of the details element that is the tab pane.
- *
- * @fires event:summaryUpdated
- *
- * @listens event:summaryUpdated
- */
Drupal.verticalTab = function (settings) {
var self = this;
$.extend(this, settings, Drupal.theme('verticalTab', settings));
@@ -123,130 +78,67 @@
self.focus();
});
- // Keyboard events added:
- // Pressing the Enter key will open the tab pane.
this.link.on('keydown', function (event) {
if (event.keyCode === 13) {
event.preventDefault();
self.focus();
- // Set focus on the first input field of the visible details/tab pane.
+
$('.vertical-tabs__pane :input:visible:enabled').eq(0).trigger('focus');
}
});
- this.details
- .on('summaryUpdated', function () {
- self.updateSummary();
- })
- .trigger('summaryUpdated');
+ this.details.on('summaryUpdated', function () {
+ self.updateSummary();
+ }).trigger('summaryUpdated');
};
Drupal.verticalTab.prototype = {
-
- /**
- * Displays the tab's content pane.
- */
- focus: function () {
- this.details
- .siblings('.vertical-tabs__pane')
- .each(function () {
- var tab = $(this).data('verticalTab');
- tab.details.hide();
- tab.item.removeClass('is-selected');
- })
- .end()
- .show()
- .siblings(':hidden.vertical-tabs__active-tab')
- .val(this.details.attr('id'));
+ focus: function focus() {
+ this.details.siblings('.vertical-tabs__pane').each(function () {
+ var tab = $(this).data('verticalTab');
+ tab.details.hide();
+ tab.item.removeClass('is-selected');
+ }).end().show().siblings(':hidden.vertical-tabs__active-tab').val(this.details.attr('id'));
this.item.addClass('is-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 () {
+ updateSummary: function updateSummary() {
this.summary.html(this.details.drupalGetSummary());
},
-
- /**
- * Shows a vertical tab pane.
- *
- * @return {Drupal.verticalTab}
- * The verticalTab instance.
- */
- tabShow: function () {
- // Display the tab.
+ tabShow: function tabShow() {
this.item.show();
- // Show the vertical tabs.
+
this.item.closest('.js-form-type-vertical-tabs').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-tabs__menu-item').removeClass('first')
- .filter(':visible').eq(0).addClass('first');
- // Display the details element.
+
+ this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
+
this.details.removeClass('vertical-tab--hidden').show();
- // Focus this tab.
+
this.focus();
return this;
},
-
- /**
- * Hides a vertical tab pane.
- *
- * @return {Drupal.verticalTab}
- * The verticalTab instance.
- */
- tabHide: function () {
- // Hide this tab.
+ tabHide: function tabHide() {
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-tabs__menu-item').removeClass('first')
- .filter(':visible').eq(0).addClass('first');
- // Hide the details element.
+
+ this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
+
this.details.addClass('vertical-tab--hidden').hide();
- // Focus the first visible tab (if there is one).
+
var $firstTab = this.details.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden)').eq(0);
if ($firstTab.length) {
$firstTab.data('verticalTab').focus();
- }
- // Hide the vertical tabs (if no tabs remain).
- else {
- this.item.closest('.js-form-type-vertical-tabs').hide();
- }
+ } else {
+ this.item.closest('.js-form-type-vertical-tabs').hide();
+ }
return this;
}
};
- /**
- * Theme function for a vertical tab.
- *
- * @param {object} settings
- * An object with the following keys:
- * @param {string} settings.title
- * The name of the tab.
- *
- * @return {object}
- * 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.verticalTab = function (settings) {
var tab = {};
- tab.item = $('')
- .append(tab.link = $('')
- .append(tab.title = $('').text(settings.title))
- .append(tab.summary = $('')
- )
- );
+ tab.item = $('').append(tab.link = $('').append(tab.title = $('').text(settings.title)).append(tab.summary = $('')));
return tab;
};
-
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file