2 * DO NOT EDIT THIS FILE.
3 * See the following change record for more information,
4 * https://www.drupal.org/node/2815083
8 (function ($, Drupal, drupalSettings) {
9 var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e, $target) {
10 $target.parents('.vertical-tabs__pane').each(function (index, pane) {
11 $(pane).data('verticalTab').focus();
15 Drupal.behaviors.verticalTabs = {
16 attach: function attach(context) {
17 var width = drupalSettings.widthBreakpoint || 640;
18 var mq = '(max-width: ' + width + 'px)';
20 if (window.matchMedia(mq).matches) {
24 $('body').once('vertical-tabs-fragments').on('formFragmentLinkClickOrHashChange.verticalTabs', handleFragmentLinkClickOrHashChange);
26 $(context).find('[data-vertical-tabs-panes]').once('vertical-tabs').each(function () {
27 var $this = $(this).addClass('vertical-tabs__panes');
28 var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
29 var tabFocus = void 0;
31 var $details = $this.find('> details');
32 if ($details.length === 0) {
36 var tabList = $('<ul class="vertical-tabs__menu"></ul>');
37 $this.wrap('<div class="vertical-tabs clearfix"></div>').before(tabList);
39 $details.each(function () {
41 var verticalTab = new Drupal.verticalTab({
42 title: $that.find('> summary').text(),
45 tabList.append(verticalTab.item);
46 $that.removeClass('collapsed').attr('open', true).addClass('vertical-tabs__pane').data('verticalTab', verticalTab);
47 if (this.id === focusID) {
52 $(tabList).find('> li').eq(0).addClass('first');
53 $(tabList).find('> li').eq(-1).addClass('last');
56 var $locationHash = $this.find(window.location.hash);
57 if (window.location.hash && $locationHash.length) {
58 tabFocus = $locationHash.closest('.vertical-tabs__pane');
60 tabFocus = $this.find('> .vertical-tabs__pane').eq(0);
63 if (tabFocus.length) {
64 tabFocus.data('verticalTab').focus();
70 Drupal.verticalTab = function (settings) {
72 $.extend(this, settings, Drupal.theme('verticalTab', settings));
74 this.link.attr('href', '#' + settings.details.attr('id'));
76 this.link.on('click', function (e) {
81 this.link.on('keydown', function (event) {
82 if (event.keyCode === 13) {
83 event.preventDefault();
86 $('.vertical-tabs__pane :input:visible:enabled').eq(0).trigger('focus');
90 this.details.on('summaryUpdated', function () {
92 }).trigger('summaryUpdated');
95 Drupal.verticalTab.prototype = {
96 focus: function focus() {
97 this.details.siblings('.vertical-tabs__pane').each(function () {
98 var tab = $(this).data('verticalTab');
100 tab.item.removeClass('is-selected');
101 }).end().show().siblings(':hidden.vertical-tabs__active-tab').val(this.details.attr('id'));
102 this.item.addClass('is-selected');
104 $('#active-vertical-tab').remove();
105 this.link.append('<span id="active-vertical-tab" class="visually-hidden">' + Drupal.t('(active tab)') + '</span>');
107 updateSummary: function updateSummary() {
108 this.summary.html(this.details.drupalGetSummary());
110 tabShow: function tabShow() {
113 this.item.closest('.js-form-type-vertical-tabs').show();
115 this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
117 this.details.removeClass('vertical-tab--hidden').show();
122 tabHide: function tabHide() {
125 this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
127 this.details.addClass('vertical-tab--hidden').hide();
129 var $firstTab = this.details.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden)').eq(0);
130 if ($firstTab.length) {
131 $firstTab.data('verticalTab').focus();
133 this.item.closest('.js-form-type-vertical-tabs').hide();
139 Drupal.theme.verticalTab = function (settings) {
141 tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#"></a>').append(tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>').text(settings.title)).append(tab.summary = $('<span class="vertical-tabs__menu-item-summary"></span>')));
144 })(jQuery, Drupal, drupalSettings);