This repository has been archived on 2025-01-19. You can view files and clone it, but cannot push or open issues or pull requests.
drupalcampbristol/web/core/misc/vertical-tabs.js

144 lines
4.9 KiB
JavaScript
Raw Normal View History

/**
2018-11-23 12:29:20 +00:00
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
(function ($, Drupal, drupalSettings) {
2018-11-23 12:29:20 +00:00
var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e, $target) {
$target.parents('.vertical-tabs__pane').each(function (index, pane) {
$(pane).data('verticalTab').focus();
});
};
Drupal.behaviors.verticalTabs = {
2018-11-23 12:29:20 +00:00
attach: function attach(context) {
var width = drupalSettings.widthBreakpoint || 640;
var mq = '(max-width: ' + width + 'px)';
if (window.matchMedia(mq).matches) {
return;
}
2018-11-23 12:29:20 +00:00
$('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();
2018-11-23 12:29:20 +00:00
var tabFocus = void 0;
var $details = $this.find('> details');
if ($details.length === 0) {
return;
}
2018-11-23 12:29:20 +00:00
var tabList = $('<ul class="vertical-tabs__menu"></ul>');
$this.wrap('<div class="vertical-tabs clearfix"></div>').before(tabList);
$details.each(function () {
var $that = $(this);
2018-11-23 12:29:20 +00:00
var verticalTab = new Drupal.verticalTab({
title: $that.find('> summary').text(),
details: $that
});
2018-11-23 12:29:20 +00:00
tabList.append(verticalTab.item);
$that.removeClass('collapsed').attr('open', true).addClass('vertical-tabs__pane').data('verticalTab', verticalTab);
if (this.id === focusID) {
2018-11-23 12:29:20 +00:00
tabFocus = $that;
}
});
2018-11-23 12:29:20 +00:00
$(tabList).find('> li').eq(0).addClass('first');
$(tabList).find('> li').eq(-1).addClass('last');
2018-11-23 12:29:20 +00:00
if (!tabFocus) {
var $locationHash = $this.find(window.location.hash);
if (window.location.hash && $locationHash.length) {
2018-11-23 12:29:20 +00:00
tabFocus = $locationHash.closest('.vertical-tabs__pane');
} else {
tabFocus = $this.find('> .vertical-tabs__pane').eq(0);
}
}
2018-11-23 12:29:20 +00:00
if (tabFocus.length) {
tabFocus.data('verticalTab').focus();
}
});
}
};
Drupal.verticalTab = function (settings) {
var self = this;
$.extend(this, settings, Drupal.theme('verticalTab', settings));
this.link.attr('href', '#' + settings.details.attr('id'));
this.link.on('click', function (e) {
e.preventDefault();
self.focus();
});
this.link.on('keydown', function (event) {
if (event.keyCode === 13) {
event.preventDefault();
self.focus();
2018-11-23 12:29:20 +00:00
$('.vertical-tabs__pane :input:visible:enabled').eq(0).trigger('focus');
}
});
2018-11-23 12:29:20 +00:00
this.details.on('summaryUpdated', function () {
self.updateSummary();
}).trigger('summaryUpdated');
};
Drupal.verticalTab.prototype = {
2018-11-23 12:29:20 +00:00
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');
2018-11-23 12:29:20 +00:00
$('#active-vertical-tab').remove();
this.link.append('<span id="active-vertical-tab" class="visually-hidden">' + Drupal.t('(active tab)') + '</span>');
},
2018-11-23 12:29:20 +00:00
updateSummary: function updateSummary() {
this.summary.html(this.details.drupalGetSummary());
},
2018-11-23 12:29:20 +00:00
tabShow: function tabShow() {
this.item.show();
2018-11-23 12:29:20 +00:00
this.item.closest('.js-form-type-vertical-tabs').show();
2018-11-23 12:29:20 +00:00
this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
this.details.removeClass('vertical-tab--hidden').show();
2018-11-23 12:29:20 +00:00
this.focus();
return this;
},
2018-11-23 12:29:20 +00:00
tabHide: function tabHide() {
this.item.hide();
2018-11-23 12:29:20 +00:00
this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
this.details.addClass('vertical-tab--hidden').hide();
2018-11-23 12:29:20 +00:00
var $firstTab = this.details.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden)').eq(0);
if ($firstTab.length) {
$firstTab.data('verticalTab').focus();
2018-11-23 12:29:20 +00:00
} else {
this.item.closest('.js-form-type-vertical-tabs').hide();
}
return this;
}
};
Drupal.theme.verticalTab = function (settings) {
var tab = {};
2018-11-23 12:29:20 +00:00
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>')));
return tab;
};
2018-11-23 12:29:20 +00:00
})(jQuery, Drupal, drupalSettings);