Source/Fx/Fx.Morph.js

   1 /*
   2 ---
   3
   4 name: Fx.Morph
   5
   6 description: Formerly Fx.Styles, effect to transition any number of CSS properties for an element using an object of rules, or CSS based selector rules.
   7
   8 license: MIT-style license.
   9
  10 requires: Fx.CSS
  11
  12 provides: Fx.Morph
  13
  14 ...
  15 */
  16
  17 Fx.Morph = 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(now){
  27                 if (typeof now == 'string') now = this.search(now);
  28                 for (var p in now) this.render(this.element, p, now[p], this.options.unit);
  29                 return this;
  30         },
  31
  32         compute: function(from, to, delta){
  33                 var now = {};
  34                 for (var p in from) now[p] = this.parent(from[p], to[p], delta);
  35                 return now;
  36         },
  37
  38         start: function(properties){
  39                 if (!this.check(properties)) return this;
  40                 if (typeof properties == 'string') properties = this.search(properties);
  41                 var from = {}, to = {};
  42                 for (var p in properties){
  43                         var parsed = this.prepare(this.element, p, properties[p]);
  44                         from[p] = parsed.from;
  45                         to[p] = parsed.to;
  46                 }
  47                 return this.parent(from, to);
  48         }
  49
  50 });
  51
  52 Element.Properties.morph = {
  53
  54         set: function(options){
  55                 this.get('morph').cancel().setOptions(options);
  56                 return this;
  57         },
  58
  59         get: function(){
  60                 var morph = this.retrieve('morph');
  61                 if (!morph){
  62                         morph = new Fx.Morph(this, {link: 'cancel'});
  63                         this.store('morph', morph);
  64                 }
  65                 return morph;
  66         }
  67
  68 };
  69
  70 Element.implement({
  71
  72         morph: function(props){
  73                 this.get('morph').start(props);
  74                 return this;
  75         }
  76
  77 });