Skip to content

Commit

Permalink
Fix overlays position
Browse files Browse the repository at this point in the history
  • Loading branch information
@florentb
florentb committed Oct 15, 2015
1 parent a2a26eb commit f616d15
Show file tree
Hide file tree
Showing 9 changed files with 60 additions and 48 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "respimg-inspector",
"version": "0.2.0",
"version": "0.2.1",
"homepage": "https://github.com/creative-area/respimg-inspector",
"authors": [
"Florent Bourgeois"
Expand Down
2 changes: 1 addition & 1 deletion dist/chrome/manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"manifest_version": 2,

"name": "RespImg Inspector",
"version": "1.0",
"version": "0.2.0",
"author": "Florent Bourgeois",
"description": "This extension check responsive images on a website",
"homepage_url": "https://github.com/creativearea/respimg-inspector",
Expand Down
31 changes: 17 additions & 14 deletions dist/chrome/respimg-inspector.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* respimg-inspector - v0.1.1
* respimg-inspector - v0.2.0
* A javascript plugin to check responsive images in the browser.
*
*
Expand Down Expand Up @@ -30,6 +30,7 @@
];

var docBody = document.body;
var docElem = document.documentElement;

var forEach = function( collection, callback, scope ) {
if ( Object.prototype.toString.call( collection ) === "[object Object]" ) {
Expand Down Expand Up @@ -134,14 +135,18 @@

var getElementData = function( element ) {
var elRect = element.getBoundingClientRect();
var scrollTop = window.pageYOffset || docElem.scrollTop || docBody.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || docBody.scrollLeft;
var clientTop = docElem.clientTop || docBody.clientTop || 0;
var clientLeft = docElem.clientLeft || docBody.clientLeft || 0;
return {
elTag: element.nodeName.toLowerCase(),
elWidth: elRect.width,
elHeight: elRect.height,
elTop: elRect.top,
elBottom: elRect.bottom,
elLeft: elRect.left,
elRight: elRect.right
elTop: Math.round( elRect.top + scrollTop - clientTop ),
elBottom: Math.round( elRect.bottom + scrollTop - clientTop ),
elLeft: Math.round( elRect.left + scrollLeft - clientLeft ),
elRight: Math.round( elRect.right + scrollLeft - clientLeft )
};
};

Expand All @@ -161,8 +166,10 @@
image = element;
} else if ( getCss( element, "background-image" ) !== "none" ) {
var bgUrl = /^url\((['"]?)(.*)\1\)$/.exec( getCss( element, "background-image" ) );
image = new Image();
image.src = bgUrl[ 2 ];
if ( bgUrl ) {
image = new Image();
image.src = bgUrl[ 2 ];
}
}
return image;
};
Expand All @@ -185,18 +192,14 @@
};

var getOverlay = function( data ) {
var marginTop = getCss( docBody, "margin-top" );
var marginLeft = getCss( docBody, "margin-left" );
var bodyRect = docBody.getBoundingClientRect();
var offsetTop = data.elTop - bodyRect.top;
var offsetLeft = data.elLeft - bodyRect.left;
var overlay = document.createElement( "div" );
overlay.classList.add( settings.classNamespace + "overlay" );
overlay.style.position = "absolute";
overlay.style.width = data.elWidth + "px";
overlay.style.height = data.elHeight + "px";
overlay.style.top = "calc(" + offsetTop + "px + " + marginTop + ")";
overlay.style.left = "calc(" + offsetLeft + "px + " + marginLeft + ")";
overlay.style.top = data.elTop + "px";
overlay.style.left = data.elLeft + "px";
overlay.style.zIndex = 2147483647;
overlay.classList.add( getOverlayClassName( data ) );
forEach( data, function( dataValue, dataKey ) {
overlay.dataset[ dataKey ] = dataValue;
Expand Down
31 changes: 17 additions & 14 deletions dist/respimg-inspector.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* respimg-inspector - v0.1.1
* respimg-inspector - v0.2.0
* A javascript plugin to check responsive images in the browser.
*
*
Expand Down Expand Up @@ -30,6 +30,7 @@
];

var docBody = document.body;
var docElem = document.documentElement;

var forEach = function( collection, callback, scope ) {
if ( Object.prototype.toString.call( collection ) === "[object Object]" ) {
Expand Down Expand Up @@ -134,14 +135,18 @@

var getElementData = function( element ) {
var elRect = element.getBoundingClientRect();
var scrollTop = window.pageYOffset || docElem.scrollTop || docBody.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || docBody.scrollLeft;
var clientTop = docElem.clientTop || docBody.clientTop || 0;
var clientLeft = docElem.clientLeft || docBody.clientLeft || 0;
return {
elTag: element.nodeName.toLowerCase(),
elWidth: elRect.width,
elHeight: elRect.height,
elTop: elRect.top,
elBottom: elRect.bottom,
elLeft: elRect.left,
elRight: elRect.right
elTop: Math.round( elRect.top + scrollTop - clientTop ),
elBottom: Math.round( elRect.bottom + scrollTop - clientTop ),
elLeft: Math.round( elRect.left + scrollLeft - clientLeft ),
elRight: Math.round( elRect.right + scrollLeft - clientLeft )
};
};

Expand All @@ -161,8 +166,10 @@
image = element;
} else if ( getCss( element, "background-image" ) !== "none" ) {
var bgUrl = /^url\((['"]?)(.*)\1\)$/.exec( getCss( element, "background-image" ) );
image = new Image();
image.src = bgUrl[ 2 ];
if ( bgUrl ) {
image = new Image();
image.src = bgUrl[ 2 ];
}
}
return image;
};
Expand All @@ -185,18 +192,14 @@
};

var getOverlay = function( data ) {
var marginTop = getCss( docBody, "margin-top" );
var marginLeft = getCss( docBody, "margin-left" );
var bodyRect = docBody.getBoundingClientRect();
var offsetTop = data.elTop - bodyRect.top;
var offsetLeft = data.elLeft - bodyRect.left;
var overlay = document.createElement( "div" );
overlay.classList.add( settings.classNamespace + "overlay" );
overlay.style.position = "absolute";
overlay.style.width = data.elWidth + "px";
overlay.style.height = data.elHeight + "px";
overlay.style.top = "calc(" + offsetTop + "px + " + marginTop + ")";
overlay.style.left = "calc(" + offsetLeft + "px + " + marginLeft + ")";
overlay.style.top = data.elTop + "px";
overlay.style.left = data.elLeft + "px";
overlay.style.zIndex = 2147483647;
overlay.classList.add( getOverlayClassName( data ) );
forEach( data, function( dataValue, dataKey ) {
overlay.dataset[ dataKey ] = dataValue;
Expand Down
4 changes: 2 additions & 2 deletions dist/respimg-inspector.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "respimg-inspector",
"version": "0.2.0",
"version": "0.2.1",
"description": "A javascript plugin to check responsive images in the browser.",
"keywords": [
"image",
Expand Down
5 changes: 4 additions & 1 deletion src/chrome/background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,15 @@ function addTab( tab ) {
}

function removeTab( id ) {
currentTabId = null;
chrome.tabs.executeScript( currentTabId, {
code: "respImgInspector.destroy();"
} );
chrome.browserAction.setIcon( {
tabId: id,
path: "icon32.png"
} );
chrome.tabs.reload( id );
currentTabId = null;
}

chrome.browserAction.onClicked.addListener( toggle );
2 changes: 1 addition & 1 deletion src/chrome/manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"manifest_version": 2,

"name": "RespImg Inspector",
"version": "0.2.0",
"version": "0.2.1",
"author": "Florent Bourgeois",
"description": "This extension check responsive images on a website",
"homepage_url": "https://github.com/creativearea/respimg-inspector",
Expand Down
29 changes: 16 additions & 13 deletions src/respimg-inspector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
];

var docBody = document.body;
var docElem = document.documentElement;

var forEach = function( collection, callback, scope ) {
if ( Object.prototype.toString.call( collection ) === "[object Object]" ) {
Expand Down Expand Up @@ -126,14 +127,18 @@

var getElementData = function( element ) {
var elRect = element.getBoundingClientRect();
var scrollTop = window.pageYOffset || docElem.scrollTop || docBody.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || docBody.scrollLeft;
var clientTop = docElem.clientTop || docBody.clientTop || 0;
var clientLeft = docElem.clientLeft || docBody.clientLeft || 0;
return {
elTag: element.nodeName.toLowerCase(),
elWidth: elRect.width,
elHeight: elRect.height,
elTop: elRect.top,
elBottom: elRect.bottom,
elLeft: elRect.left,
elRight: elRect.right
elTop: Math.round( elRect.top + scrollTop - clientTop ),
elBottom: Math.round( elRect.bottom + scrollTop - clientTop ),
elLeft: Math.round( elRect.left + scrollLeft - clientLeft ),
elRight: Math.round( elRect.right + scrollLeft - clientLeft )
};
};

Expand All @@ -153,8 +158,10 @@
image = element;
} else if ( getCss( element, "background-image" ) !== "none" ) {
var bgUrl = /^url\((['"]?)(.*)\1\)$/.exec( getCss( element, "background-image" ) );
image = new Image();
image.src = bgUrl[ 2 ];
if ( bgUrl ) {
image = new Image();
image.src = bgUrl[ 2 ];
}
}
return image;
};
Expand All @@ -177,18 +184,14 @@
};

var getOverlay = function( data ) {
var marginTop = getCss( docBody, "margin-top" );
var marginLeft = getCss( docBody, "margin-left" );
var bodyRect = docBody.getBoundingClientRect();
var offsetTop = data.elTop - bodyRect.top;
var offsetLeft = data.elLeft - bodyRect.left;
var overlay = document.createElement( "div" );
overlay.classList.add( settings.classNamespace + "overlay" );
overlay.style.position = "absolute";
overlay.style.width = data.elWidth + "px";
overlay.style.height = data.elHeight + "px";
overlay.style.top = "calc(" + offsetTop + "px + " + marginTop + ")";
overlay.style.left = "calc(" + offsetLeft + "px + " + marginLeft + ")";
overlay.style.top = data.elTop + "px";
overlay.style.left = data.elLeft + "px";
overlay.style.zIndex = 2147483647;
overlay.classList.add( getOverlayClassName( data ) );
forEach( data, function( dataValue, dataKey ) {
overlay.dataset[ dataKey ] = dataValue;
Expand Down

0 comments on commit f616d15

Please sign in to comment.