release candidate
This commit is contained in:
Bachir Soussi Chiadmi
+9
-11
@@ -1,11 +1,9 @@
|
||||
{
|
||||
"name": "get-size",
|
||||
"version": "1.2.2",
|
||||
"version": "2.0.2",
|
||||
"main": "get-size.js",
|
||||
"description": "measures element size",
|
||||
"dependencies": {
|
||||
"get-style-property": "1.x"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"qunit": "~1.10"
|
||||
},
|
||||
@@ -13,11 +11,11 @@
|
||||
"test/",
|
||||
"**/.*",
|
||||
"package.json",
|
||||
"component.json",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
"tests",
|
||||
"sandbox.html"
|
||||
],
|
||||
"homepage": "https://github.com/desandro/get-size",
|
||||
"authors": [
|
||||
@@ -35,13 +33,13 @@
|
||||
"height"
|
||||
],
|
||||
"license": "MIT",
|
||||
"_release": "1.2.2",
|
||||
"_release": "2.0.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.2.2",
|
||||
"commit": "059bbf3aa78997e4ca761e6d742b2e9efe674e08"
|
||||
"tag": "v2.0.2",
|
||||
"commit": "53ad18840e260d5eb89fd579362596dad5852c77"
|
||||
},
|
||||
"_source": "git://github.com/desandro/get-size.git",
|
||||
"_target": "~1.2.2",
|
||||
"_source": "https://github.com/desandro/get-size.git",
|
||||
"_target": "^2.0.2",
|
||||
"_originalSource": "get-size"
|
||||
}
|
||||
+1
-5
@@ -12,7 +12,7 @@ var size = getSize('#selector')
|
||||
|
||||
Returns an object with: `width`, `height`, `innerWidth/Height`, `outerWidth/Height`, `paddingLeft/Top/Right/Bottom`, `marginLeft/Top/Right/Bottom`, `borderLeft/Top/Right/BottomWidth` and `isBorderBox`.
|
||||
|
||||
Tested in IE8, IE9 and good browsers.
|
||||
Browser support: IE10+, Android 4.0+, iOS 5+, and modern browsers
|
||||
|
||||
## Install
|
||||
|
||||
@@ -32,10 +32,6 @@ Install with npm: `npm install get-size`
|
||||
}
|
||||
```
|
||||
|
||||
## Fractional values in IE8
|
||||
|
||||
For percentage or `em`-based sizes, IE8 does not support fractional values. getSize will round to the nearest value.
|
||||
|
||||
## MIT License
|
||||
|
||||
getSize is released under the [MIT License](http://desandro.mit-license.org/).
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
{
|
||||
"name": "get-size",
|
||||
"version": "1.2.2",
|
||||
"version": "2.0.2",
|
||||
"main": "get-size.js",
|
||||
"description": "measures element size",
|
||||
"dependencies": {
|
||||
"get-style-property": "1.x"
|
||||
},
|
||||
"devDependencies": {
|
||||
"qunit": "~1.10"
|
||||
@@ -13,11 +12,11 @@
|
||||
"test/",
|
||||
"**/.*",
|
||||
"package.json",
|
||||
"component.json",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
"tests",
|
||||
"sandbox.html"
|
||||
],
|
||||
"homepage": "https://github.com/desandro/get-size",
|
||||
"authors": [
|
||||
|
||||
+59
-100
@@ -1,14 +1,29 @@
|
||||
/*!
|
||||
* getSize v1.2.2
|
||||
* getSize v2.0.2
|
||||
* measure size of elements
|
||||
* MIT license
|
||||
*/
|
||||
|
||||
/*jshint browser: true, strict: true, undef: true, unused: true */
|
||||
/*global define: false, exports: false, require: false, module: false, console: false */
|
||||
/*global define: false, module: false, console: false */
|
||||
|
||||
( function( window, undefined ) {
|
||||
( function( window, factory ) {
|
||||
'use strict';
|
||||
|
||||
if ( typeof define == 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( function() {
|
||||
return factory();
|
||||
});
|
||||
} else if ( typeof module == 'object' && module.exports ) {
|
||||
// CommonJS
|
||||
module.exports = factory();
|
||||
} else {
|
||||
// browser global
|
||||
window.getSize = factory();
|
||||
}
|
||||
|
||||
})( window, function factory() {
|
||||
'use strict';
|
||||
|
||||
// -------------------------- helpers -------------------------- //
|
||||
@@ -17,13 +32,13 @@
|
||||
function getStyleSize( value ) {
|
||||
var num = parseFloat( value );
|
||||
// not a percent like '100%', and a number
|
||||
var isValid = value.indexOf('%') === -1 && !isNaN( num );
|
||||
var isValid = value.indexOf('%') == -1 && !isNaN( num );
|
||||
return isValid && num;
|
||||
}
|
||||
|
||||
function noop() {}
|
||||
|
||||
var logError = typeof console === 'undefined' ? noop :
|
||||
var logError = typeof console == 'undefined' ? noop :
|
||||
function( message ) {
|
||||
console.error( message );
|
||||
};
|
||||
@@ -45,6 +60,8 @@ var measurements = [
|
||||
'borderBottomWidth'
|
||||
];
|
||||
|
||||
var measurementsLength = measurements.length;
|
||||
|
||||
function getZeroSize() {
|
||||
var size = {
|
||||
width: 0,
|
||||
@@ -54,27 +71,39 @@ function getZeroSize() {
|
||||
outerWidth: 0,
|
||||
outerHeight: 0
|
||||
};
|
||||
for ( var i=0, len = measurements.length; i < len; i++ ) {
|
||||
for ( var i=0; i < measurementsLength; i++ ) {
|
||||
var measurement = measurements[i];
|
||||
size[ measurement ] = 0;
|
||||
}
|
||||
return size;
|
||||
}
|
||||
|
||||
// -------------------------- getStyle -------------------------- //
|
||||
|
||||
|
||||
function defineGetSize( getStyleProperty ) {
|
||||
/**
|
||||
* 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 http://bit.ly/getsizebug1' );
|
||||
}
|
||||
return style;
|
||||
}
|
||||
|
||||
// -------------------------- setup -------------------------- //
|
||||
|
||||
var isSetup = false;
|
||||
|
||||
var getStyle, boxSizingProp, isBoxSizeOuter;
|
||||
var isBoxSizeOuter;
|
||||
|
||||
/**
|
||||
* setup vars and functions
|
||||
* do it on initial getSize(), rather than on script load
|
||||
* For Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=548397
|
||||
* setup
|
||||
* check isBoxSizerOuter
|
||||
* do on first getSize() rather than on page load for Firefox bug
|
||||
*/
|
||||
function setup() {
|
||||
// setup once
|
||||
@@ -83,50 +112,25 @@ function setup() {
|
||||
}
|
||||
isSetup = true;
|
||||
|
||||
var getComputedStyle = window.getComputedStyle;
|
||||
getStyle = ( function() {
|
||||
var getStyleFn = getComputedStyle ?
|
||||
function( elem ) {
|
||||
return getComputedStyle( elem, null );
|
||||
} :
|
||||
function( elem ) {
|
||||
return elem.currentStyle;
|
||||
};
|
||||
|
||||
return function getStyle( elem ) {
|
||||
var style = getStyleFn( elem );
|
||||
if ( !style ) {
|
||||
logError( 'Style returned ' + style +
|
||||
'. Are you running this code in a hidden iframe on Firefox? ' +
|
||||
'See http://bit.ly/getsizebug1' );
|
||||
}
|
||||
return style;
|
||||
};
|
||||
})();
|
||||
|
||||
// -------------------------- box sizing -------------------------- //
|
||||
|
||||
boxSizingProp = getStyleProperty('boxSizing');
|
||||
|
||||
/**
|
||||
* WebKit measures the outer-width on style.width on border-box elems
|
||||
* IE & Firefox measures the inner-width
|
||||
* IE & Firefox<29 measures the inner-width
|
||||
*/
|
||||
if ( boxSizingProp ) {
|
||||
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[ boxSizingProp ] = 'border-box';
|
||||
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 );
|
||||
var body = document.body || document.documentElement;
|
||||
body.appendChild( div );
|
||||
var style = getStyle( div );
|
||||
|
||||
isBoxSizeOuter = getStyleSize( style.width ) === 200;
|
||||
body.removeChild( div );
|
||||
}
|
||||
getSize.isBoxSizeOuter = isBoxSizeOuter = getStyleSize( style.width ) == 200;
|
||||
body.removeChild( div );
|
||||
|
||||
}
|
||||
|
||||
@@ -136,19 +140,19 @@ function getSize( elem ) {
|
||||
setup();
|
||||
|
||||
// use querySeletor if elem is string
|
||||
if ( typeof elem === 'string' ) {
|
||||
if ( typeof elem == 'string' ) {
|
||||
elem = document.querySelector( elem );
|
||||
}
|
||||
|
||||
// do not proceed on non-objects
|
||||
if ( !elem || typeof elem !== 'object' || !elem.nodeType ) {
|
||||
if ( !elem || typeof elem != 'object' || !elem.nodeType ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var style = getStyle( elem );
|
||||
|
||||
// if hidden, everything is 0
|
||||
if ( style.display === 'none' ) {
|
||||
if ( style.display == 'none' ) {
|
||||
return getZeroSize();
|
||||
}
|
||||
|
||||
@@ -156,14 +160,12 @@ function getSize( elem ) {
|
||||
size.width = elem.offsetWidth;
|
||||
size.height = elem.offsetHeight;
|
||||
|
||||
var isBorderBox = size.isBorderBox = !!( boxSizingProp &&
|
||||
style[ boxSizingProp ] && style[ boxSizingProp ] === 'border-box' );
|
||||
var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box';
|
||||
|
||||
// get all measurements
|
||||
for ( var i=0, len = measurements.length; i < len; i++ ) {
|
||||
for ( var i=0; i < measurementsLength; i++ ) {
|
||||
var measurement = measurements[i];
|
||||
var value = style[ measurement ];
|
||||
value = mungeNonPixel( elem, value );
|
||||
var num = parseFloat( value );
|
||||
// any 'auto', 'medium' value will be 0
|
||||
size[ measurement ] = !isNaN( num ) ? num : 0;
|
||||
@@ -202,49 +204,6 @@ function getSize( elem ) {
|
||||
return size;
|
||||
}
|
||||
|
||||
// IE8 returns percent values, not pixels
|
||||
// taken from jQuery's curCSS
|
||||
function mungeNonPixel( elem, value ) {
|
||||
// IE8 and has percent value
|
||||
if ( window.getComputedStyle || value.indexOf('%') === -1 ) {
|
||||
return value;
|
||||
}
|
||||
var style = elem.style;
|
||||
// Remember the original values
|
||||
var left = style.left;
|
||||
var rs = elem.runtimeStyle;
|
||||
var rsLeft = rs && rs.left;
|
||||
|
||||
// Put in the new values to get a computed value out
|
||||
if ( rsLeft ) {
|
||||
rs.left = elem.currentStyle.left;
|
||||
}
|
||||
style.left = value;
|
||||
value = style.pixelLeft;
|
||||
|
||||
// Revert the changed values
|
||||
style.left = left;
|
||||
if ( rsLeft ) {
|
||||
rs.left = rsLeft;
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
return getSize;
|
||||
|
||||
}
|
||||
|
||||
// transport
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD for RequireJS
|
||||
define( [ 'get-style-property/get-style-property' ], defineGetSize );
|
||||
} else if ( typeof exports === 'object' ) {
|
||||
// CommonJS for Component
|
||||
module.exports = defineGetSize( require('desandro-get-style-property') );
|
||||
} else {
|
||||
// browser global
|
||||
window.getSize = defineGetSize( window.getStyleProperty );
|
||||
}
|
||||
|
||||
})( window );
|
||||
});
|
||||
|
||||
@@ -1,85 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>getSize</title>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.box {
|
||||
color: blue;
|
||||
background: pink;
|
||||
}
|
||||
|
||||
.border-box {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#box1, #box2 {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border: 10px solid;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#box3, #box4 {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border: 0px solid;
|
||||
margin: 10%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#box5, #box6 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 10px solid;
|
||||
margin: 10%;
|
||||
padding: 5%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>getSize</h1>
|
||||
|
||||
<div class="container">
|
||||
<div id="box1" class="box">box1</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div id="box2" class="box border-box">box2</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div id="box3" class="box">box3</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div id="box4" class="box border-box">box4</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div id="box5" class="box">box5</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div id="box6" class="box border-box">box6</div>
|
||||
</div>
|
||||
|
||||
<script src="get-size.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user