API: container ContainerEffect.js (YUI Library)

# Yahoo! UI Library

### Container 2.2.2

Yahoo! UI Library > container > ContainerEffect.js (source view)

    /**
    * ContainerEffect encapsulates animation transitions that are executed when an Overlay is shown or hidden.
    * @namespace YAHOO.widget
    * @class ContainerEffect
    * @constructor
    * @param {YAHOO.widget.Overlay}	overlay		The Overlay that the animation should be associated with
    * @param {Object}	attrIn		The object literal representing the animation arguments to be used for the animate-in transition. The arguments for this literal are: attributes(object, see YAHOO.util.Anim for description), duration(Number), and method(i.e. YAHOO.util.Easing.easeIn).
    * @param {Object}	attrOut		The object literal representing the animation arguments to be used for the animate-out transition. The arguments for this literal are: attributes(object, see YAHOO.util.Anim for description), duration(Number), and method(i.e. YAHOO.util.Easing.easeIn).
    * @param {HTMLElement}	targetElement	Optional. The target element that should be animated during the transition. Defaults to overlay.element.
    * @param {class}	Optional. The animation class to instantiate. Defaults to YAHOO.util.Anim. Other options include YAHOO.util.Motion.
    */
    YAHOO.widget.ContainerEffect = function(overlay, attrIn, attrOut, targetElement, animClass) {
    	if (! animClass) {
    		animClass = YAHOO.util.Anim;
    	}

    	/**
    	* The overlay to animate
    	* @property overlay
    	* @type YAHOO.widget.Overlay
    	*/
    	this.overlay = overlay;
    	/**
    	* The animation attributes to use when transitioning into view
    	* @property attrIn
    	* @type Object
    	*/
    	this.attrIn = attrIn;
    	/**
    	* The animation attributes to use when transitioning out of view
    	* @property attrOut
    	* @type Object
    	*/
    	this.attrOut = attrOut;
    	/**
    	* The target element to be animated
    	* @property targetElement
    	* @type HTMLElement
    	*/
    	this.targetElement = targetElement || overlay.element;
    	/**
    	* The animation class to use for animating the overlay
    	* @property animClass
    	* @type class
    	*/
    	this.animClass = animClass;
    };

    /**
    * Initializes the animation classes and events.
    * @method init
    */
    YAHOO.widget.ContainerEffect.prototype.init = function() {
    	this.beforeAnimateInEvent = new YAHOO.util.CustomEvent("beforeAnimateIn", this);
    	this.beforeAnimateOutEvent = new YAHOO.util.CustomEvent("beforeAnimateOut", this);

    	this.animateInCompleteEvent = new YAHOO.util.CustomEvent("animateInComplete", this);
    	this.animateOutCompleteEvent = new YAHOO.util.CustomEvent("animateOutComplete", this);

    	this.animIn = new this.animClass(this.targetElement, this.attrIn.attributes, this.attrIn.duration, this.attrIn.method);
    	this.animIn.onStart.subscribe(this.handleStartAnimateIn, this);
    	this.animIn.onTween.subscribe(this.handleTweenAnimateIn, this);
    	this.animIn.onComplete.subscribe(this.handleCompleteAnimateIn, this);

    	this.animOut = new this.animClass(this.targetElement, this.attrOut.attributes, this.attrOut.duration, this.attrOut.method);
    	this.animOut.onStart.subscribe(this.handleStartAnimateOut, this);
    	this.animOut.onTween.subscribe(this.handleTweenAnimateOut, this);
    	this.animOut.onComplete.subscribe(this.handleCompleteAnimateOut, this);
    };

    /**
    * Triggers the in-animation.
    * @method animateIn
    */
    YAHOO.widget.ContainerEffect.prototype.animateIn = function() {
    	this.beforeAnimateInEvent.fire();
    	this.animIn.animate();
    };

    /**
    * Triggers the out-animation.
    * @method animateOut
    */
    YAHOO.widget.ContainerEffect.prototype.animateOut = function() {
    	this.beforeAnimateOutEvent.fire();
    	this.animOut.animate();
    };

    /**
    * The default onStart handler for the in-animation.
    * @method handleStartAnimateIn
    * @param {String} type	The CustomEvent type
    * @param {Object[]}	args	The CustomEvent arguments
    * @param {Object} obj	The scope object
    */
    YAHOO.widget.ContainerEffect.prototype.handleStartAnimateIn = function(type, args, obj) { };
    /**
    * The default onTween handler for the in-animation.
    * @method handleTweenAnimateIn
    * @param {String} type	The CustomEvent type
    * @param {Object[]}	args	The CustomEvent arguments
    * @param {Object} obj	The scope object
    */
    YAHOO.widget.ContainerEffect.prototype.handleTweenAnimateIn = function(type, args, obj) { };
    /**
    * The default onComplete handler for the in-animation.
    * @method handleCompleteAnimateIn
    * @param {String} type	The CustomEvent type
    * @param {Object[]}	args	The CustomEvent arguments
    * @param {Object} obj	The scope object
    */
    YAHOO.widget.ContainerEffect.prototype.handleCompleteAnimateIn = function(type, args, obj) { };

    /**
    * The default onStart handler for the out-animation.
    * @method handleStartAnimateOut
    * @param {String} type	The CustomEvent type
    * @param {Object[]}	args	The CustomEvent arguments
    * @param {Object} obj	The scope object
    */
    YAHOO.widget.ContainerEffect.prototype.handleStartAnimateOut = function(type, args, obj) { };
    /**
    * The default onTween handler for the out-animation.
    * @method handleTweenAnimateOut
    * @param {String} type	The CustomEvent type
    * @param {Object[]}	args	The CustomEvent arguments
    * @param {Object} obj	The scope object
    */
    YAHOO.widget.ContainerEffect.prototype.handleTweenAnimateOut = function(type, args, obj) { };
    /**
    * The default onComplete handler for the out-animation.
    * @method handleCompleteAnimateOut
    * @param {String} type	The CustomEvent type
    * @param {Object[]}	args	The CustomEvent arguments
    * @param {Object} obj	The scope object
    */
    YAHOO.widget.ContainerEffect.prototype.handleCompleteAnimateOut = function(type, args, obj) { };

    /**
    * Returns a string representation of the object.
    * @method toString
    * @return {String}	The string representation of the ContainerEffect
    */
    YAHOO.widget.ContainerEffect.prototype.toString = function() {
    	var output = "ContainerEffect";
    	if (this.overlay) {
    		output += " [" + this.overlay.toString() + "]";
    	}
    	return output;
    };

    /**
    * A pre-configured ContainerEffect instance that can be used for fading an overlay in and out.
    * @method FADE
    * @static
    * @param {Overlay}	overlay	The Overlay object to animate
    * @param {Number}	dur	The duration of the animation
    * @return {ContainerEffect}	The configured ContainerEffect object
    */
    YAHOO.widget.ContainerEffect.FADE = function(overlay, dur) {
    	var fade = new YAHOO.widget.ContainerEffect(overlay, { attributes:{opacity: {from:0, to:1}}, duration:dur, method:YAHOO.util.Easing.easeIn }, { attributes:{opacity: {to:0}}, duration:dur, method:YAHOO.util.Easing.easeOut}, overlay.element );

    	fade.handleStartAnimateIn = function(type,args,obj) {
    		YAHOO.util.Dom.addClass(obj.overlay.element, "hide-select");

    		if (! obj.overlay.underlay) {
    			obj.overlay.cfg.refireEvent("underlay");
    		}

    		if (obj.overlay.underlay) {
    			obj.initialUnderlayOpacity = YAHOO.util.Dom.getStyle(obj.overlay.underlay, "opacity");
    			obj.overlay.underlay.style.filter = null;
    		}

    		YAHOO.util.Dom.setStyle(obj.overlay.element, "visibility", "visible");
    		YAHOO.util.Dom.setStyle(obj.overlay.element, "opacity", 0);
    	};

    	fade.handleCompleteAnimateIn = function(type,args,obj) {
    		YAHOO.util.Dom.removeClass(obj.overlay.element, "hide-select");

    		if (obj.overlay.element.style.filter) {
    			obj.overlay.element.style.filter = null;
    		}

    		if (obj.overlay.underlay) {
    			YAHOO.util.Dom.setStyle(obj.overlay.underlay, "opacity", obj.initialUnderlayOpacity);
    		}

    		obj.overlay.cfg.refireEvent("iframe");
    		obj.animateInCompleteEvent.fire();
    	};

    	fade.handleStartAnimateOut = function(type, args, obj) {
    		YAHOO.util.Dom.addClass(obj.overlay.element, "hide-select");

    		if (obj.overlay.underlay) {
    			obj.overlay.underlay.style.filter = null;
    		}
    	};

    	fade.handleCompleteAnimateOut =  function(type, args, obj) {
    		YAHOO.util.Dom.removeClass(obj.overlay.element, "hide-select");
    		if (obj.overlay.element.style.filter) {
    			obj.overlay.element.style.filter = null;
    		}
    		YAHOO.util.Dom.setStyle(obj.overlay.element, "visibility", "hidden");
    		YAHOO.util.Dom.setStyle(obj.overlay.element, "opacity", 1);

    		obj.overlay.cfg.refireEvent("iframe");

    		obj.animateOutCompleteEvent.fire();
    	};

    	fade.init();
    	return fade;
    };

    /**
    * A pre-configured ContainerEffect instance that can be used for sliding an overlay in and out.
    * @method SLIDE
    * @static
    * @param {Overlay}	overlay	The Overlay object to animate
    * @param {Number}	dur	The duration of the animation
    * @return {ContainerEffect}	The configured ContainerEffect object
    */
    YAHOO.widget.ContainerEffect.SLIDE = function(overlay, dur) {
    	var x = overlay.cfg.getProperty("x") || YAHOO.util.Dom.getX(overlay.element);
    	var y = overlay.cfg.getProperty("y") || YAHOO.util.Dom.getY(overlay.element);

    	var clientWidth = YAHOO.util.Dom.getClientWidth();
    	var offsetWidth = overlay.element.offsetWidth;

    	var slide = new YAHOO.widget.ContainerEffect(overlay, {
    															attributes:{ points: { to:[x, y] } },
    															duration:dur,
    															method:YAHOO.util.Easing.easeIn
    														},
    														{
    															attributes:{ points: { to:[(clientWidth+25), y] } },
    															duration:dur,
    															method:YAHOO.util.Easing.easeOut
    														},
    														overlay.element,
    														YAHOO.util.Motion);

    	slide.handleStartAnimateIn = function(type,args,obj) {
    		obj.overlay.element.style.left = (-25-offsetWidth) + "px";
    		obj.overlay.element.style.top  = y + "px";
    	};

    	slide.handleTweenAnimateIn = function(type, args, obj) {

    		var pos = YAHOO.util.Dom.getXY(obj.overlay.element);

    		var currentX = pos[0];
    		var currentY = pos[1];

    		if (YAHOO.util.Dom.getStyle(obj.overlay.element, "visibility") == "hidden" && currentX < x) {
    			YAHOO.util.Dom.setStyle(obj.overlay.element, "visibility", "visible");
    		}

    		obj.overlay.cfg.setProperty("xy", [currentX,currentY], true);
    		obj.overlay.cfg.refireEvent("iframe");
    	};

    	slide.handleCompleteAnimateIn = function(type, args, obj) {
    		obj.overlay.cfg.setProperty("xy", [x,y], true);
    		obj.startX = x;
    		obj.startY = y;
    		obj.overlay.cfg.refireEvent("iframe");
    		obj.animateInCompleteEvent.fire();
    	};

    	slide.handleStartAnimateOut = function(type, args, obj) {
    		var vw = YAHOO.util.Dom.getViewportWidth();

    		var pos = YAHOO.util.Dom.getXY(obj.overlay.element);

    		var yso = pos[1];

    		var currentTo = obj.animOut.attributes.points.to;
    		obj.animOut.attributes.points.to = [(vw+25), yso];
    	};

    	slide.handleTweenAnimateOut = function(type, args, obj) {
    		var pos = YAHOO.util.Dom.getXY(obj.overlay.element);

    		var xto = pos[0];
    		var yto = pos[1];

    		obj.overlay.cfg.setProperty("xy", [xto,yto], true);
    		obj.overlay.cfg.refireEvent("iframe");
    	};

    	slide.handleCompleteAnimateOut = function(type, args, obj) {
    		YAHOO.util.Dom.setStyle(obj.overlay.element, "visibility", "hidden");

    		obj.overlay.cfg.setProperty("xy", [x,y]);
    		obj.animateOutCompleteEvent.fire();
    	};

    	slide.init();
    	return slide;
    };

Copyright © 2007 Yahoo! Inc. All rights reserved.