mailr/public/javascripts/effects2.js

// Copyright (c) 2005 Thomas Fuchs (http://mir.aculo.us)
// 
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// 
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
// 
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


	Effect2 = {}
	
	/* ------------- transitions ------------- */

	Effect2.Transitions = {}
	Effect2.Transitions.linear = function(pos) {
		return pos;
	}
	Effect2.Transitions.sinoidal = function(pos) {
		return (-Math.cos(pos*Math.PI)/2) + 0.5;
	}
	Effect2.Transitions.reverse  = function(pos) {
		return 1-pos;
	}
	Effect2.Transitions.flicker = function(pos) {
		return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random(0.25);
	}
	Effect2.Transitions.wobble = function(pos) {
		return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
	}
	
	/* ------------- core effects ------------- */

	Effect2.Base = function() {};
	Effect2.Base.prototype = {
	  setOptions: function(options) {
	    this.options = {
	      transition: Effect2.Transitions.sinoidal,
	      duration:   1.0,   // seconds
	      fps:        25.0,  // max. 100fps
	      sync:       false, // true for combining
	      from:       0.0,
	      to:         1.0
	    }.extend(options || {});
	  },
	  start: function(options) {
	    this.setOptions(options || {});
	    this.currentFrame    = 0;
		  this.startOn  = new Date().getTime();
		  this.finishOn = this.startOn + (this.options.duration*1000);
		  if(this.options.beforeStart) this.options.beforeStart(this);
	    if(!this.options.sync) this.loop();	
	  },
	  loop: function() {
		 timePos = new Date().getTime();
		 if(timePos >= this.finishOn) {
			this.render(this.options.to);
			if(this.finish) this.finish(); 
			if(this.options.afterFinish) this.options.afterFinish(this);
			return;	
		 }
		 pos   = (timePos - this.startOn) / (this.finishOn - this.startOn);
		 frame = Math.round(pos * this.options.fps * this.options.duration);
		 if(frame > this.currentFrame) {
			this.render(pos);
			this.currentFrame = frame;
		 }
		 this.timeout = setTimeout(this.loop.bind(this), 10);
	  },
	  render: function(pos) {
		 if(this.options.transition) pos = this.options.transition(pos);
	  	 pos  = pos * (this.options.to-this.options.from);
	     pos += this.options.from; 
	  	 if(this.options.beforeUpdate) this.options.beforeUpdate(this);
	  	 if(this.update) this.update(pos);
	  	 if(this.options.afterUpdate) this.options.afterUpdate(this);	
	  },
	  cancel: function() {
		 if(this.timeout) clearTimeout(this.timeout);
	  }
	}
	
	Effect2.Parallel = Class.create();
		Effect2.Parallel.prototype = (new Effect2.Base()).extend({
		  initialize: function(effects) {
		    this.effects = effects || [];
		  	 this.start(arguments[1]);
		  },
		  update: function(position) {
		  	 for (var i = 0; i < this.effects.length; i++)
		  		this.effects[i].render(position);	
		  },
		  finish: function(position) {
		  	 for (var i = 0; i < this.effects.length; i++)
		  	  	if(this.effects[i].finish) this.effects[i].finish(position);
		  }
		});

  Effect2.Opacity = Class.create();
  Effect2.Opacity.prototype = (new Effect2.Base()).extend({
	  initialize: function() {
	    this.element = $(arguments[0] || document.rootElement);
	    options = {
	      from: 0.0,
	      to:   1.0
	  	}.extend(arguments[1] || {});
	  	this.start(options);
	  },
	  update: function(position) {
	  	this.setOpacity(position);
	  }, 
	  setOpacity: function(opacity) {
	  	opacity = (opacity == 1) ? 0.99999 : opacity;
	  	this.element.style.opacity = opacity;
	  	this.element.style.filter = "alpha(opacity:"+opacity*100+")";
	  }
	});

	Effect2.MoveBy = Class.create();
   Effect2.MoveBy.prototype = (new Effect2.Base()).extend({
     initialize: function(element, toTop, toLeft) {
     	 this.element      = $(element);
    	 this.originalTop  = 
         this.element.style.top ? parseFloat(this.element.style.top) : 0;
       this.originalLeft = 
         this.element.style.left ? parseFloat(this.element.style.left) : 0;
       this.toTop        = toTop;
     	 this.toLeft       = toLeft;
       if(this.element.style.position == "")
         this.element.style.position = "relative";
       this.start(arguments[3]);
     },
     update: function(position) {
	    topd  = this.toTop  * position + this.originalTop;
	    leftd = this.toLeft * position + this.originalLeft;
   	 this.setPosition(topd, leftd);
     },
     setPosition: function(topd, leftd) {
     	 this.element.style.top  = topd  + "px";
       this.element.style.left = leftd + "px";
     }
	});

	Effect2.Scale = Class.create();
	Effect2.Scale.prototype = (new Effect2.Base()).extend({
	  initialize: function(element, percent) {
	    this.element = $(element)
	    options = {
	      scaleX: true,
	      scaleY: true,
	      scaleContent: true,
	      scaleFromCenter: false,
	      scaleMode: 'box',        // 'box' or 'contents'
	      scaleFrom: 100.0
	    }.extend(arguments[2] || {});
	    this.originalTop    = this.element.offsetTop;
	    this.originalLeft   = this.element.offsetLeft;
	    if (this.element.style.fontSize=="") this.sizeEm = 1.0;
	    if (this.element.style.fontSize && this.element.style.fontSize.indexOf("em")>0)
	       this.sizeEm      = parseFloat(this.element.style.fontSize);
	    this.factor = (percent/100.0) - (options.scaleFrom/100.0);
	    if(options.scaleMode=='box') {
	      this.originalHeight = this.element.clientHeight;
	      this.originalWidth  = this.element.clientWidth; 
	    } else 
	    if(options.scaleMode=='contents') {
	      this.originalHeight = this.element.scrollHeight;
	      this.originalWidth  = this.element.scrollWidth;
	    }
	    this.start(options);
	  },

	  update: function(position) {
	    currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
	    if(this.options.scaleContent && this.sizeEm) 
	      this.element.style.fontSize = this.sizeEm*currentScale + "em";
	    this.setDimensions(
		   this.originalWidth * currentScale, 
		   this.originalHeight * currentScale);
	  },

	  setDimensions: function(width, height) {
	    if(this.options.scaleX) this.element.style.width = width + 'px';
	    if(this.options.scaleY) this.element.style.height = height + 'px';
	    if(this.options.scaleFromCenter) {
	      topd  = (height - this.originalHeight)/2;
	      leftd = (width  - this.originalWidth)/2;
	      if(this.element.style.position=='absolute') {
	        if(this.options.scaleY) this.element.style.top = this.originalTop-topd + "px";
	        if(this.options.scaleX) this.element.style.left = this.originalLeft-leftd + "px";
	      } else {
	        if(this.options.scaleY) this.element.style.top = -topd + "px";
	        if(this.options.scaleX) this.element.style.left = -leftd + "px";
	      }
	    }
	  }
	});
	
	/* ------------- prepackaged effects ------------- */
	
	Effect2.Fade =	function(element) {
		  options = {
			from: 1.0,
			to:   0.0,
			afterFinish: function(effect) 
			  { Element.hide(effect.element);
			    effect.setOpacity(1); } 
			}.extend(arguments[1] || {});
		  new Effect2.Opacity(element,options);
		}

