Chris@0: /**
Chris@0:  * @file
Chris@0:  * Responsive navigation tabs.
Chris@0:  *
Chris@0:  * This also supports collapsible navigable is the 'is-collapsible' class is
Chris@0:  * added to the main element, and a target element is included.
Chris@0:  */
Chris@17: (function($, Drupal) {
Chris@0:   function init(i, tab) {
Chris@0:     const $tab = $(tab);
Chris@0:     const $target = $tab.find('[data-drupal-nav-tabs-target]');
Chris@0:     const isCollapsible = $tab.hasClass('is-collapsible');
Chris@0: 
Chris@0:     function openMenu(e) {
Chris@0:       $target.toggleClass('is-open');
Chris@0:     }
Chris@0: 
Chris@0:     function handleResize(e) {
Chris@0:       $tab.addClass('is-horizontal');
Chris@0:       const $tabs = $tab.find('.tabs');
Chris@17:       const isHorizontal =
Chris@17:         $tabs.outerHeight() <= $tabs.find('.tabs__tab').outerHeight();
Chris@0:       $tab.toggleClass('is-horizontal', isHorizontal);
Chris@0:       if (isCollapsible) {
Chris@0:         $tab.toggleClass('is-collapse-enabled', !isHorizontal);
Chris@0:       }
Chris@0:       if (isHorizontal) {
Chris@0:         $target.removeClass('is-open');
Chris@0:       }
Chris@0:     }
Chris@0: 
Chris@0:     $tab.addClass('position-container is-horizontal-enabled');
Chris@0: 
Chris@0:     $tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu);
Chris@17:     $(window)
Chris@17:       .on('resize.tabs', Drupal.debounce(handleResize, 150))
Chris@17:       .trigger('resize.tabs');
Chris@0:   }
Chris@0: 
Chris@0:   /**
Chris@0:    * Initialise the tabs JS.
Chris@0:    */
Chris@0:   Drupal.behaviors.navTabs = {
Chris@0:     attach(context, settings) {
Chris@0:       const $tabs = $(context).find('[data-drupal-nav-tabs]');
Chris@0:       if ($tabs.length) {
Chris@0:         const notSmartPhone = window.matchMedia('(min-width: 300px)');
Chris@0:         if (notSmartPhone.matches) {
Chris@0:           $tabs.once('nav-tabs').each(init);
Chris@0:         }
Chris@0:       }
Chris@0:     },
Chris@0:   };
Chris@17: })(jQuery, Drupal);