viewing source for "moo.fx.js"
last commit
commit d53d1f4ef49669f8295e08afbabf19eb495e80fb
Date: Mon Jul 24 19:12:43 2006 +0000
source code
001: /*
002: moo.fx, simple effects library built with prototype.js (http://prototype.conio.net).
003: by Valerio Proietti (http://mad4milk.net) MIT-style LICENSE.
004: for more info (http://moofx.mad4milk.net).
005: Sunday, March 05, 2006
006: v 1.2.3
007: */
008:
009: var fx = new Object();
010: //base
011: fx.Base = function(){};
012: fx.Base.prototype = {
013: setOptions: function(options) {
014: this.options = {
015: duration: 500,
016: onComplete: '',
017: transition: fx.sinoidal
018: }
019: Object.extend(this.options, options || {});
020: },
021:
022: step: function() {
023: var time = (new Date).getTime();
024: if (time >= this.options.duration+this.startTime) {
025: this.now = this.to;
026: clearInterval (this.timer);
027: this.timer = null;
028: if (this.options.onComplete) setTimeout(this.options.onComplete.bind(this), 10);
029: }
030: else {
031: var Tpos = (time - this.startTime) / (this.options.duration);
032: this.now = this.options.transition(Tpos) * (this.to-this.from) + this.from;
033: }
034: this.increase();
035: },
036:
037: custom: function(from, to) {
038: if (this.timer != null) return;
039: this.from = from;
040: this.to = to;
041: this.startTime = (new Date).getTime();
042: this.timer = setInterval (this.step.bind(this), 13);
043: },
044:
045: hide: function() {
046: this.now = 0;
047: this.increase();
048: },
049:
050: clearTimer: function() {
051: clearInterval(this.timer);
052: this.timer = null;
053: }
054: }
055:
056: //stretchers
057: fx.Layout = Class.create();
058: fx.Layout.prototype = Object.extend(new fx.Base(), {
059: initialize: function(el, options) {
060: this.el = $(el);
061: this.el.style.overflow = "hidden";
062: this.iniWidth = this.el.offsetWidth;
063: this.iniHeight = this.el.offsetHeight;
064: this.setOptions(options);
065: }
066: });
067:
068: fx.Height = Class.create();
069: Object.extend(Object.extend(fx.Height.prototype, fx.Layout.prototype), {
070: increase: function() {
071: this.el.style.height = this.now + "px";
072: },
073:
074: toggle: function() {
075: if (this.el.offsetHeight > 0) this.custom(this.el.offsetHeight, 0);
076: else this.custom(0, this.el.scrollHeight);
077: }
078: });
079:
080: fx.Width = Class.create();
081: Object.extend(Object.extend(fx.Width.prototype, fx.Layout.prototype), {
082: increase: function() {
083: this.el.style.width = this.now + "px";
084: },
085:
086: toggle: function(){
087: if (this.el.offsetWidth > 0) this.custom(this.el.offsetWidth, 0);
088: else this.custom(0, this.iniWidth);
089: }
090: });
091:
092: //fader
093: fx.Opacity = Class.create();
094: fx.Opacity.prototype = Object.extend(new fx.Base(), {
095: initialize: function(el, options) {
096: this.el = $(el);
097: this.now = 1;
098: this.increase();
099: this.setOptions(options);
100: },
101:
102: increase: function() {
103: if (this.now == 1 && (/Firefox/.test(navigator.userAgent))) this.now = 0.9999;
104: this.setOpacity(this.now);
105: },
106:
107: setOpacity: function(opacity) {
108: if (opacity == 0 && this.el.style.visibility != "hidden") this.el.style.visibility = "hidden";
109: else if (this.el.style.visibility != "visible") this.el.style.visibility = "visible";
110: if (window.ActiveXObject) this.el.style.filter = "alpha(opacity=" + opacity*100 + ")";
111: this.el.style.opacity = opacity;
112: },
113:
114: toggle: function() {
115: if (this.now > 0) this.custom(1, 0);
116: else this.custom(0, 1);
117: }
118: });
119:
120: //transitions
121: fx.sinoidal = function(pos){
122: return ((-Math.cos(pos*Math.PI)/2) + 0.5);
123: //this transition is from script.aculo.us
124: }
125: fx.linear = function(pos){
126: return pos;
127: }
128: fx.cubic = function(pos){
129: return Math.pow(pos, 3);
130: }
131: fx.circ = function(pos){
132: return Math.sqrt(pos);
133: }