aleph1.co.uk Git - yaffs-website/blob - web/core/themes/seven/js/nav-tabs.js

   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
  10   'use strict';
  11
  12   function init(i, tab) {
  13     var $tab = $(tab);
  14     var $target = $tab.find('[data-drupal-nav-tabs-target]');
  15     var isCollapsible = $tab.hasClass('is-collapsible');
  16
  17     function openMenu(e) {
  18       $target.toggleClass('is-open');
  19     }
  20
  21     function handleResize(e) {
  22       $tab.addClass('is-horizontal');
  23       var $tabs = $tab.find('.tabs');
  24       var isHorizontal = $tabs.outerHeight() <= $tabs.find('.tabs__tab').outerHeight();
  25       $tab.toggleClass('is-horizontal', isHorizontal);
  26       if (isCollapsible) {
  27         $tab.toggleClass('is-collapse-enabled', !isHorizontal);
  28       }
  29       if (isHorizontal) {
  30         $target.removeClass('is-open');
  31       }
  32     }
  33
  34     $tab.addClass('position-container is-horizontal-enabled');
  35
  36     $tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu);
  37     $(window).on('resize.tabs', Drupal.debounce(handleResize, 150)).trigger('resize.tabs');
  38   }
  39
  40   /**
  41    * Initialise the tabs JS.
  42    */
  43   Drupal.behaviors.navTabs = {
  44     attach: function (context, settings) {
  45       var $tabs = $(context).find('[data-drupal-nav-tabs]');
  46       if ($tabs.length) {
  47         var notSmartPhone = window.matchMedia('(min-width: 300px)');
  48         if (notSmartPhone.matches) {
  49           $tabs.once('nav-tabs').each(init);
  50         }
  51       }
  52     }
  53   };
  54
  55 })(jQuery, Drupal);