comparison core/themes/seven/js/nav-tabs.es6.js @ 17:129ea1e6d783

Update, including to Drupal core 8.6.10
author Chris Cannam
date Thu, 28 Feb 2019 13:21:36 +0000
parents 4c8ae668cc8c
children
comparison
equal deleted inserted replaced
16:c2387f117808 17:129ea1e6d783
3 * Responsive navigation tabs. 3 * Responsive navigation tabs.
4 * 4 *
5 * This also supports collapsible navigable is the 'is-collapsible' class is 5 * This also supports collapsible navigable is the 'is-collapsible' class is
6 * added to the main element, and a target element is included. 6 * added to the main element, and a target element is included.
7 */ 7 */
8 (function ($, Drupal) { 8 (function($, Drupal) {
9 function init(i, tab) { 9 function init(i, tab) {
10 const $tab = $(tab); 10 const $tab = $(tab);
11 const $target = $tab.find('[data-drupal-nav-tabs-target]'); 11 const $target = $tab.find('[data-drupal-nav-tabs-target]');
12 const isCollapsible = $tab.hasClass('is-collapsible'); 12 const isCollapsible = $tab.hasClass('is-collapsible');
13 13
16 } 16 }
17 17
18 function handleResize(e) { 18 function handleResize(e) {
19 $tab.addClass('is-horizontal'); 19 $tab.addClass('is-horizontal');
20 const $tabs = $tab.find('.tabs'); 20 const $tabs = $tab.find('.tabs');
21 const isHorizontal = $tabs.outerHeight() <= $tabs.find('.tabs__tab').outerHeight(); 21 const isHorizontal =
22 $tabs.outerHeight() <= $tabs.find('.tabs__tab').outerHeight();
22 $tab.toggleClass('is-horizontal', isHorizontal); 23 $tab.toggleClass('is-horizontal', isHorizontal);
23 if (isCollapsible) { 24 if (isCollapsible) {
24 $tab.toggleClass('is-collapse-enabled', !isHorizontal); 25 $tab.toggleClass('is-collapse-enabled', !isHorizontal);
25 } 26 }
26 if (isHorizontal) { 27 if (isHorizontal) {
29 } 30 }
30 31
31 $tab.addClass('position-container is-horizontal-enabled'); 32 $tab.addClass('position-container is-horizontal-enabled');
32 33
33 $tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu); 34 $tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu);
34 $(window).on('resize.tabs', Drupal.debounce(handleResize, 150)).trigger('resize.tabs'); 35 $(window)
36 .on('resize.tabs', Drupal.debounce(handleResize, 150))
37 .trigger('resize.tabs');
35 } 38 }
36 39
37 /** 40 /**
38 * Initialise the tabs JS. 41 * Initialise the tabs JS.
39 */ 42 */
46 $tabs.once('nav-tabs').each(init); 49 $tabs.once('nav-tabs').each(init);
47 } 50 }
48 } 51 }
49 }, 52 },
50 }; 53 };
51 }(jQuery, Drupal)); 54 })(jQuery, Drupal);