actor.js

来自「php绿色服务器,让大家试用greenamp」· JavaScript 代码 · 共 697 行 · 第 1/2 页

    slideShow : function(anchor, newSize, duration, easing, clearPositioning){
        var size = this.getSize();
        this.clip();
        var firstChild = this.dom.firstChild;
        if(!firstChild || (firstChild.nodeName && "#TEXT" == firstChild.nodeName.toUpperCase())) { // can't do a slide with only a textnode
            this.blindShow(anchor, newSize, duration, easing);
            return;
        }
        var child = Ext.get(firstChild, true);
        var pos = child.getPositioning();
        this.addCall(child.position, ["absolute"], child);
        this.setVisible(true);
        anchor = anchor.toLowerCase();
        switch(anchor){
            case "t":
            case "top":
                this.addCall(child.setStyle, ["right", ""], child);
                this.addCall(child.setStyle, ["top", ""], child);
                this.addCall(child.setStyle, ["left", "0px"], child);
                this.addCall(child.setStyle, ["bottom", "0px"], child);
                this.setHeight(1);
                this.setHeight(newSize || size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut);
            break;
            case "l":
            case "left":
                this.addCall(child.setStyle, ["left", ""], child);
                this.addCall(child.setStyle, ["bottom", ""], child);
                this.addCall(child.setStyle, ["right", "0px"], child);
                this.addCall(child.setStyle, ["top", "0px"], child);
                this.setWidth(1);
                this.setWidth(newSize || size.width, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut);
            break;
            case "r":
            case "right":
                this.addCall(child.setStyle, ["left", "0px"], child);
                this.addCall(child.setStyle, ["top", "0px"], child);
                this.addCall(child.setStyle, ["right", ""], child);
                this.addCall(child.setStyle, ["bottom", ""], child);
                this.setWidth(1);
                this.setWidth(newSize || size.width, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut);
            break;
            case "b":
            case "bottom":
                this.addCall(child.setStyle, ["right", ""], child);
                this.addCall(child.setStyle, ["top", "0px"], child);
                this.addCall(child.setStyle, ["left", "0px"], child);
                this.addCall(child.setStyle, ["bottom", ""], child);
                this.setHeight(1);
                this.setHeight(newSize || size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut);
            break;
        }
        if(clearPositioning !== false){
          this.addCall(child.setPositioning, [pos], child);
        }
        this.unclip();
        return size;
    },
    
    /**
    * Hide the element using a "slide in" effect - In order for this effect to work the element MUST have a child element container that can be "slid" otherwise a blindHide effect is rendered. 
    * @param {String} anchor The part of the element that it should appear to slide to.
                            The short/long options are t/top, l/left, b/bottom, r/right.
    * @param {Float} duration (optional) How long the effect lasts (in seconds)
    * @param {Function} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeIn)
    */
    slideHide : function(anchor, duration, easing){
        var size = this.getSize();
        this.clip();
        var firstChild = this.dom.firstChild;
        if(!firstChild || (firstChild.nodeName && "#TEXT" == firstChild.nodeName.toUpperCase())) { // can't do a slide with only a textnode
            this.blindHide(anchor, duration, easing);
            return;
        }
        var child = Ext.get(firstChild, true);
        var pos = child.getPositioning();
        this.addCall(child.position, ["absolute"], child);
        anchor = anchor.toLowerCase();
        switch(anchor){
            case "t":
            case "top":
                this.addCall(child.setStyle, ["right", ""], child);
                this.addCall(child.setStyle, ["top", ""], child);
                this.addCall(child.setStyle, ["left", "0px"], child);
                this.addCall(child.setStyle, ["bottom", "0px"], child);
                this.setSize(size.width, 1, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn);
                this.setVisible(false);
            break;
            case "l":
            case "left":
                this.addCall(child.setStyle, ["left", ""], child);
                this.addCall(child.setStyle, ["bottom", ""], child);
                this.addCall(child.setStyle, ["right", "0px"], child);
                this.addCall(child.setStyle, ["top", "0px"], child);
                this.setSize(1, size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn);
                this.setVisible(false);
            break;
            case "r":
            case "right":
                this.addCall(child.setStyle, ["right", ""], child);
                this.addCall(child.setStyle, ["bottom", ""], child);
                this.addCall(child.setStyle, ["left", "0px"], child);
                this.addCall(child.setStyle, ["top", "0px"], child);
                this.setSize(1, size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn);
                this.setVisible(false);
            break;
            case "b":
            case "bottom":
                this.addCall(child.setStyle, ["right", ""], child);
                this.addCall(child.setStyle, ["top", "0px"], child);
                this.addCall(child.setStyle, ["left", "0px"], child);
                this.addCall(child.setStyle, ["bottom", ""], child);
                this.setSize(size.width, 1, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn);
                this.setVisible(false);
            break;
        }
        this.addCall(child.setPositioning, [pos], child);
        return size;
    },
    
    /**
    * Hide the element by "squishing" it into the corner
    * @param {Float} duration (optional) How long the effect lasts (in seconds)
    */
    squish : function(duration){
        var size = this.getSize();
        this.clip();
        this.setSize(1, 1, true, duration || .5);
        this.setVisible(false);
        return size;
    },
    
    /**
    * Fade an element in
    * @param {Float} duration (optional) How long the effect lasts (in seconds)
    */
    appear : function(duration){
        this.setVisible(true, true, duration);
        return this;
    },
    
    /**
    * Fade an element out
    * @param {Float} duration (optional) How long the effect lasts (in seconds)
    */
    fade : function(duration){
        this.setVisible(false, true, duration);
        return this;
    },
    
    /**
    * Blink the element as if it was clicked and then collapse on its center
    * @param {Float} duration (optional) How long the effect lasts (in seconds)
    */
    switchOff : function(duration){
        this.clip();
        this.setOpacity(0.3, true, 0.1);
        this.clearOpacity();
        this.setVisible(true);
        this.pause(0.1);
        this.animate({height:{to:1}, points:{by:[0, this.getHeight() / 2]}}, duration || 0.3, null, YAHOO.util.Easing.easeIn, YAHOO.util.Motion);
        this.setVisible(false);
        return this;
    },
    
    /**
    * Fade the element in and out the specified amount of times
    * @param {Number} count (optional) How many times to pulse (Defaults to 3)
    * @param {Float} duration (optional) How long the effect lasts (in seconds)
    */
    pulsate : function(count, duration){
        count = count || 3;
        for(var i = 0; i < count; i++){
            this.toggle(true, duration || .25);
            this.toggle(true, duration || .25);
        }
        return this;
    },
    
    /**
    * Fade the element as it is falling from its current position
    * @param {Float} duration (optional) How long the effect lasts (in seconds)
    */
    dropOut : function(duration){
        this.animate({opacity: {to: 0}, points: {by: [0, this.getHeight()]}}, 
                duration || .5, null, YAHOO.util.Easing.easeIn, YAHOO.util.Motion);
        this.setVisible(false);
        return this;
    },
    
    /**
    * Hide the element in a way that it appears as if it is flying off the screen
    * @param {String} anchor The part of the page that the element should appear to move to. 
                            The short/long options are t/top, l/left, b/bottom, r/right, tl/top-left, 
                            tr/top-right, bl/bottom-left or br/bottom-right.
    * @param {Float} duration (optional) How long the effect lasts (in seconds)
    * @param {Function} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeIn)
    */
    moveOut : function(anchor, duration, easing){
        var Y = YAHOO.util;
        var vw = Y.Dom.getViewportWidth();
        var vh = Y.Dom.getViewportHeight();
        var cpoints = this.getCenterXY();
        var centerX = cpoints[0];
        var centerY = cpoints[1];
        anchor = anchor.toLowerCase();
        var p;
        switch(anchor){
            case "t":
            case "top":
                p = [centerX, -this.getHeight()];
            break;
            case "l":
            case "left":
                p = [-this.getWidth(), centerY];
            break;
            case "r":
            case "right":
                p = [vw+this.getWidth(), centerY];
            break;
            case "b":
            case "bottom":
                p = [centerX, vh+this.getHeight()];
            break;
            case "tl":
            case "top-left":
                p = [-this.getWidth(), -this.getHeight()];
            break;
            case "bl":
            case "bottom-left":
                p = [-this.getWidth(), vh+this.getHeight()];
            break;
            case "br":
            case "bottom-right":
                p = [vw+this.getWidth(), vh+this.getHeight()];
            break;
            case "tr":
            case "top-right":
                p = [vw+this.getWidth(), -this.getHeight()];
            break;
        }
        this.moveTo(p[0], p[1], true, duration || .35, null, easing || Y.Easing.easeIn);
        this.setVisible(false);
        return this;
    },
    
    /**
    * Show the element in a way that it appears as if it is flying onto the screen
    * @param {String} anchor The part of the page that the element should appear to move from. 
                            The short/long options are t/top, l/left, b/bottom, r/right, tl/top-left, 
                            tr/top-right, bl/bottom-left or br/bottom-right.
    * @param {Array} to (optional) Array of x and y position to move to like [x, y] (Defaults to center screen)
    * @param {Float} duration (optional) How long the effect lasts (in seconds)
    * @param {Function} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeOut)
    */
    moveIn : function(anchor, to, duration, easing){
        to = to || this.getCenterXY();
        this.moveOut(anchor, .01);
        this.setVisible(true);
        this.setXY(to, true, duration || .35, null, easing || YAHOO.util.Easing.easeOut);
        return this;
    },
    /**
    * Show a ripple of exploding, attenuating borders to draw attention to an Element.
    * @param {Number<i>} color (optional) The color of the border.
    * @param {Number} count (optional) How many ripples.
    * @param {Float} duration (optional) How long each ripple takes to expire
    */
    frame : function(color, count, duration){
        color = color || "red";
        count = count || 3;
        duration = duration || .5;
        var frameFn = function(callback){
            var box = this.getBox();
            var animFn = function(){ 
                var proxy = this.createProxy({
                     tag:"div",
                     style:{
                        visbility:"hidden",
                        position:"absolute",
                        "z-index":"35000", // yee haw
                        border:"0px solid " + color
                     }
                  });
                var scale = proxy.isBorderBox() ? 2 : 1;
                proxy.animate({
                    top:{from:box.y, to:box.y - 20},
                    left:{from:box.x, to:box.x - 20},
                    borderWidth:{from:0, to:10},
                    opacity:{from:1, to:0},
                    height:{from:box.height, to:(box.height + (20*scale))},
                    width:{from:box.width, to:(box.width + (20*scale))}
                }, duration, function(){
                    proxy.remove();
                });
                if(--count > 0){
                     animFn.defer((duration/2)*1000, this);
                }else{
                    if(typeof callback == "function"){
                        callback();
                    }
                }
           }
           animFn.call(this);
       }
       this.addAsyncCall(frameFn, 0, null, this);
       return this;
    }
});

})();

Ext.Actor.Action = function(actor, method, args){
      this.actor = actor;
      this.method = method;
      this.args = args;
  }
  
Ext.Actor.Action.prototype = {
    play : function(onComplete){
        this.method.apply(this.actor || window, this.args);
        onComplete();
    }  
};


Ext.Actor.AsyncAction = function(actor, method, args, onIndex){
    Ext.Actor.AsyncAction.superclass.constructor.call(this, actor, method, args);
    this.onIndex = onIndex;
    this.originalCallback = this.args[onIndex];
}
Ext.extend(Ext.Actor.AsyncAction, Ext.Actor.Action, {
    play : function(onComplete){
        var callbackArg = this.originalCallback ? 
                            this.originalCallback.createSequence(onComplete) : onComplete;
        this.args[this.onIndex] = callbackArg;
        this.method.apply(this.actor, this.args);
    }
});


Ext.Actor.PauseAction = function(seconds){
    this.seconds = seconds;
};
Ext.Actor.PauseAction.prototype = {
    play : function(onComplete){
        setTimeout(onComplete, this.seconds * 1000);
    }
};