david
28b02db2ea
git-svn-id: https://192.168.0.254/svn/Proyectos.Incam_SGD/tags/3.7.0.2_original@1 eb19766c-00d9-a042-a3a0-45cb8ec72764
1115 lines
47 KiB
JavaScript
1115 lines
47 KiB
JavaScript
|
|
/****************************************************************
|
|
* *
|
|
* curvyCorners *
|
|
* ------------ *
|
|
* *
|
|
* This script generates rounded corners for your divs. *
|
|
* *
|
|
* Version 1.2.9 *
|
|
* Copyright (c) 2006 Cameron Cooke *
|
|
* By: Cameron Cooke and Tim Hutchison. *
|
|
* *
|
|
* *
|
|
* Website: http://www.curvycorners.net *
|
|
* Email: info@totalinfinity.com *
|
|
* Forum: http://www.curvycorners.net/forum/ *
|
|
* *
|
|
* *
|
|
* This library is free software; you can redistribute *
|
|
* it and/or modify it under the terms of the GNU *
|
|
* Lesser General Public License as published by the *
|
|
* Free Software Foundation; either version 2.1 of the *
|
|
* License, or (at your option) any later version. *
|
|
* *
|
|
* This library is distributed in the hope that it will *
|
|
* be useful, but WITHOUT ANY WARRANTY; without even the *
|
|
* implied warranty of MERCHANTABILITY or FITNESS FOR A *
|
|
* PARTICULAR PURPOSE. See the GNU Lesser General Public *
|
|
* License for more details. *
|
|
* *
|
|
* You should have received a copy of the GNU Lesser *
|
|
* General Public License along with this library; *
|
|
* Inc., 59 Temple Place, Suite 330, Boston, *
|
|
* MA 02111-1307 USA *
|
|
* *
|
|
****************************************************************/
|
|
|
|
// Browser detection
|
|
var isIE = navigator.userAgent.toLowerCase().indexOf("msie") > -1;
|
|
var isMoz = document.implementation && document.implementation.createDocument;
|
|
var isSafari = ((navigator.userAgent.toLowerCase().indexOf('safari')!=-1)&&(navigator.userAgent.toLowerCase().indexOf('mac')!=-1))?true:false;
|
|
var masterCorners = new Array();
|
|
|
|
/*
|
|
Usage:
|
|
|
|
newCornersObj = new curvyCorners(settingsObj, "classNameStr");
|
|
newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
|
|
*/
|
|
function curvyCorners()
|
|
{
|
|
// Check parameters
|
|
if(typeof(arguments[0]) != "object") throw newCurvyError("First parameter of curvyCorners() must be an object.");
|
|
if(typeof(arguments[1]) != "object" && typeof(arguments[1]) != "string") throw newCurvyError("Second parameter of curvyCorners() must be an object or a class name.");
|
|
|
|
// Get object(s)
|
|
if(typeof(arguments[1]) == "string")
|
|
{
|
|
// Get elements by class name
|
|
var startIndex = 0;
|
|
var boxCol = getElementsByClass(arguments[1]);
|
|
}
|
|
else
|
|
{
|
|
// Get objects
|
|
var startIndex = 1;
|
|
var boxCol = arguments;
|
|
}
|
|
|
|
// Create return collection/object
|
|
var curvyCornersCol = new Array();
|
|
|
|
// Create array of html elements that can have rounded corners
|
|
if(arguments[0].validTags)
|
|
var validElements = arguments[0].validTags;
|
|
else
|
|
var validElements = ["div"]; // Default
|
|
|
|
// Loop through each argument
|
|
for(var i = startIndex, j = boxCol.length; i < j; i++)
|
|
{
|
|
// Current element tag name
|
|
var currentTag = boxCol[i].tagName.toLowerCase();
|
|
|
|
if(inArray(validElements, currentTag) !== false)
|
|
{
|
|
curvyCornersCol[curvyCornersCol.length] = new curvyObject(arguments[0], boxCol[i]);
|
|
}
|
|
}
|
|
|
|
this.objects = curvyCornersCol;
|
|
|
|
// Applies the curvyCorners to all objects
|
|
this.applyCornersToAll = function()
|
|
{
|
|
for(var x = 0, k = this.objects.length; x < k; x++)
|
|
{
|
|
this.objects[x].applyCorners();
|
|
}
|
|
}
|
|
}
|
|
|
|
// curvyCorners object (can be called directly)
|
|
function curvyObject()
|
|
{
|
|
// Setup Globals
|
|
this.box = arguments[1];
|
|
this.settings = arguments[0];
|
|
this.topContainer = null;
|
|
this.bottomContainer = null;
|
|
|
|
this.contentDIV = null;
|
|
|
|
// Get box formatting details
|
|
var boxHeight = get_style(this.box, "height", "height");
|
|
var boxWidth = get_style(this.box, "width", "width");
|
|
var borderWidth = get_style(this.box, "borderTopWidth", "border-top-width");
|
|
var borderColour = get_style(this.box, "borderTopColor", "border-top-color");
|
|
var boxColour = get_style(this.box, "backgroundColor", "background-color");
|
|
var backgroundImage = get_style(this.box, "backgroundImage", "background-image");
|
|
var boxPosition = get_style(this.box, "position", "position");
|
|
var boxPadding = get_style(this.box, "paddingTop", "padding-top");
|
|
|
|
// Set formatting propertes
|
|
this.boxHeight = parseInt(((boxHeight != "" && boxHeight != "auto" && boxHeight.indexOf("%") == -1)? boxHeight.substring(0, boxHeight.indexOf("px")) : this.box.scrollHeight));
|
|
this.boxWidth = parseInt(((boxWidth != "" && boxWidth != "auto" && boxWidth.indexOf("%") == -1)? boxWidth.substring(0, boxWidth.indexOf("px")) : this.box.scrollWidth));
|
|
this.borderWidth = parseInt(((borderWidth != "" && borderWidth.indexOf("px") !== -1)? borderWidth.slice(0, borderWidth.indexOf("px")) : 0));
|
|
this.boxColour = format_colour(boxColour);
|
|
this.boxPadding = parseInt(((boxPadding != "" && boxPadding.indexOf("px") !== -1)? boxPadding.slice(0, boxPadding.indexOf("px")) : 0));
|
|
this.borderColour = format_colour(borderColour);
|
|
this.borderString = this.borderWidth + "px" + " solid " + this.borderColour;
|
|
this.backgroundImage = ((backgroundImage != "none")? backgroundImage : "");
|
|
this.boxContent = this.box.innerHTML;
|
|
|
|
// Make box relative if not already absolute and remove any padding
|
|
if(boxPosition != "absolute") this.box.style.position = "relative";
|
|
this.box.style.padding = "0px";
|
|
|
|
// If IE and height and width are not set, we need to set width so that we get positioning
|
|
if(isIE && boxWidth == "auto" && boxHeight == "auto") this.box.style.width = "100%";
|
|
|
|
// Resize box so that it stays to the orignal height
|
|
|
|
|
|
// Remove content if box is using autoPad
|
|
if(this.settings.autoPad == true && this.boxPadding > 0)
|
|
this.box.innerHTML = "";
|
|
|
|
/*
|
|
This method creates the corners and
|
|
applies them to the div element.
|
|
*/
|
|
this.applyCorners = function()
|
|
{
|
|
/*
|
|
Create top and bottom containers.
|
|
These will be used as a parent for the corners and bars.
|
|
*/
|
|
for(var t = 0; t < 2; t++)
|
|
{
|
|
switch(t)
|
|
{
|
|
// Top
|
|
case 0:
|
|
|
|
// Only build top bar if a top corner is to be draw
|
|
if(this.settings.tl || this.settings.tr)
|
|
{
|
|
var newMainContainer = document.createElement("DIV");
|
|
newMainContainer.style.width = "100%";
|
|
newMainContainer.style.fontSize = "1px";
|
|
newMainContainer.style.overflow = "hidden";
|
|
newMainContainer.style.position = "absolute";
|
|
newMainContainer.style.paddingLeft = this.borderWidth + "px";
|
|
newMainContainer.style.paddingRight = this.borderWidth + "px";
|
|
var topMaxRadius = Math.max(this.settings.tl ? this.settings.tl.radius : 0, this.settings.tr ? this.settings.tr.radius : 0);
|
|
newMainContainer.style.height = topMaxRadius + "px";
|
|
newMainContainer.style.top = 0 - topMaxRadius + "px";
|
|
newMainContainer.style.left = 0 - this.borderWidth + "px";
|
|
this.topContainer = this.box.appendChild(newMainContainer);
|
|
}
|
|
break;
|
|
|
|
// Bottom
|
|
case 1:
|
|
|
|
// Only build bottom bar if a top corner is to be draw
|
|
if(this.settings.bl || this.settings.br)
|
|
{
|
|
var newMainContainer = document.createElement("DIV");
|
|
newMainContainer.style.width = "100%";
|
|
newMainContainer.style.fontSize = "1px";
|
|
newMainContainer.style.overflow = "hidden";
|
|
newMainContainer.style.position = "absolute";
|
|
newMainContainer.style.paddingLeft = this.borderWidth + "px";
|
|
newMainContainer.style.paddingRight = this.borderWidth + "px";
|
|
var botMaxRadius = Math.max(this.settings.bl ? this.settings.bl.radius : 0, this.settings.br ? this.settings.br.radius : 0);
|
|
newMainContainer.style.height = botMaxRadius + "px";
|
|
newMainContainer.style.bottom = 0 - botMaxRadius + "px";
|
|
newMainContainer.style.left = 0 - this.borderWidth + "px";
|
|
this.bottomContainer = this.box.appendChild(newMainContainer);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Turn off current borders
|
|
if(this.topContainer) this.box.style.borderTopWidth = "0px";
|
|
if(this.bottomContainer) this.box.style.borderBottomWidth = "0px";
|
|
|
|
// Create array of available corners
|
|
var corners = ["tr", "tl", "br", "bl"];
|
|
|
|
/*
|
|
Loop for each corner
|
|
*/
|
|
for(var i in corners)
|
|
{
|
|
|
|
// FIX for prototype lib
|
|
if(i > -1 < 4)
|
|
{
|
|
|
|
// Get current corner type from array
|
|
var cc = corners[i];
|
|
myobj = cc;
|
|
// alert(myobj + ' ' + cc + ' ' + i);
|
|
|
|
// Has the user requested the currentCorner be round?
|
|
if(!this.settings[cc])
|
|
{
|
|
// No
|
|
if(((cc == "tr" || cc == "tl") && this.topContainer != null) || ((cc == "br" || cc == "bl") && this.bottomContainer != null))
|
|
{
|
|
// We need to create a filler div to fill the space upto the next horzontal corner.
|
|
var newCorner = document.createElement("DIV");
|
|
|
|
// Setup corners properties
|
|
newCorner.style.position = "relative";
|
|
newCorner.style.fontSize = "1px";
|
|
newCorner.style.overflow = "hidden";
|
|
|
|
// Add background image?
|
|
if(this.backgroundImage == "")
|
|
newCorner.style.backgroundColor = this.boxColour;
|
|
else
|
|
newCorner.style.backgroundImage = this.backgroundImage;
|
|
|
|
switch(cc)
|
|
{
|
|
case "tl":
|
|
newCorner.style.height = topMaxRadius - this.borderWidth + "px";
|
|
newCorner.style.marginRight = this.settings.tr.radius - (this.borderWidth*2) + "px";
|
|
newCorner.style.borderLeft = this.borderString;
|
|
newCorner.style.borderTop = this.borderString;
|
|
newCorner.style.left = -this.borderWidth + "px";
|
|
break;
|
|
|
|
case "tr":
|
|
newCorner.style.height = topMaxRadius - this.borderWidth + "px";
|
|
newCorner.style.marginLeft = this.settings.tl.radius - (this.borderWidth*2) + "px";
|
|
newCorner.style.borderRight = this.borderString;
|
|
newCorner.style.borderTop = this.borderString;
|
|
newCorner.style.backgroundPosition = "-" + (topMaxRadius + this.borderWidth) + "px 0px";
|
|
newCorner.style.left = this.borderWidth + "px";
|
|
break;
|
|
|
|
case "bl":
|
|
newCorner.style.height = botMaxRadius - this.borderWidth + "px";
|
|
newCorner.style.marginRight = this.settings.br.radius - (this.borderWidth*2) + "px";
|
|
newCorner.style.borderLeft = this.borderString;
|
|
newCorner.style.borderBottom = this.borderString;
|
|
newCorner.style.left = -this.borderWidth + "px";
|
|
newCorner.style.backgroundPosition = "-" + (this.borderWidth) + "px -" + (this.boxHeight + (botMaxRadius + this.borderWidth)) + "px";
|
|
break;
|
|
|
|
case "br":
|
|
newCorner.style.height = botMaxRadius - this.borderWidth + "px";
|
|
newCorner.style.marginLeft = this.settings.bl.radius - (this.borderWidth*2) + "px";
|
|
newCorner.style.borderRight = this.borderString;
|
|
newCorner.style.borderBottom = this.borderString;
|
|
newCorner.style.left = this.borderWidth + "px"
|
|
newCorner.style.backgroundPosition = "-" + (botMaxRadius + this.borderWidth) + "px -" + (this.boxHeight + (botMaxRadius + this.borderWidth)) + "px";
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
/*
|
|
PERFORMANCE NOTE:
|
|
|
|
If more than one corner is requested and a corner has been already
|
|
created for the same radius then that corner will be used as a master and cloned.
|
|
The pixel bars will then be repositioned to form the new corner type.
|
|
All new corners start as a bottom right corner.
|
|
*/
|
|
//alert(masterCorners["boxId: "+ cc]+ cc);
|
|
/*if(cc == "tr"){
|
|
if(masterCorners[this.settings[cc].radius])
|
|
var newCorner = masterCorners[this.settings["tr"].radius].cloneNode(true);
|
|
//alert("cloning tr");
|
|
}else if(cc == "br"){
|
|
if(masterCorners[this.settings[cc].radius])
|
|
var newCorner = masterCorners[this.settings["br"].radius].cloneNode(true);
|
|
//alert("cloning br");
|
|
}*/
|
|
|
|
if(masterCorners[this.settings[cc].radius] && cc == "tl"){
|
|
var newCorner = masterCorners[this.settings["tr"].radius].cloneNode(true);
|
|
}else if(masterCorners[this.settings[cc].radius] && cc == "bl"){
|
|
var newCorner = masterCorners[this.settings["br"].radius].cloneNode(true);
|
|
}else{
|
|
// Yes, we need to create a new corner
|
|
var newCorner = document.createElement("DIV");
|
|
newCorner.style.height = this.settings[cc].radius + "px";
|
|
newCorner.style.width = this.settings[cc].radius + "px";
|
|
newCorner.style.position = "absolute";
|
|
newCorner.style.fontSize = "1px";
|
|
newCorner.style.overflow = "hidden";
|
|
|
|
// THE FOLLOWING BLOCK OF CODE CREATES A ROUNDED CORNER
|
|
// ---------------------------------------------------- TOP
|
|
|
|
// Get border radius
|
|
var borderRadius = parseInt(this.settings[cc].radius - this.borderWidth);
|
|
|
|
// Cycle the x-axis
|
|
for(var intx = 0, j = this.settings[cc].radius; intx < j; intx++)
|
|
{
|
|
// Calculate the value of y1 which identifies the pixels inside the border
|
|
if((intx +1) >= borderRadius)
|
|
var y1 = -1;
|
|
else
|
|
var y1 = (Math.floor(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow((intx+1), 2))) - 1);
|
|
|
|
// Only calculate y2 and y3 if there is a border defined
|
|
if(borderRadius != j)
|
|
{
|
|
if((intx) >= borderRadius)
|
|
var y2 = -1;
|
|
else
|
|
var y2 = Math.ceil(Math.sqrt(Math.pow(borderRadius,2) - Math.pow(intx, 2)));
|
|
|
|
if((intx+1) >= j)
|
|
var y3 = -1;
|
|
else
|
|
var y3 = (Math.floor(Math.sqrt(Math.pow(j ,2) - Math.pow((intx+1), 2))) - 1);
|
|
}
|
|
|
|
// Calculate y4
|
|
if((intx) >= j)
|
|
var y4 = -1;
|
|
else
|
|
var y4 = Math.ceil(Math.sqrt(Math.pow(j ,2) - Math.pow(intx, 2)));
|
|
|
|
// Draw bar on inside of the border with foreground colour
|
|
if(y1 > -1) this.drawPixel(intx, 0, this.boxColour, 100, (y1+1), newCorner, -1, this.settings[cc].radius,cc);
|
|
|
|
// Only draw border/foreground antialiased pixels and border if there is a border defined
|
|
if(borderRadius != j)
|
|
{
|
|
// Cycle the y-axis
|
|
for(var inty = (y1 + 1); inty < y2; inty++)
|
|
{
|
|
// Draw anti-alias pixels
|
|
if(this.settings.antiAlias)
|
|
{
|
|
// For each of the pixels that need anti aliasing between the foreground and border colour draw single pixel divs
|
|
if(this.backgroundImage != "")
|
|
{
|
|
var borderFract = (pixelFraction(intx, inty, borderRadius) * 100);
|
|
|
|
if(borderFract < 30)
|
|
{
|
|
this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, 0, this.settings[cc].radius,myobj);
|
|
}else{
|
|
this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, -1, this.settings[cc].radius,myobj);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
var pixelcolour = BlendColour(this.boxColour, this.borderColour, pixelFraction(intx, inty, borderRadius));
|
|
this.drawPixel(intx, inty, pixelcolour, 100, 1, newCorner, 0, this.settings[cc].radius, myobj);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Draw bar for the border
|
|
if(this.settings.antiAlias)
|
|
{
|
|
if(y3 >= y2)
|
|
{
|
|
if (y2 == -1) y2 = 0;
|
|
this.drawPixel(intx, y2, this.borderColour, 100, (y3 - y2 + 1), newCorner, 0, 0,myobj);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
if(y3 >= y1)
|
|
{
|
|
this.drawPixel(intx, (y1 + 1), this.borderColour, 100, (y3 - y1), newCorner, 0, 0,myobj);
|
|
}
|
|
}
|
|
|
|
// Set the colour for the outside curve
|
|
var outsideColour = this.borderColour;
|
|
}
|
|
else
|
|
{
|
|
// Set the coour for the outside curve
|
|
var outsideColour = this.boxColour;
|
|
var y3 = y1;
|
|
}
|
|
|
|
// Draw aa pixels?
|
|
if(this.settings.antiAlias)
|
|
{
|
|
// Cycle the y-axis and draw the anti aliased pixels on the outside of the curve
|
|
for(var inty = (y3 + 1); inty < y4; inty++)
|
|
{
|
|
// For each of the pixels that need anti aliasing between the foreground/border colour & background draw single pixel divs
|
|
this.drawPixel(intx, inty, outsideColour, (pixelFraction(intx, inty , j) * 100), 1, newCorner, ((this.borderWidth > 0)? 0 : -1), this.settings[cc].radius,myobj);
|
|
}
|
|
}
|
|
}
|
|
|
|
// END OF CORNER CREATION
|
|
// ---------------------------------------------------- END
|
|
|
|
// We now need to store the current corner in the masterConers array
|
|
masterCorners[this.settings[cc].radius] = newCorner.cloneNode(true);
|
|
}
|
|
|
|
/*
|
|
Now we have a new corner we need to reposition all the pixels unless
|
|
the current corner is the bottom right.
|
|
*/
|
|
if(cc != "br")
|
|
{
|
|
// Loop through all children (pixel bars)
|
|
for(var t = 0, k = newCorner.childNodes.length; t < k; t++)
|
|
{
|
|
// Get current pixel bar
|
|
var pixelBar = newCorner.childNodes[t];
|
|
|
|
// Get current top and left properties
|
|
var pixelBarTop = parseInt(pixelBar.style.top.substring(0, pixelBar.style.top.indexOf("px")));
|
|
var pixelBarLeft = parseInt(pixelBar.style.left.substring(0, pixelBar.style.left.indexOf("px")));
|
|
var pixelBarHeight = parseInt(pixelBar.style.height.substring(0, pixelBar.style.height.indexOf("px")));
|
|
|
|
// Reposition pixels
|
|
if(cc == "tl" || cc == "bl"){
|
|
pixelBar.style.left = this.settings[cc].radius -pixelBarLeft -1 + "px"; // Left
|
|
}
|
|
if(cc == "tr" || cc == "tl"){
|
|
pixelBar.style.top = this.settings[cc].radius -pixelBarHeight -pixelBarTop + "px"; // Top
|
|
}
|
|
|
|
switch(cc)
|
|
{
|
|
case "tr":
|
|
pixelBar.style.backgroundPosition = "-" + Math.abs((this.boxWidth - this.settings[cc].radius + this.borderWidth) + pixelBarLeft) + "px -" + Math.abs(this.settings[cc].radius -pixelBarHeight -pixelBarTop - this.borderWidth) + "px";
|
|
break;
|
|
|
|
case "tl":
|
|
pixelBar.style.backgroundPosition = "-" + Math.abs((this.settings[cc].radius -pixelBarLeft -1) - this.borderWidth) + "px -" + Math.abs(this.settings[cc].radius -pixelBarHeight -pixelBarTop - this.borderWidth) + "px";
|
|
break;
|
|
|
|
case "bl":
|
|
pixelBar.style.backgroundPosition = "-" + Math.abs((this.settings[cc].radius -pixelBarLeft -1) - this.borderWidth) + "px -" + Math.abs((this.boxHeight + this.settings[cc].radius + pixelBarTop) -this.borderWidth) + "px";
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if(newCorner)
|
|
{
|
|
// Position the container
|
|
switch(cc)
|
|
{
|
|
case "tl":
|
|
if(newCorner.style.position == "absolute") newCorner.style.top = "0px";
|
|
if(newCorner.style.position == "absolute") newCorner.style.left = "0px";
|
|
if(this.topContainer) this.topContainer.appendChild(newCorner);
|
|
break;
|
|
|
|
case "tr":
|
|
if(newCorner.style.position == "absolute") newCorner.style.top = "0px";
|
|
if(newCorner.style.position == "absolute") newCorner.style.right = "0px";
|
|
if(this.topContainer) this.topContainer.appendChild(newCorner);
|
|
break;
|
|
|
|
case "bl":
|
|
if(newCorner.style.position == "absolute") newCorner.style.bottom = "0px";
|
|
if(newCorner.style.position == "absolute") newCorner.style.left = "0px";
|
|
if(this.bottomContainer) this.bottomContainer.appendChild(newCorner);
|
|
break;
|
|
|
|
case "br":
|
|
if(newCorner.style.position == "absolute") newCorner.style.bottom = "0px";
|
|
if(newCorner.style.position == "absolute") newCorner.style.right = "0px";
|
|
if(this.bottomContainer) this.bottomContainer.appendChild(newCorner);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
The last thing to do is draw the rest of the filler DIVs.
|
|
We only need to create a filler DIVs when two corners have
|
|
diffrent radiuses in either the top or bottom container.
|
|
*/
|
|
|
|
// Find out which corner has the biiger radius and get the difference amount
|
|
var radiusDiff = new Array();
|
|
radiusDiff["t"] = Math.abs(this.settings.tl.radius - this.settings.tr.radius)
|
|
radiusDiff["b"] = Math.abs(this.settings.bl.radius - this.settings.br.radius);
|
|
|
|
for(z in radiusDiff)
|
|
{
|
|
// FIX for prototype lib
|
|
if(z == "t" || z == "b")
|
|
{
|
|
if(radiusDiff[z])
|
|
{
|
|
// Get the type of corner that is the smaller one
|
|
var smallerCornerType = ((this.settings[z + "l"].radius < this.settings[z + "r"].radius)? z +"l" : z +"r");
|
|
|
|
// First we need to create a DIV for the space under the smaller corner
|
|
var newFiller = document.createElement("DIV");
|
|
newFiller.style.height = radiusDiff[z] + "px";
|
|
newFiller.style.width = this.settings[smallerCornerType].radius+ "px"
|
|
newFiller.style.position = "absolute";
|
|
newFiller.style.fontSize = "1px";
|
|
newFiller.style.overflow = "hidden";
|
|
newFiller.style.backgroundColor = this.boxColour;
|
|
//newFiller.style.backgroundColor = get_random_color();
|
|
|
|
// Position filler
|
|
switch(smallerCornerType)
|
|
{
|
|
case "tl":
|
|
newFiller.style.bottom = "0px";
|
|
newFiller.style.left = "0px";
|
|
newFiller.style.borderLeft = this.borderString;
|
|
this.topContainer.appendChild(newFiller);
|
|
break;
|
|
|
|
case "tr":
|
|
newFiller.style.bottom = "0px";
|
|
newFiller.style.right = "0px";
|
|
newFiller.style.borderRight = this.borderString;
|
|
this.topContainer.appendChild(newFiller);
|
|
break;
|
|
|
|
case "bl":
|
|
newFiller.style.top = "0px";
|
|
newFiller.style.left = "0px";
|
|
newFiller.style.borderLeft = this.borderString;
|
|
this.bottomContainer.appendChild(newFiller);
|
|
break;
|
|
|
|
case "br":
|
|
newFiller.style.top = "0px";
|
|
newFiller.style.right = "0px";
|
|
newFiller.style.borderRight = this.borderString;
|
|
this.bottomContainer.appendChild(newFiller);
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Create the bar to fill the gap between each corner horizontally
|
|
var newFillerBar = document.createElement("DIV");
|
|
newFillerBar.style.position = "relative";
|
|
newFillerBar.style.fontSize = "1px";
|
|
newFillerBar.style.overflow = "hidden";
|
|
newFillerBar.style.backgroundColor = this.boxColour;
|
|
newFillerBar.style.backgroundImage = this.backgroundImage;
|
|
|
|
switch(z)
|
|
{
|
|
case "t":
|
|
// Top Bar
|
|
if(this.topContainer)
|
|
{
|
|
// Edit by Asger Hallas: Check if settings.xx.radius is not false
|
|
if(this.settings.tl.radius && this.settings.tr.radius)
|
|
{
|
|
newFillerBar.style.height = topMaxRadius - this.borderWidth + "px";
|
|
newFillerBar.style.marginLeft = this.settings.tl.radius - this.borderWidth + "px";
|
|
newFillerBar.style.marginRight = this.settings.tr.radius - this.borderWidth + "px";
|
|
newFillerBar.style.borderTop = this.borderString;
|
|
|
|
if(this.backgroundImage != "")
|
|
newFillerBar.style.backgroundPosition = "-" + (topMaxRadius + this.borderWidth) + "px 0px";
|
|
|
|
this.topContainer.appendChild(newFillerBar);
|
|
}
|
|
if(this.box.id == "loginbox" || this.box.id == "loginbox_skin")
|
|
newFillerBar.style.backgroundImage = "";
|
|
// Repos the boxes background image
|
|
this.box.style.backgroundPosition = "0px -" + (topMaxRadius - this.borderWidth) + "px";
|
|
}
|
|
break;
|
|
|
|
case "b":
|
|
if(this.bottomContainer)
|
|
{
|
|
// Edit by Asger Hallas: Check if settings.xx.radius is not false
|
|
if(this.settings.bl.radius && this.settings.br.radius)
|
|
{
|
|
// Bottom Bar
|
|
newFillerBar.style.height = botMaxRadius - this.borderWidth + "px";
|
|
newFillerBar.style.marginLeft = this.settings.bl.radius - this.borderWidth + "px";
|
|
newFillerBar.style.marginRight = this.settings.br.radius - this.borderWidth + "px";
|
|
newFillerBar.style.borderBottom = this.borderString;
|
|
|
|
if(this.box.id == "ktBlock" || this.box.id == "pageBody" || this.box.id == "ktInfo" || this.box.id == "ktError" || this.box.id == "loginbox" || this.box.id == "loginbox_skin" || this.box.id == "portlet" || this.box.id == "portlet expanded")
|
|
newFillerBar.style.backgroundImage = "";
|
|
if(this.box.id == "pageBody")
|
|
newFillerBar.style.backgroundColor = "#D1D1D1";
|
|
if(this.backgroundImage != "")
|
|
newFillerBar.style.backgroundPosition = "-" + (botMaxRadius + this.borderWidth) + "px -" + (this.boxHeight + (topMaxRadius + this.borderWidth)) + "px";
|
|
this.bottomContainer.appendChild(newFillerBar);
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
AutoPad! apply padding if set.
|
|
*/
|
|
if(this.settings.autoPad == true && this.boxPadding > 0)
|
|
{
|
|
// Create content container
|
|
var contentContainer = document.createElement("DIV");
|
|
|
|
// Set contentContainer's properties
|
|
contentContainer.style.position = "relative";
|
|
contentContainer.innerHTML = this.boxContent;
|
|
contentContainer.className = "autoPadDiv";
|
|
|
|
// Get padding amounts
|
|
var topPadding = Math.abs(topMaxRadius - this.boxPadding);
|
|
var botPadding = Math.abs(botMaxRadius - this.boxPadding);
|
|
|
|
// Apply top padding
|
|
if(topMaxRadius < this.boxPadding)
|
|
contentContainer.style.paddingTop = topPadding + "px";
|
|
|
|
// Apply Bottom padding
|
|
if(botMaxRadius < this.boxPadding)
|
|
contentContainer.style.paddingBottom = botMaxRadius + "px";
|
|
|
|
// Apply left and right padding
|
|
contentContainer.style.paddingLeft = this.boxPadding + "px";
|
|
contentContainer.style.paddingRight = this.boxPadding + "px";
|
|
|
|
// Append contentContainer
|
|
this.contentDIV = this.box.appendChild(contentContainer);
|
|
}
|
|
}
|
|
|
|
/*
|
|
This function draws the pixles
|
|
*/
|
|
|
|
|
|
this.drawPixel = function(intx, inty, colour, transAmount, height, newCorner, image, cornerRadius, corner)
|
|
{
|
|
// Create pixel
|
|
var pixel = document.createElement("DIV");
|
|
pixel.style.height = height + "px";
|
|
pixel.style.width = "1px";
|
|
pixel.style.position = "absolute";
|
|
pixel.style.fontSize = "1px";
|
|
pixel.style.overflow = "hidden";
|
|
|
|
// Max Top Radius
|
|
var topMaxRadius = Math.max(this.settings["tr"].radius, this.settings["tl"].radius);
|
|
|
|
// Dont apply background image to border pixels
|
|
if(image == -1 && this.backgroundImage != "")
|
|
{
|
|
if (corner != 'bl' && corner != 'br')
|
|
pixel.style.backgroundImage = this.backgroundImage;
|
|
else
|
|
if(this.box.id == "pageBody")
|
|
pixel.style.backgroundColor = "#D1D1D1";
|
|
else
|
|
pixel.style.backgroundColor = colour;
|
|
|
|
pixel.style.backgroundPosition = "-" + (this.boxWidth - (cornerRadius - intx) + this.borderWidth) + "px -" + ((this.boxHeight + topMaxRadius + inty) -this.borderWidth) + "px";
|
|
}
|
|
else
|
|
{
|
|
pixel.style.backgroundColor = colour;
|
|
}
|
|
|
|
// Set opacity if the transparency is anything other than 100
|
|
if (transAmount != 100)
|
|
setOpacity(pixel, transAmount);
|
|
|
|
// Set the pixels position
|
|
pixel.style.top = inty + "px";
|
|
pixel.style.left = intx + "px";
|
|
|
|
newCorner.appendChild(pixel);
|
|
}
|
|
}
|
|
|
|
// ------------- UTILITY FUNCTIONS
|
|
|
|
// Inserts a element after another
|
|
function insertAfter(parent, node, referenceNode)
|
|
{
|
|
parent.insertBefore(node, referenceNode.nextSibling);
|
|
}
|
|
|
|
/*
|
|
Blends the two colours by the fraction
|
|
returns the resulting colour as a string in the format "#FFFFFF"
|
|
*/
|
|
function BlendColour(Col1, Col2, Col1Fraction)
|
|
{
|
|
var red1 = parseInt(Col1.substr(1,2),16);
|
|
var green1 = parseInt(Col1.substr(3,2),16);
|
|
var blue1 = parseInt(Col1.substr(5,2),16);
|
|
var red2 = parseInt(Col2.substr(1,2),16);
|
|
var green2 = parseInt(Col2.substr(3,2),16);
|
|
var blue2 = parseInt(Col2.substr(5,2),16);
|
|
|
|
if(Col1Fraction > 1 || Col1Fraction < 0) Col1Fraction = 1;
|
|
|
|
var endRed = Math.round((red1 * Col1Fraction) + (red2 * (1 - Col1Fraction)));
|
|
if(endRed > 255) endRed = 255;
|
|
if(endRed < 0) endRed = 0;
|
|
|
|
var endGreen = Math.round((green1 * Col1Fraction) + (green2 * (1 - Col1Fraction)));
|
|
if(endGreen > 255) endGreen = 255;
|
|
if(endGreen < 0) endGreen = 0;
|
|
|
|
var endBlue = Math.round((blue1 * Col1Fraction) + (blue2 * (1 - Col1Fraction)));
|
|
if(endBlue > 255) endBlue = 255;
|
|
if(endBlue < 0) endBlue = 0;
|
|
|
|
return "#" + IntToHex(endRed)+ IntToHex(endGreen)+ IntToHex(endBlue);
|
|
}
|
|
|
|
/*
|
|
Converts a number to hexadecimal format
|
|
*/
|
|
function IntToHex(strNum)
|
|
{
|
|
base = strNum / 16;
|
|
rem = strNum % 16;
|
|
base = base - (rem / 16);
|
|
baseS = MakeHex(base);
|
|
remS = MakeHex(rem);
|
|
|
|
return baseS + '' + remS;
|
|
}
|
|
|
|
|
|
/*
|
|
gets the hex bits of a number
|
|
*/
|
|
function MakeHex(x)
|
|
{
|
|
if((x >= 0) && (x <= 9))
|
|
{
|
|
return x;
|
|
}
|
|
else
|
|
{
|
|
switch(x)
|
|
{
|
|
case 10: return "A";
|
|
case 11: return "B";
|
|
case 12: return "C";
|
|
case 13: return "D";
|
|
case 14: return "E";
|
|
case 15: return "F";
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
For a pixel cut by the line determines the fraction of the pixel on the 'inside' of the
|
|
line. Returns a number between 0 and 1
|
|
*/
|
|
function pixelFraction(x, y, r)
|
|
{
|
|
var pixelfraction = 0;
|
|
|
|
/*
|
|
determine the co-ordinates of the two points on the perimeter of the pixel that the
|
|
circle crosses
|
|
*/
|
|
var xvalues = new Array(1);
|
|
var yvalues = new Array(1);
|
|
var point = 0;
|
|
var whatsides = "";
|
|
|
|
// x + 0 = Left
|
|
var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x,2)));
|
|
|
|
if ((intersect >= y) && (intersect < (y+1)))
|
|
{
|
|
whatsides = "Left";
|
|
xvalues[point] = 0;
|
|
yvalues[point] = intersect - y;
|
|
point = point + 1;
|
|
}
|
|
// y + 1 = Top
|
|
var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y+1,2)));
|
|
|
|
if ((intersect >= x) && (intersect < (x+1)))
|
|
{
|
|
whatsides = whatsides + "Top";
|
|
xvalues[point] = intersect - x;
|
|
yvalues[point] = 1;
|
|
point = point + 1;
|
|
}
|
|
// x + 1 = Right
|
|
var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x+1,2)));
|
|
|
|
if ((intersect >= y) && (intersect < (y+1)))
|
|
{
|
|
whatsides = whatsides + "Right";
|
|
xvalues[point] = 1;
|
|
yvalues[point] = intersect - y;
|
|
point = point + 1;
|
|
}
|
|
// y + 0 = Bottom
|
|
var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y,2)));
|
|
|
|
if ((intersect >= x) && (intersect < (x+1)))
|
|
{
|
|
whatsides = whatsides + "Bottom";
|
|
xvalues[point] = intersect - x;
|
|
yvalues[point] = 0;
|
|
}
|
|
|
|
/*
|
|
depending on which sides of the perimeter of the pixel the circle crosses calculate the
|
|
fraction of the pixel inside the circle
|
|
*/
|
|
switch (whatsides)
|
|
{
|
|
case "LeftRight":
|
|
pixelfraction = Math.min(yvalues[0],yvalues[1]) + ((Math.max(yvalues[0],yvalues[1]) - Math.min(yvalues[0],yvalues[1]))/2);
|
|
break;
|
|
|
|
case "TopRight":
|
|
pixelfraction = 1-(((1-xvalues[0])*(1-yvalues[1]))/2);
|
|
break;
|
|
|
|
case "TopBottom":
|
|
pixelfraction = Math.min(xvalues[0],xvalues[1]) + ((Math.max(xvalues[0],xvalues[1]) - Math.min(xvalues[0],xvalues[1]))/2);
|
|
break;
|
|
|
|
case "LeftBottom":
|
|
pixelfraction = (yvalues[0]*xvalues[1])/2;
|
|
break;
|
|
|
|
default:
|
|
pixelfraction = 1;
|
|
}
|
|
|
|
return pixelfraction;
|
|
}
|
|
|
|
|
|
// This function converts CSS rgb(x, x, x) to hexadecimal
|
|
function rgb2Hex(rgbColour)
|
|
{
|
|
try{
|
|
|
|
// Get array of RGB values
|
|
var rgbArray = rgb2Array(rgbColour);
|
|
|
|
// Get RGB values
|
|
var red = parseInt(rgbArray[0]);
|
|
var green = parseInt(rgbArray[1]);
|
|
var blue = parseInt(rgbArray[2]);
|
|
|
|
// Build hex colour code
|
|
var hexColour = "#" + IntToHex(red) + IntToHex(green) + IntToHex(blue);
|
|
}
|
|
catch(e){
|
|
|
|
alert("There was an error converting the RGB value to Hexadecimal in function rgb2Hex");
|
|
}
|
|
|
|
return hexColour;
|
|
}
|
|
|
|
// Returns an array of rbg values
|
|
function rgb2Array(rgbColour)
|
|
{
|
|
// Remove rgb()
|
|
var rgbValues = rgbColour.substring(4, rgbColour.indexOf(")"));
|
|
|
|
// Split RGB into array
|
|
var rgbArray = rgbValues.split(", ");
|
|
|
|
return rgbArray;
|
|
}
|
|
|
|
/*
|
|
Function by Simon Willison from sitepoint.com
|
|
Modified by Cameron Cooke adding Safari's rgba support
|
|
*/
|
|
function setOpacity(obj, opacity)
|
|
{
|
|
opacity = (opacity == 100)?99.999:opacity;
|
|
|
|
if(isSafari && obj.tagName != "IFRAME")
|
|
{
|
|
// Get array of RGB values
|
|
var rgbArray = rgb2Array(obj.style.backgroundColor);
|
|
|
|
// Get RGB values
|
|
var red = parseInt(rgbArray[0]);
|
|
var green = parseInt(rgbArray[1]);
|
|
var blue = parseInt(rgbArray[2]);
|
|
|
|
// Safari using RGBA support
|
|
obj.style.backgroundColor = "rgba(" + red + ", " + green + ", " + blue + ", " + opacity/100 + ")";
|
|
}
|
|
else if(typeof(obj.style.opacity) != "undefined")
|
|
{
|
|
// W3C
|
|
obj.style.opacity = opacity/100;
|
|
}
|
|
else if(typeof(obj.style.MozOpacity) != "undefined")
|
|
{
|
|
// Older Mozilla
|
|
obj.style.MozOpacity = opacity/100;
|
|
}
|
|
else if(typeof(obj.style.filter) != "undefined")
|
|
{
|
|
// IE
|
|
obj.style.filter = "alpha(opacity:" + opacity + ")";
|
|
}
|
|
else if(typeof(obj.style.KHTMLOpacity) != "undefined")
|
|
{
|
|
// Older KHTML Based Browsers
|
|
obj.style.KHTMLOpacity = opacity/100;
|
|
}
|
|
}
|
|
|
|
/*
|
|
Returns index if the passed value is found in the
|
|
array otherwise returns false.
|
|
*/
|
|
function inArray(array, value)
|
|
{
|
|
for(var i = 0; i < array.length; i++){
|
|
|
|
// Matches identical (===), not just similar (==).
|
|
if (array[i] === value) return i;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
/*
|
|
Returns true if the passed value is found as a key
|
|
in the array otherwise returns false.
|
|
*/
|
|
function inArrayKey(array, value)
|
|
{
|
|
for(key in array){
|
|
|
|
// Matches identical (===), not just similar (==).
|
|
if(key === value) return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
// Cross browser add event wrapper
|
|
function addEvent(elm, evType, fn, useCapture) {
|
|
if (elm.addEventListener) {
|
|
elm.addEventListener(evType, fn, useCapture);
|
|
return true;
|
|
}
|
|
else if (elm.attachEvent) {
|
|
var r = elm.attachEvent('on' + evType, fn);
|
|
return r;
|
|
}
|
|
else {
|
|
elm['on' + evType] = fn;
|
|
}
|
|
}
|
|
|
|
// Cross browser remove event wrapper
|
|
function removeEvent(obj, evType, fn, useCapture){
|
|
if (obj.removeEventListener){
|
|
obj.removeEventListener(evType, fn, useCapture);
|
|
return true;
|
|
} else if (obj.detachEvent){
|
|
var r = obj.detachEvent("on"+evType, fn);
|
|
return r;
|
|
} else {
|
|
alert("Handler could not be removed");
|
|
}
|
|
}
|
|
|
|
// Formats colours
|
|
function format_colour(colour)
|
|
{
|
|
var returnColour = "#ffffff";
|
|
|
|
// Make sure colour is set and not transparent
|
|
if(colour != "" && colour != "transparent")
|
|
{
|
|
// RGB Value?
|
|
if(colour.substr(0, 3) == "rgb")
|
|
{
|
|
// Get HEX aquiv.
|
|
returnColour = rgb2Hex(colour);
|
|
}
|
|
else if(colour.length == 4)
|
|
{
|
|
// 3 chr colour code add remainder
|
|
returnColour = "#" + colour.substring(1, 2) + colour.substring(1, 2) + colour.substring(2, 3) + colour.substring(2, 3) + colour.substring(3, 4) + colour.substring(3, 4);
|
|
}
|
|
else
|
|
{
|
|
// Normal valid hex colour
|
|
returnColour = colour;
|
|
}
|
|
}
|
|
|
|
return returnColour;
|
|
}
|
|
|
|
// Returns the style value for the property specfied
|
|
function get_style(obj, property, propertyNS)
|
|
{
|
|
try
|
|
{
|
|
if(obj.currentStyle)
|
|
{
|
|
var returnVal = eval("obj.currentStyle." + property);
|
|
}
|
|
else
|
|
{
|
|
/*
|
|
Safari does not expose any information for the object if display is
|
|
set to none is set so we temporally enable it.
|
|
*/
|
|
if(isSafari && obj.style.display == "none")
|
|
{
|
|
obj.style.display = "";
|
|
var wasHidden = true;
|
|
}
|
|
|
|
var returnVal = document.defaultView.getComputedStyle(obj, '').getPropertyValue(propertyNS);
|
|
|
|
// Rehide the object
|
|
if(isSafari && wasHidden)
|
|
{
|
|
obj.style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
catch(e)
|
|
{
|
|
// Do nothing
|
|
}
|
|
|
|
return returnVal;
|
|
}
|
|
|
|
// Get elements by class by Dustin Diaz.
|
|
function getElementsByClass(searchClass, node, tag)
|
|
{
|
|
var classElements = new Array();
|
|
|
|
if(node == null)
|
|
node = document;
|
|
if(tag == null)
|
|
tag = '*';
|
|
|
|
var els = node.getElementsByTagName(tag);
|
|
var elsLen = els.length;
|
|
var pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)");
|
|
|
|
for (i = 0, j = 0; i < elsLen; i++)
|
|
{
|
|
if(pattern.test(els[i].className))
|
|
{
|
|
classElements[j] = els[i];
|
|
j++;
|
|
}
|
|
}
|
|
|
|
return classElements;
|
|
}
|
|
|
|
// Displays error message
|
|
function newCurvyError(errorMessage)
|
|
{
|
|
return new Error("curvyCorners Error:\n" + errorMessage)
|
|
} |