Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rewrote a good portion of this to try to create a more consistent method... #47

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Rewrote a good portion of this to try to create a more consistent method... #47

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 39 additions & 47 deletions boxsizing.htc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,12 @@
* The URL to the HTC file must be relative to your HTML(!) document, not relative to your CSS.
* That's why I'd advise you to use absolute paths like in the example.
*
* CHANGE LOG:
* 2014-12-08: smithwib: Rewrote a good portion of how borders and padding was being
* calculated to do a better job of trapping errors and measuring consistently
* 2014-12-09: smithwib: Ran into problems with IE7 and border:thick, had to go with a
* direct replacement rather than a calculated value
*
*/
<component lightWeight="true">
<attach event="onpropertychange" onevent="checkPropertyChange()" />
Expand Down Expand Up @@ -172,36 +178,44 @@ function checkPropertyChange(){
* http://code.google.com/p/ie7-js/
*
* Allows us to convert from relative to pixel-values.
* Don't use with percentages -- they need more parent info
*/
function getPixelValue(value){
var PIXEL = /^\d+(px)?$/i;
if (PIXEL.test(value)) return parseInt(value);

// If word widths, swap in IE6/IE7 constants
// because these won't evaluate properly
// in below method
switch (value.toLowerCase()) {
case "thick": return 6;
case "medium": return 4;
case "thin": return 2;
}

// Otherwise, let browser convert
var style = element.style.left;
var runtimeStyle = element.runtimeStyle.left;
element.runtimeStyle.left = element.currentStyle.left;
element.style.left = value || 0;
value = parseInt(element.style.pixelLeft);
try {
element.style.left = value;
value = parseInt(element.style.pixelLeft);
} catch(e) {
value = 0;
}
element.style.left = style;
element.runtimeStyle.left = runtimeStyle;

return value;
}

function getPixelWidth(object, value){
// For Pixel Values
var PIXEL = /^\d+(px)?$/i;
if (PIXEL.test(value)) return parseInt(value);

// For Percentage Values
var PERCENT = /^[\d\.]+%$/i;
if (PERCENT.test(value)){
try{
var parentPaddingLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingLeft);
var parentPaddingRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingRight);
var parentBorderLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderLeftWidth);
var parentBorderRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderRightWidth);

//var parentWidth = getPixelWidth(object.parentElement,(object.parentElement.currentStyle.width != "auto" ? object.parentElement.currentStyle.width : "100%"));
var parentBorderLeft = getBorderWidth(object.parentElement,"Left");
var parentBorderRight = getBorderWidth(object.parentElement,"Right");
var parentWidth = object.parentElement.offsetWidth - parentPaddingLeft - parentPaddingRight - parentBorderLeft - parentBorderRight;
var value = (parseFloat(value) / 100) * parentWidth;
}
Expand All @@ -211,22 +225,11 @@ function getPixelWidth(object, value){
return parseInt(value);
}

// For EM Values
var style = object.style.left;
var runtimeStyle = object.runtimeStyle.left;
object.runtimeStyle.left = object.currentStyle.left;
object.style.left = value || 0;
value = parseInt(object.style.pixelLeft);
object.style.left = style;
object.runtimeStyle.left = runtimeStyle;

return value;
// Otherwise
return getPixelValue(value);
}

function getPixelHeight(object, value){
// For Pixel Values
var PIXEL = /^\d+(px)?$/i;
if (PIXEL.test(value)) return parseInt(value);

// For Percentage Values
var PERCENT = /^[\d\.]+%$/i;
Expand All @@ -238,12 +241,9 @@ function getPixelHeight(object, value){
if(object.parentElement.currentStyle.height !== "auto"){
var parentPaddingTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingTop);
var parentPaddingBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingBottom);
var parentBorderTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderTopWidth);
var parentBorderBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderBottomWidth);

var parentBorderTop = getBorderWidth(object.parentElement,"Top");
var parentBorderBottom = getBorderWidth(object.parentElement,"Bottom");
var parentHeight = object.parentElement.offsetHeight - parentPaddingTop - parentPaddingBottom - parentBorderTop - parentBorderBottom;
//var parentHeight = getPixelHeight(object.parentElement,object.parentElement.currentStyle.height);

value = (parseFloat(value) / 100) * parentHeight;
}
else {
Expand Down Expand Up @@ -273,34 +273,26 @@ function getPixelHeight(object, value){
return value;
}

// For EM Values
var style = object.style.left;
var runtimeStyle = object.runtimeStyle.left;
object.runtimeStyle.left = object.currentStyle.left;
object.style.left = value || 0;
value = parseInt(object.style.pixelLeft);
object.style.left = style;
object.runtimeStyle.left = runtimeStyle;

return value;
// Otherwise
return getPixelValue(value);
}


/*
* getBorderWidth & friends
* Border width getters
*/
function getBorderWidth(sSide){
if(element.currentStyle["border" + sSide + "Style"] == "none"){
function getBorderWidth(object,sSide){
if(object.currentStyle["border" + sSide + "Style"] == "none"){
return 0;
}
var n = getPixelValue(element.currentStyle["border" + sSide + "Width"]);
var n = getPixelValue(object.currentStyle["border" + sSide + "Width"]);
return n || 0;
}
function getBorderLeftWidth() { return getBorderWidth("Left"); }
function getBorderRightWidth() { return getBorderWidth("Right"); }
function getBorderTopWidth() { return getBorderWidth("Top"); }
function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
function getBorderLeftWidth() { return getBorderWidth(element,"Left"); }
function getBorderRightWidth() { return getBorderWidth(element,"Right"); }
function getBorderTopWidth() { return getBorderWidth(element,"Top"); }
function getBorderBottomWidth() { return getBorderWidth(element,"Bottom"); }


/*
Expand Down