magicyte

I'm currently working on a simple JavaScript effects library called Jasoop.

jasoop.js:

Code:

var Effect = (function() {
    var durations = {
        "very fast": 500,
        "fast": 750,
        "normal": 1000,
        "slow": 1500,
        "very slow": 2000
    },
    styles = [],
    counter = 0,
    fader = setTimeout(function() {
        return false;
    }, 10);
    function Effect(el) {
        this.element = document.getElementById(el);
        this.style = this.element.style;
        this.visible = true;
        this.opacity = 100;
        this.queue = false;
        this.autodelete = false;
        this.loop = false;
        this.pause = true;
    }
    Effect.prototype = {
        move: function(x, y) {
            this.style.position = "absolute";
            this.style.left = x + "px";
            this.style.top = y + "px";
        },
        toggle: function() {
            if (this.style.display == "none") {
                this.style.display = "block";
                this.visible = true;
            } else {
                this.style.display = "none";
                this.visible = false;
            }
        },
        css: function(options) {
            var ss = (options.replace(/ /g, "")).split(";");
            var privates = {};
            for (var i = 0; i < ss.length;++i) {
                var s = ss[i].split(":");
                while (1) {
                    if (s[0].indexOf("-") != -1) {
                        s[0] = s[0].replace(new RegExp(s[0].substr(s[0].indexOf("-"), 2), "g"), (s[0].substr(s[0].indexOf("-"), 2))[1].toUpperCase());
                    } else {
                        break;
                    }
                }
                this.style[s[0]] = s[1];
            }
        },
        fadeIn: function(inc, dur) {
            this.fadeTo(100, inc, dur);
        },
        fadeOut: function(inc, dur) {
            this.fadeTo(0, inc, dur);
        },
        fadeTo: function(pt, inc, dur) {
            if (inc > 0) {
                if (this.opacity > pt) {
                    clearTimeout(fader);
                    this.opacity -= inc;
                    fader = setTimeout((function(effect) {
                        return function() {
                            if ((effect.opacity - inc) >= pt)
                                effect.fadeTo(pt, inc, dur);
                            else
                                effect.opacity = pt;
                        };
                    })(this), (typeof dur == "string") ? Math.floor(durations[dur] / (100 / Math.abs(inc))) : Math.floor(dur / (100 / Math.abs(inc))));
                } else {
                    if (this.opacity < pt) {
                        clearTimeout(fader);
                        this.opacity += inc;
                        fader = setTimeout((function(effect) {
                            return function() {
                                if ((effect.opacity + inc) <= pt)
                                    effect.fadeTo(pt, inc, dur);
                                else
                                    effect.opacity = pt;
                            };
                        })(this), (typeof dur == "string") ? Math.floor(durations[dur] / (100 / Math.abs(inc))) : Math.floor(dur / (100 / Math.abs(inc))));
                    }
                }
            }
            if (this.opacity < 0)
                this.opacity = 0;
            if (this.opacity > 100)
                this.opacity = 100;
            this.style.filter = "alpha(opacity = " + this.opacity + ")";
            this.style.KHTMLOpacity = this.opacity / 100;
            this.style.MozOpacity = this.opacity / 100;
            this.style.opacity = this.opacity / 100;
        },
        compute: function(options) {
            var ss = (options.replace(/ /g, "")).split(";");
            var privates = {};
            for (var i = 0; i < ss.length;++i) {
                var s = ss[i].split(":");
                while (1) {
                    if (s[0].indexOf("-") != -1) {
                        s[0] = s[0].replace(new RegExp(s[0].substr(s[0].indexOf("-"), 2), "g"), (s[0].substr(s[0].indexOf("-"), 2))[1].toUpperCase());
                    } else {
                        break;
                    }
                }
                privates[s[0]] = [s[0], s[1]];
            }
            if (arguments[1] !== undefined)
                privates.callback = arguments[1];
            styles.push(privates);
        },
        start: function(dur) {
            if (!this.pause) {
                if (counter < styles.length) {
                    for (var i in styles[counter]) {
                        this.style[styles[counter][i][0]] = styles[counter][i][1];
                    }
                    if (styles[counter].callback !== undefined)(styles[counter].callback).apply(this);
                    setTimeout((function(effect) {
                        return function() {
                            effect.start(dur);
                        };
                    })(this), (typeof styles[counter].delay == "string") ? Math.floor(durations[dur] / styles.length) : Math.floor(dur / styles.length));
                    counter++;
                } else {
                    if (this.autodelete)
                        this.reset();
                    else
                        counter = 0;
                    if (!this.autodelete && this.loop)
                        this.start(dur);
                }
            } else {
                this.pause = false;
            }
        },
        stop: function() {
            this.pause = true;
        },
        reset: function() {
            styles = [];
            counter = 0;
        },
        addEvent: function(ev, response) {
            if (this.element.addEventListener)
                this.element.addEventListener(ev, response, false);
            else if (this.element.attachEvent) {
                var res = function() {
                    response.apply(this.element);
                };
                this.element.attachEvent("on" + ev, res);
            } else
                this.element["on" + ev] = response;
        },
        addEvents: function(evs, response) {
            for (var i = 0; i < evs.length;++i)
                this.addEvent(evs[i], response);
        },
        constructor: Effect
    };
    return Effect;
})();

Definition: (suggested method)

Code:

var myElement;

onload = function() {
    myElement = new Effect("elementId");
};

It is strictly imperative that new Effect("elementId") is placed WITHIN the brackets of the onload code block. Leave the variable myElement OUTSIDE to keep it a global variable. Of course, this is not the only method of definition, but suggested because it is quick and simple. Please don't forget that onload can only be used within the global namespace. If you place it in a local namespace, it will not be recognized; to fix this, include the parent object window like this: window.onload

Jasoop is always being improved. Please check here for the latest updates. If you have any questions, suggestions, ideas, or code modifications/additions to make Jasoop better, feel free to PM or e-mail me.