From 76fe710e61f4618c4af210ede1145325ded3ca2f Mon Sep 17 00:00:00 2001
From: xjm <xjm@65776.no-reply.drupal.org>
Date: Sun, 26 Apr 2015 09:34:01 -0500
Subject: [PATCH] Issue #2474431 by droplet, nod_, Manjit.Singh: Better way to
handle responsive navigation tabs
---
core/core.libraries.yml | 7 ----
core/misc/jquery.intrinsic.js | 51 ---------------------------
core/themes/seven/js/nav-tabs.js | 5 ++-
core/themes/seven/seven.libraries.yml | 2 +-
4 files changed, 3 insertions(+), 62 deletions(-)
delete mode 100644 core/misc/jquery.intrinsic.js
diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index d14e978e9734..dd8eae75acb2 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -369,13 +369,6 @@ jquery.form:
dependencies:
- core/jquery
-jquery.intrinsic:
- version: VERSION
- js:
- misc/jquery.intrinsic.js: {}
- dependencies:
- - core/jquery
-
jquery.joyride:
remote: https://github.com/zurb/joyride
version: "v2.1.0"
diff --git a/core/misc/jquery.intrinsic.js b/core/misc/jquery.intrinsic.js
deleted file mode 100644
index 3d05412f023c..000000000000
--- a/core/misc/jquery.intrinsic.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * @file
- * Measure an element’s intrinsic width or height when neither constrained by
- * a container nor forced full width as in 'display: block'.
- */
-(function ($) {
- 'use strict';
-
- // Style block applied momentarily in order to measure the element.
- //
- // 1. Shrink-wrap the element. Block display would give us the width of the
- // container, not the element’s intrinsic width.
- // 2. Preventative measure. The styles should be reverted before the browser’s
- // UI thread updates.
- //
- // We avoid 'position: absolute' because this causes the element to wrap if
- // it’s wider than the viewport, regardless of the width of <body> and <html>.
- //
- var tempElementCSS = {
- display: 'table', /* 1 */
- visibility: 'hidden', /* 2 */
- width: 'auto',
- height: 'auto',
- maxWidth: 'none',
- maxHeight: 'none'
- };
-
- // Style block applied momentarily to the body in order to ensure the
- // element’s layout area isn’t constrained.
- var tempBodyCSS = {
- width: '999em',
- height: '999em'
- };
-
- $.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 () {
- measurement = $(element)[dimension]();
- });
- });
-
- return measurement;
- };
-})(jQuery);
diff --git a/core/themes/seven/js/nav-tabs.js b/core/themes/seven/js/nav-tabs.js
index 44332c60b980..8518c9bd5961 100644
--- a/core/themes/seven/js/nav-tabs.js
+++ b/core/themes/seven/js/nav-tabs.js
@@ -1,8 +1,6 @@
/**
* @file
* Responsive navigation tabs.
- * Uses jquery.intrinsic.js to calculate if the tabs are larger than their
- * container and toggles the 'is-horizontal' class.
*
* This also supports collapsible navigable is the 'is-collapsible' class is
* added to the main element, and a target element is included.
@@ -22,7 +20,8 @@
function handleResize(e) {
$tab.addClass('is-horizontal');
- var isHorizontal = $tab.parent().width() > $tab.intrinsic('width');
+ var $tabs = $tab.find('.tabs');
+ var isHorizontal = $tabs.outerHeight() <= $tabs.find('.tabs__tab').outerHeight();
$tab.toggleClass('is-horizontal', isHorizontal);
if (isCollapsible) {
$tab.toggleClass('is-collapse-enabled', !isHorizontal);
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index efe945e8b29f..a576e1db90fe 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -72,7 +72,7 @@ drupal.nav-tabs:
- core/jquery
- core/drupal
- core/jquery.once
- - core/jquery.intrinsic
+ - core/drupal.debounce
vertical-tabs:
version: VERSION
--
GitLab