rails 0.14.4 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of rails might be problematic. Click here for more details.
- data/CHANGELOG +13 -0
- data/Rakefile +5 -5
- data/html/index.html +1 -1
- data/html/javascripts/dragdrop.js +177 -132
- data/html/javascripts/effects.js +258 -308
- data/html/javascripts/prototype.js +25 -8
- data/lib/commands/performance/benchmarker.rb +1 -1
- data/lib/commands/performance/profiler.rb +1 -1
- data/lib/rails_generator/commands.rb +5 -6
- data/lib/rails_generator/lookup.rb +5 -2
- data/lib/rails_generator/scripts.rb +2 -2
- data/lib/rails_version.rb +3 -3
- metadata +7 -7
data/html/javascripts/effects.js
CHANGED
@@ -11,8 +11,8 @@
|
|
11
11
|
// converts rgb() and #xxx to #xxxxxx format,
|
12
12
|
// returns self (or first argument) if not convertable
|
13
13
|
String.prototype.parseColor = function() {
|
14
|
-
color =
|
15
|
-
if(this.slice(0,4) ==
|
14
|
+
var color = '#';
|
15
|
+
if(this.slice(0,4) == 'rgb(') {
|
16
16
|
var cols = this.slice(4,this.length-1).split(',');
|
17
17
|
var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3);
|
18
18
|
} else {
|
@@ -26,8 +26,8 @@ String.prototype.parseColor = function() {
|
|
26
26
|
|
27
27
|
Element.collectTextNodesIgnoreClass = function(element, ignoreclass) {
|
28
28
|
var children = $(element).childNodes;
|
29
|
-
var text =
|
30
|
-
var classtest = new RegExp(
|
29
|
+
var text = '';
|
30
|
+
var classtest = new RegExp('^([^ ]+ )*' + ignoreclass+ '( [^ ]+)*$','i');
|
31
31
|
|
32
32
|
for (var i = 0; i < children.length; i++) {
|
33
33
|
if(children[i].nodeType==3) {
|
@@ -41,69 +41,70 @@ Element.collectTextNodesIgnoreClass = function(element, ignoreclass) {
|
|
41
41
|
return text;
|
42
42
|
}
|
43
43
|
|
44
|
+
Element.setStyle = function(element, style) {
|
45
|
+
element = $(element);
|
46
|
+
for(k in style) element.style[k.camelize()] = style[k];
|
47
|
+
}
|
48
|
+
|
44
49
|
Element.setContentZoom = function(element, percent) {
|
45
|
-
element
|
46
|
-
element.style.fontSize = (percent/100) + "em";
|
50
|
+
Element.setStyle(element, {fontSize: (percent/100) + 'em'});
|
47
51
|
if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
|
48
52
|
}
|
49
53
|
|
50
54
|
Element.getOpacity = function(element){
|
51
|
-
var opacity;
|
52
|
-
if (opacity = Element.getStyle(element,
|
55
|
+
var opacity;
|
56
|
+
if (opacity = Element.getStyle(element, 'opacity'))
|
53
57
|
return parseFloat(opacity);
|
54
|
-
if (opacity = (Element.getStyle(element,
|
58
|
+
if (opacity = (Element.getStyle(element, 'filter') || '').match(/alpha\(opacity=(.*)\)/))
|
55
59
|
if(opacity[1]) return parseFloat(opacity[1]) / 100;
|
56
60
|
return 1.0;
|
57
61
|
}
|
58
62
|
|
59
63
|
Element.setOpacity = function(element, value){
|
60
64
|
element= $(element);
|
61
|
-
|
62
|
-
|
63
|
-
|
65
|
+
if (value == 1){
|
66
|
+
Element.setStyle(element, { opacity:
|
67
|
+
(/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
|
68
|
+
0.999999 : null });
|
64
69
|
if(/MSIE/.test(navigator.userAgent))
|
65
|
-
|
70
|
+
Element.setStyle(element, {filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')});
|
66
71
|
} else {
|
67
72
|
if(value < 0.00001) value = 0;
|
68
|
-
|
73
|
+
Element.setStyle(element, {opacity: value});
|
69
74
|
if(/MSIE/.test(navigator.userAgent))
|
70
|
-
|
71
|
-
|
75
|
+
Element.setStyle(element,
|
76
|
+
{ filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +
|
77
|
+
'alpha(opacity='+value*100+')' });
|
72
78
|
}
|
73
79
|
}
|
74
80
|
|
75
81
|
Element.getInlineOpacity = function(element){
|
76
|
-
|
77
|
-
var op;
|
78
|
-
op = element.style.opacity;
|
79
|
-
if (typeof op != "undefined" && op != "") return op;
|
80
|
-
return "";
|
81
|
-
}
|
82
|
-
|
83
|
-
Element.setInlineOpacity = function(element, value){
|
84
|
-
element= $(element);
|
85
|
-
var els = element.style;
|
86
|
-
els.opacity = value;
|
82
|
+
return $(element).style.opacity || '';
|
87
83
|
}
|
88
|
-
|
84
|
+
|
89
85
|
Element.childrenWithClassName = function(element, className) {
|
90
86
|
return $A($(element).getElementsByTagName('*')).select(
|
91
87
|
function(c) { return Element.hasClassName(c, className) });
|
92
|
-
}
|
93
|
-
|
88
|
+
}
|
89
|
+
|
90
|
+
Array.prototype.call = function() {
|
91
|
+
var args = arguments;
|
92
|
+
this.each(function(f){ f.apply(this, args) });
|
93
|
+
}
|
94
|
+
|
94
95
|
/*--------------------------------------------------------------------------*/
|
95
96
|
|
96
97
|
var Effect = {
|
97
98
|
tagifyText: function(element) {
|
98
|
-
var tagifyStyle =
|
99
|
-
if(/MSIE/.test(navigator.userAgent)) tagifyStyle +=
|
99
|
+
var tagifyStyle = 'position:relative';
|
100
|
+
if(/MSIE/.test(navigator.userAgent)) tagifyStyle += ';zoom:1';
|
100
101
|
element = $(element);
|
101
102
|
$A(element.childNodes).each( function(child) {
|
102
103
|
if(child.nodeType==3) {
|
103
104
|
child.nodeValue.toArray().each( function(character) {
|
104
105
|
element.insertBefore(
|
105
106
|
Builder.node('span',{style: tagifyStyle},
|
106
|
-
character ==
|
107
|
+
character == ' ' ? String.fromCharCode(160) : character),
|
107
108
|
child);
|
108
109
|
});
|
109
110
|
Element.remove(child);
|
@@ -123,11 +124,10 @@ var Effect = {
|
|
123
124
|
speed: 0.1,
|
124
125
|
delay: 0.0
|
125
126
|
}, arguments[2] || {});
|
126
|
-
var
|
127
|
-
var delay = options.delay;
|
127
|
+
var masterDelay = options.delay;
|
128
128
|
|
129
129
|
$A(elements).each( function(element, index) {
|
130
|
-
new effect(element, Object.extend(options, { delay:
|
130
|
+
new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
|
131
131
|
});
|
132
132
|
}
|
133
133
|
};
|
@@ -258,13 +258,15 @@ Effect.Base.prototype = {
|
|
258
258
|
if(this.setup) this.setup();
|
259
259
|
this.event('afterSetup');
|
260
260
|
}
|
261
|
-
if(this.
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
261
|
+
if(this.state == 'running') {
|
262
|
+
if(this.options.transition) pos = this.options.transition(pos);
|
263
|
+
pos *= (this.options.to-this.options.from);
|
264
|
+
pos += this.options.from;
|
265
|
+
this.position = pos;
|
266
|
+
this.event('beforeUpdate');
|
267
|
+
if(this.update) this.update(pos);
|
268
|
+
this.event('afterUpdate');
|
269
|
+
}
|
268
270
|
},
|
269
271
|
cancel: function() {
|
270
272
|
if(!this.options.sync) Effect.Queue.remove(this);
|
@@ -273,6 +275,9 @@ Effect.Base.prototype = {
|
|
273
275
|
event: function(eventName) {
|
274
276
|
if(this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this);
|
275
277
|
if(this.options[eventName]) this.options[eventName](this);
|
278
|
+
},
|
279
|
+
inspect: function() {
|
280
|
+
return '#<Effect:' + $H(this).inspect() + ',options:' + $H(this.options).inspect() + '>';
|
276
281
|
}
|
277
282
|
}
|
278
283
|
|
@@ -302,7 +307,7 @@ Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
|
|
302
307
|
this.element = $(element);
|
303
308
|
// make this work on IE on elements without 'layout'
|
304
309
|
if(/MSIE/.test(navigator.userAgent) && (!this.element.hasLayout))
|
305
|
-
this.element
|
310
|
+
Element.setStyle(this.element, {zoom: 1});
|
306
311
|
var options = Object.extend({
|
307
312
|
from: Element.getOpacity(this.element) || 0.0,
|
308
313
|
to: 1.0
|
@@ -326,20 +331,16 @@ Object.extend(Object.extend(Effect.MoveBy.prototype, Effect.Base.prototype), {
|
|
326
331
|
// Bug in Opera: Opera returns the "real" position of a static element or
|
327
332
|
// relative element that does not have top/left explicitly set.
|
328
333
|
// ==> Always set top and left for position relative elements in your stylesheets
|
329
|
-
// (to 0 if you do not need them)
|
330
|
-
|
334
|
+
// (to 0 if you do not need them)
|
331
335
|
Element.makePositioned(this.element);
|
332
336
|
this.originalTop = parseFloat(Element.getStyle(this.element,'top') || '0');
|
333
337
|
this.originalLeft = parseFloat(Element.getStyle(this.element,'left') || '0');
|
334
338
|
},
|
335
339
|
update: function(position) {
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
setPosition: function(topd, leftd) {
|
341
|
-
this.element.style.top = topd + "px";
|
342
|
-
this.element.style.left = leftd + "px";
|
340
|
+
Element.setStyle(this.element, {
|
341
|
+
top: this.toTop * position + this.originalTop + 'px',
|
342
|
+
left: this.toLeft * position + this.originalLeft + 'px'
|
343
|
+
});
|
343
344
|
}
|
344
345
|
});
|
345
346
|
|
@@ -359,33 +360,31 @@ Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
|
|
359
360
|
this.start(options);
|
360
361
|
},
|
361
362
|
setup: function() {
|
362
|
-
var effect = this;
|
363
|
-
|
364
363
|
this.restoreAfterFinish = this.options.restoreAfterFinish || false;
|
365
364
|
this.elementPositioning = Element.getStyle(this.element,'position');
|
366
365
|
|
367
|
-
|
366
|
+
this.originalStyle = {};
|
368
367
|
['top','left','width','height','fontSize'].each( function(k) {
|
369
|
-
|
370
|
-
});
|
368
|
+
this.originalStyle[k] = this.element.style[k];
|
369
|
+
}.bind(this));
|
371
370
|
|
372
371
|
this.originalTop = this.element.offsetTop;
|
373
372
|
this.originalLeft = this.element.offsetLeft;
|
374
373
|
|
375
|
-
var fontSize = Element.getStyle(this.element,'font-size') ||
|
374
|
+
var fontSize = Element.getStyle(this.element,'font-size') || '100%';
|
376
375
|
['em','px','%'].each( function(fontSizeType) {
|
377
376
|
if(fontSize.indexOf(fontSizeType)>0) {
|
378
|
-
|
379
|
-
|
377
|
+
this.fontSize = parseFloat(fontSize);
|
378
|
+
this.fontSizeType = fontSizeType;
|
380
379
|
}
|
381
|
-
});
|
380
|
+
}.bind(this));
|
382
381
|
|
383
382
|
this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;
|
384
383
|
|
385
384
|
this.dims = null;
|
386
385
|
if(this.options.scaleMode=='box')
|
387
|
-
this.dims = [this.element.
|
388
|
-
if(this.options.scaleMode
|
386
|
+
this.dims = [this.element.offsetHeight, this.element.offsetWidth];
|
387
|
+
if(/^content/.test(this.options.scaleMode))
|
389
388
|
this.dims = [this.element.scrollHeight, this.element.scrollWidth];
|
390
389
|
if(!this.dims)
|
391
390
|
this.dims = [this.options.scaleMode.originalHeight,
|
@@ -394,32 +393,28 @@ Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
|
|
394
393
|
update: function(position) {
|
395
394
|
var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
|
396
395
|
if(this.options.scaleContent && this.fontSize)
|
397
|
-
this.element
|
396
|
+
Element.setStyle(this.element, {fontSize: this.fontSize * currentScale + this.fontSizeType });
|
398
397
|
this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale);
|
399
398
|
},
|
400
399
|
finish: function(position) {
|
401
|
-
if (this.restoreAfterFinish)
|
402
|
-
var effect = this;
|
403
|
-
['top','left','width','height','fontSize'].each( function(k) {
|
404
|
-
effect.element.style[k] = effect.originalStyle[k];
|
405
|
-
});
|
406
|
-
}
|
400
|
+
if (this.restoreAfterFinish) Element.setStyle(this.element, this.originalStyle);
|
407
401
|
},
|
408
402
|
setDimensions: function(height, width) {
|
409
|
-
var
|
410
|
-
if(this.options.scaleX)
|
411
|
-
if(this.options.scaleY)
|
403
|
+
var d = {};
|
404
|
+
if(this.options.scaleX) d.width = width + 'px';
|
405
|
+
if(this.options.scaleY) d.height = height + 'px';
|
412
406
|
if(this.options.scaleFromCenter) {
|
413
407
|
var topd = (height - this.dims[0])/2;
|
414
408
|
var leftd = (width - this.dims[1])/2;
|
415
409
|
if(this.elementPositioning == 'absolute') {
|
416
|
-
if(this.options.scaleY)
|
417
|
-
if(this.options.scaleX)
|
410
|
+
if(this.options.scaleY) d.top = this.originalTop-topd + 'px';
|
411
|
+
if(this.options.scaleX) d.left = this.originalLeft-leftd + 'px';
|
418
412
|
} else {
|
419
|
-
if(this.options.scaleY)
|
420
|
-
if(this.options.scaleX)
|
413
|
+
if(this.options.scaleY) d.top = -topd + 'px';
|
414
|
+
if(this.options.scaleX) d.left = -leftd + 'px';
|
421
415
|
}
|
422
416
|
}
|
417
|
+
Element.setStyle(this.element, d);
|
423
418
|
}
|
424
419
|
});
|
425
420
|
|
@@ -427,41 +422,32 @@ Effect.Highlight = Class.create();
|
|
427
422
|
Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), {
|
428
423
|
initialize: function(element) {
|
429
424
|
this.element = $(element);
|
430
|
-
var options = Object.extend({
|
431
|
-
startcolor: "#ffff99"
|
432
|
-
}, arguments[1] || {});
|
425
|
+
var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || {});
|
433
426
|
this.start(options);
|
434
427
|
},
|
435
428
|
setup: function() {
|
436
429
|
// Prevent executing on elements not in the layout flow
|
437
|
-
if(this.element
|
430
|
+
if(Element.getStyle(this.element, 'display')=='none') { this.cancel(); return; }
|
438
431
|
// Disable background image during the effect
|
439
|
-
this.
|
440
|
-
|
432
|
+
this.oldStyle = {
|
433
|
+
backgroundImage: Element.getStyle(this.element, 'background-image') };
|
434
|
+
Element.setStyle(this.element, {backgroundImage: 'none'});
|
441
435
|
if(!this.options.endcolor)
|
442
436
|
this.options.endcolor = Element.getStyle(this.element, 'background-color').parseColor('#ffffff');
|
443
|
-
if
|
444
|
-
this.options.restorecolor = this.element
|
437
|
+
if(!this.options.restorecolor)
|
438
|
+
this.options.restorecolor = Element.getStyle(this.element, 'background-color');
|
445
439
|
// init color calculations
|
446
|
-
this.
|
447
|
-
|
448
|
-
parseInt(this.options.startcolor.slice(3,5),16),
|
449
|
-
parseInt(this.options.startcolor.slice(5),16) ];
|
450
|
-
this.colors_delta = [
|
451
|
-
parseInt(this.options.endcolor.slice(1,3),16)-this.colors_base[0],
|
452
|
-
parseInt(this.options.endcolor.slice(3,5),16)-this.colors_base[1],
|
453
|
-
parseInt(this.options.endcolor.slice(5),16)-this.colors_base[2]];
|
440
|
+
this._base = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this));
|
441
|
+
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));
|
454
442
|
},
|
455
443
|
update: function(position) {
|
456
|
-
|
457
|
-
return Math.round(
|
458
|
-
});
|
459
|
-
this.element.style.backgroundColor = "#" +
|
460
|
-
colors[0].toColorPart() + colors[1].toColorPart() + colors[2].toColorPart();
|
444
|
+
Element.setStyle(this.element,{backgroundColor: $R(0,2).inject('#',function(m,v,i){
|
445
|
+
return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) });
|
461
446
|
},
|
462
447
|
finish: function() {
|
463
|
-
this.element.
|
464
|
-
|
448
|
+
Element.setStyle(this.element, Object.extend(this.oldStyle, {
|
449
|
+
backgroundColor: this.options.restorecolor
|
450
|
+
}));
|
465
451
|
}
|
466
452
|
});
|
467
453
|
|
@@ -474,6 +460,7 @@ Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {
|
|
474
460
|
setup: function() {
|
475
461
|
Position.prepare();
|
476
462
|
var offsets = Position.cumulativeOffset(this.element);
|
463
|
+
if(this.options.offset) offsets[1] += this.options.offset;
|
477
464
|
var max = window.innerHeight ?
|
478
465
|
window.height - window.innerHeight :
|
479
466
|
document.body.scrollHeight -
|
@@ -496,42 +483,38 @@ Effect.Fade = function(element) {
|
|
496
483
|
var options = Object.extend({
|
497
484
|
from: Element.getOpacity(element) || 1.0,
|
498
485
|
to: 0.0,
|
499
|
-
afterFinishInternal: function(effect)
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
}
|
504
|
-
}
|
486
|
+
afterFinishInternal: function(effect) { with(Element) {
|
487
|
+
if(effect.options.to!=0) return;
|
488
|
+
hide(effect.element);
|
489
|
+
setStyle(effect.element, {opacity: oldOpacity}); }}
|
505
490
|
}, arguments[1] || {});
|
506
491
|
return new Effect.Opacity(element,options);
|
507
492
|
}
|
508
493
|
|
509
494
|
Effect.Appear = function(element) {
|
510
495
|
var options = Object.extend({
|
511
|
-
from: (Element.getStyle(element,
|
496
|
+
from: (Element.getStyle(element, 'display') == 'none' ? 0.0 : Element.getOpacity(element) || 0.0),
|
512
497
|
to: 1.0,
|
513
|
-
beforeSetup: function(effect)
|
514
|
-
|
515
|
-
|
498
|
+
beforeSetup: function(effect) { with(Element) {
|
499
|
+
setOpacity(effect.element, effect.options.from);
|
500
|
+
show(effect.element); }}
|
516
501
|
}, arguments[1] || {});
|
517
502
|
return new Effect.Opacity(element,options);
|
518
503
|
}
|
519
504
|
|
520
505
|
Effect.Puff = function(element) {
|
521
506
|
element = $(element);
|
522
|
-
var
|
523
|
-
var oldPosition = element.style.position;
|
507
|
+
var oldStyle = { opacity: Element.getInlineOpacity(element), position: Element.getStyle(element, 'position') };
|
524
508
|
return new Effect.Parallel(
|
525
509
|
[ new Effect.Scale(element, 200,
|
526
510
|
{ sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }),
|
527
511
|
new Effect.Opacity(element, { sync: true, to: 0.0 } ) ],
|
528
512
|
Object.extend({ duration: 1.0,
|
529
|
-
beforeSetupInternal: function(effect)
|
530
|
-
|
531
|
-
afterFinishInternal: function(effect)
|
532
|
-
|
533
|
-
effect.effects[0].element
|
534
|
-
Element.setInlineOpacity(effect.effects[0].element, oldOpacity); }
|
513
|
+
beforeSetupInternal: function(effect) { with(Element) {
|
514
|
+
setStyle(effect.effects[0].element, {position: 'absolute'}); }},
|
515
|
+
afterFinishInternal: function(effect) { with(Element) {
|
516
|
+
hide(effect.effects[0].element);
|
517
|
+
setStyle(effect.effects[0].element, oldStyle); }}
|
535
518
|
}, arguments[1] || {})
|
536
519
|
);
|
537
520
|
}
|
@@ -543,18 +526,15 @@ Effect.BlindUp = function(element) {
|
|
543
526
|
Object.extend({ scaleContent: false,
|
544
527
|
scaleX: false,
|
545
528
|
restoreAfterFinish: true,
|
546
|
-
afterFinishInternal: function(effect)
|
547
|
-
|
548
|
-
Element.hide(effect.element);
|
549
|
-
Element.undoClipping(effect.element);
|
550
|
-
}
|
529
|
+
afterFinishInternal: function(effect) { with(Element) {
|
530
|
+
[hide, undoClipping].call(effect.element); }}
|
551
531
|
}, arguments[1] || {})
|
552
532
|
);
|
553
533
|
}
|
554
534
|
|
555
535
|
Effect.BlindDown = function(element) {
|
556
536
|
element = $(element);
|
557
|
-
var oldHeight = element
|
537
|
+
var oldHeight = Element.getStyle(element, 'height');
|
558
538
|
var elementDimensions = Element.getDimensions(element);
|
559
539
|
return new Effect.Scale(element, 100,
|
560
540
|
Object.extend({ scaleContent: false,
|
@@ -562,15 +542,15 @@ Effect.BlindDown = function(element) {
|
|
562
542
|
scaleFrom: 0,
|
563
543
|
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
|
564
544
|
restoreAfterFinish: true,
|
565
|
-
afterSetup: function(effect) {
|
566
|
-
|
567
|
-
effect.element
|
568
|
-
|
569
|
-
},
|
570
|
-
afterFinishInternal: function(effect) {
|
571
|
-
|
572
|
-
effect.element
|
573
|
-
}
|
545
|
+
afterSetup: function(effect) { with(Element) {
|
546
|
+
makeClipping(effect.element);
|
547
|
+
setStyle(effect.element, {height: '0px'});
|
548
|
+
show(effect.element);
|
549
|
+
}},
|
550
|
+
afterFinishInternal: function(effect) { with(Element) {
|
551
|
+
undoClipping(effect.element);
|
552
|
+
setStyle(effect.element, {height: oldHeight});
|
553
|
+
}}
|
574
554
|
}, arguments[1] || {})
|
575
555
|
);
|
576
556
|
}
|
@@ -586,16 +566,13 @@ Effect.SwitchOff = function(element) {
|
|
586
566
|
new Effect.Scale(effect.element, 1, {
|
587
567
|
duration: 0.3, scaleFromCenter: true,
|
588
568
|
scaleX: false, scaleContent: false, restoreAfterFinish: true,
|
589
|
-
beforeSetup: function(effect) {
|
590
|
-
|
591
|
-
|
592
|
-
|
593
|
-
|
594
|
-
|
595
|
-
|
596
|
-
Element.undoPositioned(effect.element);
|
597
|
-
Element.setInlineOpacity(effect.element, oldOpacity);
|
598
|
-
}
|
569
|
+
beforeSetup: function(effect) { with(Element) {
|
570
|
+
[makePositioned,makeClipping].call(effect.element);
|
571
|
+
}},
|
572
|
+
afterFinishInternal: function(effect) { with(Element) {
|
573
|
+
[hide,undoClipping,undoPositioned].call(effect.element);
|
574
|
+
setStyle(effect.element, {opacity: oldOpacity});
|
575
|
+
}}
|
599
576
|
})
|
600
577
|
}
|
601
578
|
});
|
@@ -603,29 +580,28 @@ Effect.SwitchOff = function(element) {
|
|
603
580
|
|
604
581
|
Effect.DropOut = function(element) {
|
605
582
|
element = $(element);
|
606
|
-
var
|
607
|
-
|
608
|
-
|
583
|
+
var oldStyle = {
|
584
|
+
top: Element.getStyle(element, 'top'),
|
585
|
+
left: Element.getStyle(element, 'left'),
|
586
|
+
opacity: Element.getInlineOpacity(element) };
|
609
587
|
return new Effect.Parallel(
|
610
588
|
[ new Effect.MoveBy(element, 100, 0, { sync: true }),
|
611
589
|
new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
|
612
590
|
Object.extend(
|
613
591
|
{ duration: 0.5,
|
614
|
-
beforeSetup: function(effect) {
|
615
|
-
|
616
|
-
afterFinishInternal: function(effect) {
|
617
|
-
|
618
|
-
|
619
|
-
effect.effects[0].element.style.left = oldLeft;
|
620
|
-
effect.effects[0].element.style.top = oldTop;
|
621
|
-
Element.setInlineOpacity(effect.effects[0].element, oldOpacity); }
|
592
|
+
beforeSetup: function(effect) { with(Element) {
|
593
|
+
makePositioned(effect.effects[0].element); }},
|
594
|
+
afterFinishInternal: function(effect) { with(Element) {
|
595
|
+
[hide, undoPositioned].call(effect.effects[0].element);
|
596
|
+
setStyle(effect.effects[0].element, oldStyle); }}
|
622
597
|
}, arguments[1] || {}));
|
623
598
|
}
|
624
599
|
|
625
600
|
Effect.Shake = function(element) {
|
626
601
|
element = $(element);
|
627
|
-
var
|
628
|
-
|
602
|
+
var oldStyle = {
|
603
|
+
top: Element.getStyle(element, 'top'),
|
604
|
+
left: Element.getStyle(element, 'left') };
|
629
605
|
return new Effect.MoveBy(element, 0, 20,
|
630
606
|
{ duration: 0.05, afterFinishInternal: function(effect) {
|
631
607
|
new Effect.MoveBy(effect.element, 0, -40,
|
@@ -637,39 +613,39 @@ Effect.Shake = function(element) {
|
|
637
613
|
new Effect.MoveBy(effect.element, 0, 40,
|
638
614
|
{ duration: 0.1, afterFinishInternal: function(effect) {
|
639
615
|
new Effect.MoveBy(effect.element, 0, -20,
|
640
|
-
{ duration: 0.05, afterFinishInternal: function(effect) {
|
641
|
-
|
642
|
-
effect.element
|
643
|
-
|
644
|
-
}}) }}) }}) }}) }}) }});
|
616
|
+
{ duration: 0.05, afterFinishInternal: function(effect) { with(Element) {
|
617
|
+
undoPositioned(effect.element);
|
618
|
+
setStyle(effect.element, oldStyle);
|
619
|
+
}}}) }}) }}) }}) }}) }});
|
645
620
|
}
|
646
621
|
|
647
622
|
Effect.SlideDown = function(element) {
|
648
623
|
element = $(element);
|
649
624
|
Element.cleanWhitespace(element);
|
650
625
|
// SlideDown need to have the content of the element wrapped in a container element with fixed height!
|
651
|
-
var oldInnerBottom = element.firstChild
|
626
|
+
var oldInnerBottom = Element.getStyle(element.firstChild, 'bottom');
|
652
627
|
var elementDimensions = Element.getDimensions(element);
|
653
|
-
return new Effect.Scale(element, 100,
|
654
|
-
|
628
|
+
return new Effect.Scale(element, 100, Object.extend({
|
629
|
+
scaleContent: false,
|
655
630
|
scaleX: false,
|
656
631
|
scaleFrom: 0,
|
657
|
-
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
|
632
|
+
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
|
658
633
|
restoreAfterFinish: true,
|
659
|
-
afterSetup: function(effect) {
|
660
|
-
|
661
|
-
|
662
|
-
|
663
|
-
element
|
664
|
-
|
665
|
-
|
666
|
-
afterUpdateInternal: function(effect) {
|
667
|
-
effect.element.firstChild
|
668
|
-
(effect.dims[0] - effect.element.clientHeight) + 'px'; },
|
669
|
-
afterFinishInternal: function(effect) {
|
670
|
-
|
671
|
-
|
672
|
-
effect.element
|
634
|
+
afterSetup: function(effect) { with(Element) {
|
635
|
+
makePositioned(effect.element);
|
636
|
+
makePositioned(effect.element.firstChild);
|
637
|
+
if(window.opera) setStyle(effect.element, {top: ''});
|
638
|
+
makeClipping(effect.element);
|
639
|
+
setStyle(effect.element, {height: '0px'});
|
640
|
+
show(element); }},
|
641
|
+
afterUpdateInternal: function(effect) { with(Element) {
|
642
|
+
setStyle(effect.element.firstChild, {bottom:
|
643
|
+
(effect.dims[0] - effect.element.clientHeight) + 'px' }); }},
|
644
|
+
afterFinishInternal: function(effect) { with(Element) {
|
645
|
+
undoClipping(effect.element);
|
646
|
+
undoPositioned(effect.element.firstChild);
|
647
|
+
undoPositioned(effect.element);
|
648
|
+
setStyle(effect.element.firstChild, {bottom: oldInnerBottom}); }}
|
673
649
|
}, arguments[1] || {})
|
674
650
|
);
|
675
651
|
}
|
@@ -677,122 +653,111 @@ Effect.SlideDown = function(element) {
|
|
677
653
|
Effect.SlideUp = function(element) {
|
678
654
|
element = $(element);
|
679
655
|
Element.cleanWhitespace(element);
|
680
|
-
var oldInnerBottom = element.firstChild
|
656
|
+
var oldInnerBottom = Element.getStyle(element.firstChild, 'bottom');
|
681
657
|
return new Effect.Scale(element, 0,
|
682
658
|
Object.extend({ scaleContent: false,
|
683
659
|
scaleX: false,
|
684
660
|
scaleMode: 'box',
|
685
661
|
scaleFrom: 100,
|
686
662
|
restoreAfterFinish: true,
|
687
|
-
beforeStartInternal: function(effect) {
|
688
|
-
|
689
|
-
|
690
|
-
|
691
|
-
|
692
|
-
|
693
|
-
afterUpdateInternal: function(effect) {
|
694
|
-
|
695
|
-
|
696
|
-
afterFinishInternal: function(effect) {
|
697
|
-
|
698
|
-
|
699
|
-
|
700
|
-
effect.element.firstChild
|
663
|
+
beforeStartInternal: function(effect) { with(Element) {
|
664
|
+
makePositioned(effect.element);
|
665
|
+
makePositioned(effect.element.firstChild);
|
666
|
+
if(window.opera) setStyle(effect.element, {top: ''});
|
667
|
+
makeClipping(effect.element);
|
668
|
+
show(element); }},
|
669
|
+
afterUpdateInternal: function(effect) { with(Element) {
|
670
|
+
setStyle(effect.element.firstChild, {bottom:
|
671
|
+
(effect.dims[0] - effect.element.clientHeight) + 'px' }); }},
|
672
|
+
afterFinishInternal: function(effect) { with(Element) {
|
673
|
+
[hide, undoClipping].call(effect.element);
|
674
|
+
undoPositioned(effect.element.firstChild);
|
675
|
+
undoPositioned(effect.element);
|
676
|
+
setStyle(effect.element.firstChild, {bottom: oldInnerBottom}); }}
|
701
677
|
}, arguments[1] || {})
|
702
678
|
);
|
703
679
|
}
|
704
680
|
|
681
|
+
// Bug in opera makes the TD containing this element expand for a instance after finish
|
705
682
|
Effect.Squish = function(element) {
|
706
|
-
// Bug in opera makes the TD containing this element expand for a instance after finish
|
707
683
|
return new Effect.Scale(element, window.opera ? 1 : 0,
|
708
684
|
{ restoreAfterFinish: true,
|
709
|
-
beforeSetup: function(effect) {
|
710
|
-
|
711
|
-
afterFinishInternal: function(effect) {
|
712
|
-
|
713
|
-
|
685
|
+
beforeSetup: function(effect) { with(Element) {
|
686
|
+
makeClipping(effect.element); }},
|
687
|
+
afterFinishInternal: function(effect) { with(Element) {
|
688
|
+
hide(effect.element);
|
689
|
+
undoClipping(effect.element); }}
|
714
690
|
});
|
715
691
|
}
|
716
692
|
|
717
693
|
Effect.Grow = function(element) {
|
718
694
|
element = $(element);
|
719
|
-
var options =
|
720
|
-
|
721
|
-
|
722
|
-
|
723
|
-
|
724
|
-
|
725
|
-
var
|
726
|
-
|
727
|
-
|
728
|
-
|
729
|
-
|
730
|
-
|
731
|
-
|
732
|
-
var
|
733
|
-
var opacityTransition = options.opacityTransition || Effect.Transitions.full;
|
734
|
-
|
695
|
+
var options = Object.extend({
|
696
|
+
direction: 'center',
|
697
|
+
moveTransistion: Effect.Transitions.sinoidal,
|
698
|
+
scaleTransition: Effect.Transitions.sinoidal,
|
699
|
+
opacityTransition: Effect.Transitions.full
|
700
|
+
}, arguments[1] || {});
|
701
|
+
var oldStyle = {
|
702
|
+
top: element.style.top,
|
703
|
+
left: element.style.left,
|
704
|
+
height: element.style.height,
|
705
|
+
width: element.style.width,
|
706
|
+
opacity: Element.getInlineOpacity(element) };
|
707
|
+
|
708
|
+
var dims = Element.getDimensions(element);
|
735
709
|
var initialMoveX, initialMoveY;
|
736
710
|
var moveX, moveY;
|
737
711
|
|
738
|
-
switch (direction) {
|
712
|
+
switch (options.direction) {
|
739
713
|
case 'top-left':
|
740
714
|
initialMoveX = initialMoveY = moveX = moveY = 0;
|
741
715
|
break;
|
742
716
|
case 'top-right':
|
743
|
-
initialMoveX =
|
717
|
+
initialMoveX = dims.width;
|
744
718
|
initialMoveY = moveY = 0;
|
745
|
-
moveX = -
|
719
|
+
moveX = -dims.width;
|
746
720
|
break;
|
747
721
|
case 'bottom-left':
|
748
722
|
initialMoveX = moveX = 0;
|
749
|
-
initialMoveY =
|
750
|
-
moveY = -
|
723
|
+
initialMoveY = dims.height;
|
724
|
+
moveY = -dims.height;
|
751
725
|
break;
|
752
726
|
case 'bottom-right':
|
753
|
-
initialMoveX =
|
754
|
-
initialMoveY =
|
755
|
-
moveX = -
|
756
|
-
moveY = -
|
727
|
+
initialMoveX = dims.width;
|
728
|
+
initialMoveY = dims.height;
|
729
|
+
moveX = -dims.width;
|
730
|
+
moveY = -dims.height;
|
757
731
|
break;
|
758
732
|
case 'center':
|
759
|
-
initialMoveX =
|
760
|
-
initialMoveY =
|
761
|
-
moveX = -
|
762
|
-
moveY = -
|
733
|
+
initialMoveX = dims.width / 2;
|
734
|
+
initialMoveY = dims.height / 2;
|
735
|
+
moveX = -dims.width / 2;
|
736
|
+
moveY = -dims.height / 2;
|
763
737
|
break;
|
764
738
|
}
|
765
739
|
|
766
740
|
return new Effect.MoveBy(element, initialMoveY, initialMoveX, {
|
767
741
|
duration: 0.01,
|
768
|
-
beforeSetup: function(effect) {
|
769
|
-
|
770
|
-
|
771
|
-
|
772
|
-
},
|
742
|
+
beforeSetup: function(effect) { with(Element) {
|
743
|
+
hide(effect.element);
|
744
|
+
makeClipping(effect.element);
|
745
|
+
makePositioned(effect.element);
|
746
|
+
}},
|
773
747
|
afterFinishInternal: function(effect) {
|
774
748
|
new Effect.Parallel(
|
775
|
-
[ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: opacityTransition }),
|
776
|
-
new Effect.MoveBy(effect.element, moveY, moveX, { sync: true, transition: moveTransition }),
|
749
|
+
[ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
|
750
|
+
new Effect.MoveBy(effect.element, moveY, moveX, { sync: true, transition: options.moveTransition }),
|
777
751
|
new Effect.Scale(effect.element, 100, {
|
778
|
-
scaleMode: { originalHeight:
|
779
|
-
sync: true, scaleFrom: window.opera ? 1 : 0, transition: scaleTransition, restoreAfterFinish: true})
|
752
|
+
scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
|
753
|
+
sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
|
780
754
|
], Object.extend({
|
781
|
-
beforeSetup: function(effect) {
|
782
|
-
|
783
|
-
|
784
|
-
|
785
|
-
|
786
|
-
|
787
|
-
var els = el.style;
|
788
|
-
Element.undoClipping(el);
|
789
|
-
Element.undoPositioned(el);
|
790
|
-
els.top = oldTop;
|
791
|
-
els.left = oldLeft;
|
792
|
-
els.height = oldHeight;
|
793
|
-
els.width = originalWidth + 'px';
|
794
|
-
Element.setInlineOpacity(el, oldOpacity);
|
795
|
-
}
|
755
|
+
beforeSetup: function(effect) { with(Element) {
|
756
|
+
setStyle(effect.effects[0].element, {height: '0px'});
|
757
|
+
show(effect.effects[0].element); }},
|
758
|
+
afterFinishInternal: function(effect) { with(Element) {
|
759
|
+
[undoClipping, undoPositioned].call(effect.effects[0].element);
|
760
|
+
setStyle(effect.effects[0].element, oldStyle); }}
|
796
761
|
}, options)
|
797
762
|
)
|
798
763
|
}
|
@@ -801,66 +766,54 @@ Effect.Grow = function(element) {
|
|
801
766
|
|
802
767
|
Effect.Shrink = function(element) {
|
803
768
|
element = $(element);
|
804
|
-
var options =
|
805
|
-
|
806
|
-
|
807
|
-
|
808
|
-
|
809
|
-
|
810
|
-
var
|
811
|
-
|
812
|
-
|
813
|
-
|
814
|
-
|
815
|
-
|
816
|
-
|
817
|
-
var
|
818
|
-
|
769
|
+
var options = Object.extend({
|
770
|
+
direction: 'center',
|
771
|
+
moveTransistion: Effect.Transitions.sinoidal,
|
772
|
+
scaleTransition: Effect.Transitions.sinoidal,
|
773
|
+
opacityTransition: Effect.Transitions.none
|
774
|
+
}, arguments[1] || {});
|
775
|
+
var oldStyle = {
|
776
|
+
top: element.style.top,
|
777
|
+
left: element.style.left,
|
778
|
+
height: element.style.height,
|
779
|
+
width: element.style.width,
|
780
|
+
opacity: Element.getInlineOpacity(element) };
|
781
|
+
|
782
|
+
var dims = Element.getDimensions(element);
|
819
783
|
var moveX, moveY;
|
820
784
|
|
821
|
-
switch (direction) {
|
785
|
+
switch (options.direction) {
|
822
786
|
case 'top-left':
|
823
787
|
moveX = moveY = 0;
|
824
788
|
break;
|
825
789
|
case 'top-right':
|
826
|
-
moveX =
|
790
|
+
moveX = dims.width;
|
827
791
|
moveY = 0;
|
828
792
|
break;
|
829
793
|
case 'bottom-left':
|
830
794
|
moveX = 0;
|
831
|
-
moveY =
|
795
|
+
moveY = dims.height;
|
832
796
|
break;
|
833
797
|
case 'bottom-right':
|
834
|
-
moveX =
|
835
|
-
moveY =
|
798
|
+
moveX = dims.width;
|
799
|
+
moveY = dims.height;
|
836
800
|
break;
|
837
801
|
case 'center':
|
838
|
-
moveX =
|
839
|
-
moveY =
|
802
|
+
moveX = dims.width / 2;
|
803
|
+
moveY = dims.height / 2;
|
840
804
|
break;
|
841
805
|
}
|
842
806
|
|
843
807
|
return new Effect.Parallel(
|
844
|
-
[ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: opacityTransition }),
|
845
|
-
new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: scaleTransition, restoreAfterFinish: true}),
|
846
|
-
new Effect.MoveBy(element, moveY, moveX, { sync: true, transition: moveTransition })
|
808
|
+
[ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
|
809
|
+
new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
|
810
|
+
new Effect.MoveBy(element, moveY, moveX, { sync: true, transition: options.moveTransition })
|
847
811
|
], Object.extend({
|
848
|
-
beforeStartInternal: function(effect) {
|
849
|
-
|
850
|
-
|
851
|
-
|
852
|
-
|
853
|
-
var el = effect.effects[0].element;
|
854
|
-
var els = el.style;
|
855
|
-
Element.hide(el);
|
856
|
-
Element.undoClipping(el);
|
857
|
-
Element.undoPositioned(el);
|
858
|
-
els.top = oldTop;
|
859
|
-
els.left = oldLeft;
|
860
|
-
els.height = oldHeight;
|
861
|
-
els.width = oldWidth;
|
862
|
-
Element.setInlineOpacity(el, oldOpacity);
|
863
|
-
}
|
812
|
+
beforeStartInternal: function(effect) { with(Element) {
|
813
|
+
[makePositioned, makeClipping].call(effect.effects[0].element) }},
|
814
|
+
afterFinishInternal: function(effect) { with(Element) {
|
815
|
+
[hide, undoClipping, undoPositioned].call(effect.effects[0].element);
|
816
|
+
setStyle(effect.effects[0].element, oldStyle); }}
|
864
817
|
}, options)
|
865
818
|
);
|
866
819
|
}
|
@@ -874,16 +827,17 @@ Effect.Pulsate = function(element) {
|
|
874
827
|
reverser.bind(transition);
|
875
828
|
return new Effect.Opacity(element,
|
876
829
|
Object.extend(Object.extend({ duration: 3.0, from: 0,
|
877
|
-
afterFinishInternal: function(effect) { Element.
|
830
|
+
afterFinishInternal: function(effect) { Element.setStyle(effect.element, {opacity: oldOpacity}); }
|
878
831
|
}, options), {transition: reverser}));
|
879
832
|
}
|
880
833
|
|
881
834
|
Effect.Fold = function(element) {
|
882
835
|
element = $(element);
|
883
|
-
var
|
884
|
-
|
885
|
-
|
886
|
-
|
836
|
+
var oldStyle = {
|
837
|
+
top: element.style.top,
|
838
|
+
left: element.style.left,
|
839
|
+
width: element.style.width,
|
840
|
+
height: element.style.height };
|
887
841
|
Element.makeClipping(element);
|
888
842
|
return new Effect.Scale(element, 5, Object.extend({
|
889
843
|
scaleContent: false,
|
@@ -892,13 +846,9 @@ Effect.Fold = function(element) {
|
|
892
846
|
new Effect.Scale(element, 1, {
|
893
847
|
scaleContent: false,
|
894
848
|
scaleY: false,
|
895
|
-
afterFinishInternal: function(effect) {
|
896
|
-
|
897
|
-
|
898
|
-
|
899
|
-
effect.element.style.left = originalLeft;
|
900
|
-
effect.element.style.width = originalWidth;
|
901
|
-
effect.element.style.height = originalHeight;
|
902
|
-
} });
|
849
|
+
afterFinishInternal: function(effect) { with(Element) {
|
850
|
+
[hide, undoClipping].call(effect.element);
|
851
|
+
setStyle(effect.element, oldStyle);
|
852
|
+
}} });
|
903
853
|
}}, arguments[1] || {}));
|
904
854
|
}
|