| /* |
| Copyright (c) 2004-2006, The Dojo Foundation |
| All Rights Reserved. |
| |
| Licensed under the Academic Free License version 2.1 or above OR the |
| modified BSD license. For more information on Dojo licensing, see: |
| |
| http://dojotoolkit.org/community/licensing.shtml |
| */ |
| |
| |
| |
| dojo.provide("dojo.lfx.rounded"); |
| dojo.require("dojo.lang.common"); |
| dojo.require("dojo.html.common"); |
| dojo.require("dojo.html.style"); |
| dojo.require("dojo.html.display"); |
| dojo.require("dojo.html.layout"); |
| dojo.lfx.rounded = function (settings) { |
| var options = {validTags:settings.validTags || ["div"], autoPad:settings.autoPad != null ? settings.autoPad : true, antiAlias:settings.antiAlias != null ? settings.antiAlias : true, radii:{tl:(settings.tl && settings.tl.radius != null) ? settings.tl.radius : 5, tr:(settings.tr && settings.tr.radius != null) ? settings.tr.radius : 5, bl:(settings.bl && settings.bl.radius != null) ? settings.bl.radius : 5, br:(settings.br && settings.br.radius != null) ? settings.br.radius : 5}}; |
| var nodes; |
| if (typeof (arguments[1]) == "string") { |
| nodes = dojo.html.getElementsByClass(arguments[1]); |
| } else { |
| if (dojo.lang.isArrayLike(arguments[1])) { |
| nodes = arguments[1]; |
| for (var i = 0; i < nodes.length; i++) { |
| nodes[i] = dojo.byId(nodes[i]); |
| } |
| } |
| } |
| if (nodes.length == 0) { |
| return; |
| } |
| for (var i = 0; i < nodes.length; i++) { |
| dojo.lfx.rounded.applyCorners(options, nodes[i]); |
| } |
| }; |
| dojo.lfx.rounded.applyCorners = function (options, node) { |
| var top = null; |
| var bottom = null; |
| var contentNode = null; |
| var fns = dojo.lfx.rounded._fns; |
| var width = node.offsetWidth; |
| var height = node.offsetHeight; |
| var borderWidth = parseInt(dojo.html.getComputedStyle(node, "border-top-width")); |
| var borderColor = dojo.html.getComputedStyle(node, "border-top-color"); |
| var color = dojo.html.getComputedStyle(node, "background-color"); |
| var bgImage = dojo.html.getComputedStyle(node, "background-image"); |
| var position = dojo.html.getComputedStyle(node, "position"); |
| var padding = parseInt(dojo.html.getComputedStyle(node, "padding-top")); |
| var format = {height:height, width:width, borderWidth:borderWidth, color:fns.getRGB(color), padding:padding, borderColor:fns.getRGB(borderColor), borderString:borderWidth + "px" + " solid " + fns.getRGB(borderColor), bgImage:((bgImage != "none") ? bgImage : ""), content:node.innerHTML}; |
| if (!dojo.html.isPositionAbsolute(node)) { |
| node.style.position = "relative"; |
| } |
| node.style.padding = "0px"; |
| if (dojo.render.html.ie && width == "auto" && height == "auto") { |
| node.style.width = "100%"; |
| } |
| if (options.autoPad && format.padding > 0) { |
| node.innerHTML = ""; |
| } |
| var topHeight = Math.max(options.radii.tl, options.radii.tr); |
| var bottomHeight = Math.max(options.radii.bl, options.radii.br); |
| if (options.radii.tl || options.radii.tr) { |
| top = document.createElement("div"); |
| top.style.width = "100%"; |
| top.style.fontSize = "1px"; |
| top.style.overflow = "hidden"; |
| top.style.position = "absolute"; |
| top.style.paddingLeft = format.borderWidth + "px"; |
| top.style.paddingRight = format.borderWidth + "px"; |
| top.style.height = topHeight + "px"; |
| top.style.top = (0 - topHeight) + "px"; |
| top.style.left = (0 - format.borderWidth) + "px"; |
| node.appendChild(top); |
| } |
| if (options.radii.bl || options.radii.br) { |
| bottom = document.createElement("div"); |
| bottom.style.width = "100%"; |
| bottom.style.fontSize = "1px"; |
| bottom.style.overflow = "hidden"; |
| bottom.style.position = "absolute"; |
| bottom.style.paddingLeft = format.borderWidth + "px"; |
| bottom.style.paddingRight = format.borderWidth + "px"; |
| bottom.style.height = bottomHeight + "px"; |
| bottom.style.bottom = (0 - bottomHeight) + "px"; |
| bottom.style.left = (0 - format.borderWidth) + "px"; |
| node.appendChild(bottom); |
| } |
| if (top) { |
| node.style.borderTopWidth = "0px"; |
| } |
| if (bottom) { |
| node.style.borderBottomWidth = "0px"; |
| } |
| var corners = ["tr", "tl", "br", "bl"]; |
| for (var i = 0; i < corners.length; i++) { |
| var cc = corners[i]; |
| if (options.radii[cc] == 0) { |
| if ((cc.charAt(0) == "t" && top) || (cc.charAt(0) == "b" && bottom)) { |
| var corner = document.createElement("div"); |
| corner.style.position = "relative"; |
| corner.style.fontSize = "1px;"; |
| corner.style.overflow = "hidden"; |
| if (format.bgImage == "") { |
| corner.style.backgroundColor = format.color; |
| } else { |
| corner.style.backgroundImage = format.bgImage; |
| } |
| switch (cc) { |
| case "tl": |
| corner.style.height = topHeight - format.borderWidth + "px"; |
| corner.style.marginRight = options.radii[cc] - (format.borderWidth * 2) + "px"; |
| corner.style.borderLeft = format.borderString; |
| corner.style.borderTop = format.borderString; |
| corner.style.left = -format.borderWidth + "px"; |
| break; |
| case "tr": |
| corner.style.height = topHeight - format.borderWidth + "px"; |
| corner.style.marginLeft = options.radii[cc] - (format.borderWidth * 2) + "px"; |
| corner.style.borderRight = format.borderString; |
| corner.style.borderTop = format.borderString; |
| corner.style.backgroundPosition = "-" + (topHeight - format.borderWidth) + "px 0px"; |
| corner.style.left = format.borderWidth + "px"; |
| break; |
| case "bl": |
| corner.style.height = bottomHeight - format.borderWidth + "px"; |
| corner.style.marginRight = options.radii[cc] - (format.borderWidth * 2) + "px"; |
| corner.style.borderLeft = format.borderString; |
| corner.style.borderBottom = format.borderString; |
| corner.style.left = format.borderWidth + "px"; |
| corner.style.backgroundPosition = "-" + format.borderWidth + "px -" + (format.height + (bottomHeight + format.borderWidth)) + "px"; |
| break; |
| case "br": |
| corner.style.height = bottomHeight - format.borderWidth + "px"; |
| corner.style.marginLeft = options.radii[cc] - (format.borderWidth * 2) + "px"; |
| corner.style.borderRight = format.borderString; |
| corner.style.borderBottom = format.borderString; |
| corner.style.left = format.borderWidth + "px"; |
| corner.style.backgroundPosition = "-" + (bottomHeight + format.borderWidth) + "px -" + (format.height + (bottomHeight + format.borderWidth)) + "px"; |
| break; |
| } |
| } |
| } else { |
| var corner = document.createElement("div"); |
| corner.style.height = options.radii[cc] + "px"; |
| corner.style.width = options.radii[cc] + "px"; |
| corner.style.position = "absolute"; |
| corner.style.fontSize = "1px"; |
| corner.style.overflow = "hidden"; |
| var borderRadius = Math.floor(options.radii[cc] - format.borderWidth); |
| for (var x = 0, j = options.radii[cc]; x < j; x++) { |
| var y1 = Math.floor(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow((x + 1), 2))) - 1; |
| if ((x + 1) >= borderRadius) { |
| var y1 = -1; |
| } |
| var y2 = Math.ceil(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow(x, 2))); |
| if (x >= borderRadius) { |
| y2 = -1; |
| } |
| var y3 = Math.floor(Math.sqrt(Math.pow(j, 2) - Math.pow((x + 1), 2))) - 1; |
| if ((x + 1) >= j) { |
| y3 = -1; |
| } |
| var y4 = Math.ceil(Math.sqrt(Math.pow(j, 2) - Math.pow(x, 2))); |
| if (x >= j) { |
| y4 = -1; |
| } |
| if (y1 > -1) { |
| fns.draw(x, 0, format.color, 100, (y1 + 1), corner, -1, j, topHeight, format); |
| } |
| for (var y = (y1 + 1); y < y2; y++) { |
| if (options.antiAlias) { |
| if (format.bgImage != "") { |
| var fract = fns.fraction(x, y, borderRadius) * 100; |
| if (fract < 30) { |
| fns.draw(x, y, format.borderColor, 100, 1, corner, 0, options.radii[cc], topHeight, format); |
| } else { |
| fns.draw(x, y, format.borderColor, 100, 1, corner, -1, options.radii[cc], topHeight, format); |
| } |
| } else { |
| var clr = fns.blend(format.color, format.borderColor, fns.fraction(x, y, borderRadius)); |
| fns.draw(x, y, clr, 100, 1, corner, 0, options.radii[cc], topHeight, format); |
| } |
| } |
| } |
| if (options.antiAlias) { |
| if (y3 >= y2) { |
| if (y2 == -1) { |
| y2 = 0; |
| } |
| fns.draw(x, y2, format.borderColor, 100, (y3 - y2 + 1), corner, 0, 0, topHeight, format); |
| } else { |
| if (y3 >= y1) { |
| fns.draw(x, (y1 + 1), format.borderColor, 100, (y3 - y1), corner, 0, 0, topHeight, format); |
| } |
| } |
| for (var y = (y3 + 1); y < y4; y++) { |
| fns.draw(x, y, format.borderColor, (fns.fraction(x, y, j) * 100), 1, corner, (format.borderWidth > 0 ? 0 : -1), options.radii[cc], topHeight, format); |
| } |
| } else { |
| y3 = y1; |
| } |
| } |
| if (cc != "br") { |
| for (var t = 0, k = corner.childNodes.length; t < k; t++) { |
| var bar = corner.childNodes[t]; |
| var barTop = parseInt(dojo.html.getComputedStyle(bar, "top")); |
| var barLeft = parseInt(dojo.html.getComputedStyle(bar, "left")); |
| var barHeight = parseInt(dojo.html.getComputedStyle(bar, "height")); |
| if (cc.charAt(1) == "l") { |
| bar.style.left = (options.radii[cc] - barLeft - 1) + "px"; |
| } |
| if (cc == "tr") { |
| bar.style.top = (options.radii[cc] - barHeight - barTop) + "px"; |
| bar.style.backgroundPosition = "-" + Math.abs((format.width - options.radii[cc] + format.borderWidth) + barLeft) + "px -" + Math.abs(options.radii[cc] - barHeight - barTop - format.borderWidth) + "px"; |
| } else { |
| if (cc == "tl") { |
| bar.style.top = (options.radii[cc] - barHeight - barTop) + "px"; |
| bar.style.backgroundPosition = "-" + Math.abs((options.radii[cc] - barLeft - 1) - format.borderWidth) + "px -" + Math.abs(options.radii[cc] - barHeight - barTop - format.borderWidth) + "px"; |
| } else { |
| bar.style.backgroundPosition = "-" + Math.abs((options.radii[cc] + barLeft) + format.borderWidth) + "px -" + Math.abs((format.height + options.radii[cc] + barTop) - format.borderWidth) + "px"; |
| } |
| } |
| } |
| } |
| } |
| if (corner) { |
| var psn = []; |
| if (cc.charAt(0) == "t") { |
| psn.push("top"); |
| } else { |
| psn.push("bottom"); |
| } |
| if (cc.charAt(1) == "l") { |
| psn.push("left"); |
| } else { |
| psn.push("right"); |
| } |
| if (corner.style.position == "absolute") { |
| for (var z = 0; z < psn.length; z++) { |
| corner.style[psn[z]] = "0px"; |
| } |
| } |
| if (psn[0] == "top") { |
| if (top) { |
| top.appendChild(corner); |
| } |
| } else { |
| if (bottom) { |
| bottom.appendChild(corner); |
| } |
| } |
| } |
| } |
| var diff = {t:Math.abs(options.radii.tl - options.radii.tr), b:Math.abs(options.radii.bl - options.radii.br)}; |
| for (var z in diff) { |
| var smaller = (options.radii[z + "l"] < options.radii[z + "r"] ? z + "l" : z + "r"); |
| var filler = document.createElement("div"); |
| filler.style.height = diff[z] + "px"; |
| filler.style.width = options.radii[smaller] + "px"; |
| filler.style.position = "absolute"; |
| filler.style.fontSize = "1px"; |
| filler.style.overflow = "hidden"; |
| filler.style.backgroundColor = format.color; |
| switch (smaller) { |
| case "tl": |
| filler.style.bottom = "0px"; |
| filler.style.left = "0px"; |
| filler.style.borderLeft = format.borderString; |
| top.appendChild(filler); |
| break; |
| case "tr": |
| filler.style.bottom = "0px"; |
| filler.style.right = "0px"; |
| filler.style.borderRight = format.borderString; |
| top.appendChild(filler); |
| break; |
| case "bl": |
| filler.style.top = "0px"; |
| filler.style.left = "0px"; |
| filler.style.borderLeft = format.borderString; |
| bottom.appendChild(filler); |
| break; |
| case "br": |
| filler.style.top = "0px"; |
| filler.style.right = "0px"; |
| filler.style.borderRight = format.borderString; |
| bottom.appendChild(filler); |
| break; |
| } |
| var fillBar = document.createElement("div"); |
| fillBar.style.position = "relative"; |
| fillBar.style.fontSize = "1px"; |
| fillBar.style.overflow = "hidden"; |
| fillBar.style.backgroundColor = format.color; |
| fillBar.style.backgroundImage = format.bgImage; |
| if (z == "t") { |
| if (top) { |
| if (options.radii.tl && options.radii.tr) { |
| fillBar.style.height = (topHeight - format.borderWidth) + "px"; |
| fillBar.style.marginLeft = (options.radii.tl - format.borderWidth) + "px"; |
| fillBar.style.marginRight = (options.radii.tr - format.borderWidth) + "px"; |
| fillBar.style.borderTop = format.borderString; |
| if (format.bgImage != "") { |
| fillBar.style.backgroundPosition = "-" + (topHeight + format.borderWidth) + "px 0px"; |
| } |
| } |
| top.appendChild(fillBar); |
| } |
| } else { |
| if (bottom) { |
| if (options.radii.bl && options.radii.br) { |
| fillBar.style.height = (bottomHeight - format.borderWidth) + "px"; |
| fillBar.style.marginLeft = (options.radii.bl - format.borderWidth) + "px"; |
| fillBar.style.marginRight = (options.radii.br - format.borderWidth) + "px"; |
| fillBar.style.borderBottom = format.borderString; |
| if (format.bgImage != "") { |
| fillBar.style.backgroundPosition = "-" + (bottomHeight + format.borderWidth) + "px -" + (format.height + (topHeight + format.borderWidth)) + "px"; |
| } |
| } |
| bottom.appendChild(fillBar); |
| } |
| } |
| } |
| if (options.autoPad && format.padding > 0) { |
| var content = document.createElement("div"); |
| content.style.position = "relative"; |
| content.innerHTML = format.content; |
| content.className = "autoPadDiv"; |
| if (topHeight < format.padding) { |
| content.style.paddingTop = Math.abs(topHeight - format.padding) + "px"; |
| } |
| if (bottomHeight < format.padding) { |
| content.style.paddingBottom = Math.abs(bottomHeight - format.padding) + "px"; |
| } |
| content.style.paddingLeft = format.padding + "px"; |
| content.style.paddingRight = format.padding + "px"; |
| node.appendChild(content); |
| } |
| }; |
| var count = 0; |
| dojo.lfx.rounded._fns = {blend:function (clr1, clr2, frac) { |
| var c1 = {r:parseInt(clr1.substr(1, 2), 16), g:parseInt(clr1.substr(3, 2), 16), b:parseInt(clr1.substr(5, 2), 16)}; |
| var c2 = {r:parseInt(clr2.substr(1, 2), 16), g:parseInt(clr2.substr(3, 2), 16), b:parseInt(clr2.substr(5, 2), 16)}; |
| if (frac > 1 || frac < 0) { |
| frac = 1; |
| } |
| var ret = [Math.min(Math.max(Math.round((c1.r * frac) + (c2.r * (1 - frac))), 0), 255), Math.min(Math.max(Math.round((c1.g * frac) + (c2.g * (1 - frac))), 0), 255), Math.min(Math.max(Math.round((c1.b * frac) + (c2.b * (1 - frac))), 0), 255)]; |
| for (var i = 0; i < ret.length; i++) { |
| var n = ret[i].toString(16); |
| if (n.length < 2) { |
| n = "0" + n; |
| } |
| ret[i] = n; |
| } |
| return "#" + ret.join(""); |
| }, fraction:function (x, y, r) { |
| var frac = 0; |
| var xval = []; |
| var yval = []; |
| var point = 0; |
| var whatsides = ""; |
| var intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(x, 2))); |
| if (intersect >= y && intersect < (y + 1)) { |
| whatsides = "Left"; |
| xval[point] = 0; |
| yval[point++] = intersect - y; |
| } |
| intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(y + 1, 2))); |
| if (intersect >= x && intersect < (x + 1)) { |
| whatsides += "Top"; |
| xval[point] = intersect - x; |
| yval[point++] = 1; |
| } |
| intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(x + 1, 2))); |
| if (intersect >= y && intersect < (y + 1)) { |
| whatsides += "Right"; |
| xval[point] = 1; |
| yval[point++] = intersect - y; |
| } |
| intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(y, 2))); |
| if (intersect >= x && intersect < (x + 1)) { |
| whatsides += "Bottom"; |
| xval[point] = intersect - x; |
| yval[point] = 1; |
| } |
| switch (whatsides) { |
| case "LeftRight": |
| return Math.min(yval[0], yval[1]) + ((Math.max(yval[0], yval[1]) - Math.min(yval[0], yval[1])) / 2); |
| case "TopRight": |
| return 1 - (((1 - xval[0]) * (1 - yval[1])) / 2); |
| case "TopBottom": |
| return Math.min(xval[0], xval[1]) + ((Math.max(xval[0], xval[1]) - Math.min(xval[0], xval[1])) / 2); |
| case "LeftBottom": |
| return (yval[0] * xval[1]) / 2; |
| default: |
| return 1; |
| } |
| }, draw:function (x, y, color, opac, height, corner, image, radius, top, format) { |
| var px = document.createElement("div"); |
| px.style.height = height + "px"; |
| px.style.width = "1px"; |
| px.style.position = "absolute"; |
| px.style.fontSize = "1px"; |
| px.style.overflow = "hidden"; |
| if (image == -1 && format.bgImage != "") { |
| px.style.backgroundImage = format.bgImage; |
| px.style.backgroundPosition = "-" + (format.width - (radius - x) + format.borderWidth) + "px -" + ((format.height + top + y) - format.borderWidth) + "px"; |
| } else { |
| px.style.backgroundColor = color; |
| } |
| if (opac != 100) { |
| dojo.html.setOpacity(px, (opac / 100)); |
| } |
| px.style.top = y + "px"; |
| px.style.left = x + "px"; |
| corner.appendChild(px); |
| }, getRGB:function (clr) { |
| var ret = "#ffffff"; |
| if (clr != "" && clr != "transparent") { |
| if (clr.substr(0, 3) == "rgb") { |
| var t = clr.substring(4, clr.indexOf(")")); |
| t = t.split(","); |
| for (var i = 0; i < t.length; i++) { |
| var n = parseInt(t[i]).toString(16); |
| if (n.length < 2) { |
| n = "0" + n; |
| } |
| t[i] = n; |
| } |
| ret = "#" + t.join(""); |
| } else { |
| if (clr.length == 4) { |
| ret = "#" + clr.substring(1, 2) + clr.substring(1, 2) + clr.substring(2, 3) + clr.substring(2, 3) + clr.substring(3, 4) + clr.substring(3, 4); |
| } else { |
| ret = clr; |
| } |
| } |
| } |
| return ret; |
| }}; |
| |
