source: products/qPloneDropDownMenu/branches/0.2/skins/qPloneDropDownMenu/javascripts/effects.js @ 1

Last change on this file since 1 was 1, checked in by myroslav, 18 years ago

Building directory structure
File size: 32.1 KB
Line 
1// Copyright (c) 2005 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// See scriptaculous.js for full license. 
8
9// converts rgb() and #xxx to #xxxxxx format, 
10// returns self (or first argument) if not convertable 
11String.prototype.parseColor = function() { 
12  var color = '#'; 
13  if(this.slice(0,4) == 'rgb(') { 
14    var cols = this.slice(4,this.length-1).split(','); 
15    var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3); 
16  } else { 
17    if(this.slice(0,1) == '#') { 
18      if(this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase(); 
19      if(this.length==7) color = this.toLowerCase(); 
20    } 
21  } 
22  return(color.length==7 ? color : (arguments[0] || this)); 
23}
24
25/*--------------------------------------------------------------------------*/
26
27Element.collectTextNodes = function(element) { 
28  return $A($(element).childNodes).collect( function(node) {
29    return (node.nodeType==3 ? node.nodeValue : 
30      (node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
31  }).flatten().join('');
32}
33
34Element.collectTextNodesIgnoreClass = function(element, className) { 
35  return $A($(element).childNodes).collect( function(node) {
36    return (node.nodeType==3 ? node.nodeValue : 
37      ((node.hasChildNodes() && !Element.hasClassName(node,className)) ? 
38        Element.collectTextNodesIgnoreClass(node, className) : ''));
39  }).flatten().join('');
40}
41
42Element.setContentZoom = function(element, percent) {
43  element = $(element); 
44  Element.setStyle(element, {fontSize: (percent/100) + 'em'});   
45  if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
46}
47
48Element.getOpacity = function(element){ 
49  var opacity;
50  if (opacity = Element.getStyle(element, 'opacity')) 
51    return parseFloat(opacity); 
52  if (opacity = (Element.getStyle(element, 'filter') || '').match(/alpha\(opacity=(.*)\)/)) 
53    if(opacity[1]) return parseFloat(opacity[1]) / 100; 
54  return 1.0; 
55}
56
57Element.setOpacity = function(element, value){ 
58  element= $(element); 
59  if (value == 1){
60    Element.setStyle(element, { opacity: 
61      (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? 
62      0.999999 : null });
63    if(/MSIE/.test(navigator.userAgent)) 
64      Element.setStyle(element, {filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')}); 
65  } else { 
66    if(value < 0.00001) value = 0; 
67    Element.setStyle(element, {opacity: value});
68    if(/MSIE/.test(navigator.userAgent)) 
69     Element.setStyle(element, 
70       { filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +
71                 'alpha(opacity='+value*100+')' }); 
72  }
73} 
74 
75Element.getInlineOpacity = function(element){ 
76  return $(element).style.opacity || '';
77} 
78
79Element.childrenWithClassName = function(element, className, findFirst) {
80  var classNameRegExp = new RegExp("(^|\\s)" + className + "(\\s|$)");
81  var results = $A($(element).getElementsByTagName('*'))[findFirst ? 'detect' : 'select']( function(c) { 
82    return (c.className && c.className.match(classNameRegExp));
83  });
84  if(!results) results = [];
85  return results;
86}
87
88Element.forceRerendering = function(element) {
89  try {
90    element = $(element);
91    var n = document.createTextNode(' ');
92    element.appendChild(n);
93    element.removeChild(n);
94  } catch(e) { }
95};
96
97/*--------------------------------------------------------------------------*/
98
99Array.prototype.call = function() {
100  var args = arguments;
101  this.each(function(f){ f.apply(this, args) });
102}
103
104/*--------------------------------------------------------------------------*/
105
106var Effect = {
107  tagifyText: function(element) {
108    var tagifyStyle = 'position:relative';
109    if(/MSIE/.test(navigator.userAgent)) tagifyStyle += ';zoom:1';
110    element = $(element);
111    $A(element.childNodes).each( function(child) {
112      if(child.nodeType==3) {
113        child.nodeValue.toArray().each( function(character) {
114          element.insertBefore(
115            Builder.node('span',{style: tagifyStyle},
116              character == ' ' ? String.fromCharCode(160) : character), 
117              child);
118        });
119        Element.remove(child);
120      }
121    });
122  },
123  multiple: function(element, effect) {
124    var elements;
125    if(((typeof element == 'object') || 
126        (typeof element == 'function')) && 
127       (element.length))
128      elements = element;
129    else
130      elements = $(element).childNodes;
131     
132    var options = Object.extend({
133      speed: 0.1,
134      delay: 0.0
135    }, arguments[2] || {});
136    var masterDelay = options.delay;
137
138    $A(elements).each( function(element, index) {
139      new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
140    });
141  },
142  PAIRS: {
143    'slide':  ['SlideDown','SlideUp'],
144    'blind':  ['BlindDown','BlindUp'],
145    'appear': ['Appear','Fade']
146  },
147  toggle: function(element, effect) {
148    element = $(element);
149    effect = (effect || 'appear').toLowerCase();
150    var options = Object.extend({
151      queue: { position:'end', scope:(element.id || 'global'), limit: 1 }
152    }, arguments[2] || {});
153    Effect[element.visible() ? 
154      Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
155  }
156};
157
158var Effect2 = Effect; // deprecated
159
160/* ------------- transitions ------------- */
161
162Effect.Transitions = {}
163
164Effect.Transitions.linear = function(pos) {
165  return pos;
166}
167Effect.Transitions.sinoidal = function(pos) {
168  return (-Math.cos(pos*Math.PI)/2) + 0.5;
169}
170Effect.Transitions.reverse  = function(pos) {
171  return 1-pos;
172}
173Effect.Transitions.flicker = function(pos) {
174  return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
175}
176Effect.Transitions.wobble = function(pos) {
177  return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
178}
179Effect.Transitions.pulse = function(pos) {
180  return (Math.floor(pos*10) % 2 == 0 ? 
181    (pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10)));
182}
183Effect.Transitions.none = function(pos) {
184  return 0;
185}
186Effect.Transitions.full = function(pos) {
187  return 1;
188}
189
190/* ------------- core effects ------------- */
191
192Effect.ScopedQueue = Class.create();
193Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
194  initialize: function() {
195    this.effects  = [];
196    this.interval = null;
197  },
198  _each: function(iterator) {
199    this.effects._each(iterator);
200  },
201  add: function(effect) {
202    var timestamp = new Date().getTime();
203   
204    var position = (typeof effect.options.queue == 'string') ? 
205      effect.options.queue : effect.options.queue.position;
206   
207    switch(position) {
208      case 'front':
209        // move unstarted effects after this effect 
210        this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
211            e.startOn  += effect.finishOn;
212            e.finishOn += effect.finishOn;
213          });
214        break;
215      case 'end':
216        // start effect after last queued effect has finished
217        timestamp = this.effects.pluck('finishOn').max() || timestamp;
218        break;
219    }
220   
221    effect.startOn  += timestamp;
222    effect.finishOn += timestamp;
223
224    if(!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit))
225      this.effects.push(effect);
226   
227    if(!this.interval) 
228      this.interval = setInterval(this.loop.bind(this), 40);
229  },
230  remove: function(effect) {
231    this.effects = this.effects.reject(function(e) { return e==effect });
232    if(this.effects.length == 0) {
233      clearInterval(this.interval);
234      this.interval = null;
235    }
236  },
237  loop: function() {
238    var timePos = new Date().getTime();
239    this.effects.invoke('loop', timePos);
240  }
241});
242
243Effect.Queues = {
244  instances: $H(),
245  get: function(queueName) {
246    if(typeof queueName != 'string') return queueName;
247   
248    if(!this.instances[queueName])
249      this.instances[queueName] = new Effect.ScopedQueue();
250     
251    return this.instances[queueName];
252  }
253}
254Effect.Queue = Effect.Queues.get('global');
255
256Effect.DefaultOptions = {
257  transition: Effect.Transitions.sinoidal,
258  duration:   1.0,   // seconds
259  fps:        25.0,  // max. 25fps due to Effect.Queue implementation
260  sync:       false, // true for combining
261  from:       0.0,
262  to:         1.0,
263  delay:      0.0,
264  queue:      'parallel'
265}
266
267Effect.Base = function() {};
268Effect.Base.prototype = {
269  position: null,
270  start: function(options) {
271    this.options      = Object.extend(Object.extend({},Effect.DefaultOptions), options || {});
272    this.currentFrame = 0;
273    this.state        = 'idle';
274    this.startOn      = this.options.delay*1000;
275    this.finishOn     = this.startOn + (this.options.duration*1000);
276    this.event('beforeStart');
277    if(!this.options.sync)
278      Effect.Queues.get(typeof this.options.queue == 'string' ? 
279        'global' : this.options.queue.scope).add(this);
280  },
281  loop: function(timePos) {
282    if(timePos >= this.startOn) {
283      if(timePos >= this.finishOn) {
284        this.render(1.0);
285        this.cancel();
286        this.event('beforeFinish');
287        if(this.finish) this.finish(); 
288        this.event('afterFinish');
289        return; 
290      }
291      var pos   = (timePos - this.startOn) / (this.finishOn - this.startOn);
292      var frame = Math.round(pos * this.options.fps * this.options.duration);
293      if(frame > this.currentFrame) {
294        this.render(pos);
295        this.currentFrame = frame;
296      }
297    }
298  },
299  render: function(pos) {
300    if(this.state == 'idle') {
301      this.state = 'running';
302      this.event('beforeSetup');
303      if(this.setup) this.setup();
304      this.event('afterSetup');
305    }
306    if(this.state == 'running') {
307      if(this.options.transition) pos = this.options.transition(pos);
308      pos *= (this.options.to-this.options.from);
309      pos += this.options.from;
310      this.position = pos;
311      this.event('beforeUpdate');
312      if(this.update) this.update(pos);
313      this.event('afterUpdate');
314    }
315  },
316  cancel: function() {
317    if(!this.options.sync)
318      Effect.Queues.get(typeof this.options.queue == 'string' ? 
319        'global' : this.options.queue.scope).remove(this);
320    this.state = 'finished';
321  },
322  event: function(eventName) {
323    if(this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this);
324    if(this.options[eventName]) this.options[eventName](this);
325  },
326  inspect: function() {
327    return '#<Effect:' + $H(this).inspect() + ',options:' + $H(this.options).inspect() + '>';
328  }
329}
330
331Effect.Parallel = Class.create();
332Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), {
333  initialize: function(effects) {
334    this.effects = effects || [];
335    this.start(arguments[1]);
336  },
337  update: function(position) {
338    this.effects.invoke('render', position);
339  },
340  finish: function(position) {
341    this.effects.each( function(effect) {
342      effect.render(1.0);
343      effect.cancel();
344      effect.event('beforeFinish');
345      if(effect.finish) effect.finish(position);
346      effect.event('afterFinish');
347    });
348  }
349});
350
351Effect.Opacity = Class.create();
352Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
353  initialize: function(element) {
354    this.element = $(element);
355    // make this work on IE on elements without 'layout'
356    if(/MSIE/.test(navigator.userAgent) && (!this.element.hasLayout))
357      this.element.setStyle({zoom: 1});
358    var options = Object.extend({
359      from: this.element.getOpacity() || 0.0,
360      to:   1.0
361    }, arguments[1] || {});
362    this.start(options);
363  },
364  update: function(position) {
365    this.element.setOpacity(position);
366  }
367});
368
369Effect.Move = Class.create();
370Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), {
371  initialize: function(element) {
372    this.element = $(element);
373    var options = Object.extend({
374      x:    0,
375      y:    0,
376      mode: 'relative'
377    }, arguments[1] || {});
378    this.start(options);
379  },
380  setup: function() {
381    // Bug in Opera: Opera returns the "real" position of a static element or
382    // relative element that does not have top/left explicitly set.
383    // ==> Always set top and left for position relative elements in your stylesheets
384    // (to 0 if you do not need them)
385    this.element.makePositioned();
386    this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
387    this.originalTop  = parseFloat(this.element.getStyle('top')  || '0');
388    if(this.options.mode == 'absolute') {
389      // absolute movement, so we need to calc deltaX and deltaY
390      this.options.x = this.options.x - this.originalLeft;
391      this.options.y = this.options.y - this.originalTop;
392    }
393  },
394  update: function(position) {
395    this.element.setStyle({
396      left: this.options.x  * position + this.originalLeft + 'px',
397      top:  this.options.y  * position + this.originalTop  + 'px'
398    });
399  }
400});
401
402// for backwards compatibility
403Effect.MoveBy = function(element, toTop, toLeft) {
404  return new Effect.Move(element, 
405    Object.extend({ x: toLeft, y: toTop }, arguments[3] || {}));
406};
407
408Effect.Scale = Class.create();
409Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
410  initialize: function(element, percent) {
411    this.element = $(element)
412    var options = Object.extend({
413      scaleX: true,
414      scaleY: true,
415      scaleContent: true,
416      scaleFromCenter: false,
417      scaleMode: 'box',        // 'box' or 'contents' or {} with provided values
418      scaleFrom: 100.0,
419      scaleTo:   percent
420    }, arguments[2] || {});
421    this.start(options);
422  },
423  setup: function() {
424    this.restoreAfterFinish = this.options.restoreAfterFinish || false;
425    this.elementPositioning = this.element.getStyle('position');
426   
427    this.originalStyle = {};
428    ['top','left','width','height','fontSize'].each( function(k) {
429      this.originalStyle[k] = this.element.style[k];
430    }.bind(this));
431     
432    this.originalTop  = this.element.offsetTop;
433    this.originalLeft = this.element.offsetLeft;
434   
435    var fontSize = this.element.getStyle('font-size') || '100%';
436    ['em','px','%'].each( function(fontSizeType) {
437      if(fontSize.indexOf(fontSizeType)>0) {
438        this.fontSize     = parseFloat(fontSize);
439        this.fontSizeType = fontSizeType;
440      }
441    }.bind(this));
442   
443    this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;
444   
445    this.dims = null;
446    if(this.options.scaleMode=='box')
447      this.dims = [this.element.offsetHeight, this.element.offsetWidth];
448    if(/^content/.test(this.options.scaleMode))
449      this.dims = [this.element.scrollHeight, this.element.scrollWidth];
450    if(!this.dims)
451      this.dims = [this.options.scaleMode.originalHeight,
452                   this.options.scaleMode.originalWidth];
453  },
454  update: function(position) {
455    var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
456    if(this.options.scaleContent && this.fontSize)
457      this.element.setStyle({fontSize: this.fontSize * currentScale + this.fontSizeType });
458    this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale);
459  },
460  finish: function(position) {
461    if (this.restoreAfterFinish) this.element.setStyle(this.originalStyle);
462  },
463  setDimensions: function(height, width) {
464    var d = {};
465    if(this.options.scaleX) d.width = width + 'px';
466    if(this.options.scaleY) d.height = height + 'px';
467    if(this.options.scaleFromCenter) {
468      var topd  = (height - this.dims[0])/2;
469      var leftd = (width  - this.dims[1])/2;
470      if(this.elementPositioning == 'absolute') {
471        if(this.options.scaleY) d.top = this.originalTop-topd + 'px';
472        if(this.options.scaleX) d.left = this.originalLeft-leftd + 'px';
473      } else {
474        if(this.options.scaleY) d.top = -topd + 'px';
475        if(this.options.scaleX) d.left = -leftd + 'px';
476      }
477    }
478    this.element.setStyle(d);
479  }
480});
481
482Effect.Highlight = Class.create();
483Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), {
484  initialize: function(element) {
485    this.element = $(element);
486    var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || {});
487    this.start(options);
488  },
489  setup: function() {
490    // Prevent executing on elements not in the layout flow
491    if(this.element.getStyle('display')=='none') { this.cancel(); return; }
492    // Disable background image during the effect
493    this.oldStyle = {
494      backgroundImage: this.element.getStyle('background-image') };
495    this.element.setStyle({backgroundImage: 'none'});
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+(Math.round(this._base[i]+(this._delta[i]*position)).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 = Class.create();
516Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {
517  initialize: function(element) {
518    this.element = $(element);
519    this.start(arguments[1] || {});
520  },
521  setup: function() {
522    Position.prepare();
523    var offsets = Position.cumulativeOffset(this.element);
524    if(this.options.offset) offsets[1] += this.options.offset;
525    var max = window.innerHeight ? 
526      window.height - window.innerHeight :
527      document.body.scrollHeight - 
528        (document.documentElement.clientHeight ? 
529          document.documentElement.clientHeight : document.body.clientHeight);
530    this.scrollStart = Position.deltaY;
531    this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart;
532  },
533  update: function(position) {
534    Position.prepare();
535    window.scrollTo(Position.deltaX, 
536      this.scrollStart + (position*this.delta));
537  }
538});
539
540/* ------------- combination effects ------------- */
541
542Effect.Fade = function(element) {
543  element = $(element);
544  var oldOpacity = element.getInlineOpacity();
545  var options = Object.extend({
546  from: element.getOpacity() || 1.0,
547  to:   0.0,
548  afterFinishInternal: function(effect) { 
549    if(effect.options.to!=0) return;
550    effect.element.hide();
551    effect.element.setStyle({opacity: oldOpacity}); 
552  }}, arguments[1] || {});
553  return new Effect.Opacity(element,options);
554}
555
556Effect.Appear = function(element) {
557  element = $(element);
558  var options = Object.extend({
559  from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
560  to:   1.0,
561  // force Safari to render floated elements properly
562  afterFinishInternal: function(effect) {
563    effect.element.forceRerendering();
564  },
565  beforeSetup: function(effect) {
566    effect.element.setOpacity(effect.options.from);
567    effect.element.show(); 
568  }}, arguments[1] || {});
569  return new Effect.Opacity(element,options);
570}
571
572Effect.Puff = function(element) {
573  element = $(element);
574  var oldStyle = { opacity: element.getInlineOpacity(), position: element.getStyle('position') };
575  return new Effect.Parallel(
576   [ new Effect.Scale(element, 200, 
577      { sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }), 
578     new Effect.Opacity(element, { sync: true, to: 0.0 } ) ], 
579     Object.extend({ duration: 1.0, 
580      beforeSetupInternal: function(effect) {
581        effect.effects[0].element.setStyle({position: 'absolute'}); },
582      afterFinishInternal: function(effect) {
583         effect.effects[0].element.hide();
584         effect.effects[0].element.setStyle(oldStyle); }
585     }, arguments[1] || {})
586   );
587}
588
589Effect.BlindUp = function(element) {
590  element = $(element);
591  element.makeClipping();
592  return new Effect.Scale(element, 0, 
593    Object.extend({ scaleContent: false, 
594      scaleX: false, 
595      restoreAfterFinish: true,
596      afterFinishInternal: function(effect) {
597        effect.element.hide();
598        effect.element.undoClipping();
599      } 
600    }, arguments[1] || {})
601  );
602}
603
604Effect.BlindDown = function(element) {
605  element = $(element);
606  var elementDimensions = element.getDimensions();
607  return new Effect.Scale(element, 100, 
608    Object.extend({ scaleContent: false, 
609      scaleX: false,
610      scaleFrom: 0,
611      scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
612      restoreAfterFinish: true,
613      afterSetup: function(effect) {
614        effect.element.makeClipping();
615        effect.element.setStyle({height: '0px'});
616        effect.element.show(); 
617      }, 
618      afterFinishInternal: function(effect) {
619        effect.element.undoClipping();
620      }
621    }, arguments[1] || {})
622  );
623}
624
625Effect.SwitchOff = function(element) {
626  element = $(element);
627  var oldOpacity = element.getInlineOpacity();
628  return new Effect.Appear(element, { 
629    duration: 0.4,
630    from: 0,
631    transition: Effect.Transitions.flicker,
632    afterFinishInternal: function(effect) {
633      new Effect.Scale(effect.element, 1, { 
634        duration: 0.3, scaleFromCenter: true,
635        scaleX: false, scaleContent: false, restoreAfterFinish: true,
636        beforeSetup: function(effect) { 
637          effect.element.makePositioned();
638          effect.element.makeClipping();
639        },
640        afterFinishInternal: function(effect) {
641          effect.element.hide();
642          effect.element.undoClipping();
643          effect.element.undoPositioned();
644          effect.element.setStyle({opacity: oldOpacity});
645        }
646      })
647    }
648  });
649}
650
651Effect.DropOut = function(element) {
652  element = $(element);
653  var oldStyle = {
654    top: element.getStyle('top'),
655    left: element.getStyle('left'),
656    opacity: element.getInlineOpacity() };
657  return new Effect.Parallel(
658    [ new Effect.Move(element, {x: 0, y: 100, sync: true }), 
659      new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
660    Object.extend(
661      { duration: 0.5,
662        beforeSetup: function(effect) {
663          effect.effects[0].element.makePositioned(); 
664        },
665        afterFinishInternal: function(effect) {
666          effect.effects[0].element.hide();
667          effect.effects[0].element.undoPositioned();
668          effect.effects[0].element.setStyle(oldStyle);
669        } 
670      }, arguments[1] || {}));
671}
672
673Effect.Shake = function(element) {
674  element = $(element);
675  var oldStyle = {
676    top: element.getStyle('top'),
677    left: element.getStyle('left') };
678    return new Effect.Move(element, 
679      { x:  20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
680    new Effect.Move(effect.element,
681      { x: -40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
682    new Effect.Move(effect.element,
683      { x:  40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
684    new Effect.Move(effect.element,
685      { x: -40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
686    new Effect.Move(effect.element,
687      { x:  40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
688    new Effect.Move(effect.element,
689      { x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
690        effect.element.undoPositioned();
691        effect.element.setStyle(oldStyle);
692  }}) }}) }}) }}) }}) }});
693}
694
695Effect.SlideDown = function(element) {
696  element = $(element);
697  element.cleanWhitespace();
698  // SlideDown need to have the content of the element wrapped in a container element with fixed height!
699  var oldInnerBottom = $(element.firstChild).getStyle('bottom');
700  var elementDimensions = element.getDimensions();
701  return new Effect.Scale(element, 100, Object.extend({ 
702    scaleContent: false, 
703    scaleX: false, 
704    scaleFrom: window.opera ? 0 : 1,
705    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
706    restoreAfterFinish: true,
707    afterSetup: function(effect) {
708      effect.element.makePositioned();
709      effect.element.firstChild.makePositioned();
710      if(window.opera) effect.element.setStyle({top: ''});
711      effect.element.makeClipping();
712      effect.element.setStyle({height: '0px'});
713      effect.element.show(); },
714    afterUpdateInternal: function(effect) {
715      effect.element.firstChild.setStyle({bottom:
716        (effect.dims[0] - effect.element.clientHeight) + 'px' }); 
717    },
718    afterFinishInternal: function(effect) {
719      effect.element.undoClipping(); 
720      // IE will crash if child is undoPositioned first
721      if(/MSIE/.test(navigator.userAgent)){
722        effect.element.undoPositioned();
723        effect.element.firstChild.undoPositioned();
724      }else{
725        effect.element.firstChild.undoPositioned();
726        effect.element.undoPositioned();
727      }
728      effect.element.firstChild.setStyle({bottom: oldInnerBottom}); }
729    }, arguments[1] || {})
730  );
731}
732 
733Effect.SlideUp = function(element) {
734  element = $(element);
735  element.cleanWhitespace();
736  var oldInnerBottom = $(element.firstChild).getStyle('bottom');
737  return new Effect.Scale(element, window.opera ? 0 : 1,
738   Object.extend({ scaleContent: false, 
739    scaleX: false, 
740    scaleMode: 'box',
741    scaleFrom: 100,
742    restoreAfterFinish: true,
743    beforeStartInternal: function(effect) {
744      effect.element.makePositioned();
745      effect.element.firstChild.makePositioned();
746      if(window.opera) effect.element.setStyle({top: ''});
747      effect.element.makeClipping();
748      effect.element.show(); }, 
749    afterUpdateInternal: function(effect) {
750      effect.element.firstChild.setStyle({bottom:
751        (effect.dims[0] - effect.element.clientHeight) + 'px' }); },
752    afterFinishInternal: function(effect) {
753      effect.element.hide();
754      effect.element.undoClipping();
755      effect.element.firstChild.undoPositioned();
756      effect.element.undoPositioned();
757      effect.element.setStyle({bottom: oldInnerBottom}); }
758   }, arguments[1] || {})
759  );
760}
761
762// Bug in opera makes the TD containing this element expand for a instance after finish
763Effect.Squish = function(element) {
764  return new Effect.Scale(element, window.opera ? 1 : 0, 
765    { restoreAfterFinish: true,
766      beforeSetup: function(effect) {
767        effect.element.makeClipping(effect.element); }, 
768      afterFinishInternal: function(effect) {
769        effect.element.hide(effect.element); 
770        effect.element.undoClipping(effect.element); }
771  });
772}
773
774Effect.Grow = function(element) {
775  element = $(element);
776  var options = Object.extend({
777    direction: 'center',
778    moveTransition: Effect.Transitions.sinoidal,
779    scaleTransition: Effect.Transitions.sinoidal,
780    opacityTransition: Effect.Transitions.full
781  }, arguments[1] || {});
782  var oldStyle = {
783    top: element.style.top,
784    left: element.style.left,
785    height: element.style.height,
786    width: element.style.width,
787    opacity: element.getInlineOpacity() };
788
789  var dims = element.getDimensions();   
790  var initialMoveX, initialMoveY;
791  var moveX, moveY;
792 
793  switch (options.direction) {
794    case 'top-left':
795      initialMoveX = initialMoveY = moveX = moveY = 0; 
796      break;
797    case 'top-right':
798      initialMoveX = dims.width;
799      initialMoveY = moveY = 0;
800      moveX = -dims.width;
801      break;
802    case 'bottom-left':
803      initialMoveX = moveX = 0;
804      initialMoveY = dims.height;
805      moveY = -dims.height;
806      break;
807    case 'bottom-right':
808      initialMoveX = dims.width;
809      initialMoveY = dims.height;
810      moveX = -dims.width;
811      moveY = -dims.height;
812      break;
813    case 'center':
814      initialMoveX = dims.width / 2;
815      initialMoveY = dims.height / 2;
816      moveX = -dims.width / 2;
817      moveY = -dims.height / 2;
818      break;
819  }
820 
821  return new Effect.Move(element, {
822    x: initialMoveX,
823    y: initialMoveY,
824    duration: 0.01, 
825    beforeSetup: function(effect) {
826      effect.element.hide();
827      effect.element.makeClipping();
828      effect.element.makePositioned();
829    },
830    afterFinishInternal: function(effect) {
831      new Effect.Parallel(
832        [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
833          new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
834          new Effect.Scale(effect.element, 100, {
835            scaleMode: { originalHeight: dims.height, originalWidth: dims.width }, 
836            sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
837        ], Object.extend({
838             beforeSetup: function(effect) {
839               effect.effects[0].element.setStyle({height: '0px'});
840               effect.effects[0].element.show(); 
841             },
842             afterFinishInternal: function(effect) {
843               effect.effects[0].element.undoClipping();
844               effect.effects[0].element.undoPositioned();
845               effect.effects[0].element.setStyle(oldStyle); 
846             }
847           }, options)
848      )
849    }
850  });
851}
852
853Effect.Shrink = function(element) {
854  element = $(element);
855  var options = Object.extend({
856    direction: 'center',
857    moveTransition: Effect.Transitions.sinoidal,
858    scaleTransition: Effect.Transitions.sinoidal,
859    opacityTransition: Effect.Transitions.none
860  }, arguments[1] || {});
861  var oldStyle = {
862    top: element.style.top,
863    left: element.style.left,
864    height: element.style.height,
865    width: element.style.width,
866    opacity: element.getInlineOpacity() };
867
868  var dims = element.getDimensions();
869  var moveX, moveY;
870 
871  switch (options.direction) {
872    case 'top-left':
873      moveX = moveY = 0;
874      break;
875    case 'top-right':
876      moveX = dims.width;
877      moveY = 0;
878      break;
879    case 'bottom-left':
880      moveX = 0;
881      moveY = dims.height;
882      break;
883    case 'bottom-right':
884      moveX = dims.width;
885      moveY = dims.height;
886      break;
887    case 'center': 
888      moveX = dims.width / 2;
889      moveY = dims.height / 2;
890      break;
891  }
892 
893  return new Effect.Parallel(
894    [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
895      new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
896      new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
897    ], Object.extend({           
898         beforeStartInternal: function(effect) {
899           effect.effects[0].element.makePositioned();
900           effect.effects[0].element.makeClipping(); },
901         afterFinishInternal: function(effect) {
902           effect.effects[0].element.hide();
903           effect.effects[0].element.undoClipping();
904           effect.effects[0].element.undoPositioned();
905           effect.effects[0].element.setStyle(oldStyle); }
906       }, options)
907  );
908}
909
910Effect.Pulsate = function(element) {
911  element = $(element);
912  var options    = arguments[1] || {};
913  var oldOpacity = element.getInlineOpacity();
914  var transition = options.transition || Effect.Transitions.sinoidal;
915  var reverser   = function(pos){ return transition(1-Effect.Transitions.pulse(pos)) };
916  reverser.bind(transition);
917  return new Effect.Opacity(element, 
918    Object.extend(Object.extend({  duration: 3.0, from: 0,
919      afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
920    }, options), {transition: reverser}));
921}
922
923Effect.Fold = function(element) {
924  element = $(element);
925  var oldStyle = {
926    top: element.style.top,
927    left: element.style.left,
928    width: element.style.width,
929    height: element.style.height };
930  Element.makeClipping(element);
931  return new Effect.Scale(element, 5, Object.extend({   
932    scaleContent: false,
933    scaleX: false,
934    afterFinishInternal: function(effect) {
935    new Effect.Scale(element, 1, { 
936      scaleContent: false, 
937      scaleY: false,
938      afterFinishInternal: function(effect) {
939        effect.element.hide();
940        effect.element.undoClipping(); 
941        effect.element.setStyle(oldStyle);
942      } });
943  }}, arguments[1] || {}));
944};
945
946['setOpacity','getOpacity','getInlineOpacity','forceRerendering','setContentZoom',
947 'collectTextNodes','collectTextNodesIgnoreClass','childrenWithClassName'].each( 
948  function(f) { Element.Methods[f] = Element[f]; }
949);
950
951Element.Methods.visualEffect = function(element, effect, options) {
952  s = effect.gsub(/_/, '-').camelize();
953  effect_class = s.charAt(0).toUpperCase() + s.substring(1);
954  new Effect[effect_class](element, options);
955  return $(element);
956};
957
958Element.addMethods();
Note: See TracBrowser for help on using the repository browser.