Addons/Fx.js

   1 /*
   2 Script: Fx.js
   3         Applies visual transitions to any element. Contains Fx.Base, Fx.Style and Fx.Styles
   4
   5 Dependencies:
   6         <Moo.js>, <Function.js>, <Array.js>, <String.js>, <Element.js>
   7
   8 Author:
   9         Valerio Proietti, <http://mad4milk.net>
  10
  11 License:
  12         MIT-style license.
  13 */
  14
  15 var Fx = fx = {};
  16
  17 /*
  18 Class: Fx.Base
  19         Base class for the Mootools fx library.
  20
  21 Options:
  22         onStart - the function to execute as the effect begins; nothing (<Class.empty>) by default.
  23         onComplete - the function to execute after the effect has processed; nothing (<Class.empty>) by default.
  24         transition - the equation to use for the effect see <Fx.Transitions>; default is <Fx.Transitions.sineInOut>
  25         duration - the duration of the effect in ms; 500 is the default.
  26         unit - the unit is 'px' by default (other values include things like 'em' for fonts or '%').
  27         wait - boolean: to wait or not to wait for a current transition to end before running another of the same instance. defaults to true.
  28         fps - the frames per second for the transition; default is 30
  29 */
  30
  31 Fx.Base = new Class({
  32
  33         setOptions: function(options){
  34                 this.options = Object.extend({
  35                         onStart: Class.empty,
  36                         onComplete: Class.empty,
  37                         transition: Fx.Transitions.sineInOut,
  38                         duration: 500,
  39                         unit: 'px',
  40                         wait: true,
  41                         fps: 50
  42                 }, options || {});
  43         },
  44
  45         step: function(){
  46                 var time = new Date().getTime();
  47                 if (time < this.time + this.options.duration){
  48                         this.cTime = time - this.time;
  49                         this.setNow();
  50                 } else {
  51                         this.options.onComplete.pass(this.element, this).delay(10);
  52                         this.clearTimer();
  53                         this.callChain();
  54                         this.now = this.to;
  55                 }
  56                 this.increase();
  57         },
  58
  59         /*
  60         Property: set
  61                 Immediately sets the value with no transition.
  62
  63         Arguments:
  64                 to - the point to jump to
  65
  66         Example:
  67                 >var myFx = new Fx.Style('myElement', 'opacity').set(0); //will make it immediately transparent
  68         */
  69
  70         set: function(to){
  71                 this.now = to;
  72                 this.increase();
  73                 return this;
  74         },
  75
  76         setNow: function(){
  77                 this.now = this.compute(this.from, this.to);
  78         },
  79
  80         compute: function(from, to){
  81                 return this.options.transition(this.cTime, from, (to - from), this.options.duration);
  82         },
  83
  84         /*
  85         Property: custom
  86                 Executes an effect from one position to the other.
  87
  88         Arguments:
  89                 from - integer:  staring value
  90                 to - integer: the ending value
  91
  92         Examples:
  93                 >var myFx = new Fx.Style('myElement', 'opacity').custom(0,1); //display a transition from transparent to opaque.
  94         */
  95
  96         custom: function(from, to){
  97                 if (!this.options.wait) this.clearTimer();
  98                 if (this.timer) return;
  99                 this.options.onStart.pass(this.element, this).delay(10);
 100                 this.from = from;
 101                 this.to = to;
 102                 this.time = new Date().getTime();
 103                 this.timer = this.step.periodical(Math.round(1000/this.options.fps), this);
 104                 return this;
 105         },
 106
 107         /*
 108         Property: clearTimer
 109                 Stops processing the transition.
 110         */
 111         clearTimer: function(){
 112                 this.timer = $clear(this.timer);
 113                 return this;
 114         },
 115
 116         setStyle: function(element, property, value){
 117                 element.setStyle(property, value + this.options.unit);
 118         }
 119
 120 });
 121
 122 Fx.Base.implement(new Chain);
 123
 124 /*
 125 Class: Fx.Style
 126         The Style effect; Extends <Fx.Base>, inherits all its properties. Used to transition any css property from one value to another.
 127
 128 Arguments:
 129         el - the $(element) to apply the style transition to
 130         property - the property to transition
 131         options - the Fx.Base options (see: <Fx.Base>)
 132
 133 Example:
 134         >var marginChange = new fx.Style('myElement', 'margin-top', {duration:500});
 135         >marginChange.custom(10, 100);
 136 */
 137
 138 Fx.Style = Fx.Base.extend({
 139
 140         initialize: function(el, property, options){
 141                 this.element = $(el);
 142                 this.setOptions(options);
 143                 this.property = property.camelCase();
 144         },
 145
 146         /*
 147         Property: hide
 148                 Same as <Fx.Base.set>(0)
 149         */
 150
 151         hide: function(){
 152                 return this.set(0);
 153         },
 154
 155         /*
 156         Property: goTo
 157                 will apply <Fx.Base.custom>, setting the starting point to the current position.
 158
 159         Arguments:
 160                 val - the ending value
 161         */
 162
 163         goTo: function(val){
 164                 return this.custom(this.now || 0, val);
 165         },
 166
 167         increase: function(){
 168                 this.setStyle(this.element, this.property, this.now);
 169         }
 170
 171 });
 172
 173 /*
 174 Class: Fx.Styles
 175         Allows you to animate multiple css properties at once; Extends <Fx.Base>, inherits all its properties.
 176
 177 Arguments:
 178         el - the $(element) to apply the styles transition to
 179         options - the fx options (see: <Fx.Base>)
 180
 181 Example:
 182         >var myEffects = new fx.Styles('myElement', {duration: 1000, transition: fx.linear});
 183         >myEffects.custom({
 184         >       'height': [10, 100],
 185         >       'width': [900, 300]
 186         >});
 187 */
 188
 189 Fx.Styles = Fx.Base.extend({
 190
 191         initialize: function(el, options){
 192                 this.element = $(el);
 193                 this.setOptions(options);
 194                 this.now = {};
 195         },
 196
 197         setNow: function(){
 198                 for (var p in this.from) this.now[p] = this.compute(this.from[p], this.to[p]);
 199         },
 200
 201         /*
 202         Property:       custom
 203                 The function you'll actually use to execute a transition.
 204
 205         Arguments:
 206                 an object
 207
 208         Example:
 209                 see <Fx.Styles>
 210         */
 211
 212         custom: function(objFromTo){
 213                 if (this.timer && this.options.wait) return;
 214                 var from = {};
 215                 var to = {};
 216                 for (var p in objFromTo){
 217                         from[p] = objFromTo[p][0];
 218                         to[p] = objFromTo[p][1];
 219                 }
 220                 return this.parent(from, to);
 221         },
 222
 223         increase: function(){
 224                 for (var p in this.now) this.setStyle(this.element, p, this.now[p]);
 225         }
 226
 227 });
 228
 229 /*
 230 Class: Element
 231         Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>.
 232 */
 233
 234 Element.extend({
 235
 236         /*
 237         Property: effect
 238                 Applies an <Fx.Style> to the Element; This a shortcut for <Fx.Style>.
 239
 240         Example:
 241                 >var myEffect = $('myElement').effect('height', {duration: 1000, transition: Fx.Transitions.linear});
 242                 >myEffect.custom(10, 100);
 243         */
 244
 245         effect: function(property, options){
 246                 return new Fx.Style(this, property, options);
 247         },
 248
 249         /*
 250         Property: effects
 251                 Applies an <Fx.Styles> to the Element; This a shortcut for <Fx.Styles>.
 252
 253         Example:
 254                 >var myEffects = $(myElement).effects({duration: 1000, transition: Fx.Transitions.sineInOut});
 255                 >myEffects.custom({'height': [10, 100], 'width': [900, 300]});
 256         */
 257
 258         effects: function(options){
 259                 return new Fx.Styles(this, options);
 260         }
 261
 262 });
 263
 264 /*
 265 Class: Fx.Transitions
 266         A collection of transition equations for use with the <Fx> Class.
 267
 268 See Also:
 269         <Fxtransitions.js> for a whole bunch of transitions.
 270
 271 Credits:
 272         Easing Equations, (c) 2003 Robert Penner (http://www.robertpenner.com/easing/), Open Source BSD License.
 273 */
 274
 275 Fx.Transitions = {
 276
 277         /* Property: linear */
 278         linear: function(t, b, c, d){
 279                 return c*t/d + b;
 280         },
 281
 282         /* Property: sineInOut */
 283         sineInOut: function(t, b, c, d){
 284                 return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 285         }
 286
 287 };