Subversion Repositories Applications.papyrus

Rev

Rev 1318 | 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.widget.Rounded");
dojo.widget.tags.addParseTreeHandler("dojo:rounded");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.ContentPane");
dojo.require("dojo.html.style");
dojo.require("dojo.html.display");
dojo.require("dojo.gfx.color");
dojo.deprecated("dojo.widget.Rounded will be removed in version 0.5; you can now apply rounded corners to any block element using dojo.lfx.rounded.", "0.5");
dojo.widget.defineWidget("dojo.widget.Rounded", dojo.widget.ContentPane, {isSafari:dojo.render.html.safari, boxMargin:"50px", radius:14, domNode:"", corners:"TR,TL,BR,BL", antiAlias:true, fillInTemplate:function (args, frag) {
        dojo.widget.Rounded.superclass.fillInTemplate.call(this, args, frag);
        dojo.html.insertCssFile(this.templateCssPath);
        if (this.domNode.style.height <= 0) {
                var minHeight = (this.radius * 1) + this.domNode.clientHeight;
                this.domNode.style.height = minHeight + "px";
        }
        if (this.domNode.style.width <= 0) {
                var minWidth = (this.radius * 1) + this.domNode.clientWidth;
                this.domNode.style.width = minWidth + "px";
        }
        var cornersAvailable = ["TR", "TL", "BR", "BL"];
        var cornersPassed = this.corners.split(",");
        this.settings = {antiAlias:this.antiAlias};
        var setCorner = function (currentCorner) {
                var val = currentCorner.toLowerCase();
                if (dojo.lang.inArray(cornersPassed, currentCorner)) {
                        this.settings[val] = {radius:this.radius, enabled:true};
                } else {
                        this.settings[val] = {radius:0};
                }
        };
        dojo.lang.forEach(cornersAvailable, setCorner, this);
        this.domNode.style.margin = this.boxMargin;
        this.curvyCorners(this.settings);
        this.applyCorners();
}, curvyCorners:function (settings) {
        this.box = this.domNode;
        this.topContainer = null;
        this.bottomContainer = null;
        this.masterCorners = [];
        var boxHeight = dojo.html.getStyle(this.box, "height");
        if (boxHeight == "") {
                boxHeight = "0px";
        }
        var boxWidth = dojo.html.getStyle(this.box, "width");
        var borderWidth = dojo.html.getStyle(this.box, "borderTopWidth");
        if (borderWidth == "") {
                borderWidth = "0px";
        }
        var borderColour = dojo.html.getStyle(this.box, "borderTopColor");
        if (borderWidth > 0) {
                this.antiAlias = true;
        }
        var boxColour = dojo.html.getStyle(this.box, "backgroundColor");
        var backgroundImage = dojo.html.getStyle(this.box, "backgroundImage");
        var boxPosition = dojo.html.getStyle(this.box, "position");
        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));
        var test = new dojo.gfx.color.Color(boxColour);
        this.boxColour = ((boxColour != "" && boxColour != "transparent") ? ((boxColour.substr(0, 3) == "rgb") ? this.rgb2Hex(boxColour) : boxColour) : "#ffffff");
        this.borderColour = ((borderColour != "" && borderColour != "transparent" && this.borderWidth > 0) ? ((borderColour.substr(0, 3) == "rgb") ? this.rgb2Hex(borderColour) : borderColour) : this.boxColour);
        this.borderString = this.borderWidth + "px" + " solid " + this.borderColour;
        this.backgroundImage = ((backgroundImage != "none") ? backgroundImage : "");
        if (boxPosition != "absolute") {
                this.box.style.position = "relative";
        }
        this.applyCorners = function () {
                for (var t = 0; t < 2; t++) {
                        switch (t) {
                          case 0:
                                if (this.settings.tl.enabled || this.settings.tr.enabled) {
                                        var newMainContainer = document.createElement("DIV");
                                        with (newMainContainer.style) {
                                                width = "100%";
                                                fontSize = "1px";
                                                overflow = "hidden";
                                                position = "absolute";
                                                paddingLeft = this.borderWidth + "px";
                                                paddingRight = this.borderWidth + "px";
                                                var topMaxRadius = Math.max(this.settings.tl ? this.settings.tl.radius : 0, this.settings.tr ? this.settings.tr.radius : 0);
                                                height = topMaxRadius + "px";
                                                top = 0 - topMaxRadius + "px";
                                                left = 0 - this.borderWidth + "px";
                                        }
                                        this.topContainer = this.box.appendChild(newMainContainer);
                                }
                                break;
                          case 1:
                                if (this.settings.bl.enabled || this.settings.br.enabled) {
                                        var newMainContainer = document.createElement("DIV");
                                        with (newMainContainer.style) {
                                                width = "100%";
                                                fontSize = "1px";
                                                overflow = "hidden";
                                                position = "absolute";
                                                paddingLeft = this.borderWidth + "px";
                                                paddingRight = this.borderWidth + "px";
                                                var botMaxRadius = Math.max(this.settings.bl ? this.settings.bl.radius : 0, this.settings.br ? this.settings.br.radius : 0);
                                                height = botMaxRadius + "px";
                                                bottom = 0 - botMaxRadius + "px";
                                                left = 0 - this.borderWidth + "px";
                                        }
                                        this.bottomContainer = this.box.appendChild(newMainContainer);
                                }
                                break;
                        }
                }
                if (this.topContainer) {
                        this.box.style.borderTopWidth = "0px";
                }
                if (this.bottomContainer) {
                        this.box.style.borderBottomWidth = "0px";
                }
                var corners = ["tr", "tl", "br", "bl"];
                for (var i in corners) {
                        var cc = corners[i];
                        if (!this.settings[cc]) {
                                if (((cc == "tr" || cc == "tl") && this.topContainer != null) || ((cc == "br" || cc == "bl") && this.bottomContainer != null)) {
                                        var newCorner = document.createElement("DIV");
                                        newCorner.style.position = "relative";
                                        newCorner.style.fontSize = "1px";
                                        newCorner.style.overflow = "hidden";
                                        if (this.backgroundImage == "") {
                                                newCorner.style.backgroundColor = this.boxColour;
                                        } else {
                                                newCorner.style.backgroundImage = this.backgroundImage;
                                        }
                                        switch (cc) {
                                          case "tl":
                                                with (newCorner.style) {
                                                        height = topMaxRadius - this.borderWidth + "px";
                                                        marginRight = this.settings.tr.radius - (this.borderWidth * 2) + "px";
                                                        borderLeft = this.borderString;
                                                        borderTop = this.borderString;
                                                        left = -this.borderWidth + "px";
                                                }
                                                break;
                                          case "tr":
                                                with (newCorner.style) {
                                                        height = topMaxRadius - this.borderWidth + "px";
                                                        marginLeft = this.settings.tl.radius - (this.borderWidth * 2) + "px";
                                                        borderRight = this.borderString;
                                                        borderTop = this.borderString;
                                                        backgroundPosition = "-" + this.boxWidth + "px 0px";
                                                        left = this.borderWidth + "px";
                                                }
                                                break;
                                          case "bl":
                                                with (newCorner.style) {
                                                        height = botMaxRadius - this.borderWidth + "px";
                                                        marginRight = this.settings.br.radius - (this.borderWidth * 2) + "px";
                                                        borderLeft = this.borderString;
                                                        borderBottom = this.borderString;
                                                        left = -this.borderWidth + "px";
                                                }
                                                break;
                                          case "br":
                                                with (newCorner.style) {
                                                        height = botMaxRadius - this.borderWidth + "px";
                                                        marginLeft = this.settings.bl.radius - (this.borderWidth * 2) + "px";
                                                        borderRight = this.borderString;
                                                        borderBottom = this.borderString;
                                                        left = this.borderWidth + "px";
                                                }
                                                break;
                                        }
                                }
                        } else {
                                if (this.masterCorners[this.settings[cc].radius]) {
                                        var newCorner = this.masterCorners[this.settings[cc].radius].cloneNode(true);
                                } else {
                                        var newCorner = document.createElement("DIV");
                                        with (newCorner.style) {
                                                height = this.settings[cc].radius + "px";
                                                width = this.settings[cc].radius + "px";
                                                position = "absolute";
                                                fontSize = "1px";
                                                overflow = "hidden";
                                        }
                                        var borderRadius = parseInt(this.settings[cc].radius - this.borderWidth);
                                        for (var intx = 0, j = this.settings[cc].radius; intx < j; intx++) {
                                                if ((intx + 1) >= borderRadius) {
                                                        var y1 = -1;
                                                } else {
                                                        var y1 = (Math.floor(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow((intx + 1), 2))) - 1);
                                                }
                                                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);
                                                        }
                                                }
                                                if ((intx) >= j) {
                                                        var y4 = -1;
                                                } else {
                                                        var y4 = Math.ceil(Math.sqrt(Math.pow(j, 2) - Math.pow(intx, 2)));
                                                }
                                                if (y1 > -1) {
                                                        this.drawPixel(intx, 0, this.boxColour, 100, (y1 + 1), newCorner, -1, this.settings[cc].radius);
                                                }
                                                if (borderRadius != j) {
                                                        if (this.antiAlias) {
                                                                for (var inty = (y1 + 1); inty < y2; inty++) {
                                                                        if (this.backgroundImage != "") {
                                                                                var borderFract = (this.pixelFraction(intx, inty, borderRadius) * 100);
                                                                                if (borderFract < 30) {
                                                                                        this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, 0, this.settings[cc].radius);
                                                                                } else {
                                                                                        this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, -1, this.settings[cc].radius);
                                                                                }
                                                                        } else {
                                                                                var pixelcolour = dojo.gfx.color.blend(this.boxColour, this.borderColour, this.pixelFraction(intx, inty, borderRadius));
                                                                                this.drawPixel(intx, inty, pixelcolour, 100, 1, newCorner, 0, this.settings[cc].radius);
                                                                        }
                                                                }
                                                        }
                                                        if (y3 >= y2) {
                                                                if (y1 == -1) {
                                                                        y1 = 0;
                                                                }
                                                                this.drawPixel(intx, y2, this.borderColour, 100, (y3 - y2 + 1), newCorner, 0, this.settings[cc].radius);
                                                        }
                                                        var outsideColour = this.borderColour;
                                                } else {
                                                        var outsideColour = this.boxColour;
                                                        var y3 = y1;
                                                }
                                                if (this.antiAlias) {
                                                        for (var inty = (y3 + 1); inty < y4; inty++) {
                                                                this.drawPixel(intx, inty, outsideColour, (this.pixelFraction(intx, inty, j) * 100), 1, newCorner, ((this.borderWidth > 0) ? 0 : -1), this.settings[cc].radius);
                                                        }
                                                }
                                        }
                                        this.masterCorners[this.settings[cc].radius] = newCorner.cloneNode(true);
                                }
                                if (cc != "br") {
                                        for (var t = 0, k = newCorner.childNodes.length; t < k; t++) {
                                                var pixelBar = newCorner.childNodes[t];
                                                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")));
                                                if (cc == "tl" || cc == "bl") {
                                                        pixelBar.style.left = this.settings[cc].radius - pixelBarLeft - 1 + "px";
                                                }
                                                if (cc == "tr" || cc == "tl") {
                                                        pixelBar.style.top = this.settings[cc].radius - pixelBarHeight - pixelBarTop + "px";
                                                }
                                                var value;
                                                switch (cc) {
                                                  case "tr":
                                                        value = (-1 * (Math.abs((this.boxWidth - this.settings[cc].radius + this.borderWidth) + pixelBarLeft) - (Math.abs(this.settings[cc].radius - pixelBarHeight - pixelBarTop - this.borderWidth))));
                                                        pixelBar.style.backgroundPosition = value + "px";
                                                        break;
                                                  case "tl":
                                                        value = (-1 * (Math.abs((this.settings[cc].radius - pixelBarLeft - 1) - this.borderWidth) - (Math.abs(this.settings[cc].radius - pixelBarHeight - pixelBarTop - this.borderWidth))));
                                                        pixelBar.style.backgroundPosition = value + "px";
                                                        break;
                                                  case "bl":
                                                        value = (-1 * (Math.abs((this.settings[cc].radius - pixelBarLeft - 1) - this.borderWidth) - (Math.abs((this.boxHeight + this.settings[cc].radius + pixelBarTop) - this.borderWidth))));
                                                        pixelBar.style.backgroundPosition = value + "px";
                                                        break;
                                                }
                                        }
                                }
                        }
                        if (newCorner) {
                                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;
                                }
                        }
                }
                var radiusDiff = [];
                radiusDiff["t"] = this.settings.tl.enabled && this.settings.tr.enabled ? Math.abs(this.settings.tl.radius - this.settings.tr.radius) : 0;
                radiusDiff["b"] = this.settings.bl.enabled && this.settings.br.enabled ? Math.abs(this.settings.bl.radius - this.settings.br.radius) : 0;
                for (var z in radiusDiff) {
                        if (radiusDiff[z]) {
                                var smallerCornerType = ((this.settings[z + "l"].radius < this.settings[z + "r"].radius) ? z + "l" : z + "r");
                                var newFiller = document.createElement("DIV");
                                with (newFiller.style) {
                                        height = radiusDiff[z] + "px";
                                        width = this.settings[smallerCornerType].radius + "px";
                                        position = "absolute";
                                        fontSize = "1px";
                                        overflow = "hidden";
                                        backgroundColor = this.boxColour;
                                }
                                switch (smallerCornerType) {
                                  case "tl":
                                        with (newFiller.style) {
                                                bottom = "0px";
                                                left = "0px";
                                                borderLeft = this.borderString;
                                        }
                                        this.topContainer.appendChild(newFiller);
                                        break;
                                  case "tr":
                                        with (newFiller.style) {
                                                bottom = "0px";
                                                right = "0px";
                                                borderRight = this.borderString;
                                        }
                                        this.topContainer.appendChild(newFiller);
                                        break;
                                  case "bl":
                                        with (newFiller.style) {
                                                top = "0px";
                                                left = "0px";
                                                borderLeft = this.borderString;
                                        }
                                        this.bottomContainer.appendChild(newFiller);
                                        break;
                                  case "br":
                                        with (newFiller.style) {
                                                top = "0px";
                                                right = "0px";
                                                borderRight = this.borderString;
                                        }
                                        this.bottomContainer.appendChild(newFiller);
                                        break;
                                }
                        }
                        var newFillerBar = document.createElement("DIV");
                        with (newFillerBar.style) {
                                position = "relative";
                                fontSize = "1px";
                                overflow = "hidden";
                                backgroundColor = this.boxColour;
                        }
                        switch (z) {
                          case "t":
                                if (this.topContainer) {
                                        with (newFillerBar.style) {
                                                height = topMaxRadius - this.borderWidth + "px";
                                                marginLeft = this.settings.tl.radius - this.borderWidth + "px";
                                                marginRight = this.settings.tr.radius - this.borderWidth + "px";
                                                borderTop = this.borderString;
                                        }
                                        this.topContainer.appendChild(newFillerBar);
                                }
                                break;
                          case "b":
                                if (this.bottomContainer) {
                                        with (newFillerBar.style) {
                                                height = botMaxRadius - this.borderWidth + "px";
                                                marginLeft = this.settings.bl.radius - this.borderWidth + "px";
                                                marginRight = this.settings.br.radius - this.borderWidth + "px";
                                                borderBottom = this.borderString;
                                        }
                                        this.bottomContainer.appendChild(newFillerBar);
                                }
                                break;
                        }
                }
        };
        this.drawPixel = function (intx, inty, colour, transAmount, height, newCorner, image, cornerRadius) {
                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";
                if (image == -1 && this.backgroundImage != "") {
                        pixel.style.backgroundImage = this.backgroundImage;
                        pixel.style.backgroundPosition = "-" + (this.boxWidth - (cornerRadius - intx) + this.borderWidth) + "px -" + ((this.boxHeight + cornerRadius + inty) - this.borderWidth) + "px";
                } else {
                        pixel.style.backgroundColor = colour;
                }
                if (transAmount != 100) {
                        dojo.html.setOpacity(pixel, transAmount);
                }
                pixel.style.top = inty + "px";
                pixel.style.left = intx + "px";
                newCorner.appendChild(pixel);
        };
}, pixelFraction:function (x, y, r) {
        var pixelfraction = 0;
        var xvalues = [];
        var yvalues = [];
        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";
                xvalues[point] = 0;
                yvalues[point] = intersect - y;
                point = point + 1;
        }
        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;
        }
        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;
        }
        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;
        }
        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;
}, rgb2Hex:function (rgbColour) {
        try {
                var rgbArray = this.rgb2Array(rgbColour);
                var red = parseInt(rgbArray[0]);
                var green = parseInt(rgbArray[1]);
                var blue = parseInt(rgbArray[2]);
                var hexColour = "#" + this.intToHex(red) + this.intToHex(green) + this.intToHex(blue);
        }
        catch (e) {
                alert("There was an error converting the RGB value to Hexadecimal in function rgb2Hex");
        }
        return hexColour;
}, intToHex:function (strNum) {
        var base = strNum / 16;
        var rem = strNum % 16;
        var base = base - (rem / 16);
        var baseS = this.makeHex(base);
        var remS = this.makeHex(rem);
        return baseS + "" + remS;
}, makeHex:function (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";
                }
        }
}, rgb2Array:function (rgbColour) {
        var rgbValues = rgbColour.substring(4, rgbColour.indexOf(")"));
        var rgbArray = rgbValues.split(", ");
        return rgbArray;
}});