123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- /*!
- * getSize v2.0.3
- * measure size of elements
- * MIT license
- */
- /* jshint browser: true, strict: true, undef: true, unused: true */
- /* globals console: false */
- ( function( window, factory ) {
- /* jshint strict: false */ /* globals define, module */
- if ( typeof define == 'function' && define.amd ) {
- // AMD
- define( factory );
- } else if ( typeof module == 'object' && module.exports ) {
- // CommonJS
- module.exports = factory();
- } else {
- // browser global
- window.getSize = factory();
- }
- })( window, function factory() {
- 'use strict';
- // -------------------------- helpers -------------------------- //
- // get a number from a string, not a percentage
- function getStyleSize( value ) {
- var num = parseFloat( value );
- // not a percent like '100%', and a number
- var isValid = value.indexOf('%') == -1 && !isNaN( num );
- return isValid && num;
- }
- function noop() {}
- var logError = typeof console == 'undefined' ? noop :
- function( message ) {
- console.error( message );
- };
- // -------------------------- measurements -------------------------- //
- var measurements = [
- 'paddingLeft',
- 'paddingRight',
- 'paddingTop',
- 'paddingBottom',
- 'marginLeft',
- 'marginRight',
- 'marginTop',
- 'marginBottom',
- 'borderLeftWidth',
- 'borderRightWidth',
- 'borderTopWidth',
- 'borderBottomWidth'
- ];
- var measurementsLength = measurements.length;
- function getZeroSize() {
- var size = {
- width: 0,
- height: 0,
- innerWidth: 0,
- innerHeight: 0,
- outerWidth: 0,
- outerHeight: 0
- };
- for ( var i=0; i < measurementsLength; i++ ) {
- var measurement = measurements[i];
- size[ measurement ] = 0;
- }
- return size;
- }
- // -------------------------- getStyle -------------------------- //
- /**
- * getStyle, get style of element, check for Firefox bug
- * https://bugzilla.mozilla.org/show_bug.cgi?id=548397
- */
- function getStyle( elem ) {
- var style = getComputedStyle( elem );
- if ( !style ) {
- logError( 'Style returned ' + style +
- '. Are you running this code in a hidden iframe on Firefox? ' +
- 'See https://bit.ly/getsizebug1' );
- }
- return style;
- }
- // -------------------------- setup -------------------------- //
- var isSetup = false;
- var isBoxSizeOuter;
- /**
- * setup
- * check isBoxSizerOuter
- * do on first getSize() rather than on page load for Firefox bug
- */
- function setup() {
- // setup once
- if ( isSetup ) {
- return;
- }
- isSetup = true;
- // -------------------------- box sizing -------------------------- //
- /**
- * Chrome & Safari measure the outer-width on style.width on border-box elems
- * IE11 & Firefox<29 measures the inner-width
- */
- var div = document.createElement('div');
- div.style.width = '200px';
- div.style.padding = '1px 2px 3px 4px';
- div.style.borderStyle = 'solid';
- div.style.borderWidth = '1px 2px 3px 4px';
- div.style.boxSizing = 'border-box';
- var body = document.body || document.documentElement;
- body.appendChild( div );
- var style = getStyle( div );
- // round value for browser zoom. desandro/masonry#928
- isBoxSizeOuter = Math.round( getStyleSize( style.width ) ) == 200;
- getSize.isBoxSizeOuter = isBoxSizeOuter;
- body.removeChild( div );
- }
- // -------------------------- getSize -------------------------- //
- function getSize( elem ) {
- setup();
- // use querySeletor if elem is string
- if ( typeof elem == 'string' ) {
- elem = document.querySelector( elem );
- }
- // do not proceed on non-objects
- if ( !elem || typeof elem != 'object' || !elem.nodeType ) {
- return;
- }
- var style = getStyle( elem );
- // if hidden, everything is 0
- if ( style.display == 'none' ) {
- return getZeroSize();
- }
- var size = {};
- size.width = elem.offsetWidth;
- size.height = elem.offsetHeight;
- var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box';
- // get all measurements
- for ( var i=0; i < measurementsLength; i++ ) {
- var measurement = measurements[i];
- var value = style[ measurement ];
- var num = parseFloat( value );
- // any 'auto', 'medium' value will be 0
- size[ measurement ] = !isNaN( num ) ? num : 0;
- }
- var paddingWidth = size.paddingLeft + size.paddingRight;
- var paddingHeight = size.paddingTop + size.paddingBottom;
- var marginWidth = size.marginLeft + size.marginRight;
- var marginHeight = size.marginTop + size.marginBottom;
- var borderWidth = size.borderLeftWidth + size.borderRightWidth;
- var borderHeight = size.borderTopWidth + size.borderBottomWidth;
- var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
- // overwrite width and height if we can get it from style
- var styleWidth = getStyleSize( style.width );
- if ( styleWidth !== false ) {
- size.width = styleWidth +
- // add padding and border unless it's already including it
- ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth );
- }
- var styleHeight = getStyleSize( style.height );
- if ( styleHeight !== false ) {
- size.height = styleHeight +
- // add padding and border unless it's already including it
- ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight );
- }
- size.innerWidth = size.width - ( paddingWidth + borderWidth );
- size.innerHeight = size.height - ( paddingHeight + borderHeight );
- size.outerWidth = size.width + marginWidth;
- size.outerHeight = size.height + marginHeight;
- return size;
- }
- return getSize;
- });
|