source: de.wigbels.ruby/contact/public/javascripts/effects.js @ 7b7d827

Last change on this file since 7b7d827 was 7b7d827, checked in by njw <njw@…>, 10 years ago

opened projects: hothotwrite and contact
  • Property mode set to 100644
File size: 37.8 KB
Line 
1// Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
2// Contributors:
3//  Justin Palmer (http://encytemedia.com/)
4//  Mark Pilgrim (http://diveintomark.org/)
5//  Martin Bialasinki
6//
7// script.aculo.us is freely distributable under the terms of an MIT-style license.
8// For details, see the script.aculo.us web site: http://script.aculo.us/
9
10// converts rgb() and #xxx to #xxxxxx format,
11// returns self (or first argument) if not convertable
12String.prototype.parseColor = function() {
13  var color = '#';
14  if (this.slice(0,4) == 'rgb(') {
15    var cols = this.slice(4,this.length-1).split(',');
16    var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3);
17  } else {
18    if (this.slice(0,1) == '#') {
19      if (this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase();
20      if (this.length==7) color = this.toLowerCase();
21    }
22  }
23  return (color.length==7 ? color : (arguments[0] || this));
24};
25
26/*--------------------------------------------------------------------------*/
27
28Element.collectTextNodes = function(element) {
29  return $A($(element).childNodes).collect( function(node) {
30    return (node.nodeType==3 ? node.nodeValue :
31      (node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
32  }).flatten().join('');
33};
34
35Element.collectTextNodesIgnoreClass = function(element, className) {
36  return $A($(element).childNodes).collect( function(node) {
37    return (node.nodeType==3 ? node.nodeValue :
38      ((node.hasChildNodes() && !Element.hasClassName(node,className)) ?
39        Element.collectTextNodesIgnoreClass(node, className) : ''));
40  }).flatten().join('');
41};
42
43Element.setContentZoom = function(element, percent) {
44  element = $(element);
45  element.setStyle({fontSize: (percent/100) + 'em'});
46  if (Prototype.Browser.WebKit) window.scrollBy(0,0);
47  return element;
48};
49
50Element.getInlineOpacity = function(element){
51  return $(element).style.opacity || '';
52};
53
54Element.forceRerendering = function(element) {
55  try {
56    element = $(element);
57    var n = document.createTextNode(' ');
58    element.appendChild(n);
59    element.removeChild(n);
60  } catch(e) { }
61};
62
63/*--------------------------------------------------------------------------*/
64
65var Effect = {
66  _elementDoesNotExistError: {
67    name: 'ElementDoesNotExistError',
68    message: 'The specified DOM element does not exist, but is required for this effect to operate'
69  },
70  Transitions: {
71    linear: Prototype.K,
72    sinoidal: function(pos) {
73      return (-Math.cos(pos*Math.PI)/2) + .5;
74    },
75    reverse: function(pos) {
76      return 1-pos;
77    },
78    flicker: function(pos) {
79      var pos = ((-Math.cos(pos*Math.PI)/4) + .75) + Math.random()/4;
80      return pos > 1 ? 1 : pos;
81    },
82    wobble: function(pos) {
83      return (-Math.cos(pos*Math.PI*(9*pos))/2) + .5;
84    },
85    pulse: function(pos, pulses) {
86      return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
87    },
88    spring: function(pos) {
89      return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
90    },
91    none: function(pos) {
92      return 0;
93    },
94    full: function(pos) {
95      return 1;
96    }
97  },
98  DefaultOptions: {
99    duration:   1.0,   // seconds
100    fps:        100,   // 100= assume 66fps max.
101    sync:       false, // true for combining
102    from:       0.0,
103    to:         1.0,
104    delay:      0.0,
105    queue:      'parallel'
106  },
107  tagifyText: function(element) {
108    var tagifyStyle = 'position:relative';
109    if (Prototype.Browser.IE) tagifyStyle += ';zoom:1';
110
111    element = $(element);
112    $A(element.childNodes).each( function(child) {
113      if (child.nodeType==3) {
114        child.nodeValue.toArray().each( function(character) {
115          element.insertBefore(
116            new Element('span', {style: tagifyStyle}).update(
117              character == ' ' ? String.fromCharCode(160) : character),
118              child);
119        });
120        Element.remove(child);
121      }
122    });
123  },
124  multiple: function(element, effect) {
125    var elements;
126    if (((typeof element == 'object') ||
127        Object.isFunction(element)) &&
128       (element.length))
129      elements = element;
130    else
131      elements = $(element).childNodes;
132
133    var options = Object.extend({
134      speed: 0.1,
135      delay: 0.0
136    }, arguments[2] || { });
137    var masterDelay = options.delay;
138
139    $A(elements).each( function(element, index) {
140      new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
141    });
142  },
143  PAIRS: {
144    'slide':  ['SlideDown','SlideUp'],
145    'blind':  ['BlindDown','BlindUp'],
146    'appear': ['Appear','Fade']
147  },
148  toggle: function(element, effect) {
149    element = $(element);
150    effect = (effect || 'appear').toLowerCase();
151    var options = Object.extend({
152      queue: { position:'end', scope:(element.id || 'global'), limit: 1 }
153    }, arguments[2] || { });
154    Effect[element.visible() ?
155      Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
156  }
157};
158
159Effect.DefaultOptions.transition = Effect.Transitions.sinoidal;
160
161/* ------------- core effects ------------- */
162
163Effect.ScopedQueue = Class.create(Enumerable, {
164  initialize: function() {
165    this.effects  = [];
166    this.interval = null;
167  },
168  _each: function(iterator) {
169    this.effects._each(iterator);
170  },
171  add: function(effect) {
172    var timestamp = new Date().getTime();
173
174    var position = Object.isString(effect.options.queue) ?
175      effect.options.queue : effect.options.queue.position;
176
177    switch(position) {
178      case 'front':
179        // move unstarted effects after this effect
180        this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
181            e.startOn  += effect.finishOn;
182            e.finishOn += effect.finishOn;
183          });
184        break;
185      case 'with-last':
186        timestamp = this.effects.pluck('startOn').max() || timestamp;
187        break;
188      case 'end':
189        // start effect after last queued effect has finished
190        timestamp = this.effects.pluck('finishOn').max() || timestamp;
191        break;
192    }
193
194    effect.startOn  += timestamp;
195    effect.finishOn += timestamp;
196
197    if (!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit))
198      this.effects.push(effect);
199
200    if (!this.interval)
201      this.interval = setInterval(this.loop.bind(this), 15);
202  },
203  remove: function(effect) {
204    this.effects = this.effects.reject(function(e) { return e==effect });
205    if (this.effects.length == 0) {
206      clearInterval(this.interval);
207      this.interval = null;
208    }
209  },
210  loop: function() {
211    var timePos = new Date().getTime();
212    for(var i=0, len=this.effects.length;i<len;i++)
213      this.effects[i] && this.effects[i].loop(timePos);
214  }
215});
216
217Effect.Queues = {
218  instances: $H(),
219  get: function(queueName) {
220    if (!Object.isString(queueName)) return queueName;
221
222    return this.instances.get(queueName) ||
223      this.instances.set(queueName, new Effect.ScopedQueue());
224  }
225};
226Effect.Queue = Effect.Queues.get('global');
227
228Effect.Base = Class.create({
229  position: null,
230  start: function(options) {
231    function codeForEvent(options,eventName){
232      return (
233        (options[eventName+'Internal'] ? 'this.options.'+eventName+'Internal(this);' : '') +
234        (options[eventName] ? 'this.options.'+eventName+'(this);' : '')
235      );
236    }
237    if (options && options.transition === false) options.transition = Effect.Transitions.linear;
238    this.options      = Object.extend(Object.extend({ },Effect.DefaultOptions), options || { });
239    this.currentFrame = 0;
240    this.state        = 'idle';
241    this.startOn      = this.options.delay*1000;
242    this.finishOn     = this.startOn+(this.options.duration*1000);
243    this.fromToDelta  = this.options.to-this.options.from;
244    this.totalTime    = this.finishOn-this.startOn;
245    this.totalFrames  = this.options.fps*this.options.duration;
246
247    this.render = (function() {
248      function dispatch(effect, eventName) {
249        if (effect.options[eventName + 'Internal'])
250          effect.options[eventName + 'Internal'](effect);
251        if (effect.options[eventName])
252          effect.options[eventName](effect);
253      }
254
255      return function(pos) {
256        if (this.state === "idle") {
257          this.state = "running";
258          dispatch(this, 'beforeSetup');
259          if (this.setup) this.setup();
260          dispatch(this, 'afterSetup');
261        }
262        if (this.state === "running") {
263          pos = (this.options.transition(pos) * this.fromToDelta) + this.options.from;
264          this.position = pos;
265          dispatch(this, 'beforeUpdate');
266          if (this.update) this.update(pos);
267          dispatch(this, 'afterUpdate');
268        }
269      };
270    })();
271
272    this.event('beforeStart');
273    if (!this.options.sync)
274      Effect.Queues.get(Object.isString(this.options.queue) ?
275        'global' : this.options.queue.scope).add(this);
276  },
277  loop: function(timePos) {
278    if (timePos >= this.startOn) {
279      if (timePos >= this.finishOn) {
280        this.render(1.0);
281        this.cancel();
282        this.event('beforeFinish');
283        if (this.finish) this.finish();
284        this.event('afterFinish');
285        return;
286      }
287      var pos   = (timePos - this.startOn) / this.totalTime,
288          frame = (pos * this.totalFrames).round();
289      if (frame > this.currentFrame) {
290        this.render(pos);
291        this.currentFrame = frame;
292      }
293    }
294  },
295  cancel: function() {
296    if (!this.options.sync)
297      Effect.Queues.get(Object.isString(this.options.queue) ?
298        'global' : this.options.queue.scope).remove(this);
299    this.state = 'finished';
300  },
301  event: function(eventName) {
302    if (this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this);
303    if (this.options[eventName]) this.options[eventName](this);
304  },
305  inspect: function() {
306    var data = $H();
307    for(property in this)
308      if (!Object.isFunction(this[property])) data.set(property, this[property]);
309    return '#<Effect:' + data.inspect() + ',options:' + $H(this.options).inspect() + '>';
310  }
311});
312
313Effect.Parallel = Class.create(Effect.Base, {
314  initialize: function(effects) {
315    this.effects = effects || [];
316    this.start(arguments[1]);
317  },
318  update: function(position) {
319    this.effects.invoke('render', position);
320  },
321  finish: function(position) {
322    this.effects.each( function(effect) {
323      effect.render(1.0);
324      effect.cancel();
325      effect.event('beforeFinish');
326      if (effect.finish) effect.finish(position);
327      effect.event('afterFinish');
328    });
329  }
330});
331
332Effect.Tween = Class.create(Effect.Base, {
333  initialize: function(object, from, to) {
334    object = Object.isString(object) ? $(object) : object;
335    var args = $A(arguments), method = args.last(),
336      options = args.length == 5 ? args[3] : null;
337    this.method = Object.isFunction(method) ? method.bind(object) :
338      Object.isFunction(object[method]) ? object[method].bind(object) :
339      function(value) { object[method] = value };
340    this.start(Object.extend({ from: from, to: to }, options || { }));
341  },
342  update: function(position) {
343    this.method(position);
344  }
345});
346
347Effect.Event = Class.create(Effect.Base, {
348  initialize: function() {
349    this.start(Object.extend({ duration: 0 }, arguments[0] || { }));
350  },
351  update: Prototype.emptyFunction
352});
353
354Effect.Opacity = Class.create(Effect.Base, {
355  initialize: function(element) {
356    this.element = $(element);
357    if (!this.element) throw(Effect._elementDoesNotExistError);
358    // make this work on IE on elements without 'layout'
359    if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
360      this.element.setStyle({zoom: 1});
361    var options = Object.extend({
362      from: this.element.getOpacity() || 0.0,
363      to:   1.0
364    }, arguments[1] || { });
365    this.start(options);
366  },
367  update: function(position) {
368    this.element.setOpacity(position);
369  }
370});
371
372Effect.Move = Class.create(Effect.Base, {
373  initialize: function(element) {
374    this.element = $(element);
375    if (!this.element) throw(Effect._elementDoesNotExistError);
376    var options = Object.extend({
377      x:    0,
378      y:    0,
379      mode: 'relative'
380    }, arguments[1] || { });
381    this.start(options);
382  },
383  setup: function() {
384    this.element.makePositioned();
385    this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
386    this.originalTop  = parseFloat(this.element.getStyle('top')  || '0');
387    if (this.options.mode == 'absolute') {
388      this.options.x = this.options.x - this.originalLeft;
389      this.options.y = this.options.y - this.originalTop;
390    }
391  },
392  update: function(position) {
393    this.element.setStyle({
394      left: (this.options.x  * position + this.originalLeft).round() + 'px',
395      top:  (this.options.y  * position + this.originalTop).round()  + 'px'
396    });
397  }
398});
399
400// for backwards compatibility
401Effect.MoveBy = function(element, toTop, toLeft) {
402  return new Effect.Move(element,
403    Object.extend({ x: toLeft, y: toTop }, arguments[3] || { }));
404};
405
406Effect.Scale = Class.create(Effect.Base, {
407  initialize: function(element, percent) {
408    this.element = $(element);
409    if (!this.element) throw(Effect._elementDoesNotExistError);
410    var options = Object.extend({
411      scaleX: true,
412      scaleY: true,
413      scaleContent: true,
414      scaleFromCenter: false,
415      scaleMode: 'box',        // 'box' or 'contents' or { } with provided values
416      scaleFrom: 100.0,
417      scaleTo:   percent
418    }, arguments[2] || { });
419    this.start(options);
420  },
421  setup: function() {
422    this.restoreAfterFinish = this.options.restoreAfterFinish || false;
423    this.elementPositioning = this.element.getStyle('position');
424
425    this.originalStyle = { };
426    ['top','left','width','height','fontSize'].each( function(k) {
427      this.originalStyle[k] = this.element.style[k];
428    }.bind(this));
429
430    this.originalTop  = this.element.offsetTop;
431    this.originalLeft = this.element.offsetLeft;
432
433    var fontSize = this.element.getStyle('font-size') || '100%';
434    ['em','px','%','pt'].each( function(fontSizeType) {
435      if (fontSize.indexOf(fontSizeType)>0) {
436        this.fontSize     = parseFloat(fontSize);
437        this.fontSizeType = fontSizeType;
438      }
439    }.bind(this));
440
441    this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;
442
443    this.dims = null;
444    if (this.options.scaleMode=='box')
445      this.dims = [this.element.offsetHeight, this.element.offsetWidth];
446    if (/^content/.test(this.options.scaleMode))
447      this.dims = [this.element.scrollHeight, this.element.scrollWidth];
448    if (!this.dims)
449      this.dims = [this.options.scaleMode.originalHeight,
450                   this.options.scaleMode.originalWidth];
451  },
452  update: function(position) {
453    var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
454    if (this.options.scaleContent && this.fontSize)
455      this.element.setStyle({fontSize: this.fontSize * currentScale + this.fontSizeType });
456    this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale);
457  },
458  finish: function(position) {
459    if (this.restoreAfterFinish) this.element.setStyle(this.originalStyle);
460  },
461  setDimensions: function(height, width) {
462    var d = { };
463    if (this.options.scaleX) d.width = width.round() + 'px';
464    if (this.options.scaleY) d.height = height.round() + 'px';
465    if (this.options.scaleFromCenter) {
466      var topd  = (height - this.dims[0])/2;
467      var leftd = (width  - this.dims[1])/2;
468      if (this.elementPositioning == 'absolute') {
469        if (this.options.scaleY) d.top = this.originalTop-topd + 'px';
470        if (this.options.scaleX) d.left = this.originalLeft-leftd + 'px';
471      } else {
472        if (this.options.scaleY) d.top = -topd + 'px';
473        if (this.options.scaleX) d.left = -leftd + 'px';
474      }
475    }
476    this.element.setStyle(d);
477  }
478});
479
480Effect.Highlight = Class.create(Effect.Base, {
481  initialize: function(element) {
482    this.element = $(element);
483    if (!this.element) throw(Effect._elementDoesNotExistError);
484    var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || { });
485    this.start(options);
486  },
487  setup: function() {
488    // Prevent executing on elements not in the layout flow
489    if (this.element.getStyle('display')=='none') { this.cancel(); return; }
490    // Disable background image during the effect
491    this.oldStyle = { };
492    if (!this.options.keepBackgroundImage) {
493      this.oldStyle.backgroundImage = this.element.getStyle('background-image');
494      this.element.setStyle({backgroundImage: 'none'});
495    }
496    if (!this.options.endcolor)
497      this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff');
498    if (!this.options.restorecolor)
499      this.options.restorecolor = this.element.getStyle('background-color');
500    // init color calculations
501    this._base  = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this));
502    this._delta = $R(0,2).map(function(i){ return parseInt(this.options.endcolor.slice(i*2+1,i*2+3),16)-this._base[i] }.bind(this));
503  },
504  update: function(position) {
505    this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){
506      return m+((this._base[i]+(this._delta[i]*position)).round().toColorPart()); }.bind(this)) });
507  },
508  finish: function() {
509    this.element.setStyle(Object.extend(this.oldStyle, {
510      backgroundColor: this.options.restorecolor
511    }));
512  }
513});
514
515Effect.ScrollTo = function(element) {
516  var options = arguments[1] || { },
517  scrollOffsets = document.viewport.getScrollOffsets(),
518  elementOffsets = $(element).cumulativeOffset();
519
520  if (options.offset) elementOffsets[1] += options.offset;
521
522  return new Effect.Tween(null,
523    scrollOffsets.top,
524    elementOffsets[1],
525    options,
526    function(p){ scrollTo(scrollOffsets.left, p.round()); }
527  );
528};
529
530/* ------------- combination effects ------------- */
531
532Effect.Fade = function(element) {
533  element = $(element);
534  var oldOpacity = element.getInlineOpacity();
535  var options = Object.extend({
536    from: element.getOpacity() || 1.0,
537    to:   0.0,
538    afterFinishInternal: function(effect) {
539      if (effect.options.to!=0) return;
540      effect.element.hide().setStyle({opacity: oldOpacity});
541    }
542  }, arguments[1] || { });
543  return new Effect.Opacity(element,options);
544};
545
546Effect.Appear = function(element) {
547  element = $(element);
548  var options = Object.extend({
549  from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
550  to:   1.0,
551  // force Safari to render floated elements properly
552  afterFinishInternal: function(effect) {
553    effect.element.forceRerendering();
554  },
555  beforeSetup: function(effect) {
556    effect.element.setOpacity(effect.options.from).show();
557  }}, arguments[1] || { });
558  return new Effect.Opacity(element,options);
559};
560
561Effect.Puff = function(element) {
562  element = $(element);
563  var oldStyle = {
564    opacity: element.getInlineOpacity(),
565    position: element.getStyle('position'),
566    top:  element.style.top,
567    left: element.style.left,
568    width: element.style.width,
569    height: element.style.height
570  };
571  return new Effect.Parallel(
572   [ new Effect.Scale(element, 200,
573      { sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }),
574     new Effect.Opacity(element, { sync: true, to: 0.0 } ) ],
575     Object.extend({ duration: 1.0,
576      beforeSetupInternal: function(effect) {
577        Position.absolutize(effect.effects[0].element);
578      },
579      afterFinishInternal: function(effect) {
580         effect.effects[0].element.hide().setStyle(oldStyle); }
581     }, arguments[1] || { })
582   );
583};
584
585Effect.BlindUp = function(element) {
586  element = $(element);
587  element.makeClipping();
588  return new Effect.Scale(element, 0,
589    Object.extend({ scaleContent: false,
590      scaleX: false,
591      restoreAfterFinish: true,
592      afterFinishInternal: function(effect) {
593        effect.element.hide().undoClipping();
594      }
595    }, arguments[1] || { })
596  );
597};
598
599Effect.BlindDown = function(element) {
600  element = $(element);
601  var elementDimensions = element.getDimensions();
602  return new Effect.Scale(element, 100, Object.extend({
603    scaleContent: false,
604    scaleX: false,
605    scaleFrom: 0,
606    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
607    restoreAfterFinish: true,
608    afterSetup: function(effect) {
609      effect.element.makeClipping().setStyle({height: '0px'}).show();
610    },
611    afterFinishInternal: function(effect) {
612      effect.element.undoClipping();
613    }
614  }, arguments[1] || { }));
615};
616
617Effect.SwitchOff = function(element) {
618  element = $(element);
619  var oldOpacity = element.getInlineOpacity();
620  return new Effect.Appear(element, Object.extend({
621    duration: 0.4,
622    from: 0,
623    transition: Effect.Transitions.flicker,
624    afterFinishInternal: function(effect) {
625      new Effect.Scale(effect.element, 1, {
626        duration: 0.3, scaleFromCenter: true,
627        scaleX: false, scaleContent: false, restoreAfterFinish: true,
628        beforeSetup: function(effect) {
629          effect.element.makePositioned().makeClipping();
630        },
631        afterFinishInternal: function(effect) {
632          effect.element.hide().undoClipping().undoPositioned().setStyle({opacity: oldOpacity});
633        }
634      });
635    }
636  }, arguments[1] || { }));
637};
638
639Effect.DropOut = function(element) {
640  element = $(element);
641  var oldStyle = {
642    top: element.getStyle('top'),
643    left: element.getStyle('left'),
644    opacity: element.getInlineOpacity() };
645  return new Effect.Parallel(
646    [ new Effect.Move(element, {x: 0, y: 100, sync: true }),
647      new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
648    Object.extend(
649      { duration: 0.5,
650        beforeSetup: function(effect) {
651          effect.effects[0].element.makePositioned();
652        },
653        afterFinishInternal: function(effect) {
654          effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle);
655        }
656      }, arguments[1] || { }));
657};
658
659Effect.Shake = function(element) {
660  element = $(element);
661  var options = Object.extend({
662    distance: 20,
663    duration: 0.5
664  }, arguments[1] || {});
665  var distance = parseFloat(options.distance);
666  var split = parseFloat(options.duration) / 10.0;
667  var oldStyle = {
668    top: element.getStyle('top'),
669    left: element.getStyle('left') };
670    return new Effect.Move(element,
671      { x:  distance, y: 0, duration: split, afterFinishInternal: function(effect) {
672    new Effect.Move(effect.element,
673      { x: -distance*2, y: 0, duration: split*2,  afterFinishInternal: function(effect) {
674    new Effect.Move(effect.element,
675      { x:  distance*2, y: 0, duration: split*2,  afterFinishInternal: function(effect) {
676    new Effect.Move(effect.element,
677      { x: -distance*2, y: 0, duration: split*2,  afterFinishInternal: function(effect) {
678    new Effect.Move(effect.element,
679      { x:  distance*2, y: 0, duration: split*2,  afterFinishInternal: function(effect) {
680    new Effect.Move(effect.element,
681      { x: -distance, y: 0, duration: split, afterFinishInternal: function(effect) {
682        effect.element.undoPositioned().setStyle(oldStyle);
683  }}); }}); }}); }}); }}); }});
684};
685
686Effect.SlideDown = function(element) {
687  element = $(element).cleanWhitespace();
688  // SlideDown need to have the content of the element wrapped in a container element with fixed height!
689  var oldInnerBottom = element.down().getStyle('bottom');
690  var elementDimensions = element.getDimensions();
691  return new Effect.Scale(element, 100, Object.extend({
692    scaleContent: false,
693    scaleX: false,
694    scaleFrom: window.opera ? 0 : 1,
695    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
696    restoreAfterFinish: true,
697    afterSetup: function(effect) {
698      effect.element.makePositioned();
699      effect.element.down().makePositioned();
700      if (window.opera) effect.element.setStyle({top: ''});
701      effect.element.makeClipping().setStyle({height: '0px'}).show();
702    },
703    afterUpdateInternal: function(effect) {
704      effect.element.down().setStyle({bottom:
705        (effect.dims[0] - effect.element.clientHeight) + 'px' });
706    },
707    afterFinishInternal: function(effect) {
708      effect.element.undoClipping().undoPositioned();
709      effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); }
710    }, arguments[1] || { })
711  );
712};
713
714Effect.SlideUp = function(element) {
715  element = $(element).cleanWhitespace();
716  var oldInnerBottom = element.down().getStyle('bottom');
717  var elementDimensions = element.getDimensions();
718  return new Effect.Scale(element, window.opera ? 0 : 1,
719   Object.extend({ scaleContent: false,
720    scaleX: false,
721    scaleMode: 'box',
722    scaleFrom: 100,
723    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
724    restoreAfterFinish: true,
725    afterSetup: function(effect) {
726      effect.element.makePositioned();
727      effect.element.down().makePositioned();
728      if (window.opera) effect.element.setStyle({top: ''});
729      effect.element.makeClipping().show();
730    },
731    afterUpdateInternal: function(effect) {
732      effect.element.down().setStyle({bottom:
733        (effect.dims[0] - effect.element.clientHeight) + 'px' });
734    },
735    afterFinishInternal: function(effect) {
736      effect.element.hide().undoClipping().undoPositioned();
737      effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom});
738    }
739   }, arguments[1] || { })
740  );
741};
742
743// Bug in opera makes the TD containing this element expand for a instance after finish
744Effect.Squish = function(element) {
745  return new Effect.Scale(element, window.opera ? 1 : 0, {
746    restoreAfterFinish: true,
747    beforeSetup: function(effect) {
748      effect.element.makeClipping();
749    },
750    afterFinishInternal: function(effect) {
751      effect.element.hide().undoClipping();
752    }
753  });
754};
755
756Effect.Grow = function(element) {
757  element = $(element);
758  var options = Object.extend({
759    direction: 'center',
760    moveTransition: Effect.Transitions.sinoidal,
761    scaleTransition: Effect.Transitions.sinoidal,
762    opacityTransition: Effect.Transitions.full
763  }, arguments[1] || { });
764  var oldStyle = {
765    top: element.style.top,
766    left: element.style.left,
767    height: element.style.height,
768    width: element.style.width,
769    opacity: element.getInlineOpacity() };
770
771  var dims = element.getDimensions();
772  var initialMoveX, initialMoveY;
773  var moveX, moveY;
774
775  switch (options.direction) {
776    case 'top-left':
777      initialMoveX = initialMoveY = moveX = moveY = 0;
778      break;
779    case 'top-right':
780      initialMoveX = dims.width;
781      initialMoveY = moveY = 0;
782      moveX = -dims.width;
783      break;
784    case 'bottom-left':
785      initialMoveX = moveX = 0;
786      initialMoveY = dims.height;
787      moveY = -dims.height;
788      break;
789    case 'bottom-right':
790      initialMoveX = dims.width;
791      initialMoveY = dims.height;
792      moveX = -dims.width;
793      moveY = -dims.height;
794      break;
795    case 'center':
796      initialMoveX = dims.width / 2;
797      initialMoveY = dims.height / 2;
798      moveX = -dims.width / 2;
799      moveY = -dims.height / 2;
800      break;
801  }
802
803  return new Effect.Move(element, {
804    x: initialMoveX,
805    y: initialMoveY,
806    duration: 0.01,
807    beforeSetup: function(effect) {
808      effect.element.hide().makeClipping().makePositioned();
809    },
810    afterFinishInternal: function(effect) {
811      new Effect.Parallel(
812        [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
813          new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
814          new Effect.Scale(effect.element, 100, {
815            scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
816            sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
817        ], Object.extend({
818             beforeSetup: function(effect) {
819               effect.effects[0].element.setStyle({height: '0px'}).show();
820             },
821             afterFinishInternal: function(effect) {
822               effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
823             }
824           }, options)
825      );
826    }
827  });
828};
829
830Effect.Shrink = function(element) {
831  element = $(element);
832  var options = Object.extend({
833    direction: 'center',
834    moveTransition: Effect.Transitions.sinoidal,
835    scaleTransition: Effect.Transitions.sinoidal,
836    opacityTransition: Effect.Transitions.none
837  }, arguments[1] || { });
838  var oldStyle = {
839    top: element.style.top,
840    left: element.style.left,
841    height: element.style.height,
842    width: element.style.width,
843    opacity: element.getInlineOpacity() };
844
845  var dims = element.getDimensions();
846  var moveX, moveY;
847
848  switch (options.direction) {
849    case 'top-left':
850      moveX = moveY = 0;
851      break;
852    case 'top-right':
853      moveX = dims.width;
854      moveY = 0;
855      break;
856    case 'bottom-left':
857      moveX = 0;
858      moveY = dims.height;
859      break;
860    case 'bottom-right':
861      moveX = dims.width;
862      moveY = dims.height;
863      break;
864    case 'center':
865      moveX = dims.width / 2;
866      moveY = dims.height / 2;
867      break;
868  }
869
870  return new Effect.Parallel(
871    [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
872      new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
873      new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
874    ], Object.extend({
875         beforeStartInternal: function(effect) {
876           effect.effects[0].element.makePositioned().makeClipping();
877         },
878         afterFinishInternal: function(effect) {
879           effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); }
880       }, options)
881  );
882};
883
884Effect.Pulsate = function(element) {
885  element = $(element);
886  var options    = arguments[1] || { },
887    oldOpacity = element.getInlineOpacity(),
888    transition = options.transition || Effect.Transitions.linear,
889    reverser   = function(pos){
890      return 1 - transition((-Math.cos((pos*(options.pulses||5)*2)*Math.PI)/2) + .5);
891    };
892
893  return new Effect.Opacity(element,
894    Object.extend(Object.extend({  duration: 2.0, from: 0,
895      afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
896    }, options), {transition: reverser}));
897};
898
899Effect.Fold = function(element) {
900  element = $(element);
901  var oldStyle = {
902    top: element.style.top,
903    left: element.style.left,
904    width: element.style.width,
905    height: element.style.height };
906  element.makeClipping();
907  return new Effect.Scale(element, 5, Object.extend({
908    scaleContent: false,
909    scaleX: false,
910    afterFinishInternal: function(effect) {
911    new Effect.Scale(element, 1, {
912      scaleContent: false,
913      scaleY: false,
914      afterFinishInternal: function(effect) {
915        effect.element.hide().undoClipping().setStyle(oldStyle);
916      } });
917  }}, arguments[1] || { }));
918};
919
920Effect.Morph = Class.create(Effect.Base, {
921  initialize: function(element) {
922    this.element = $(element);
923    if (!this.element) throw(Effect._elementDoesNotExistError);
924    var options = Object.extend({
925      style: { }
926    }, arguments[1] || { });
927
928    if (!Object.isString(options.style)) this.style = $H(options.style);
929    else {
930      if (options.style.include(':'))
931        this.style = options.style.parseStyle();
932      else {
933        this.element.addClassName(options.style);
934        this.style = $H(this.element.getStyles());
935        this.element.removeClassName(options.style);
936        var css = this.element.getStyles();
937        this.style = this.style.reject(function(style) {
938          return style.value == css[style.key];
939        });
940        options.afterFinishInternal = function(effect) {
941          effect.element.addClassName(effect.options.style);
942          effect.transforms.each(function(transform) {
943            effect.element.style[transform.style] = '';
944          });
945        };
946      }
947    }
948    this.start(options);
949  },
950
951  setup: function(){
952    function parseColor(color){
953      if (!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff';
954      color = color.parseColor();
955      return $R(0,2).map(function(i){
956        return parseInt( color.slice(i*2+1,i*2+3), 16 );
957      });
958    }
959    this.transforms = this.style.map(function(pair){
960      var property = pair[0], value = pair[1], unit = null;
961
962      if (value.parseColor('#zzzzzz') != '#zzzzzz') {
963        value = value.parseColor();
964        unit  = 'color';
965      } else if (property == 'opacity') {
966        value = parseFloat(value);
967        if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
968          this.element.setStyle({zoom: 1});
969      } else if (Element.CSS_LENGTH.test(value)) {
970          var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/);
971          value = parseFloat(components[1]);
972          unit = (components.length == 3) ? components[2] : null;
973      }
974
975      var originalValue = this.element.getStyle(property);
976      return {
977        style: property.camelize(),
978        originalValue: unit=='color' ? parseColor(originalValue) : parseFloat(originalValue || 0),
979        targetValue: unit=='color' ? parseColor(value) : value,
980        unit: unit
981      };
982    }.bind(this)).reject(function(transform){
983      return (
984        (transform.originalValue == transform.targetValue) ||
985        (
986          transform.unit != 'color' &&
987          (isNaN(transform.originalValue) || isNaN(transform.targetValue))
988        )
989      );
990    });
991  },
992  update: function(position) {
993    var style = { }, transform, i = this.transforms.length;
994    while(i--)
995      style[(transform = this.transforms[i]).style] =
996        transform.unit=='color' ? '#'+
997          (Math.round(transform.originalValue[0]+
998            (transform.targetValue[0]-transform.originalValue[0])*position)).toColorPart() +
999          (Math.round(transform.originalValue[1]+
1000            (transform.targetValue[1]-transform.originalValue[1])*position)).toColorPart() +
1001          (Math.round(transform.originalValue[2]+
1002            (transform.targetValue[2]-transform.originalValue[2])*position)).toColorPart() :
1003        (transform.originalValue +
1004          (transform.targetValue - transform.originalValue) * position).toFixed(3) +
1005            (transform.unit === null ? '' : transform.unit);
1006    this.element.setStyle(style, true);
1007  }
1008});
1009
1010Effect.Transform = Class.create({
1011  initialize: function(tracks){
1012    this.tracks  = [];
1013    this.options = arguments[1] || { };
1014    this.addTracks(tracks);
1015  },
1016  addTracks: function(tracks){
1017    tracks.each(function(track){
1018      track = $H(track);
1019      var data = track.values().first();
1020      this.tracks.push($H({
1021        ids:     track.keys().first(),
1022        effect:  Effect.Morph,
1023        options: { style: data }
1024      }));
1025    }.bind(this));
1026    return this;
1027  },
1028  play: function(){
1029    return new Effect.Parallel(
1030      this.tracks.map(function(track){
1031        var ids = track.get('ids'), effect = track.get('effect'), options = track.get('options');
1032        var elements = [$(ids) || $$(ids)].flatten();
1033        return elements.map(function(e){ return new effect(e, Object.extend({ sync:true }, options)) });
1034      }).flatten(),
1035      this.options
1036    );
1037  }
1038});
1039
1040Element.CSS_PROPERTIES = $w(
1041  'backgroundColor backgroundPosition borderBottomColor borderBottomStyle ' +
1042  'borderBottomWidth borderLeftColor borderLeftStyle borderLeftWidth ' +
1043  'borderRightColor borderRightStyle borderRightWidth borderSpacing ' +
1044  'borderTopColor borderTopStyle borderTopWidth bottom clip color ' +
1045  'fontSize fontWeight height left letterSpacing lineHeight ' +
1046  'marginBottom marginLeft marginRight marginTop markerOffset maxHeight '+
1047  'maxWidth minHeight minWidth opacity outlineColor outlineOffset ' +
1048  'outlineWidth paddingBottom paddingLeft paddingRight paddingTop ' +
1049  'right textIndent top width wordSpacing zIndex');
1050
1051Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
1052
1053String.__parseStyleElement = document.createElement('div');
1054String.prototype.parseStyle = function(){
1055  var style, styleRules = $H();
1056  if (Prototype.Browser.WebKit)
1057    style = new Element('div',{style:this}).style;
1058  else {
1059    String.__parseStyleElement.innerHTML = '<div style="' + this + '"></div>';
1060    style = String.__parseStyleElement.childNodes[0].style;
1061  }
1062
1063  Element.CSS_PROPERTIES.each(function(property){
1064    if (style[property]) styleRules.set(property, style[property]);
1065  });
1066
1067  if (Prototype.Browser.IE && this.include('opacity'))
1068    styleRules.set('opacity', this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1]);
1069
1070  return styleRules;
1071};
1072
1073if (document.defaultView && document.defaultView.getComputedStyle) {
1074  Element.getStyles = function(element) {
1075    var css = document.defaultView.getComputedStyle($(element), null);
1076    return Element.CSS_PROPERTIES.inject({ }, function(styles, property) {
1077      styles[property] = css[property];
1078      return styles;
1079    });
1080  };
1081} else {
1082  Element.getStyles = function(element) {
1083    element = $(element);
1084    var css = element.currentStyle, styles;
1085    styles = Element.CSS_PROPERTIES.inject({ }, function(results, property) {
1086      results[property] = css[property];
1087      return results;
1088    });
1089    if (!styles.opacity) styles.opacity = element.getOpacity();
1090    return styles;
1091  };
1092}
1093
1094Effect.Methods = {
1095  morph: function(element, style) {
1096    element = $(element);
1097    new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || { }));
1098    return element;
1099  },
1100  visualEffect: function(element, effect, options) {
1101    element = $(element);
1102    var s = effect.dasherize().camelize(), klass = s.charAt(0).toUpperCase() + s.substring(1);
1103    new Effect[klass](element, options);
1104    return element;
1105  },
1106  highlight: function(element, options) {
1107    element = $(element);
1108    new Effect.Highlight(element, options);
1109    return element;
1110  }
1111};
1112
1113$w('fade appear grow shrink fold blindUp blindDown slideUp slideDown '+
1114  'pulsate shake puff squish switchOff dropOut').each(
1115  function(effect) {
1116    Effect.Methods[effect] = function(element, options){
1117      element = $(element);
1118      Effect[effect.charAt(0).toUpperCase() + effect.substring(1)](element, options);
1119      return element;
1120    };
1121  }
1122);
1123
1124$w('getInlineOpacity forceRerendering setContentZoom collectTextNodes collectTextNodesIgnoreClass getStyles').each(
1125  function(f) { Effect.Methods[f] = Element[f]; }
1126);
1127
1128Element.addMethods(Effect.Methods);
Note: See TracBrowser for help on using the repository browser.