Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #2474431 by droplet, nod_, Manjit.Singh: Better way to handle responsive navigation tabs

8.0.x
xjm 2015-04-26 09:34:01 -05:00
parent d51d22373a
commit 76fe710e61
4 changed files with 3 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
core/core.libraries.yml
View File

@ -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"

51
core/misc/jquery.intrinsic.js
View File

@ -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);

5
core/themes/seven/js/nav-tabs.js
View File

@ -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);

2
core/themes/seven/seven.libraries.yml
View File

@ -72,7 +72,7 @@ drupal.nav-tabs:
- core/jquery
- core/drupal
- core/jquery.once
- core/jquery.intrinsic
- core/drupal.debounce
vertical-tabs:
version: VERSION