Subversion Repositories Applications.papyrus

/*
        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.html");
dojo.require("dojo.gfx.color");
dojo.require("dojo.lfx.Animation");
dojo.require("dojo.lang.array");
dojo.require("dojo.html.display");
dojo.require("dojo.html.color");
dojo.require("dojo.html.layout");
dojo.lfx.html._byId = function (nodes) {
        if (!nodes) {
                return [];
        }
        if (dojo.lang.isArrayLike(nodes)) {
                if (!nodes.alreadyChecked) {
                        var n = [];
                        dojo.lang.forEach(nodes, function (node) {
                                n.push(dojo.byId(node));
                        });
                        n.alreadyChecked = true;
                        return n;
                } else {
                        return nodes;
                }
        } else {
                var n = [];
                n.push(dojo.byId(nodes));
                n.alreadyChecked = true;
                return n;
        }
};
dojo.lfx.html.propertyAnimation = function (nodes, propertyMap, duration, easing, handlers) {
        nodes = dojo.lfx.html._byId(nodes);
        var targs = {"propertyMap":propertyMap, "nodes":nodes, "duration":duration, "easing":easing || dojo.lfx.easeDefault};
        var setEmUp = function (args) {
                if (args.nodes.length == 1) {
                        var pm = args.propertyMap;
                        if (!dojo.lang.isArray(args.propertyMap)) {
                                var parr = [];
                                for (var pname in pm) {
                                        pm[pname].property = pname;
                                        parr.push(pm[pname]);
                                }
                                pm = args.propertyMap = parr;
                        }
                        dojo.lang.forEach(pm, function (prop) {
                                if (dj_undef("start", prop)) {
                                        if (prop.property != "opacity") {
                                                prop.start = parseInt(dojo.html.getComputedStyle(args.nodes[0], prop.property));
                                        } else {
                                                prop.start = dojo.html.getOpacity(args.nodes[0]);
                                        }
                                }
                        });
                }
        };
        var coordsAsInts = function (coords) {
                var cints = [];
                dojo.lang.forEach(coords, function (c) {
                        cints.push(Math.round(c));
                });
                return cints;
        };
        var setStyle = function (n, style) {
                n = dojo.byId(n);
                if (!n || !n.style) {
                        return;
                }
                for (var s in style) {
                        try {
                                if (s == "opacity") {
                                        dojo.html.setOpacity(n, style[s]);
                                } else {
                                        n.style[s] = style[s];
                                }
                        }
                        catch (e) {
                                dojo.debug(e);
                        }
                }
        };
        var propLine = function (properties) {
                this._properties = properties;
                this.diffs = new Array(properties.length);
                dojo.lang.forEach(properties, function (prop, i) {
                        if (dojo.lang.isFunction(prop.start)) {
                                prop.start = prop.start(prop, i);
                        }
                        if (dojo.lang.isFunction(prop.end)) {
                                prop.end = prop.end(prop, i);
                        }
                        if (dojo.lang.isArray(prop.start)) {
                                this.diffs[i] = null;
                        } else {
                                if (prop.start instanceof dojo.gfx.color.Color) {
                                        prop.startRgb = prop.start.toRgb();
                                        prop.endRgb = prop.end.toRgb();
                                } else {
                                        this.diffs[i] = prop.end - prop.start;
                                }
                        }
                }, this);
                this.getValue = function (n) {
                        var ret = {};
                        dojo.lang.forEach(this._properties, function (prop, i) {
                                var value = null;
                                if (dojo.lang.isArray(prop.start)) {
                                } else {
                                        if (prop.start instanceof dojo.gfx.color.Color) {
                                                value = (prop.units || "rgb") + "(";
                                                for (var j = 0; j < prop.startRgb.length; j++) {
                                                        value += Math.round(((prop.endRgb[j] - prop.startRgb[j]) * n) + prop.startRgb[j]) + (j < prop.startRgb.length - 1 ? "," : "");
                                                }
                                                value += ")";
                                        } else {
                                                value = ((this.diffs[i]) * n) + prop.start + (prop.property != "opacity" ? prop.units || "px" : "");
                                        }
                                }
                                ret[dojo.html.toCamelCase(prop.property)] = value;
                        }, this);
                        return ret;
                };
        };
        var anim = new dojo.lfx.Animation({beforeBegin:function () {
                setEmUp(targs);
                anim.curve = new propLine(targs.propertyMap);
        }, onAnimate:function (propValues) {
                dojo.lang.forEach(targs.nodes, function (node) {
                        setStyle(node, propValues);
                });
        }}, targs.duration, null, targs.easing);
        if (handlers) {
                for (var x in handlers) {
                        if (dojo.lang.isFunction(handlers[x])) {
                                anim.connect(x, anim, handlers[x]);
                        }
                }
        }
        return anim;
};
dojo.lfx.html._makeFadeable = function (nodes) {
        var makeFade = function (node) {
                if (dojo.render.html.ie) {
                        if ((node.style.zoom.length == 0) && (dojo.html.getStyle(node, "zoom") == "normal")) {
                                node.style.zoom = "1";
                        }
                        if ((node.style.width.length == 0) && (dojo.html.getStyle(node, "width") == "auto")) {
                                node.style.width = "auto";
                        }
                }
        };
        if (dojo.lang.isArrayLike(nodes)) {
                dojo.lang.forEach(nodes, makeFade);
        } else {
                makeFade(nodes);
        }
};
dojo.lfx.html.fade = function (nodes, values, duration, easing, callback) {
        nodes = dojo.lfx.html._byId(nodes);
        var props = {property:"opacity"};
        if (!dj_undef("start", values)) {
                props.start = values.start;
        } else {
                props.start = function () {
                        return dojo.html.getOpacity(nodes[0]);
                };
        }
        if (!dj_undef("end", values)) {
                props.end = values.end;
        } else {
                dojo.raise("dojo.lfx.html.fade needs an end value");
        }
        var anim = dojo.lfx.propertyAnimation(nodes, [props], duration, easing);
        anim.connect("beforeBegin", function () {
                dojo.lfx.html._makeFadeable(nodes);
        });
        if (callback) {
                anim.connect("onEnd", function () {
                        callback(nodes, anim);
                });
        }
        return anim;
};
dojo.lfx.html.fadeIn = function (nodes, duration, easing, callback) {
        return dojo.lfx.html.fade(nodes, {end:1}, duration, easing, callback);
};
dojo.lfx.html.fadeOut = function (nodes, duration, easing, callback) {
        return dojo.lfx.html.fade(nodes, {end:0}, duration, easing, callback);
};
dojo.lfx.html.fadeShow = function (nodes, duration, easing, callback) {
        nodes = dojo.lfx.html._byId(nodes);
        dojo.lang.forEach(nodes, function (node) {
                dojo.html.setOpacity(node, 0);
        });
        var anim = dojo.lfx.html.fadeIn(nodes, duration, easing, callback);
        anim.connect("beforeBegin", function () {
                if (dojo.lang.isArrayLike(nodes)) {
                        dojo.lang.forEach(nodes, dojo.html.show);
                } else {
                        dojo.html.show(nodes);
                }
        });
        return anim;
};
dojo.lfx.html.fadeHide = function (nodes, duration, easing, callback) {
        var anim = dojo.lfx.html.fadeOut(nodes, duration, easing, function () {
                if (dojo.lang.isArrayLike(nodes)) {
                        dojo.lang.forEach(nodes, dojo.html.hide);
                } else {
                        dojo.html.hide(nodes);
                }
                if (callback) {
                        callback(nodes, anim);
                }
        });
        return anim;
};
dojo.lfx.html.wipeIn = function (nodes, duration, easing, callback) {
        nodes = dojo.lfx.html._byId(nodes);
        var anims = [];
        dojo.lang.forEach(nodes, function (node) {
                var oprop = {};
                var origTop, origLeft, origPosition;
                with (node.style) {
                        origTop = top;
                        origLeft = left;
                        origPosition = position;
                        top = "-9999px";
                        left = "-9999px";
                        position = "absolute";
                        display = "";
                }
                var nodeHeight = dojo.html.getBorderBox(node).height;
                with (node.style) {
                        top = origTop;
                        left = origLeft;
                        position = origPosition;
                        display = "none";
                }
                var anim = dojo.lfx.propertyAnimation(node, {"height":{start:1, end:function () {
                        return nodeHeight;
                }}}, duration, easing);
                anim.connect("beforeBegin", function () {
                        oprop.overflow = node.style.overflow;
                        oprop.height = node.style.height;
                        with (node.style) {
                                overflow = "hidden";
                                height = "1px";
                        }
                        dojo.html.show(node);
                });
                anim.connect("onEnd", function () {
                        with (node.style) {
                                overflow = oprop.overflow;
                                height = oprop.height;
                        }
                        if (callback) {
                                callback(node, anim);
                        }
                });
                anims.push(anim);
        });
        return dojo.lfx.combine(anims);
};
dojo.lfx.html.wipeOut = function (nodes, duration, easing, callback) {
        nodes = dojo.lfx.html._byId(nodes);
        var anims = [];
        dojo.lang.forEach(nodes, function (node) {
                var oprop = {};
                var anim = dojo.lfx.propertyAnimation(node, {"height":{start:function () {
                        return dojo.html.getContentBox(node).height;
                }, end:1}}, duration, easing, {"beforeBegin":function () {
                        oprop.overflow = node.style.overflow;
                        oprop.height = node.style.height;
                        with (node.style) {
                                overflow = "hidden";
                        }
                        dojo.html.show(node);
                }, "onEnd":function () {
                        dojo.html.hide(node);
                        with (node.style) {
                                overflow = oprop.overflow;
                                height = oprop.height;
                        }
                        if (callback) {
                                callback(node, anim);
                        }
                }});
                anims.push(anim);
        });
        return dojo.lfx.combine(anims);
};
dojo.lfx.html.slideTo = function (nodes, coords, duration, easing, callback) {
        nodes = dojo.lfx.html._byId(nodes);
        var anims = [];
        var compute = dojo.html.getComputedStyle;
        if (dojo.lang.isArray(coords)) {
                dojo.deprecated("dojo.lfx.html.slideTo(node, array)", "use dojo.lfx.html.slideTo(node, {top: value, left: value});", "0.5");
                coords = {top:coords[0], left:coords[1]};
        }
        dojo.lang.forEach(nodes, function (node) {
                var top = null;
                var left = null;
                var init = (function () {
                        var innerNode = node;
                        return function () {
                                var pos = compute(innerNode, "position");
                                top = (pos == "absolute" ? node.offsetTop : parseInt(compute(node, "top")) || 0);
                                left = (pos == "absolute" ? node.offsetLeft : parseInt(compute(node, "left")) || 0);
                                if (!dojo.lang.inArray(["absolute", "relative"], pos)) {
                                        var ret = dojo.html.abs(innerNode, true);
                                        dojo.html.setStyleAttributes(innerNode, "position:absolute;top:" + ret.y + "px;left:" + ret.x + "px;");
                                        top = ret.y;
                                        left = ret.x;
                                }
                        };
                })();
                init();
                var anim = dojo.lfx.propertyAnimation(node, {"top":{start:top, end:(coords.top || 0)}, "left":{start:left, end:(coords.left || 0)}}, duration, easing, {"beforeBegin":init});
                if (callback) {
                        anim.connect("onEnd", function () {
                                callback(nodes, anim);
                        });
                }
                anims.push(anim);
        });
        return dojo.lfx.combine(anims);
};
dojo.lfx.html.slideBy = function (nodes, coords, duration, easing, callback) {
        nodes = dojo.lfx.html._byId(nodes);
        var anims = [];
        var compute = dojo.html.getComputedStyle;
        if (dojo.lang.isArray(coords)) {
                dojo.deprecated("dojo.lfx.html.slideBy(node, array)", "use dojo.lfx.html.slideBy(node, {top: value, left: value});", "0.5");
                coords = {top:coords[0], left:coords[1]};
        }
        dojo.lang.forEach(nodes, function (node) {
                var top = null;
                var left = null;
                var init = (function () {
                        var innerNode = node;
                        return function () {
                                var pos = compute(innerNode, "position");
                                top = (pos == "absolute" ? node.offsetTop : parseInt(compute(node, "top")) || 0);
                                left = (pos == "absolute" ? node.offsetLeft : parseInt(compute(node, "left")) || 0);
                                if (!dojo.lang.inArray(["absolute", "relative"], pos)) {
                                        var ret = dojo.html.abs(innerNode, true);
                                        dojo.html.setStyleAttributes(innerNode, "position:absolute;top:" + ret.y + "px;left:" + ret.x + "px;");
                                        top = ret.y;
                                        left = ret.x;
                                }
                        };
                })();
                init();
                var anim = dojo.lfx.propertyAnimation(node, {"top":{start:top, end:top + (coords.top || 0)}, "left":{start:left, end:left + (coords.left || 0)}}, duration, easing).connect("beforeBegin", init);
                if (callback) {
                        anim.connect("onEnd", function () {
                                callback(nodes, anim);
                        });
                }
                anims.push(anim);
        });
        return dojo.lfx.combine(anims);
};
dojo.lfx.html.explode = function (start, endNode, duration, easing, callback) {
        var h = dojo.html;
        start = dojo.byId(start);
        endNode = dojo.byId(endNode);
        var startCoords = h.toCoordinateObject(start, true);
        var outline = document.createElement("div");
        h.copyStyle(outline, endNode);
        if (endNode.explodeClassName) {
                outline.className = endNode.explodeClassName;
        }
        with (outline.style) {
                position = "absolute";
                display = "none";
                var backgroundStyle = h.getStyle(start, "background-color");
                backgroundColor = backgroundStyle ? backgroundStyle.toLowerCase() : "transparent";
                backgroundColor = (backgroundColor == "transparent") ? "rgb(221, 221, 221)" : backgroundColor;
        }
        dojo.body().appendChild(outline);
        with (endNode.style) {
                visibility = "hidden";
                display = "block";
        }
        var endCoords = h.toCoordinateObject(endNode, true);
        with (endNode.style) {
                display = "none";
                visibility = "visible";
        }
        var props = {opacity:{start:0.5, end:1}};
        dojo.lang.forEach(["height", "width", "top", "left"], function (type) {
                props[type] = {start:startCoords[type], end:endCoords[type]};
        });
        var anim = new dojo.lfx.propertyAnimation(outline, props, duration, easing, {"beforeBegin":function () {
                h.setDisplay(outline, "block");
        }, "onEnd":function () {
                h.setDisplay(endNode, "block");
                outline.parentNode.removeChild(outline);
        }});
        if (callback) {
                anim.connect("onEnd", function () {
                        callback(endNode, anim);
                });
        }
        return anim;
};
dojo.lfx.html.implode = function (startNode, end, duration, easing, callback) {
        var h = dojo.html;
        startNode = dojo.byId(startNode);
        end = dojo.byId(end);
        var startCoords = dojo.html.toCoordinateObject(startNode, true);
        var endCoords = dojo.html.toCoordinateObject(end, true);
        var outline = document.createElement("div");
        dojo.html.copyStyle(outline, startNode);
        if (startNode.explodeClassName) {
                outline.className = startNode.explodeClassName;
        }
        dojo.html.setOpacity(outline, 0.3);
        with (outline.style) {
                position = "absolute";
                display = "none";
                backgroundColor = h.getStyle(startNode, "background-color").toLowerCase();
        }
        dojo.body().appendChild(outline);
        var props = {opacity:{start:1, end:0.5}};
        dojo.lang.forEach(["height", "width", "top", "left"], function (type) {
                props[type] = {start:startCoords[type], end:endCoords[type]};
        });
        var anim = new dojo.lfx.propertyAnimation(outline, props, duration, easing, {"beforeBegin":function () {
                dojo.html.hide(startNode);
                dojo.html.show(outline);
        }, "onEnd":function () {
                outline.parentNode.removeChild(outline);
        }});
        if (callback) {
                anim.connect("onEnd", function () {
                        callback(startNode, anim);
                });
        }
        return anim;
};
dojo.lfx.html.highlight = function (nodes, startColor, duration, easing, callback) {
        nodes = dojo.lfx.html._byId(nodes);
        var anims = [];
        dojo.lang.forEach(nodes, function (node) {
                var color = dojo.html.getBackgroundColor(node);
                var bg = dojo.html.getStyle(node, "background-color").toLowerCase();
                var bgImage = dojo.html.getStyle(node, "background-image");
                var wasTransparent = (bg == "transparent" || bg == "rgba(0, 0, 0, 0)");
                while (color.length > 3) {
                        color.pop();
                }
                var rgb = new dojo.gfx.color.Color(startColor);
                var endRgb = new dojo.gfx.color.Color(color);
                var anim = dojo.lfx.propertyAnimation(node, {"background-color":{start:rgb, end:endRgb}}, duration, easing, {"beforeBegin":function () {
                        if (bgImage) {
                                node.style.backgroundImage = "none";
                        }
                        node.style.backgroundColor = "rgb(" + rgb.toRgb().join(",") + ")";
                }, "onEnd":function () {
                        if (bgImage) {
                                node.style.backgroundImage = bgImage;
                        }
                        if (wasTransparent) {
                                node.style.backgroundColor = "transparent";
                        }
                        if (callback) {
                                callback(node, anim);
                        }
                }});
                anims.push(anim);
        });
        return dojo.lfx.combine(anims);
};
dojo.lfx.html.unhighlight = function (nodes, endColor, duration, easing, callback) {
        nodes = dojo.lfx.html._byId(nodes);
        var anims = [];
        dojo.lang.forEach(nodes, function (node) {
                var color = new dojo.gfx.color.Color(dojo.html.getBackgroundColor(node));
                var rgb = new dojo.gfx.color.Color(endColor);
                var bgImage = dojo.html.getStyle(node, "background-image");
                var anim = dojo.lfx.propertyAnimation(node, {"background-color":{start:color, end:rgb}}, duration, easing, {"beforeBegin":function () {
                        if (bgImage) {
                                node.style.backgroundImage = "none";
                        }
                        node.style.backgroundColor = "rgb(" + color.toRgb().join(",") + ")";
                }, "onEnd":function () {
                        if (callback) {
                                callback(node, anim);
                        }
                }});
                anims.push(anim);
        });
        return dojo.lfx.combine(anims);
};
dojo.lang.mixin(dojo.lfx, dojo.lfx.html);