nav-tabs.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  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. function init(i, tab) {
  9. var $tab = $(tab);
  10. var $target = $tab.find('[data-drupal-nav-tabs-target]');
  11. var $active = $target.find('.js-active-tab');
  12. var openMenu = function openMenu() {
  13. $target.toggleClass('is-open');
  14. };
  15. var toggleOrder = function toggleOrder(reset) {
  16. var current = $active.index();
  17. var original = $active.data('original-order');
  18. if (original === 0 || reset === (current === original)) {
  19. return;
  20. }
  21. var siblings = {
  22. first: '[data-original-order="0"]',
  23. previous: '[data-original-order="' + (original - 1) + '"]'
  24. };
  25. var $first = $target.find(siblings.first);
  26. var $previous = $target.find(siblings.previous);
  27. if (reset && current !== original) {
  28. $active.insertAfter($previous);
  29. } else if (!reset && current === original) {
  30. $active.insertBefore($first);
  31. }
  32. };
  33. var toggleCollapsed = function toggleCollapsed() {
  34. if (window.matchMedia('(min-width: 48em)').matches) {
  35. if ($tab.hasClass('is-horizontal') && !$tab.attr('data-width')) {
  36. var width = 0;
  37. $target.find('.js-tabs-link').each(function (index, value) {
  38. width += $(value).outerWidth();
  39. });
  40. $tab.attr('data-width', width);
  41. }
  42. var isHorizontal = $tab.attr('data-width') <= $tab.outerWidth();
  43. $tab.toggleClass('is-horizontal', isHorizontal);
  44. toggleOrder(isHorizontal);
  45. } else {
  46. toggleOrder(false);
  47. }
  48. };
  49. $tab.addClass('position-container is-horizontal-enabled');
  50. $target.find('.js-tab').each(function (index, element) {
  51. var $item = $(element);
  52. $item.attr('data-original-order', $item.index());
  53. });
  54. $tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu);
  55. $(window).on('resize.tabs', Drupal.debounce(toggleCollapsed, 150)).trigger('resize.tabs');
  56. }
  57. Drupal.behaviors.navTabs = {
  58. attach: function attach(context) {
  59. $(context).find('[data-drupal-nav-tabs].is-collapsible').once('nav-tabs').each(function (i, value) {
  60. $(value).each(init);
  61. });
  62. }
  63. };
  64. })(jQuery, Drupal);