Effect2.Appear =	function(element) {
  options = {
  from: 0.0,
  to:   1.0,
  beforeStart: function(effect)  
    { effect.setOpacity(0);
      Element.show(effect.element); },
  afterUpdate: function(effect)  
    { Element.show(effect.element); }
  }.extend(arguments[1] || {});
  new Effect2.Opacity(element,options);
}

	Effect2.Puff = function(element) {
	  new Effect2.Parallel(
	   [ new Effect2.Scale(element, 200, { sync: true, scaleFromCenter: true }), 
	     new Effect2.Opacity(element, { sync: true, to: 0.0, from: 1.0 } ) ], 
	     { duration: 1.0, 
		    afterUpdate: function(effect) 
		     { effect.effects[0].element.style.position = 'absolute'; },
		    afterFinish: function(effect)
		     { Element.hide(effect.effects[0].element); }
	     }
     );
	}

	Effect2.BlindUp = function(element) {
	  $(element).style.overflow = 'hidden';
	  new Effect2.Scale(element, 0, 
	    { scaleContent: false, 
        scaleX: false, 
        afterFinish: function(effect) 
          { Element.hide(effect.element) } 
      }.extend(arguments[1] || {})
	  );
	}

	Effect2.BlindDown = function(element) {
	  $(element).style.height   = '0px';
	  $(element).style.overflow = 'hidden';
	  Element.show(element);
	  new Effect2.Scale(element, 100, 
		  { scaleContent: false, 
			  scaleX: false, 
			  scaleMode: 'contents',
			  scaleFrom: 0
	    }.extend(arguments[1] || {})
	  );
	}

	Effect2.SwitchOff = function(element) {
		new Effect2.Appear(element,
		  { duration: 0.4,
			 transition: Effect2.Transitions.flicker,
			 afterFinish: function(effect)
			  {  effect.element.style.overflow = 'hidden';
				  new Effect2.Scale(effect.element, 1, 
				   { duration: 0.3, scaleFromCenter: true,
					  scaleX: false, scaleContent: false,
					  afterUpdate: function(effect) { 
						 if(effect.element.style.position=="")
						   effect.element.style.position = 'relative'; },
					  afterFinish: function(effect) { Element.hide(effect.element); }
				   } )
			  }
		  } )
	}

	Effect2.DropOut = function(element) {
		new Effect2.Parallel(
		  [ new Effect2.MoveBy(element, 100, 0, { sync: true }), 
		    new Effect2.Opacity(element, { sync: true, to: 0.0, from: 1.0 } ) ], 
		  { duration: 0.5, 
			 afterFinish: function(effect)
			   { Element.hide(effect.effects[0].element); } 
		  });
	}

	Effect2.Shake = function(element) {
		new Effect2.MoveBy(element, 0, 20, 
		  { duration: 0.05, afterFinish: function(effect) {
		new Effect2.MoveBy(effect.element, 0, -40, 
		  { duration: 0.1, afterFinish: function(effect) { 
		new Effect2.MoveBy(effect.element, 0, 40, 
		  { duration: 0.1, afterFinish: function(effect) {	
		new Effect2.MoveBy(effect.element, 0, -40, 
		  { duration: 0.1, afterFinish: function(effect) {	
		new Effect2.MoveBy(effect.element, 0, 40, 
		  { duration: 0.1, afterFinish: function(effect) {	
		new Effect2.MoveBy(effect.element, 0, -20, 
		  { duration: 0.05, afterFinish: function(effect) {	
		}}) }}) }}) }}) }}) }});
	}
	
	Effect2.SlideDown = function(element) {
		  $(element).style.height   = '0px';
		  $(element).style.overflow = 'hidden';
		  $(element).firstChild.style.position = 'relative';
		  Element.show(element);
		  new Effect2.Scale(element, 100, 
			 { scaleContent: false, 
				scaleX: false, 
				scaleMode: 'contents',
				scaleFrom: 0,
				afterUpdate: function(effect) 
				  { effect.element.firstChild.style.bottom = 
				      (effect.originalHeight - effect.element.clientHeight) + 'px'; }
		    }.extend(arguments[1] || {})
		  );
		}
		
		Effect2.SlideUp = function(element) {
			  $(element).style.overflow = 'hidden';
			  $(element).firstChild.style.position = 'relative';
			  Element.show(element);
			  new Effect2.Scale(element, 0, 
				 { scaleContent: false, 
					scaleX: false, 
					afterUpdate: function(effect) 
					  { effect.element.firstChild.style.bottom = 
					      (effect.originalHeight - effect.element.clientHeight) + 'px'; },
			    afterFinish: function(effect)
			      { Element.hide(effect.element); }
			   }.extend(arguments[1] || {})
			  );
			}