nav-tabs.es6.js 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. /**
  2. * @file
  3. * Responsive navigation tabs.
  4. *
  5. * This also supports collapsible navigable is the 'is-collapsible' class is
  6. * added to the main element, and a target element is included.
  7. */
  8. (function($, Drupal) {
  9. function init(i, tab) {
  10. const $tab = $(tab);
  11. const $target = $tab.find('[data-drupal-nav-tabs-target]');
  12. const isCollapsible = $tab.hasClass('is-collapsible');
  13. function openMenu(e) {
  14. $target.toggleClass('is-open');
  15. }
  16. function handleResize(e) {
  17. $tab.addClass('is-horizontal');
  18. const $tabs = $tab.find('.tabs');
  19. const isHorizontal =
  20. $tabs.outerHeight() <= $tabs.find('.tabs__tab').outerHeight();
  21. $tab.toggleClass('is-horizontal', isHorizontal);
  22. if (isCollapsible) {
  23. $tab.toggleClass('is-collapse-enabled', !isHorizontal);
  24. }
  25. if (isHorizontal) {
  26. $target.removeClass('is-open');
  27. }
  28. }
  29. $tab.addClass('position-container is-horizontal-enabled');
  30. $tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu);
  31. $(window)
  32. .on('resize.tabs', Drupal.debounce(handleResize, 150))
  33. .trigger('resize.tabs');
  34. }
  35. /**
  36. * Initialize the tabs JS.
  37. */
  38. Drupal.behaviors.navTabs = {
  39. attach(context, settings) {
  40. const $tabs = $(context).find('[data-drupal-nav-tabs]');
  41. if ($tabs.length) {
  42. const notSmartPhone = window.matchMedia('(min-width: 300px)');
  43. if (notSmartPhone.matches) {
  44. $tabs.once('nav-tabs').each(init);
  45. }
  46. }
  47. },
  48. };
  49. })(jQuery, Drupal);