Revision 2932
Added by anderson almost 19 years ago
lib/style/common/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.collectTextNodesIgnoreClass(node, className) : '')); |
|
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'), limit: 1 } |
|
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 |
|
|
213 |
if(!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit)) |
|
214 |
this.effects.push(effect); |
|
215 |
|
|
216 |
if(!this.interval) |
|
217 |
this.interval = setInterval(this.loop.bind(this), 40); |
|
218 |
}, |
|
219 |
remove: function(effect) { |
|
220 |
this.effects = this.effects.reject(function(e) { return e==effect }); |
|
221 |
if(this.effects.length == 0) { |
|
222 |
clearInterval(this.interval); |
|
223 |
this.interval = null; |
|
224 |
} |
|
225 |
}, |
|
226 |
loop: function() { |
|
227 |
var timePos = new Date().getTime(); |
|
228 |
this.effects.invoke('loop', timePos); |
|
229 |
} |
|
230 |
}); |
|
231 |
|
|
232 |
Effect.Queues = { |
|
233 |
instances: $H(), |
|
234 |
get: function(queueName) { |
|
235 |
if(typeof queueName != 'string') return queueName; |
|
236 |
|
|
237 |
if(!this.instances[queueName]) |
|
238 |
this.instances[queueName] = new Effect.ScopedQueue(); |
|
239 |
|
|
240 |
return this.instances[queueName]; |
|
241 |
} |
|
242 |
} |
|
243 |
Effect.Queue = Effect.Queues.get('global'); |
|
244 |
|
|
245 |
Effect.DefaultOptions = { |
|
246 |
transition: Effect.Transitions.sinoidal, |
|
247 |
duration: 1.0, // seconds |
|
248 |
fps: 25.0, // max. 25fps due to Effect.Queue implementation |
|
249 |
sync: false, // true for combining |
|
250 |
from: 0.0, |
|
251 |
to: 1.0, |
|
252 |
delay: 0.0, |
|
253 |
queue: 'parallel' |
|
254 |
} |
|
255 |
|
|
256 |
Effect.Base = function() {}; |
|
257 |
Effect.Base.prototype = { |
|
258 |
position: null, |
|
259 |
start: function(options) { |
|
260 |
this.options = Object.extend(Object.extend({},Effect.DefaultOptions), options || {}); |
|
261 |
this.currentFrame = 0; |
|
262 |
this.state = 'idle'; |
|
263 |
this.startOn = this.options.delay*1000; |
|
264 |
this.finishOn = this.startOn + (this.options.duration*1000); |
|
265 |
this.event('beforeStart'); |
|
266 |
if(!this.options.sync) |
|
267 |
Effect.Queues.get(typeof this.options.queue == 'string' ? |
|
268 |
'global' : this.options.queue.scope).add(this); |
|
269 |
}, |
|
270 |
loop: function(timePos) { |
|
271 |
if(timePos >= this.startOn) { |
|
272 |
if(timePos >= this.finishOn) { |
|
273 |
this.render(1.0); |
|
274 |
this.cancel(); |
|
275 |
this.event('beforeFinish'); |
|
276 |
if(this.finish) this.finish(); |
|
277 |
this.event('afterFinish'); |
|
278 |
return; |
|
279 |
} |
|
280 |
var pos = (timePos - this.startOn) / (this.finishOn - this.startOn); |
|
281 |
var frame = Math.round(pos * this.options.fps * this.options.duration); |
|
282 |
if(frame > this.currentFrame) { |
|
283 |
this.render(pos); |
|
284 |
this.currentFrame = frame; |
|
285 |
} |
|
286 |
} |
|
287 |
}, |
|
288 |
render: function(pos) { |
|
289 |
if(this.state == 'idle') { |
|
290 |
this.state = 'running'; |
|
291 |
this.event('beforeSetup'); |
|
292 |
if(this.setup) this.setup(); |
|
293 |
this.event('afterSetup'); |
|
294 |
} |
|
295 |
if(this.state == 'running') { |
|
296 |
if(this.options.transition) pos = this.options.transition(pos); |
|
297 |
pos *= (this.options.to-this.options.from); |
|
298 |
pos += this.options.from; |
|
299 |
this.position = pos; |
|
300 |
this.event('beforeUpdate'); |
|
301 |
if(this.update) this.update(pos); |
|
302 |
this.event('afterUpdate'); |
|
303 |
} |
|
304 |
}, |
|
305 |
cancel: function() { |
|
306 |
if(!this.options.sync) |
|
307 |
Effect.Queues.get(typeof this.options.queue == 'string' ? |
|
308 |
'global' : this.options.queue.scope).remove(this); |
|
309 |
this.state = 'finished'; |
|
310 |
}, |
|
311 |
event: function(eventName) { |
|
312 |
if(this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this); |
|
313 |
if(this.options[eventName]) this.options[eventName](this); |
|
314 |
}, |
|
315 |
inspect: function() { |
|
316 |
return '#<Effect:' + $H(this).inspect() + ',options:' + $H(this.options).inspect() + '>'; |
|
317 |
} |
|
318 |
} |
|
319 |
|
|
320 |
Effect.Parallel = Class.create(); |
|
321 |
Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), { |
|
322 |
initialize: function(effects) { |
|
323 |
this.effects = effects || []; |
|
324 |
this.start(arguments[1]); |
|
325 |
}, |
|
326 |
update: function(position) { |
|
327 |
this.effects.invoke('render', position); |
|
328 |
}, |
|
329 |
finish: function(position) { |
|
330 |
this.effects.each( function(effect) { |
|
331 |
effect.render(1.0); |
|
332 |
effect.cancel(); |
|
333 |
effect.event('beforeFinish'); |
|
334 |
if(effect.finish) effect.finish(position); |
|
335 |
effect.event('afterFinish'); |
|
336 |
}); |
|
337 |
} |
|
338 |
}); |
|
339 |
|
|
340 |
Effect.Opacity = Class.create(); |
|
341 |
Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), { |
|
342 |
initialize: function(element) { |
|
343 |
this.element = $(element); |
|
344 |
// make this work on IE on elements without 'layout' |
|
345 |
if(/MSIE/.test(navigator.userAgent) && (!this.element.hasLayout)) |
|
346 |
Element.setStyle(this.element, {zoom: 1}); |
|
347 |
var options = Object.extend({ |
|
348 |
from: Element.getOpacity(this.element) || 0.0, |
|
349 |
to: 1.0 |
|
350 |
}, arguments[1] || {}); |
|
351 |
this.start(options); |
|
352 |
}, |
|
353 |
update: function(position) { |
|
354 |
Element.setOpacity(this.element, position); |
|
355 |
} |
|
356 |
}); |
|
357 |
|
|
358 |
Effect.Move = Class.create(); |
|
359 |
Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), { |
|
360 |
initialize: function(element) { |
|
361 |
this.element = $(element); |
|
362 |
var options = Object.extend({ |
|
363 |
x: 0, |
|
364 |
y: 0, |
|
365 |
mode: 'relative' |
|
366 |
}, arguments[1] || {}); |
|
367 |
this.start(options); |
|
368 |
}, |
|
369 |
setup: function() { |
|
370 |
// Bug in Opera: Opera returns the "real" position of a static element or |
|
371 |
// relative element that does not have top/left explicitly set. |
|
372 |
// ==> Always set top and left for position relative elements in your stylesheets |
|
373 |
// (to 0 if you do not need them) |
|
374 |
Element.makePositioned(this.element); |
|
375 |
this.originalLeft = parseFloat(Element.getStyle(this.element,'left') || '0'); |
|
376 |
this.originalTop = parseFloat(Element.getStyle(this.element,'top') || '0'); |
|
377 |
if(this.options.mode == 'absolute') { |
|
378 |
// absolute movement, so we need to calc deltaX and deltaY |
|
379 |
this.options.x = this.options.x - this.originalLeft; |
|
380 |
this.options.y = this.options.y - this.originalTop; |
|
381 |
} |
|
382 |
}, |
|
383 |
update: function(position) { |
|
384 |
Element.setStyle(this.element, { |
|
385 |
left: this.options.x * position + this.originalLeft + 'px', |
|
386 |
top: this.options.y * position + this.originalTop + 'px' |
|
387 |
}); |
|
388 |
} |
|
389 |
}); |
|
390 |
|
|
391 |
// for backwards compatibility |
|
392 |
Effect.MoveBy = function(element, toTop, toLeft) { |
|
393 |
return new Effect.Move(element, |
|
394 |
Object.extend({ x: toLeft, y: toTop }, arguments[3] || {})); |
|
395 |
}; |
|
396 |
|
|
397 |
Effect.Scale = Class.create(); |
|
398 |
Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), { |
|
399 |
initialize: function(element, percent) { |
|
400 |
this.element = $(element) |
|
401 |
var options = Object.extend({ |
|
402 |
scaleX: true, |
|
403 |
scaleY: true, |
|
404 |
scaleContent: true, |
|
405 |
scaleFromCenter: false, |
|
406 |
scaleMode: 'box', // 'box' or 'contents' or {} with provided values |
|
407 |
scaleFrom: 100.0, |
|
408 |
scaleTo: percent |
|
409 |
}, arguments[2] || {}); |
|
410 |
this.start(options); |
|
411 |
}, |
|
412 |
setup: function() { |
|
413 |
this.restoreAfterFinish = this.options.restoreAfterFinish || false; |
|
414 |
this.elementPositioning = Element.getStyle(this.element,'position'); |
|
415 |
|
|
416 |
this.originalStyle = {}; |
|
417 |
['top','left','width','height','fontSize'].each( function(k) { |
|
418 |
this.originalStyle[k] = this.element.style[k]; |
|
419 |
}.bind(this)); |
|
420 |
|
|
421 |
this.originalTop = this.element.offsetTop; |
|
422 |
this.originalLeft = this.element.offsetLeft; |
|
423 |
|
|
424 |
var fontSize = Element.getStyle(this.element,'font-size') || '100%'; |
|
425 |
['em','px','%'].each( function(fontSizeType) { |
|
426 |
if(fontSize.indexOf(fontSizeType)>0) { |
|
427 |
this.fontSize = parseFloat(fontSize); |
|
428 |
this.fontSizeType = fontSizeType; |
|
429 |
} |
|
430 |
}.bind(this)); |
|
431 |
|
|
432 |
this.factor = (this.options.scaleTo - this.options.scaleFrom)/100; |
|
433 |
|
|
434 |
this.dims = null; |
|
435 |
if(this.options.scaleMode=='box') |
|
436 |
this.dims = [this.element.offsetHeight, this.element.offsetWidth]; |
|
437 |
if(/^content/.test(this.options.scaleMode)) |
|
438 |
this.dims = [this.element.scrollHeight, this.element.scrollWidth]; |
|
439 |
if(!this.dims) |
|
440 |
this.dims = [this.options.scaleMode.originalHeight, |
|
441 |
this.options.scaleMode.originalWidth]; |
|
442 |
}, |
|
443 |
update: function(position) { |
|
444 |
var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position); |
|
445 |
if(this.options.scaleContent && this.fontSize) |
|
446 |
Element.setStyle(this.element, {fontSize: this.fontSize * currentScale + this.fontSizeType }); |
|
447 |
this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale); |
|
448 |
}, |
|
449 |
finish: function(position) { |
|
450 |
if (this.restoreAfterFinish) Element.setStyle(this.element, this.originalStyle); |
|
451 |
}, |
|
452 |
setDimensions: function(height, width) { |
|
453 |
var d = {}; |
|
454 |
if(this.options.scaleX) d.width = width + 'px'; |
|
455 |
if(this.options.scaleY) d.height = height + 'px'; |
|
456 |
if(this.options.scaleFromCenter) { |
|
457 |
var topd = (height - this.dims[0])/2; |
|
458 |
var leftd = (width - this.dims[1])/2; |
|
459 |
if(this.elementPositioning == 'absolute') { |
|
460 |
if(this.options.scaleY) d.top = this.originalTop-topd + 'px'; |
|
461 |
if(this.options.scaleX) d.left = this.originalLeft-leftd + 'px'; |
|
462 |
} else { |
|
463 |
if(this.options.scaleY) d.top = -topd + 'px'; |
|
464 |
if(this.options.scaleX) d.left = -leftd + 'px'; |
|
465 |
} |
|
466 |
} |
|
467 |
Element.setStyle(this.element, d); |
|
468 |
} |
|
469 |
}); |
|
470 |
|
|
471 |
Effect.Highlight = Class.create(); |
|
472 |
Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), { |
|
473 |
initialize: function(element) { |
|
474 |
this.element = $(element); |
|
475 |
var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || {}); |
|
476 |
this.start(options); |
|
477 |
}, |
|
478 |
setup: function() { |
|
479 |
// Prevent executing on elements not in the layout flow |
|
480 |
if(Element.getStyle(this.element, 'display')=='none') { this.cancel(); return; } |
|
481 |
// Disable background image during the effect |
|
482 |
this.oldStyle = { |
|
483 |
backgroundImage: Element.getStyle(this.element, 'background-image') }; |
|
484 |
Element.setStyle(this.element, {backgroundImage: 'none'}); |
|
485 |
if(!this.options.endcolor) |
|
486 |
this.options.endcolor = Element.getStyle(this.element, 'background-color').parseColor('#ffffff'); |
|
487 |
if(!this.options.restorecolor) |
|
488 |
this.options.restorecolor = Element.getStyle(this.element, 'background-color'); |
|
489 |
// init color calculations |
|
490 |
this._base = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this)); |
|
491 |
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)); |
|
492 |
}, |
|
493 |
update: function(position) { |
|
494 |
Element.setStyle(this.element,{backgroundColor: $R(0,2).inject('#',function(m,v,i){ |
|
495 |
return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) }); |
|
496 |
}, |
|
497 |
finish: function() { |
|
498 |
Element.setStyle(this.element, Object.extend(this.oldStyle, { |
|
499 |
backgroundColor: this.options.restorecolor |
|
500 |
})); |
|
501 |
} |
|
502 |
}); |
|
503 |
|
|
504 |
Effect.ScrollTo = Class.create(); |
|
505 |
Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), { |
|
506 |
initialize: function(element) { |
|
507 |
this.element = $(element); |
|
508 |
this.start(arguments[1] || {}); |
|
509 |
}, |
|
510 |
setup: function() { |
|
511 |
Position.prepare(); |
|
512 |
var offsets = Position.cumulativeOffset(this.element); |
|
513 |
if(this.options.offset) offsets[1] += this.options.offset; |
|
514 |
var max = window.innerHeight ? |
|
515 |
window.height - window.innerHeight : |
|
516 |
document.body.scrollHeight - |
|
517 |
(document.documentElement.clientHeight ? |
|
518 |
document.documentElement.clientHeight : document.body.clientHeight); |
|
519 |
this.scrollStart = Position.deltaY; |
|
520 |
this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart; |
|
521 |
}, |
|
522 |
update: function(position) { |
|
523 |
Position.prepare(); |
|
524 |
window.scrollTo(Position.deltaX, |
|
525 |
this.scrollStart + (position*this.delta)); |
|
526 |
} |
|
527 |
}); |
|
528 |
|
|
529 |
/* ------------- combination effects ------------- */ |
|
530 |
|
|
531 |
Effect.Fade = function(element) { |
|
532 |
var oldOpacity = Element.getInlineOpacity(element); |
|
533 |
var options = Object.extend({ |
|
534 |
from: Element.getOpacity(element) || 1.0, |
|
535 |
to: 0.0, |
|
536 |
afterFinishInternal: function(effect) { with(Element) { |
|
537 |
if(effect.options.to!=0) return; |
|
538 |
hide(effect.element); |
|
539 |
setStyle(effect.element, {opacity: oldOpacity}); }} |
|
540 |
}, arguments[1] || {}); |
|
541 |
return new Effect.Opacity(element,options); |
|
542 |
} |
|
543 |
|
|
544 |
Effect.Appear = function(element) { |
|
545 |
var options = Object.extend({ |
|
546 |
from: (Element.getStyle(element, 'display') == 'none' ? 0.0 : Element.getOpacity(element) || 0.0), |
|
547 |
to: 1.0, |
|
548 |
beforeSetup: function(effect) { with(Element) { |
|
549 |
setOpacity(effect.element, effect.options.from); |
|
550 |
show(effect.element); }} |
|
551 |
}, arguments[1] || {}); |
|
552 |
return new Effect.Opacity(element,options); |
|
553 |
} |
|
554 |
|
|
555 |
Effect.Puff = function(element) { |
|
556 |
element = $(element); |
|
557 |
var oldStyle = { opacity: Element.getInlineOpacity(element), position: Element.getStyle(element, 'position') }; |
|
558 |
return new Effect.Parallel( |
|
559 |
[ new Effect.Scale(element, 200, |
|
560 |
{ sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }), |
|
561 |
new Effect.Opacity(element, { sync: true, to: 0.0 } ) ], |
|
562 |
Object.extend({ duration: 1.0, |
|
563 |
beforeSetupInternal: function(effect) { with(Element) { |
|
564 |
setStyle(effect.effects[0].element, {position: 'absolute'}); }}, |
|
565 |
afterFinishInternal: function(effect) { with(Element) { |
|
566 |
hide(effect.effects[0].element); |
|
567 |
setStyle(effect.effects[0].element, oldStyle); }} |
|
568 |
}, arguments[1] || {}) |
|
569 |
); |
|
570 |
} |
|
571 |
|
|
572 |
Effect.BlindUp = function(element) { |
|
573 |
element = $(element); |
|
574 |
Element.makeClipping(element); |
|
575 |
return new Effect.Scale(element, 0, |
|
576 |
Object.extend({ scaleContent: false, |
|
577 |
scaleX: false, |
|
578 |
restoreAfterFinish: true, |
|
579 |
afterFinishInternal: function(effect) { with(Element) { |
|
580 |
[hide, undoClipping].call(effect.element); }} |
|
581 |
}, arguments[1] || {}) |
|
582 |
); |
|
583 |
} |
|
584 |
|
|
585 |
Effect.BlindDown = function(element) { |
|
586 |
element = $(element); |
|
587 |
var elementDimensions = Element.getDimensions(element); |
|
588 |
return new Effect.Scale(element, 100, |
|
589 |
Object.extend({ scaleContent: false, |
|
590 |
scaleX: false, |
|
591 |
scaleFrom: 0, |
|
592 |
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width}, |
|
593 |
restoreAfterFinish: true, |
|
594 |
afterSetup: function(effect) { with(Element) { |
|
595 |
makeClipping(effect.element); |
|
596 |
setStyle(effect.element, {height: '0px'}); |
|
597 |
show(effect.element); |
|
598 |
}}, |
|
599 |
afterFinishInternal: function(effect) { |
|
600 |
Element.undoClipping(effect.element); |
|
601 |
} |
|
602 |
}, arguments[1] || {}) |
|
603 |
); |
|
604 |
} |
|
605 |
|
|
606 |
Effect.SwitchOff = function(element) { |
|
607 |
element = $(element); |
|
608 |
var oldOpacity = Element.getInlineOpacity(element); |
|
609 |
return new Effect.Appear(element, { |
|
610 |
duration: 0.4, |
|
611 |
from: 0, |
|
612 |
transition: Effect.Transitions.flicker, |
|
613 |
afterFinishInternal: function(effect) { |
|
614 |
new Effect.Scale(effect.element, 1, { |
|
615 |
duration: 0.3, scaleFromCenter: true, |
|
616 |
scaleX: false, scaleContent: false, restoreAfterFinish: true, |
|
617 |
beforeSetup: function(effect) { with(Element) { |
|
618 |
[makePositioned,makeClipping].call(effect.element); |
|
619 |
}}, |
|
620 |
afterFinishInternal: function(effect) { with(Element) { |
|
621 |
[hide,undoClipping,undoPositioned].call(effect.element); |
|
622 |
setStyle(effect.element, {opacity: oldOpacity}); |
|
623 |
}} |
|
624 |
}) |
|
625 |
} |
|
626 |
}); |
|
627 |
} |
|
628 |
|
|
629 |
Effect.DropOut = function(element) { |
|
630 |
element = $(element); |
|
631 |
var oldStyle = { |
|
632 |
top: Element.getStyle(element, 'top'), |
|
633 |
left: Element.getStyle(element, 'left'), |
|
634 |
opacity: Element.getInlineOpacity(element) }; |
|
635 |
return new Effect.Parallel( |
|
636 |
[ new Effect.Move(element, {x: 0, y: 100, sync: true }), |
|
637 |
new Effect.Opacity(element, { sync: true, to: 0.0 }) ], |
|
638 |
Object.extend( |
|
639 |
{ duration: 0.5, |
|
640 |
beforeSetup: function(effect) { with(Element) { |
|
641 |
makePositioned(effect.effects[0].element); }}, |
|
642 |
afterFinishInternal: function(effect) { with(Element) { |
|
643 |
[hide, undoPositioned].call(effect.effects[0].element); |
|
644 |
setStyle(effect.effects[0].element, oldStyle); }} |
|
645 |
}, arguments[1] || {})); |
|
646 |
} |
|
647 |
|
|
648 |
Effect.Shake = function(element) { |
|
649 |
element = $(element); |
|
650 |
var oldStyle = { |
|
651 |
top: Element.getStyle(element, 'top'), |
|
652 |
left: Element.getStyle(element, 'left') }; |
|
653 |
return new Effect.Move(element, |
|
654 |
{ x: 20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { |
|
655 |
new Effect.Move(effect.element, |
|
656 |
{ x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { |
|
657 |
new Effect.Move(effect.element, |
|
658 |
{ x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { |
|
659 |
new Effect.Move(effect.element, |
|
660 |
{ x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { |
|
661 |
new Effect.Move(effect.element, |
|
662 |
{ x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { |
|
663 |
new Effect.Move(effect.element, |
|
664 |
{ x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { with(Element) { |
|
665 |
undoPositioned(effect.element); |
|
666 |
setStyle(effect.element, oldStyle); |
|
667 |
}}}) }}) }}) }}) }}) }}); |
|
668 |
} |
|
669 |
|
|
670 |
Effect.SlideDown = function(element) { |
|
671 |
element = $(element); |
|
672 |
Element.cleanWhitespace(element); |
|
673 |
// SlideDown need to have the content of the element wrapped in a container element with fixed height! |
|
674 |
var oldInnerBottom = Element.getStyle(element.firstChild, 'bottom'); |
|
675 |
var elementDimensions = Element.getDimensions(element); |
|
676 |
return new Effect.Scale(element, 100, Object.extend({ |
|
677 |
scaleContent: false, |
|
678 |
scaleX: false, |
|
679 |
scaleFrom: 0, |
|
680 |
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width}, |
|
681 |
restoreAfterFinish: true, |
|
682 |
afterSetup: function(effect) { with(Element) { |
|
683 |
makePositioned(effect.element); |
|
684 |
makePositioned(effect.element.firstChild); |
|
685 |
if(window.opera) setStyle(effect.element, {top: ''}); |
|
686 |
makeClipping(effect.element); |
|
687 |
setStyle(effect.element, {height: '0px'}); |
|
688 |
show(element); }}, |
|
689 |
afterUpdateInternal: function(effect) { with(Element) { |
|
690 |
setStyle(effect.element.firstChild, {bottom: |
|
691 |
(effect.dims[0] - effect.element.clientHeight) + 'px' }); }}, |
|
692 |
afterFinishInternal: function(effect) { with(Element) { |
|
693 |
undoClipping(effect.element); |
|
694 |
// IE will crash if child is undoPositioned first |
|
695 |
if(/MSIE/.test(navigator.userAgent)){ |
|
696 |
undoPositioned(effect.element); |
|
697 |
undoPositioned(effect.element.firstChild); |
|
698 |
}else{ |
|
699 |
undoPositioned(effect.element.firstChild); |
|
700 |
undoPositioned(effect.element); |
|
701 |
} |
|
702 |
setStyle(effect.element.firstChild, {bottom: oldInnerBottom}); }} |
|
703 |
}, arguments[1] || {}) |
|
704 |
); |
|
705 |
} |
|
706 |
|
|
707 |
Effect.SlideUp = function(element) { |
|
708 |
element = $(element); |
|
709 |
Element.cleanWhitespace(element); |
|
710 |
var oldInnerBottom = Element.getStyle(element.firstChild, 'bottom'); |
|
711 |
return new Effect.Scale(element, 0, |
|
712 |
Object.extend({ scaleContent: false, |
|
713 |
scaleX: false, |
|
714 |
scaleMode: 'box', |
|
715 |
scaleFrom: 100, |
|
716 |
restoreAfterFinish: true, |
|
717 |
beforeStartInternal: function(effect) { with(Element) { |
|
718 |
makePositioned(effect.element); |
|
719 |
makePositioned(effect.element.firstChild); |
|
720 |
if(window.opera) setStyle(effect.element, {top: ''}); |
|
721 |
makeClipping(effect.element); |
|
722 |
show(element); }}, |
|
723 |
afterUpdateInternal: function(effect) { with(Element) { |
|
724 |
setStyle(effect.element.firstChild, {bottom: |
|
725 |
(effect.dims[0] - effect.element.clientHeight) + 'px' }); }}, |
|
726 |
afterFinishInternal: function(effect) { with(Element) { |
|
727 |
[hide, undoClipping].call(effect.element); |
|
728 |
undoPositioned(effect.element.firstChild); |
|
729 |
undoPositioned(effect.element); |
|
730 |
setStyle(effect.element.firstChild, {bottom: oldInnerBottom}); }} |
|
731 |
}, arguments[1] || {}) |
|
732 |
); |
|
733 |
} |
|
734 |
|
|
735 |
// Bug in opera makes the TD containing this element expand for a instance after finish |
|
736 |
Effect.Squish = function(element) { |
|
737 |
return new Effect.Scale(element, window.opera ? 1 : 0, |
|
738 |
{ restoreAfterFinish: true, |
|
739 |
beforeSetup: function(effect) { with(Element) { |
|
740 |
makeClipping(effect.element); }}, |
|
741 |
afterFinishInternal: function(effect) { with(Element) { |
|
742 |
hide(effect.element); |
|
743 |
undoClipping(effect.element); }} |
|
744 |
}); |
|
745 |
} |
|
746 |
|
|
747 |
Effect.Grow = function(element) { |
|
748 |
element = $(element); |
|
749 |
var options = Object.extend({ |
|
750 |
direction: 'center', |
|
751 |
moveTransition: Effect.Transitions.sinoidal, |
|
752 |
scaleTransition: Effect.Transitions.sinoidal, |
|
753 |
opacityTransition: Effect.Transitions.full |
|
754 |
}, arguments[1] || {}); |
|
755 |
var oldStyle = { |
|
756 |
top: element.style.top, |
|
757 |
left: element.style.left, |
|
758 |
height: element.style.height, |
|
759 |
width: element.style.width, |
|
760 |
opacity: Element.getInlineOpacity(element) }; |
|
761 |
|
|
762 |
var dims = Element.getDimensions(element); |
|
763 |
var initialMoveX, initialMoveY; |
|
764 |
var moveX, moveY; |
|
765 |
|
|
766 |
switch (options.direction) { |
|
767 |
case 'top-left': |
|
768 |
initialMoveX = initialMoveY = moveX = moveY = 0; |
|
769 |
break; |
|
770 |
case 'top-right': |
|
771 |
initialMoveX = dims.width; |
|
772 |
initialMoveY = moveY = 0; |
|
773 |
moveX = -dims.width; |
|
774 |
break; |
|
775 |
case 'bottom-left': |
|
776 |
initialMoveX = moveX = 0; |
|
777 |
initialMoveY = dims.height; |
|
778 |
moveY = -dims.height; |
|
779 |
break; |
|
780 |
case 'bottom-right': |
|
781 |
initialMoveX = dims.width; |
|
782 |
initialMoveY = dims.height; |
|
783 |
moveX = -dims.width; |
|
784 |
moveY = -dims.height; |
|
785 |
break; |
|
786 |
case 'center': |
|
787 |
initialMoveX = dims.width / 2; |
|
788 |
initialMoveY = dims.height / 2; |
|
789 |
moveX = -dims.width / 2; |
|
790 |
moveY = -dims.height / 2; |
|
791 |
break; |
|
792 |
} |
|
793 |
|
|
794 |
return new Effect.Move(element, { |
|
795 |
x: initialMoveX, |
|
796 |
y: initialMoveY, |
|
797 |
duration: 0.01, |
|
798 |
beforeSetup: function(effect) { with(Element) { |
|
799 |
hide(effect.element); |
|
800 |
makeClipping(effect.element); |
|
801 |
makePositioned(effect.element); |
|
802 |
}}, |
|
803 |
afterFinishInternal: function(effect) { |
|
804 |
new Effect.Parallel( |
|
805 |
[ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }), |
|
806 |
new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }), |
|
807 |
new Effect.Scale(effect.element, 100, { |
|
808 |
scaleMode: { originalHeight: dims.height, originalWidth: dims.width }, |
|
809 |
sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true}) |
|
810 |
], Object.extend({ |
|
811 |
beforeSetup: function(effect) { with(Element) { |
|
812 |
setStyle(effect.effects[0].element, {height: '0px'}); |
|
813 |
show(effect.effects[0].element); }}, |
|
814 |
afterFinishInternal: function(effect) { with(Element) { |
|
815 |
[undoClipping, undoPositioned].call(effect.effects[0].element); |
|
816 |
setStyle(effect.effects[0].element, oldStyle); }} |
|
817 |
}, options) |
|
818 |
) |
|
819 |
} |
|
820 |
}); |
|
821 |
} |
|
822 |
|
|
823 |
Effect.Shrink = function(element) { |
|
824 |
element = $(element); |
|
825 |
var options = Object.extend({ |
|
826 |
direction: 'center', |
|
827 |
moveTransition: Effect.Transitions.sinoidal, |
|
828 |
scaleTransition: Effect.Transitions.sinoidal, |
|
829 |
opacityTransition: Effect.Transitions.none |
|
830 |
}, arguments[1] || {}); |
|
831 |
var oldStyle = { |
|
832 |
top: element.style.top, |
|
833 |
left: element.style.left, |
|
834 |
height: element.style.height, |
|
835 |
width: element.style.width, |
|
836 |
opacity: Element.getInlineOpacity(element) }; |
|
837 |
|
|
838 |
var dims = Element.getDimensions(element); |
|
839 |
var moveX, moveY; |
|
840 |
|
|
841 |
switch (options.direction) { |
|
842 |
case 'top-left': |
|
843 |
moveX = moveY = 0; |
|
844 |
break; |
|
845 |
case 'top-right': |
|
846 |
moveX = dims.width; |
|
847 |
moveY = 0; |
|
848 |
break; |
|
849 |
case 'bottom-left': |
|
850 |
moveX = 0; |
|
851 |
moveY = dims.height; |
|
852 |
break; |
|
853 |
case 'bottom-right': |
|
854 |
moveX = dims.width; |
|
855 |
moveY = dims.height; |
|
856 |
break; |
|
857 |
case 'center': |
|
858 |
moveX = dims.width / 2; |
|
859 |
moveY = dims.height / 2; |
|
860 |
break; |
|
861 |
} |
|
862 |
|
|
863 |
return new Effect.Parallel( |
|
864 |
[ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }), |
|
865 |
new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}), |
|
866 |
new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }) |
|
867 |
], Object.extend({ |
|
868 |
beforeStartInternal: function(effect) { with(Element) { |
|
869 |
[makePositioned, makeClipping].call(effect.effects[0].element) }}, |
|
870 |
afterFinishInternal: function(effect) { with(Element) { |
|
871 |
[hide, undoClipping, undoPositioned].call(effect.effects[0].element); |
|
872 |
setStyle(effect.effects[0].element, oldStyle); }} |
|
873 |
}, options) |
|
874 |
); |
|
875 |
} |
|
876 |
|
|
877 |
Effect.Pulsate = function(element) { |
|
878 |
element = $(element); |
|
879 |
var options = arguments[1] || {}; |
|
880 |
var oldOpacity = Element.getInlineOpacity(element); |
|
881 |
var transition = options.transition || Effect.Transitions.sinoidal; |
|
882 |
var reverser = function(pos){ return transition(1-Effect.Transitions.pulse(pos)) }; |
|
883 |
reverser.bind(transition); |
|
884 |
return new Effect.Opacity(element, |
|
885 |
Object.extend(Object.extend({ duration: 3.0, from: 0, |
|
886 |
afterFinishInternal: function(effect) { Element.setStyle(effect.element, {opacity: oldOpacity}); } |
|
887 |
}, options), {transition: reverser})); |
|
888 |
} |
|
889 |
|
|
890 |
Effect.Fold = function(element) { |
|
891 |
element = $(element); |
|
892 |
var oldStyle = { |
|
893 |
top: element.style.top, |
|
894 |
left: element.style.left, |
|
895 |
width: element.style.width, |
|
896 |
height: element.style.height }; |
|
897 |
Element.makeClipping(element); |
|
898 |
return new Effect.Scale(element, 5, Object.extend({ |
|
899 |
scaleContent: false, |
|
900 |
scaleX: false, |
|
901 |
afterFinishInternal: function(effect) { |
|
902 |
new Effect.Scale(element, 1, { |
|
903 |
scaleContent: false, |
|
904 |
scaleY: false, |
|
905 |
afterFinishInternal: function(effect) { with(Element) { |
|
906 |
[hide, undoClipping].call(effect.element); |
|
907 |
setStyle(effect.element, oldStyle); |
|
908 |
}} }); |
|
909 |
}}, arguments[1] || {})); |
|
910 |
} |
|
0 | 911 |
Also available in: Unified diff
thi is the script.aculo.us effect library.