rounded-corners.js
Summary
Rounded corners class
(C) www.dhtmlgoodies.com, September 2006
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
Look at the terms of use at http://www.dhtmlgoodies.com/index.html?page=termsOfUse
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
function DHTMLgoodies_roundedCorners()
{
var roundedCornerTargets;
this.roundedCornerTargets = new Array();
}
var string = '';
DHTMLgoodies_roundedCorners.prototype = {
addTarget : function(divId,xRadius,yRadius,color,backgroundColor,padding,heightOfContent,whichCorners)
{
var index = this.roundedCornerTargets.length;
this.roundedCornerTargets[index] = new Array();
this.roundedCornerTargets[index]['divId'] = divId;
this.roundedCornerTargets[index]['xRadius'] = xRadius;
this.roundedCornerTargets[index]['yRadius'] = yRadius;
this.roundedCornerTargets[index]['color'] = color;
this.roundedCornerTargets[index]['backgroundColor'] = backgroundColor;
this.roundedCornerTargets[index]['padding'] = padding;
this.roundedCornerTargets[index]['heightOfContent'] = heightOfContent;
this.roundedCornerTargets[index]['whichCorners'] = whichCorners;
}
,
init : function()
{
for(var targetCounter=0;targetCounter < this.roundedCornerTargets.length;targetCounter++){
whichCorners = this.roundedCornerTargets[targetCounter]['whichCorners'];
divId = this.roundedCornerTargets[targetCounter]['divId'];
xRadius = this.roundedCornerTargets[targetCounter]['xRadius'];
yRadius = this.roundedCornerTargets[targetCounter]['yRadius'];
color = this.roundedCornerTargets[targetCounter]['color'];
backgroundColor = this.roundedCornerTargets[targetCounter]['backgroundColor'];
padding = this.roundedCornerTargets[targetCounter]['padding'];
heightOfContent = this.roundedCornerTargets[targetCounter]['heightOfContent'];
whichCorners = this.roundedCornerTargets[targetCounter]['whichCorners'];
var cornerArray = new Array();
if(!whichCorners || whichCorners=='all'){
cornerArray['top_left'] = true;
cornerArray['top_right'] = true;
cornerArray['bottom_left'] = true;
cornerArray['bottom_right'] = true;
}else{
cornerArray = whichCorners.split(/,/gi);
for(var prop in cornerArray)cornerArray[cornerArray[prop]] = true;
}
var factorX = xRadius/yRadius;
var obj = document.getElementById(divId);
obj.style.backgroundColor=null;
obj.style.backgroundColor='transparent';
var content = obj.innerHTML;
obj.innerHTML = '';
if(cornerArray['top_left'] || cornerArray['top_right']){
var topBar_container = document.createElement('DIV');
topBar_container.style.height = yRadius + 'px';
topBar_container.style.overflow = 'hidden';
obj.appendChild(topBar_container);
var currentAntialiasSize = 0;
var savedRestValue = 0;
for(no=1;no<=yRadius;no++){
var marginSize = (xRadius - (this.getY((yRadius - no),yRadius,factorX)));
var marginSize_decimals = (xRadius - (this.getY_withDecimals((yRadius - no),yRadius,factorX)));
var restValue = xRadius - marginSize_decimals;
var antialiasSize = xRadius - marginSize - Math.floor(savedRestValue)
var foregroundSize = xRadius - (marginSize + antialiasSize);
var el = document.createElement('DIV');
el.style.overflow='hidden';
el.style.height = '1px';
if(cornerArray['top_left'])el.style.marginLeft = marginSize + 'px';
if(cornerArray['top_right'])el.style.marginRight = marginSize + 'px';
topBar_container.appendChild(el);
var y = topBar_container;
for(var no2=1;no2<=antialiasSize;no2++){
switch(no2){
case 1:
if (no2 == antialiasSize)
blendMode = ((restValue + savedRestValue) /2) - foregroundSize;
else {
var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2),xRadius,1/factorX);
blendMode = (restValue - foregroundSize - antialiasSize + 1) * (tmpValue - (yRadius - no)) /2;
}
break;
case antialiasSize:
var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2 + 1),xRadius,1/factorX);
blendMode = 1 - (1 - (tmpValue - (yRadius - no))) * (1 - (savedRestValue - foregroundSize)) /2;
break;
default:
var tmpValue2 = this.getY_withDecimals((xRadius - marginSize - no2),xRadius,1/factorX);
var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2 + 1),xRadius,1/factorX);
blendMode = ((tmpValue + tmpValue2) / 2) - (yRadius - no);
}
el.style.backgroundColor = this.__blendColors(backgroundColor,color,blendMode);
y.appendChild(el);
y = el;
var el = document.createElement('DIV');
el.style.height = '1px';
el.style.overflow='hidden';
if(cornerArray['top_left'])el.style.marginLeft = '1px';
if(cornerArray['top_right'])el.style.marginRight = '1px';
el.style.backgroundColor=color;
}
y.appendChild(el);
savedRestValue = restValue;
}
}
var contentDiv = document.createElement('DIV');
contentDiv.className = obj.className;
contentDiv.style.border='1px solid ' + color;
contentDiv.innerHTML = content;
contentDiv.style.backgroundColor=color;
contentDiv.style.paddingLeft = padding + 'px';
contentDiv.style.paddingRight = padding + 'px';
if(!heightOfContent)heightOfContent = '';
heightOfContent = heightOfContent + '';
if(heightOfContent.length>0 && heightOfContent.indexOf('%')==-1)heightOfContent = heightOfContent + 'px';
if(heightOfContent.length>0)contentDiv.style.height = heightOfContent;
obj.appendChild(contentDiv);
if(cornerArray['bottom_left'] || cornerArray['bottom_right']){
var bottomBar_container = document.createElement('DIV');
bottomBar_container.style.height = yRadius + 'px';
bottomBar_container.style.overflow = 'hidden';
obj.appendChild(bottomBar_container);
var currentAntialiasSize = 0;
var savedRestValue = 0;
var errorOccured = false;
var arrayOfDivs = new Array();
for(no=1;no<=yRadius;no++){
var marginSize = (xRadius - (this.getY((yRadius - no),yRadius,factorX)));
var marginSize_decimals = (xRadius - (this.getY_withDecimals((yRadius - no),yRadius,factorX)));
var restValue = (xRadius - marginSize_decimals);
var antialiasSize = xRadius - marginSize - Math.floor(savedRestValue)
var foregroundSize = xRadius - (marginSize + antialiasSize);
var el = document.createElement('DIV');
el.style.overflow='hidden';
el.style.height = '1px';
if(cornerArray['bottom_left'])el.style.marginLeft = marginSize + 'px';
if(cornerArray['bottom_right'])el.style.marginRight = marginSize + 'px';
bottomBar_container.insertBefore(el,bottomBar_container.firstChild);
var y = bottomBar_container;
for(var no2=1;no2<=antialiasSize;no2++){
switch(no2){
case 1:
if (no2 == antialiasSize)
blendMode = ((restValue + savedRestValue) /2) - foregroundSize;
else {
var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2),xRadius,1/factorX);
blendMode = (restValue - foregroundSize - antialiasSize + 1) * (tmpValue - (yRadius - no)) /2;
}
break;
case antialiasSize:
var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2 + 1),xRadius,1/factorX);
blendMode = 1 - (1 - (tmpValue - (yRadius - no))) * (1 - (savedRestValue - foregroundSize)) /2;
break;
default:
var tmpValue2 = this.getY_withDecimals((xRadius - marginSize - no2),xRadius,1/factorX);
var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2 + 1),xRadius,1/factorX);
blendMode = ((tmpValue + tmpValue2) / 2) - (yRadius - no);
}
el.style.backgroundColor = this.__blendColors(backgroundColor,color,blendMode);
if(y==bottomBar_container)arrayOfDivs[arrayOfDivs.length] = el;
try{
var firstChild = y.getElementsByTagName('DIV')[0];
y.insertBefore(el,y.firstChild);
}catch(e){
y.appendChild(el);
errorOccured = true;
}
y = el;
var el = document.createElement('DIV');
el.style.height = '1px';
el.style.overflow='hidden';
if(cornerArray['bottom_left'])el.style.marginLeft = '1px';
if(cornerArray['bottom_right'])el.style.marginRight = '1px';
}
if(errorOccured){
for(var divCounter=arrayOfDivs.length-1;divCounter>=0;divCounter--){
bottomBar_container.appendChild(arrayOfDivs[divCounter]);
}
}
el.style.backgroundColor=color;
y.appendChild(el);
savedRestValue = restValue;
}
}
}
}
,
getY : function(x,maxX,factorX){
return Math.max(0,Math.ceil(factorX * Math.sqrt( (maxX * maxX) - (x*x)) ));
}
,
getY_withDecimals : function(x,maxX,factorX){
return Math.max(0,factorX * Math.sqrt( (maxX * maxX) - (x*x)) );
}
,
__blendColors : function (colorA, colorB, blendMode) {
if(colorA.length=='4'){
colorA = '#' + colorA.substring(1,1) + colorA.substring(1,1) + colorA.substring(2,1) + colorA.substring(2,1) + colorA.substring(3,1) + colorA.substring(3,1);
}
if(colorB.length=='4'){
colorB = '#' + colorB.substring(1,1) + colorB.substring(1,1) + colorB.substring(2,1) + colorB.substring(2,1) + colorB.substring(3,1) + colorB.substring(3,1);
}
var colorArrayA = [parseInt('0x' + colorA.substring(1,3)), parseInt('0x' + colorA.substring(3, 5)), parseInt('0x' + colorA.substring(5, 7))];
var colorArrayB = [parseInt('0x' + colorB.substring(1,3)), parseInt('0x' + colorB.substring(3, 5)), parseInt('0x' + colorB.substring(5, 7))];
var red = Math.round(colorArrayA[0] + (colorArrayB[0] - colorArrayA[0])*blendMode).toString(16);
var green = Math.round(colorArrayA[1] + (colorArrayB[1] - colorArrayA[1])*blendMode).toString(16);
var blue = Math.round(colorArrayA[2] + (colorArrayB[2] - colorArrayA[2])*blendMode).toString(16);
if(red.length==1)red = '0' + red;
if(green.length==1)green = '0' + green;
if(blue.length==1)blue = '0' + blue;
return '#' + red + green+ blue;
}
}
Documentation generated by
JSDoc on Mon Oct 2 17:43:55 2006