vertical-tabs.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. /**
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. **/
  7. (function ($, Drupal, drupalSettings) {
  8. var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e, $target) {
  9. $target.parents('.vertical-tabs__pane').each(function (index, pane) {
  10. $(pane).data('verticalTab').focus();
  11. });
  12. };
  13. Drupal.behaviors.verticalTabs = {
  14. attach: function attach(context) {
  15. var width = drupalSettings.widthBreakpoint || 640;
  16. var mq = '(max-width: ' + width + 'px)';
  17. if (window.matchMedia(mq).matches) {
  18. return;
  19. }
  20. $('body').once('vertical-tabs-fragments').on('formFragmentLinkClickOrHashChange.verticalTabs', handleFragmentLinkClickOrHashChange);
  21. $(context).find('[data-vertical-tabs-panes]').once('vertical-tabs').each(function () {
  22. var $this = $(this).addClass('vertical-tabs__panes');
  23. var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
  24. var tabFocus = void 0;
  25. var $details = $this.find('> details');
  26. if ($details.length === 0) {
  27. return;
  28. }
  29. var tabList = $('<ul class="vertical-tabs__menu"></ul>');
  30. $this.wrap('<div class="vertical-tabs clearfix"></div>').before(tabList);
  31. $details.each(function () {
  32. var $that = $(this);
  33. var verticalTab = new Drupal.verticalTab({
  34. title: $that.find('> summary').text(),
  35. details: $that
  36. });
  37. tabList.append(verticalTab.item);
  38. $that.removeClass('collapsed').attr('open', true).addClass('vertical-tabs__pane').data('verticalTab', verticalTab);
  39. if (this.id === focusID) {
  40. tabFocus = $that;
  41. }
  42. });
  43. $(tabList).find('> li').eq(0).addClass('first');
  44. $(tabList).find('> li').eq(-1).addClass('last');
  45. if (!tabFocus) {
  46. var $locationHash = $this.find(window.location.hash);
  47. if (window.location.hash && $locationHash.length) {
  48. tabFocus = $locationHash.closest('.vertical-tabs__pane');
  49. } else {
  50. tabFocus = $this.find('> .vertical-tabs__pane').eq(0);
  51. }
  52. }
  53. if (tabFocus.length) {
  54. tabFocus.data('verticalTab').focus();
  55. }
  56. });
  57. }
  58. };
  59. Drupal.verticalTab = function (settings) {
  60. var self = this;
  61. $.extend(this, settings, Drupal.theme('verticalTab', settings));
  62. this.link.attr('href', '#' + settings.details.attr('id'));
  63. this.link.on('click', function (e) {
  64. e.preventDefault();
  65. self.focus();
  66. });
  67. this.link.on('keydown', function (event) {
  68. if (event.keyCode === 13) {
  69. event.preventDefault();
  70. self.focus();
  71. $('.vertical-tabs__pane :input:visible:enabled').eq(0).trigger('focus');
  72. }
  73. });
  74. this.details.on('summaryUpdated', function () {
  75. self.updateSummary();
  76. }).trigger('summaryUpdated');
  77. };
  78. Drupal.verticalTab.prototype = {
  79. focus: function focus() {
  80. this.details.siblings('.vertical-tabs__pane').each(function () {
  81. var tab = $(this).data('verticalTab');
  82. tab.details.hide();
  83. tab.item.removeClass('is-selected');
  84. }).end().show().siblings(':hidden.vertical-tabs__active-tab').val(this.details.attr('id'));
  85. this.item.addClass('is-selected');
  86. $('#active-vertical-tab').remove();
  87. this.link.append('<span id="active-vertical-tab" class="visually-hidden">' + Drupal.t('(active tab)') + '</span>');
  88. },
  89. updateSummary: function updateSummary() {
  90. this.summary.html(this.details.drupalGetSummary());
  91. },
  92. tabShow: function tabShow() {
  93. this.item.show();
  94. this.item.closest('.js-form-type-vertical-tabs').show();
  95. this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
  96. this.details.removeClass('vertical-tab--hidden').show();
  97. this.focus();
  98. return this;
  99. },
  100. tabHide: function tabHide() {
  101. this.item.hide();
  102. this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
  103. this.details.addClass('vertical-tab--hidden').hide();
  104. var $firstTab = this.details.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden)').eq(0);
  105. if ($firstTab.length) {
  106. $firstTab.data('verticalTab').focus();
  107. } else {
  108. this.item.closest('.js-form-type-vertical-tabs').hide();
  109. }
  110. return this;
  111. }
  112. };
  113. Drupal.theme.verticalTab = function (settings) {
  114. var tab = {};
  115. 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>')));
  116. return tab;
  117. };
  118. })(jQuery, Drupal, drupalSettings);