vertical-tabs.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  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) {
  8. var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e, $target) {
  9. $target.parents('.js-vertical-tabs-pane').each(function (index, pane) {
  10. $(pane).data('verticalTab').focus();
  11. });
  12. };
  13. Drupal.behaviors.claroVerticalTabs = {
  14. attach: function attach(context) {
  15. $('body').once('vertical-tabs-fragments').on('formFragmentLinkClickOrHashChange.verticalTabs', handleFragmentLinkClickOrHashChange);
  16. $(context).find('[data-vertical-tabs-panes]').once('vertical-tabs').each(function initializeVerticalTabs() {
  17. var $this = $(this).addClass('vertical-tabs__items--processed');
  18. var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
  19. var tabFocus = void 0;
  20. var $details = $this.find('> details');
  21. if ($details.length === 0) {
  22. return;
  23. }
  24. var tabList = $(Drupal.theme.verticalTabListWrapper());
  25. $this.wrap($(Drupal.theme.verticalTabsWrapper()).addClass('js-vertical-tabs')).before(tabList);
  26. $details.each(function initializeVerticalTabItems() {
  27. var $that = $(this);
  28. var verticalTab = new Drupal.verticalTab({
  29. title: $that.find('> summary').text(),
  30. details: $that
  31. });
  32. tabList.append(verticalTab.item);
  33. $that.removeAttr('open').addClass('js-vertical-tabs-pane').data('verticalTab', verticalTab);
  34. if (this.id === focusID) {
  35. tabFocus = $that;
  36. }
  37. });
  38. if (!tabFocus) {
  39. var $locationHash = $this.find(window.location.hash);
  40. if (window.location.hash && $locationHash.length) {
  41. tabFocus = $locationHash.is('.js-vertical-tabs-pane') ? $locationHash : $locationHash.closest('.js-vertical-tabs-pane');
  42. } else {
  43. tabFocus = $this.find('> .js-vertical-tabs-pane').eq(0);
  44. }
  45. }
  46. if (tabFocus.length) {
  47. tabFocus.data('verticalTab').focus(false);
  48. }
  49. });
  50. }
  51. };
  52. Drupal.verticalTab = function verticalTab(settings) {
  53. var self = this;
  54. $.extend(this, settings, Drupal.theme('verticalTab', settings));
  55. this.item.addClass('js-vertical-tabs-menu-item');
  56. this.link.attr('href', '#' + settings.details.attr('id'));
  57. this.detailsSummaryDescription = $(Drupal.theme.verticalTabDetailsDescription()).appendTo(this.details.find('> summary'));
  58. this.link.on('click', function (event) {
  59. event.preventDefault();
  60. self.focus();
  61. });
  62. this.details.on('toggle', function (event) {
  63. event.preventDefault();
  64. });
  65. this.details.find('> summary').on('click', function (event) {
  66. event.preventDefault();
  67. self.details.attr('open', true);
  68. if (self.details.hasClass('collapse-processed')) {
  69. setTimeout(function () {
  70. self.focus();
  71. }, 10);
  72. } else {
  73. self.focus();
  74. }
  75. }).on('keydown', function (event) {
  76. if (event.keyCode === 13) {
  77. setTimeout(function () {
  78. self.details.find(':input:visible:enabled').eq(0).trigger('focus');
  79. }, 10);
  80. }
  81. });
  82. this.link.on('keydown', function (event) {
  83. if (event.keyCode === 13) {
  84. event.preventDefault();
  85. self.focus();
  86. self.details.find(':input:visible:enabled').eq(0).trigger('focus');
  87. }
  88. });
  89. this.details.on('summaryUpdated', function () {
  90. self.updateSummary();
  91. }).trigger('summaryUpdated');
  92. };
  93. Drupal.verticalTab.prototype = {
  94. focus: function focus() {
  95. var triggerFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  96. this.details.siblings('.js-vertical-tabs-pane').each(function closeOtherTabs() {
  97. var tab = $(this).data('verticalTab');
  98. if (tab.details.attr('open')) {
  99. tab.details.removeAttr('open').find('> summary').attr({
  100. 'aria-expanded': 'false',
  101. 'aria-pressed': 'false'
  102. });
  103. tab.item.removeClass('is-selected');
  104. }
  105. }).end().siblings(':hidden.vertical-tabs__active-tab').val(this.details.attr('id'));
  106. this.details.attr('open', true).find('> summary').attr({
  107. 'aria-expanded': 'true',
  108. 'aria-pressed': 'true'
  109. }).closest('.js-vertical-tabs').find('.js-vertical-tab-active').remove();
  110. if (triggerFocus) {
  111. var $summary = this.details.find('> summary');
  112. if ($summary.is(':visible')) {
  113. $summary.trigger('focus');
  114. }
  115. }
  116. this.item.addClass('is-selected');
  117. this.title.after($(Drupal.theme.verticalTabActiveTabIndicator()).addClass('js-vertical-tab-active'));
  118. },
  119. updateSummary: function updateSummary() {
  120. var summary = this.details.drupalGetSummary();
  121. this.detailsSummaryDescription.html(summary);
  122. this.summary.html(summary);
  123. },
  124. tabShow: function tabShow() {
  125. this.item.removeClass('vertical-tabs__menu-item--hidden').show();
  126. this.item.closest('.js-form-type-vertical-tabs').show();
  127. this.details.removeClass('vertical-tab--hidden js-vertical-tab-hidden').show();
  128. this.details.parent().children('.js-vertical-tabs-pane').removeClass('vertical-tabs__item--first vertical-tabs__item--last').filter(':visible').eq(0).addClass('vertical-tabs__item--first');
  129. this.details.parent().children('.js-vertical-tabs-pane').filter(':visible').eq(-1).addClass('vertical-tabs__item--last');
  130. this.focus(false);
  131. return this;
  132. },
  133. tabHide: function tabHide() {
  134. this.item.addClass('vertical-tabs__menu-item--hidden').hide();
  135. this.details.addClass('vertical-tab--hidden js-vertical-tab-hidden').hide();
  136. this.details.parent().children('.js-vertical-tabs-pane').removeClass('vertical-tabs__item--first vertical-tabs__item--last').filter(':visible').eq(0).addClass('vertical-tabs__item--first');
  137. this.details.parent().children('.js-vertical-tabs-pane').filter(':visible').eq(-1).addClass('vertical-tabs__item--last');
  138. var $firstTab = this.details.siblings('.js-vertical-tabs-pane:not(.js-vertical-tab-hidden)').eq(0);
  139. if ($firstTab.length) {
  140. $firstTab.data('verticalTab').focus(false);
  141. } else {
  142. this.item.closest('.js-form-type-vertical-tabs').hide();
  143. }
  144. return this;
  145. }
  146. };
  147. Drupal.theme.verticalTab = function (settings) {
  148. var tab = {};
  149. tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append($('<span class="vertical-tabs__menu-link-content"></span>').append(tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>').text(settings.title)).append(tab.summary = $('<span class="vertical-tabs__menu-link-summary"></span>'))));
  150. return tab;
  151. };
  152. Drupal.theme.verticalTabsWrapper = function () {
  153. return '<div class="vertical-tabs clearfix"></div>';
  154. };
  155. Drupal.theme.verticalTabListWrapper = function () {
  156. return '<ul class="vertical-tabs__menu"></ul>';
  157. };
  158. Drupal.theme.verticalTabDetailsDescription = function () {
  159. return '<span class="vertical-tabs__details-summary-summary"></span>';
  160. };
  161. Drupal.theme.verticalTabActiveTabIndicator = function () {
  162. return '<span class="visually-hidden">' + Drupal.t('(active tab)') + '</span>';
  163. };
  164. })(jQuery, Drupal);