Source/Fx/Fx.Tween.js

   1 /*
   2 ---
   3
   4 name: Fx.Tween
   5
   6 description: Formerly Fx.Style, effect to transition any CSS property for an element.
   7
   8 license: MIT-style license.
   9
  10 requires: Fx.CSS
  11
  12 provides: [Fx.Tween, Element.fade, Element.highlight]
  13
  14 ...
  15 */
  16
  17 Fx.Tween = new Class({
  18
  19         Extends: Fx.CSS,
  20
  21         initialize: function(element, options){
  22                 this.element = this.subject = document.id(element);
  23                 this.parent(options);
  24         },
  25
  26         set: function(property, now){
  27                 if (arguments.length == 1){
  28                         now = property;
  29                         property = this.property || this.options.property;
  30                 }
  31                 this.render(this.element, property, now, this.options.unit);
  32                 return this;
  33         },
  34
  35         start: function(property, from, to){
  36                 if (!this.check(property, from, to)) return this;
  37                 var args = Array.flatten(arguments);
  38                 this.property = this.options.property || args.shift();
  39                 var parsed = this.prepare(this.element, this.property, args);
  40                 return this.parent(parsed.from, parsed.to);
  41         }
  42
  43 });
  44
  45 Element.Properties.tween = {
  46
  47         set: function(options){
  48                 this.get('tween').cancel().setOptions(options);
  49                 return this;
  50         },
  51
  52         get: function(){
  53                 var tween = this.retrieve('tween');
  54                 if (!tween){
  55                         tween = new Fx.Tween(this, {link: 'cancel'});
  56                         this.store('tween', tween);
  57                 }
  58                 return tween;
  59         }
  60
  61 };
  62
  63 Element.implement({
  64
  65         tween: function(property, from, to){
  66                 this.get('tween').start(arguments);
  67                 return this;
  68         },
  69
  70         fade: function(how){
  71                 var fade = this.get('tween'), o = 'opacity', toggle;
  72                 how = [how, 'toggle'].pick();
  73                 switch (how){
  74                         case 'in': fade.start(o, 1); break;
  75                         case 'out': fade.start(o, 0); break;
  76                         case 'show': fade.set(o, 1); break;
  77                         case 'hide': fade.set(o, 0); break;
  78                         case 'toggle':
  79                                 var flag = this.retrieve('fade:flag', this.get('opacity') == 1);
  80                                 fade.start(o, (flag) ? 0 : 1);
  81                                 this.store('fade:flag', !flag);
  82                                 toggle = true;
  83                         break;
  84                         default: fade.start(o, arguments);
  85                 }
  86                 if (!toggle) this.eliminate('fade:flag');
  87                 return this;
  88         },
  89
  90         highlight: function(start, end){
  91                 if (!end){
  92                         end = this.retrieve('highlight:original', this.getStyle('background-color'));
  93                         end = (end == 'transparent') ? '#fff' : end;
  94                 }
  95                 var tween = this.get('tween');
  96                 tween.start('background-color', start || '#ffff88', end).chain(function(){
  97                         this.setStyle('background-color', this.retrieve('highlight:original'));
  98                         tween.callChain();
  99                 }.bind(this));
 100                 return this;
 101         }
 102
 103 });