Effects/Fx.Elements.js

   1 /*
   2 Script: Fx.Elements.js
   3         Contains <Fx.Elements>
   4
   5 License:
   6         MIT-style license.
   7 */
   8
   9 /*
  10 Class: Fx.Elements
  11         Fx.Elements allows you to apply any number of styles transitions to a selection of elements. Includes colors (must be in hex format).
  12
  13 Arguments:
  14         elements - a collection of elements the effects will be applied to.
  15         options - same as <Fx.Base> options.
  16 */
  17
  18 Fx.Elements = Fx.Base.extend({
  19
  20         initialize: function(elements, options){
  21                 this.elements = $$(elements);
  22                 this.parent(options);
  23         },
  24
  25         setNow: function(){
  26                 for (var i in this.from){
  27                         var iFrom = this.from[i], iTo = this.to[i], iCss = this.css[i], iNow = this.now[i] = {};
  28                         for (var p in iFrom) iNow[p] = iCss[p].getNow(iFrom[p], iTo[p], this);
  29                 }
  30         },
  31
  32         set: function(to){
  33                 var parsed = {};
  34                 this.css = {};
  35                 for (var i in to){
  36                         var iTo = to[i], iCss = this.css[i] = {}, iParsed = parsed[i] = {};
  37                         for (var p in iTo){
  38                                 iCss[p] = Fx.CSS.select(p, iTo[p]);
  39                                 iParsed[p] = iCss[p].parse(iTo[p]);
  40                         }
  41                 }
  42                 return this.parent(parsed);
  43         },
  44
  45         /*
  46         Property: start
  47                 Applies the passed in style transitions to each object named (see example). Each item in the collection is refered to as a numerical string ("1" for instance). The first item is "0", the second "1", etc.
  48
  49         Example:
  50                 (start code)
  51                 var myElementsEffects = new Fx.Elements($$('a'));
  52                 myElementsEffects.start({
  53                         '0': { //let's change the first element's opacity and width
  54                                 'opacity': [0,1],
  55                                 'width': [100,200]
  56                         },
  57                         '4': { //and the fifth one's opacity
  58                                 'opacity': [0.2, 0.5]
  59                         }
  60                 });
  61                 (end)
  62         */
  63
  64         start: function(obj){
  65                 if (this.timer && this.options.wait) return this;
  66                 this.now = {};
  67                 this.css = {};
  68                 var from = {}, to = {};
  69                 for (var i in obj){
  70                         var iProps = obj[i], iFrom = from[i] = {}, iTo = to[i] = {}, iCss = this.css[i] = {};
  71                         for (var p in iProps){
  72                                 var parsed = Fx.CSS.parse(this.elements[i], p, iProps[p]);
  73                                 iFrom[p] = parsed.from;
  74                                 iTo[p] = parsed.to;
  75                                 iCss[p] = parsed.css;
  76                         }
  77                 }
  78                 return this.parent(from, to);
  79         },
  80
  81         increase: function(){
  82                 for (var i in this.now){
  83                         var iNow = this.now[i], iCss = this.css[i];
  84                         for (var p in iNow) this.elements[i].setStyle(p, iCss[p].getValue(iNow[p], this.options.unit, p));
  85                 }
  86         }
  87
  88 });