]> projects.mako.cc - selectricity-live/blob - public/javascripts/effects.js
removed old debugger code that was accidentally committed
[selectricity-live] / public / javascripts / effects.js
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
12 String.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
28 Element.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
35 Element.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
43 Element.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
50 Element.getInlineOpacity = function(element){
51   return $(element).style.opacity || '';
52 };
53
54 Element.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
65 var 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
159 Effect.DefaultOptions.transition = Effect.Transitions.sinoidal;
160
161 /* ------------- core effects ------------- */
162
163 Effect.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
217 Effect.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 };
226 Effect.Queue = Effect.Queues.get('global');
227
228 Effect.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
313 Effect.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
332 Effect.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
347 Effect.Event = Class.create(Effect.Base, {
348   initialize: function() {
349     this.start(Object.extend({ duration: 0 }, arguments[0] || { }));
350   },
351   update: Prototype.emptyFunction
352 });
353
354 Effect.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
372 Effect.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
401 Effect.MoveBy = function(element, toTop, toLeft) {
402   return new Effect.Move(element,
403     Object.extend({ x: toLeft, y: toTop }, arguments[3] || { }));
404 };
405
406 Effect.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
480 Effect.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
515 Effect.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
532 Effect.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
546 Effect.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
561 Effect.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
585 Effect.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
599 Effect.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
617 Effect.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
639 Effect.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
659 Effect.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
686 Effect.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
714 Effect.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
744 Effect.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
756 Effect.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
830 Effect.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
884 Effect.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
899 Effect.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
920 Effect.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
1010 Effect.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
1040 Element.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
1051 Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
1052
1053 String.__parseStyleElement = document.createElement('div');
1054 String.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
1073 if (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
1094 Effect.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
1128 Element.addMethods(Effect.Methods);

Benjamin Mako Hill || Want to submit a patch?