52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
|
/**
|
|||
|
|
* @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);
|