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