Subversion Repositories Applications.papyrus

Rev

Rev 1987 | Blame | Compare with Previous | Last modification | View Log | RSS feed

/*
        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;
}};