diff --git a/core/misc/jquery.intrinsic.js b/core/misc/jquery.intrinsic.js index d803652..e05beaf 100644 --- a/core/misc/jquery.intrinsic.js +++ b/core/misc/jquery.intrinsic.js @@ -3,7 +3,7 @@ * Measure an element’s intrinsic width or height when neither constrained by * a container nor forced full width as in 'display: block'. */ -;( function( $, document, undefined ) { +(function ($) { 'use strict'; // Style block applied momentarily in order to measure the element. @@ -17,7 +17,7 @@ // it’s wider than the viewport, regardless of the width of and . // var tempElementCSS = { - display: 'table', /* 1 */ + display: 'table', /* 1 */ visibility: 'hidden', /* 2 */ width: 'auto', height: 'auto', @@ -28,24 +28,24 @@ // Style block applied momentarily to the body in order to ensure the // element’s layout area isn’t constrained. // - var tempBodyCSS = { + var tempBodyCSS = { width: '999em', height: '999em' }; - $.fn.intrinsic = function(dimension) { + $.fn.intrinsic = function (dimension) { // The measured element may be a plain object or jQuery. var element = this instanceof jQuery ? this[0] : this; var measurement; // Use jQuery’s internal swap() method to temporarily apply the styles, then // measure the element’s width() or height(). - $.swap( document.body, tempBodyCSS, function() { - $.swap( element, tempElementCSS, function() { + $.swap(document.body, tempBodyCSS, function () { + $.swap(element, tempElementCSS, function () { measurement = $(element)[dimension](); }); }); return measurement; }; -})( jQuery, document ); +})(jQuery); diff --git a/core/modules/system/system.module b/core/modules/system/system.module index 23182e2..d32ccec 100644 --- a/core/modules/system/system.module +++ b/core/modules/system/system.module @@ -1177,30 +1177,6 @@ function system_library_info() { ), ); - // jQuery DOM Utitlities. - $libraries['jquery.dom-utils'] = array( - 'title' => 'jQuery DOM Utitlities', - 'version' => '1.0', - 'js' => array( - 'core/misc/jquery.dom-utils.js' => array(), - ), - 'dependencies' => array( - array('system', 'jquery') - ), - ); - - // jQuery Collapse. - $libraries['jquery.collapse'] = array( - 'title' => 'jQuery Collapse', - 'version' => '1.0', - 'js' => array( - 'core/misc/jquery.collapse.js' => array(), - ), - 'dependencies' => array( - array('system', 'jquery') - ), - ); - // jQuery Intrinsic Measurements. $libraries['jquery.intrinsic'] = array( 'title' => 'Instric Measurements', @@ -1209,7 +1185,7 @@ function system_library_info() { 'core/misc/jquery.intrinsic.js' => array(), ), 'dependencies' => array( - array('system', 'jquery') + array('system', 'jquery'), ), ); @@ -1260,22 +1236,6 @@ function system_library_info() { ), ); - // Navigation Tabs. - $libraries['jquery.nav-tabs'] = array( - 'title' => 'Navigation Tabs', - 'version' => '1.0', - 'js' => array( - 'core/misc/jquery.nav-tabs.js' => array(), - ), - 'dependencies' => array( - array('system', 'jquery'), - array('system', 'drupal'), - array('system', 'jquery.intrinsic'), - array('system', 'jquery.collapse'), - array('system', 'jquery.dom-utils'), - ), - ); - // Vertical Tabs. $libraries['drupal.vertical-tabs'] = array( 'title' => 'Vertical Tabs', diff --git a/core/themes/seven/js/nav-tabs.js b/core/themes/seven/js/nav-tabs.js index 7808340..d78697f 100644 --- a/core/themes/seven/js/nav-tabs.js +++ b/core/themes/seven/js/nav-tabs.js @@ -1,20 +1,47 @@ +/** + * @file + */ (function ($, Drupal) { -"use strict"; + "use strict"; -/** - * Initialise the tabs JS. - */ -Drupal.behaviors.navTabs = { - attach: function (context, settings) { - var tabs = $(context).find('[data-drupal-nav-tabs]'); - if (tabs.length) { - var notSmartPhone = window.matchMedia('(min-width: 300px)'); - if (notSmartPhone.matches) { - $(tabs).navTabs(); + function init (i, tab) { + var $tab = $(tab); + var $target = $tab.find('[data-drupal-nav-tabs-target]'); + + function openMenu (e) { + $target.toggleClass('is-open'); + } + + function handleResize (e) { + $tab.addClass('is-horizontal'); + var isHorizontal = $tab.parent().width() > $tab.intrinsic('width'); + $tab.toggleClass('is-horizontal', isHorizontal); + $tab.toggleClass('is-collapse-enabled', !isHorizontal); + if (isHorizontal) { + $target.removeClass('is-open'); } } + + $tab.addClass('position-container is-horizontal-enabled'); + + $tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu); + $(window).on('resize.tabs', Drupal.debounce(handleResize)).trigger('resize.tabs'); } -}; + + /** + * Initialise the tabs JS. + */ + Drupal.behaviors.navTabs = { + attach: function (context, settings) { + var $tabs = $(context).find('[data-drupal-nav-tabs]'); + if ($tabs.length) { + var notSmartPhone = window.matchMedia('(min-width: 300px)'); + if (notSmartPhone.matches) { + $tabs.once('nav-tabs').each(init); + } + } + } + }; })(jQuery, Drupal); diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme index 7ec1a15..131333c 100644 --- a/core/themes/seven/seven.theme +++ b/core/themes/seven/seven.theme @@ -28,6 +28,19 @@ function seven_library_info() { ), ); + $libraries['drupal.nav-tabs'] = array( + 'version' => \Drupal::VERSION, + 'js' => array( + drupal_get_path('theme', 'seven') . '/js/nav-tabs.js' => array('group' => JS_THEME), + ), + 'dependencies' => array( + array('system', 'jquery'), + array('system', 'drupal'), + array('system', 'jquery.once'), + array('system', 'jquery.intrinsic'), + ), + ); + return $libraries; } @@ -69,22 +82,20 @@ function seven_menu_local_tasks(&$variables) { $output = ''; if (!empty($variables['primary'])) { - drupal_add_library('system', 'jquery.nav-tabs', FALSE); - drupal_add_js(drupal_get_path('theme', 'seven') . '/js/nav-tabs.js'); + drupal_add_library('seven', 'drupal.nav-tabs', FALSE); $variables['primary']['#prefix'] = '

' . t('Primary tabs') . '

'; - $variables['primary']['#prefix'] .= '