Reading Radius from CSS, and auto bgColor

[Kevin Dalman]

I am using your plug-in in a project that uses CSS 'themes', so I did
not want to hard-code any radius settings or colors in the cornerz
Javascript. code I also use 'outset' borders in some themes, so
wanted to handle these corners if possible.

These changes were too extensive to add to the cornerz plug-in, so I
created a function to do the calculations and then pass the data to
cornerz. Here is a quick summary of what this function handles that
cornerz currently does not:

* finds the background color automatically
* finds the border-width without a topBorder
* finds the border-colors without a topBorder
* handles inset/outset borders (barely adequate)
* reads moz-border-radius rules from CSS

I'm providing this in case you find some parts of it useful for a
future update to cornerz, like the loop to find the bgColor or the
readRadius subroutine.

/*
* roundCorners
*
* Add radiused-corners for browsers that don't support it natively -
primarily IE
*/
function roundCorners (defaultRadius) {
// TODO: See if there are other browsers we should handle here, like
Opera
if (!$.browser.msie || !$.fn.cornerz) return;

var showDebug = false;

$('.cornerz').each(function() {

if (showDebug && this.tagName=='TD') {
alert( 'this.backgroundColor = '+ $(this).css
('backgroundColor') );
var selector = 'TD';
if (this.id) selector += '#'+ this.ID;
else selector += '.'+ this.className.split(' ')[0];
alert( '$('+ selector +').backgroundColor = '+ $(selector).css
('backgroundColor') );
}

var
$Elem = $(this)
, h_radius = readRadius(this, defaultRadius) // returns hash
like: { tl: '8px', tr: '8px' }
;
if (!h_radius) return true; // no radius specified, SKIP/CONTINUE

var
options = { background: '#FFF' } // default
, h_border = { tl: 'Top', tr: 'Top', bl: 'Bottom', br:
'Bottom' }
, $Parent = $Elem // init loop var
, bgCol = "" // init loop var
, borderStyle // loop var
;
// find the background color - ascend all the way to BODY if
necessary
while (!bgCol || bgCol=='transparent') {
$Parent = $Parent.parents(':first');
bgCol = $Parent.css('backgroundColor');
if (!$Parent[0] || $Parent[0].tagName=='BODY') break;
}
if (bgCol && bgCol != 'transparent') options.background = bgCol;

for (corner in h_radius) {
// only doing 1-corner at a time!
options.corners = corner;
// get/set radius for this corner
options.radius = parseInt(h_radius[corner]);
if (!options.radius) continue; // SKIP corner - 0-radius

// read the width for the specific border/edge we are doing
options.borderWidth = parseInt($Elem.css('border'+ h_border
[corner] +'Width'));

// read the style for this border/edge
borderStyle = $Elem.css('border'+ h_border[corner] +'Style');
// outset & inset borders require special handling
if (borderStyle=='outset' || borderStyle=='inset') {
// TODO: these colors suit IE - but maybe not other browsers?
// use a darker color for th bottom-right corner
if (borderStyle=='outset')
options.borderColor = (corner == 'br') ? '#5F5F5F' :
'#D6D6D6';
else // inset
options.borderColor = (corner == 'br') ? '#D6D6D6' :
'#5F5F5F';
}
else // NOT outset or inset - use normal borderColor
options.borderColor = $Elem.css('border'+ h_border[corner]
+'Color');

// apply the corner-radius
$Elem.cornerz( options );

/* DEBUG
if (showDebug) alert(
$Elem[0].tagName + ($Elem[0].id ? '#'+$Elem[0].id : '.class="'+
$Elem[0].className+'"') +
'\n\ncorners = '+ options.corners +
'\nradius = '+ options.radius +
'\nbackground = '+ options.background
);
*/
}
});

// TODO - handle generic UI corner classes

function readRadius (elem, defaultRadius) {
var
$E = $(elem)
, radius = {}
, moz = '-moz-border-radius'
, r
;

if (r = $E.css(moz)) radius.tl = radius.tr = radius.bl =
radius.br = r;
if (r = $E.css(moz+'-topleft')) radius.tl = r;
if (r = $E.css(moz+'-topright')) radius.tr = r;
if (r = $E.css(moz+'-bottomleft')) radius.bl = r;
if (r = $E.css(moz+'-bottomright')) radius.br = r;

if (!radius.tl && !radius.tr && !radius.bl && !radius.br) {
// DEBUG - notify if this element has no radius set in CSS
if (showDebug) alert(
'Element has no radius (-moz-border-radius[-xx]) specified:\n
\n'+
elem.tagName + (elem.id ? '#'+elem.id : '.'+elem.className)
);
// use the defaultRadius if one was passed
if (defaultRadius)
radius.tl = radius.tr = radius.bl = radius.br = defaultRadius;
else
return null;
}

return radius;
}

};