res/js/moo.fx.js

   1 /*\r
   2 moo.fx, simple effects library built with prototype.js (http://prototype.conio.net).\r
   3 by Valerio Proietti (http://mad4milk.net) MIT-style LICENSE.\r
   4 for more info (http://moofx.mad4milk.net).\r
   5 10/24/2005\r
   6 v(1.0.2)\r
   7 */\r
   8 \r
   9 //base\r
  10 var fx = new Object();\r
  11 fx.Base = function(){};\r
  12 fx.Base.prototype = {\r
  13         setOptions: function(options) {\r
  14         this.options = {\r
  15                 duration: 500,\r
  16                 onComplete: ''\r
  17         }\r
  18         Object.extend(this.options, options || {});\r
  19         },\r
  20 \r
  21         go: function() {\r
  22                 this.duration = this.options.duration;\r
  23                 this.startTime = (new Date).getTime();\r
  24                 this.timer = setInterval (this.step.bind(this), 13);\r
  25         },\r
  26 \r
  27         step: function() {\r
  28                 var time  = (new Date).getTime();\r
  29                 var Tpos   = (time - this.startTime) / (this.duration);\r
  30                 if (time >= this.duration+this.startTime) {\r
  31                         this.now = this.to;\r
  32                         clearInterval (this.timer);\r
  33                         this.timer = null;\r
  34                         if (this.options.onComplete) setTimeout(this.options.onComplete.bind(this), 10);\r
  35                 }\r
  36                 else {\r
  37                         this.now = ((-Math.cos(Tpos*Math.PI)/2) + 0.5) * (this.to-this.from) + this.from;\r
  38                         //this time-position, sinoidal transition thing is from script.aculo.us\r
  39                 }\r
  40                 this.increase();\r
  41         },\r
  42 \r
  43         custom: function(from, to) {\r
  44                 if (this.timer != null) return;\r
  45                 this.from = from;\r
  46                 this.to = to;\r
  47                 this.go();\r
  48         },\r
  49 \r
  50         hide: function() {\r
  51                 this.now = 0;\r
  52                 this.increase();\r
  53         },\r
  54 \r
  55         clearTimer: function() {\r
  56                 clearInterval(this.timer);\r
  57                 this.timer = null;\r
  58         }\r
  59 }\r
  60 \r
  61 //stretchers\r
  62 fx.Layout = Class.create();\r
  63 fx.Layout.prototype = Object.extend(new fx.Base(), {\r
  64         initialize: function(el, options) {\r
  65                 this.el = $(el);\r
  66                 this.el.style.overflow = "hidden";\r
  67                 this.el.iniWidth = this.el.offsetWidth;\r
  68                 this.el.iniHeight = this.el.offsetHeight;\r
  69                 this.setOptions(options);\r
  70         }\r
  71 });\r
  72 \r
  73 fx.Height = Class.create();\r
  74 Object.extend(Object.extend(fx.Height.prototype, fx.Layout.prototype), {        \r
  75         increase: function() {\r
  76                 this.el.style.height = this.now + "px";\r
  77         },\r
  78 \r
  79         toggle: function() {\r
  80                 if (this.el.offsetHeight > 0) this.custom(this.el.offsetHeight, 0);\r
  81                 else this.custom(0, this.el.scrollHeight);\r
  82         }\r
  83 });\r
  84 \r
  85 fx.Width = Class.create();\r
  86 Object.extend(Object.extend(fx.Width.prototype, fx.Layout.prototype), { \r
  87         increase: function() {\r
  88                 this.el.style.width = this.now + "px";\r
  89         },\r
  90 \r
  91         toggle: function(){\r
  92                 if (this.el.offsetWidth > 0) this.custom(this.el.offsetWidth, 0);\r
  93                 else this.custom(0, this.el.iniWidth);\r
  94         }\r
  95 });\r
  96 \r
  97 //fader\r
  98 fx.Opacity = Class.create();\r
  99 fx.Opacity.prototype = Object.extend(new fx.Base(), {\r
 100         initialize: function(el, options) {\r
 101                 this.el = $(el);\r
 102                 this.now = 1;\r
 103                 this.increase();\r
 104                 this.setOptions(options);\r
 105         },\r
 106 \r
 107         increase: function() {\r
 108                 if (this.now == 1) this.now = 0.9999;\r
 109                 if (this.now > 0 && this.el.style.visibility == "hidden") this.el.style.visibility = "visible";\r
 110                 if (this.now == 0) this.el.style.visibility = "hidden";\r
 111                 if (window.ActiveXObject) this.el.style.filter = "alpha(opacity=" + this.now*100 + ")";\r
 112                 this.el.style.opacity = this.now;\r
 113         },\r
 114 \r
 115         toggle: function() {\r
 116                 if (this.now > 0) this.custom(1, 0);\r
 117                 else this.custom(0, 1);\r
 118         }\r
 119 });