mirrors/recycled-ni-neutrino
1
0
Fork 0
mirror of https://github.com/tuxbox-fork-migrations/recycled-ni-neutrino.git synced 2025-08-31 09:21:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

yWeb/prototype: update effects.js

Browse Source 
Origin commit data
------------------
Branch: ni/coolstream
Commit: 34138bf54a
Author: vanhofen <vanhofen@gmx.de>
Date: 2023-02-14 (Tue, 14 Feb 2023)

Origin message was:
------------------
- yWeb/prototype: update effects.js

------------------
No further description and justification available within origin commit message!

------------------
This commit was generated by Migit
This commit is contained in:
vanhofen
2023-02-14 23:56:16 +01:00
parent 09df2fc064
commit 2a60d7f618
1 changed files with 484 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

557
data/y-web/prototype/effects.js vendored
View File

@@ -1,6 +1,6 @@
// script.aculo.us effects.js v1.7.0, Fri Jan 19 19:16:36 CET 2007 // script.aculo.us effects.js v1.9.0, Thu Dec 23 16:54:48 -0500 2010
// Copyright (c) 2005, 2006 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) // Copyright (c) 2005-2010 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
// Contributors: // Contributors:
// Justin Palmer (http://encytemedia.com/) // Justin Palmer (http://encytemedia.com/)
// Mark Pilgrim (http://diveintomark.org/) // Mark Pilgrim (http://diveintomark.org/)
@@ -23,7 +23,7 @@ String.prototype.parseColor = function() {
} }
} }
return (color.length==7 ? color : (arguments[0] || this)); return (color.length==7 ? color : (arguments[0] || this));
} };
/*--------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------*/
@@ -32,7 +32,7 @@ Element.collectTextNodes = function(element) {
return (node.nodeType==3 ? node.nodeValue : return (node.nodeType==3 ? node.nodeValue :
(node.hasChildNodes() ? Element.collectTextNodes(node) : '')); (node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
}).flatten().join(''); }).flatten().join('');
} };
Element.collectTextNodesIgnoreClass = function(element, className) { Element.collectTextNodesIgnoreClass = function(element, className) {
return $A($(element).childNodes).collect( function(node) { return $A($(element).childNodes).collect( function(node) {
@@ -40,26 +40,18 @@ Element.collectTextNodesIgnoreClass = function(element, className) {
((node.hasChildNodes() && !Element.hasClassName(node,className)) ? ((node.hasChildNodes() && !Element.hasClassName(node,className)) ?
Element.collectTextNodesIgnoreClass(node, className) : '')); Element.collectTextNodesIgnoreClass(node, className) : ''));
}).flatten().join(''); }).flatten().join('');
} };
Element.setContentZoom = function(element, percent) { Element.setContentZoom = function(element, percent) {
element = $(element); element = $(element);
element.setStyle({fontSize: (percent/100) + 'em'}); element.setStyle({fontSize: (percent/100) + 'em'});
if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0); if (Prototype.Browser.WebKit) window.scrollBy(0,0);
return element; return element;
} };
Element.getOpacity = function(element){
return $(element).getStyle('opacity');
}
Element.setOpacity = function(element, value){
return $(element).setStyle({opacity:value});
}
Element.getInlineOpacity = function(element){ Element.getInlineOpacity = function(element){
return $(element).style.opacity || ''; return $(element).style.opacity || '';
} };
Element.forceRerendering = function(element) { Element.forceRerendering = function(element) {
try { try {
@@ -72,31 +64,58 @@ Element.forceRerendering = function(element) {
/*--------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------*/
Array.prototype.call = function() {
var args = arguments;
this.each(function(f){ f.apply(this, args) });
}
/*--------------------------------------------------------------------------*/
var Effect = { var Effect = {
_elementDoesNotExistError: { _elementDoesNotExistError: {
name: 'ElementDoesNotExistError', name: 'ElementDoesNotExistError',
message: 'The specified DOM element does not exist, but is required for this effect to operate' message: 'The specified DOM element does not exist, but is required for this effect to operate'
}, },
Transitions: {
linear: Prototype.K,
sinoidal: function(pos) {
return (-Math.cos(pos*Math.PI)/2) + .5;
},
reverse: function(pos) {
return 1-pos;
},
flicker: function(pos) {
var pos = ((-Math.cos(pos*Math.PI)/4) + .75) + Math.random()/4;
return pos > 1 ? 1 : pos;
},
wobble: function(pos) {
return (-Math.cos(pos*Math.PI*(9*pos))/2) + .5;
},
pulse: function(pos, pulses) {
return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
},
spring: function(pos) {
return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
},
none: function(pos) {
return 0;
},
full: function(pos) {
return 1;
}
},
DefaultOptions: {
duration: 1.0, // seconds
fps: 100, // 100= assume 66fps max.
sync: false, // true for combining
from: 0.0,
to: 1.0,
delay: 0.0,
queue: 'parallel'
},
tagifyText: function(element) { tagifyText: function(element) {
if(typeof Builder == 'undefined')
throw("Effect.tagifyText requires including script.aculo.us' builder.js library");
var tagifyStyle = 'position:relative'; var tagifyStyle = 'position:relative';
if(/MSIE/.test(navigator.userAgent) && !window.opera) tagifyStyle += ';zoom:1'; if (Prototype.Browser.IE) tagifyStyle += ';zoom:1';
element = $(element); element = $(element);
$A(element.childNodes).each( function(child) { $A(element.childNodes).each( function(child) {
if (child.nodeType==3) { if (child.nodeType==3) {
child.nodeValue.toArray().each( function(character) { child.nodeValue.toArray().each( function(character) {
element.insertBefore( element.insertBefore(
Builder.node('span',{style: tagifyStyle}, new Element('span', {style: tagifyStyle}).update(
character == ' ' ? String.fromCharCode(160) : character), character == ' ' ? String.fromCharCode(160) : character),
child); child);
}); });
@@ -107,7 +126,7 @@ var Effect = {
multiple: function(element, effect) { multiple: function(element, effect) {
var elements; var elements;
if (((typeof element == 'object') || if (((typeof element == 'object') ||
(typeof element == 'function')) && Object.isFunction(element)) &&
(element.length)) (element.length))
elements = element; elements = element;
else else
@@ -128,55 +147,21 @@ var Effect = {
'blind': ['BlindDown','BlindUp'], 'blind': ['BlindDown','BlindUp'],
'appear': ['Appear','Fade'] 'appear': ['Appear','Fade']
}, },
toggle: function(element, effect) { toggle: function(element, effect, options) {
element = $(element); element = $(element);
effect = (effect || 'appear').toLowerCase(); effect = (effect || 'appear').toLowerCase();
var options = Object.extend({
return Effect[ Effect.PAIRS[ effect ][ element.visible() ? 1 : 0 ] ](element, Object.extend({
queue: { position:'end', scope:(element.id || 'global'), limit: 1 } queue: { position:'end', scope:(element.id || 'global'), limit: 1 }
}, arguments[2] || {}); }, options || {}));
Effect[element.visible() ?
Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
} }
}; };
var Effect2 = Effect; // deprecated Effect.DefaultOptions.transition = Effect.Transitions.sinoidal;
/* ------------- transitions ------------- */
Effect.Transitions = {
linear: Prototype.K,
sinoidal: function(pos) {
return (-Math.cos(pos*Math.PI)/2) + 0.5;
},
reverse: function(pos) {
return 1-pos;
},
flicker: function(pos) {
return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
},
wobble: function(pos) {
return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
},
pulse: function(pos, pulses) {
pulses = pulses || 5;
return (
Math.round((pos % (1/pulses)) * pulses) == 0 ?
((pos * pulses * 2) - Math.floor(pos * pulses * 2)) :
1 - ((pos * pulses * 2) - Math.floor(pos * pulses * 2))
);
},
none: function(pos) {
return 0;
},
full: function(pos) {
return 1;
}
};
/* ------------- core effects ------------- */ /* ------------- core effects ------------- */
Effect.ScopedQueue = Class.create(); Effect.ScopedQueue = Class.create(Enumerable, {
Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
initialize: function() { initialize: function() {
this.effects = []; this.effects = [];
this.interval = null; this.interval = null;
@@ -187,7 +172,7 @@ Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
add: function(effect) { add: function(effect) {
var timestamp = new Date().getTime(); var timestamp = new Date().getTime();
var position = (typeof effect.options.queue == 'string') ? var position = Object.isString(effect.options.queue) ?
effect.options.queue : effect.options.queue.position; effect.options.queue : effect.options.queue.position;
switch(position) { switch(position) {
@@ -226,46 +211,62 @@ Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
loop: function() { loop: function() {
var timePos = new Date().getTime(); var timePos = new Date().getTime();
for(var i=0, len=this.effects.length;i<len;i++) for(var i=0, len=this.effects.length;i<len;i++)
if(this.effects[i]) this.effects[i].loop(timePos); this.effects[i] && this.effects[i].loop(timePos);
} }
}); });
Effect.Queues = { Effect.Queues = {
instances: $H(), instances: $H(),
get: function(queueName) { get: function(queueName) {
if(typeof queueName != 'string') return queueName; if (!Object.isString(queueName)) return queueName;
if(!this.instances[queueName]) return this.instances.get(queueName) ||
this.instances[queueName] = new Effect.ScopedQueue(); this.instances.set(queueName, new Effect.ScopedQueue());
return this.instances[queueName];
}
} }
};
Effect.Queue = Effect.Queues.get('global'); Effect.Queue = Effect.Queues.get('global');
Effect.DefaultOptions = { Effect.Base = Class.create({
transition: Effect.Transitions.sinoidal,
duration: 1.0, // seconds
fps: 60.0, // max. 60fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0,
to: 1.0,
delay: 0.0,
queue: 'parallel'
}
Effect.Base = function() {};
Effect.Base.prototype = {
position: null, position: null,
start: function(options) { start: function(options) {
if (options && options.transition === false) options.transition = Effect.Transitions.linear;
this.options = Object.extend(Object.extend({ },Effect.DefaultOptions), options || { }); this.options = Object.extend(Object.extend({ },Effect.DefaultOptions), options || { });
this.currentFrame = 0; this.currentFrame = 0;
this.state = 'idle'; this.state = 'idle';
this.startOn = this.options.delay*1000; this.startOn = this.options.delay*1000;
this.finishOn = this.startOn+(this.options.duration*1000); this.finishOn = this.startOn+(this.options.duration*1000);
this.fromToDelta = this.options.to-this.options.from;
this.totalTime = this.finishOn-this.startOn;
this.totalFrames = this.options.fps*this.options.duration;
this.render = (function() {
function dispatch(effect, eventName) {
if (effect.options[eventName + 'Internal'])
effect.options[eventName + 'Internal'](effect);
if (effect.options[eventName])
effect.options[eventName](effect);
}
return function(pos) {
if (this.state === "idle") {
this.state = "running";
dispatch(this, 'beforeSetup');
if (this.setup) this.setup();
dispatch(this, 'afterSetup');
}
if (this.state === "running") {
pos = (this.options.transition(pos) * this.fromToDelta) + this.options.from;
this.position = pos;
dispatch(this, 'beforeUpdate');
if (this.update) this.update(pos);
dispatch(this, 'afterUpdate');
}
};
})();
this.event('beforeStart'); this.event('beforeStart');
if (!this.options.sync) if (!this.options.sync)
Effect.Queues.get(typeof this.options.queue == 'string' ? Effect.Queues.get(Object.isString(this.options.queue) ?
'global' : this.options.queue.scope).add(this); 'global' : this.options.queue.scope).add(this);
}, },
loop: function(timePos) { loop: function(timePos) {
@@ -278,34 +279,17 @@ Effect.Base.prototype = {
this.event('afterFinish'); this.event('afterFinish');
return; return;
} }
var pos = (timePos - this.startOn) / (this.finishOn - this.startOn); var pos = (timePos - this.startOn) / this.totalTime,
var frame = Math.round(pos * this.options.fps * this.options.duration); frame = (pos * this.totalFrames).round();
if (frame > this.currentFrame) { if (frame > this.currentFrame) {
this.render(pos); this.render(pos);
this.currentFrame = frame; this.currentFrame = frame;
} }
} }
}, },
render: function(pos) {
if(this.state == 'idle') {
this.state = 'running';
this.event('beforeSetup');
if(this.setup) this.setup();
this.event('afterSetup');
}
if(this.state == 'running') {
if(this.options.transition) pos = this.options.transition(pos);
pos *= (this.options.to-this.options.from);
pos += this.options.from;
this.position = pos;
this.event('beforeUpdate');
if(this.update) this.update(pos);
this.event('afterUpdate');
}
},
cancel: function() { cancel: function() {
if (!this.options.sync) if (!this.options.sync)
Effect.Queues.get(typeof this.options.queue == 'string' ? Effect.Queues.get(Object.isString(this.options.queue) ?
'global' : this.options.queue.scope).remove(this); 'global' : this.options.queue.scope).remove(this);
this.state = 'finished'; this.state = 'finished';
}, },
@@ -316,13 +300,12 @@ Effect.Base.prototype = {
inspect: function() { inspect: function() {
var data = $H(); var data = $H();
for(property in this) for(property in this)
if(typeof this[property] != 'function') data[property] = this[property]; if (!Object.isFunction(this[property])) data.set(property, this[property]);
return '#<Effect:' + data.inspect() + ',options:' + $H(this.options).inspect() + '>'; return '#<Effect:' + data.inspect() + ',options:' + $H(this.options).inspect() + '>';
} }
} });
Effect.Parallel = Class.create(); Effect.Parallel = Class.create(Effect.Base, {
Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), {
initialize: function(effects) { initialize: function(effects) {
this.effects = effects || []; this.effects = effects || [];
this.start(arguments[1]); this.start(arguments[1]);
@@ -341,24 +324,34 @@ Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), {
} }
}); });
Effect.Event = Class.create(); Effect.Tween = Class.create(Effect.Base, {
Object.extend(Object.extend(Effect.Event.prototype, Effect.Base.prototype), { initialize: function(object, from, to) {
object = Object.isString(object) ? $(object) : object;
var args = $A(arguments), method = args.last(),
options = args.length == 5 ? args[3] : null;
this.method = Object.isFunction(method) ? method.bind(object) :
Object.isFunction(object[method]) ? object[method].bind(object) :
function(value) { object[method] = value };
this.start(Object.extend({ from: from, to: to }, options || { }));
},
update: function(position) {
this.method(position);
}
});
Effect.Event = Class.create(Effect.Base, {
initialize: function() { initialize: function() {
var options = Object.extend({ this.start(Object.extend({ duration: 0 }, arguments[0] || { }));
duration: 0
}, arguments[0] || {});
this.start(options);
}, },
update: Prototype.emptyFunction update: Prototype.emptyFunction
}); });
Effect.Opacity = Class.create(); Effect.Opacity = Class.create(Effect.Base, {
Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
initialize: function(element) { initialize: function(element) {
this.element = $(element); this.element = $(element);
if (!this.element) throw(Effect._elementDoesNotExistError); if (!this.element) throw(Effect._elementDoesNotExistError);
// make this work on IE on elements without 'layout' // make this work on IE on elements without 'layout'
if(/MSIE/.test(navigator.userAgent) && !window.opera && (!this.element.currentStyle.hasLayout)) if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
this.element.setStyle({zoom: 1}); this.element.setStyle({zoom: 1});
var options = Object.extend({ var options = Object.extend({
from: this.element.getOpacity() || 0.0, from: this.element.getOpacity() || 0.0,
@@ -371,8 +364,7 @@ Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
} }
}); });
Effect.Move = Class.create(); Effect.Move = Class.create(Effect.Base, {
Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), {
initialize: function(element) { initialize: function(element) {
this.element = $(element); this.element = $(element);
if (!this.element) throw(Effect._elementDoesNotExistError); if (!this.element) throw(Effect._elementDoesNotExistError);
@@ -384,23 +376,18 @@ Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), {
this.start(options); this.start(options);
}, },
setup: function() { setup: function() {
// Bug in Opera: Opera returns the "real" position of a static element or
// relative element that does not have top/left explicitly set.
// ==> Always set top and left for position relative elements in your stylesheets
// (to 0 if you do not need them)
this.element.makePositioned(); this.element.makePositioned();
this.originalLeft = parseFloat(this.element.getStyle('left') || '0'); this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
this.originalTop = parseFloat(this.element.getStyle('top') || '0'); this.originalTop = parseFloat(this.element.getStyle('top') || '0');
if (this.options.mode == 'absolute') { if (this.options.mode == 'absolute') {
// absolute movement, so we need to calc deltaX and deltaY
this.options.x = this.options.x - this.originalLeft; this.options.x = this.options.x - this.originalLeft;
this.options.y = this.options.y - this.originalTop; this.options.y = this.options.y - this.originalTop;
} }
}, },
update: function(position) { update: function(position) {
this.element.setStyle({ this.element.setStyle({
left: Math.round(this.options.x * position + this.originalLeft) + 'px', left: (this.options.x * position + this.originalLeft).round() + 'px',
top: Math.round(this.options.y * position + this.originalTop) + 'px' top: (this.options.y * position + this.originalTop).round() + 'px'
}); });
} }
}); });
@@ -411,8 +398,7 @@ Effect.MoveBy = function(element, toTop, toLeft) {
Object.extend({ x: toLeft, y: toTop }, arguments[3] || { })); Object.extend({ x: toLeft, y: toTop }, arguments[3] || { }));
}; };
Effect.Scale = Class.create(); Effect.Scale = Class.create(Effect.Base, {
Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
initialize: function(element, percent) { initialize: function(element, percent) {
this.element = $(element); this.element = $(element);
if (!this.element) throw(Effect._elementDoesNotExistError); if (!this.element) throw(Effect._elementDoesNotExistError);
@@ -469,8 +455,8 @@ Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
}, },
setDimensions: function(height, width) { setDimensions: function(height, width) {
var d = { }; var d = { };
if(this.options.scaleX) d.width = Math.round(width) + 'px'; if (this.options.scaleX) d.width = width.round() + 'px';
if(this.options.scaleY) d.height = Math.round(height) + 'px'; if (this.options.scaleY) d.height = height.round() + 'px';
if (this.options.scaleFromCenter) { if (this.options.scaleFromCenter) {
var topd = (height - this.dims[0])/2; var topd = (height - this.dims[0])/2;
var leftd = (width - this.dims[1])/2; var leftd = (width - this.dims[1])/2;
@@ -486,8 +472,7 @@ Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
} }
}); });
Effect.Highlight = Class.create(); Effect.Highlight = Class.create(Effect.Base, {
Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), {
initialize: function(element) { initialize: function(element) {
this.element = $(element); this.element = $(element);
if (!this.element) throw(Effect._elementDoesNotExistError); if (!this.element) throw(Effect._elementDoesNotExistError);
@@ -513,7 +498,7 @@ Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype),
}, },
update: function(position) { update: function(position) {
this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){ this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){
return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) }); return m+((this._base[i]+(this._delta[i]*position)).round().toColorPart()); }.bind(this)) });
}, },
finish: function() { finish: function() {
this.element.setStyle(Object.extend(this.oldStyle, { this.element.setStyle(Object.extend(this.oldStyle, {
@@ -522,30 +507,20 @@ Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype),
} }
}); });
Effect.ScrollTo = Class.create(); Effect.ScrollTo = function(element) {
Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), { var options = arguments[1] || { },
initialize: function(element) { scrollOffsets = document.viewport.getScrollOffsets(),
this.element = $(element); elementOffsets = $(element).cumulativeOffset();
this.start(arguments[1] || {});
}, if (options.offset) elementOffsets[1] += options.offset;
setup: function() {
Position.prepare(); return new Effect.Tween(null,
var offsets = Position.cumulativeOffset(this.element); scrollOffsets.top,
if(this.options.offset) offsets[1] += this.options.offset; elementOffsets[1],
var max = window.innerHeight ? options,
window.height - window.innerHeight : function(p){ scrollTo(scrollOffsets.left, p.round()); }
document.body.scrollHeight - );
(document.documentElement.clientHeight ? };
document.documentElement.clientHeight : document.body.clientHeight);
this.scrollStart = Position.deltaY;
this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart;
},
update: function(position) {
Position.prepare();
window.scrollTo(Position.deltaX,
this.scrollStart + (position*this.delta));
}
});
/* ------------- combination effects ------------- */ /* ------------- combination effects ------------- */
@@ -558,9 +533,10 @@ Effect.Fade = function(element) {
afterFinishInternal: function(effect) { afterFinishInternal: function(effect) {
if (effect.options.to!=0) return; if (effect.options.to!=0) return;
effect.element.hide().setStyle({opacity: oldOpacity}); effect.element.hide().setStyle({opacity: oldOpacity});
}}, arguments[1] || {});
return new Effect.Opacity(element,options);
} }
}, arguments[1] || { });
return new Effect.Opacity(element,options);
};
Effect.Appear = function(element) { Effect.Appear = function(element) {
element = $(element); element = $(element);
@@ -575,7 +551,7 @@ Effect.Appear = function(element) {
effect.element.setOpacity(effect.options.from).show(); effect.element.setOpacity(effect.options.from).show();
}}, arguments[1] || { }); }}, arguments[1] || { });
return new Effect.Opacity(element,options); return new Effect.Opacity(element,options);
} };
Effect.Puff = function(element) { Effect.Puff = function(element) {
element = $(element); element = $(element);
@@ -593,13 +569,13 @@ Effect.Puff = function(element) {
new Effect.Opacity(element, { sync: true, to: 0.0 } ) ], new Effect.Opacity(element, { sync: true, to: 0.0 } ) ],
Object.extend({ duration: 1.0, Object.extend({ duration: 1.0,
beforeSetupInternal: function(effect) { beforeSetupInternal: function(effect) {
Position.absolutize(effect.effects[0].element) Position.absolutize(effect.effects[0].element);
}, },
afterFinishInternal: function(effect) { afterFinishInternal: function(effect) {
effect.effects[0].element.hide().setStyle(oldStyle); } effect.effects[0].element.hide().setStyle(oldStyle); }
}, arguments[1] || { }) }, arguments[1] || { })
); );
} };
Effect.BlindUp = function(element) { Effect.BlindUp = function(element) {
element = $(element); element = $(element);
@@ -613,7 +589,7 @@ Effect.BlindUp = function(element) {
} }
}, arguments[1] || { }) }, arguments[1] || { })
); );
} };
Effect.BlindDown = function(element) { Effect.BlindDown = function(element) {
element = $(element); element = $(element);
@@ -631,7 +607,7 @@ Effect.BlindDown = function(element) {
effect.element.undoClipping(); effect.element.undoClipping();
} }
}, arguments[1] || { })); }, arguments[1] || { }));
} };
Effect.SwitchOff = function(element) { Effect.SwitchOff = function(element) {
element = $(element); element = $(element);
@@ -650,10 +626,10 @@ Effect.SwitchOff = function(element) {
afterFinishInternal: function(effect) { afterFinishInternal: function(effect) {
effect.element.hide().undoClipping().undoPositioned().setStyle({opacity: oldOpacity}); effect.element.hide().undoClipping().undoPositioned().setStyle({opacity: oldOpacity});
} }
}) });
} }
}, arguments[1] || { })); }, arguments[1] || { }));
} };
Effect.DropOut = function(element) { Effect.DropOut = function(element) {
element = $(element); element = $(element);
@@ -673,28 +649,34 @@ Effect.DropOut = function(element) {
effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle); effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle);
} }
}, arguments[1] || { })); }, arguments[1] || { }));
} };
Effect.Shake = function(element) { Effect.Shake = function(element) {
element = $(element); element = $(element);
var options = Object.extend({
distance: 20,
duration: 0.5
}, arguments[1] || {});
var distance = parseFloat(options.distance);
var split = parseFloat(options.duration) / 10.0;
var oldStyle = { var oldStyle = {
top: element.getStyle('top'), top: element.getStyle('top'),
left: element.getStyle('left') }; left: element.getStyle('left') };
return new Effect.Move(element, return new Effect.Move(element,
{ x: 20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { { x: distance, y: 0, duration: split, afterFinishInternal: function(effect) {
new Effect.Move(effect.element, new Effect.Move(effect.element,
{ x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { { x: -distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) {
new Effect.Move(effect.element, new Effect.Move(effect.element,
{ x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { { x: distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) {
new Effect.Move(effect.element, new Effect.Move(effect.element,
{ x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { { x: -distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) {
new Effect.Move(effect.element, new Effect.Move(effect.element,
{ x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { { x: distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) {
new Effect.Move(effect.element, new Effect.Move(effect.element,
{ x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { { x: -distance, y: 0, duration: split, afterFinishInternal: function(effect) {
effect.element.undoPositioned().setStyle(oldStyle); effect.element.undoPositioned().setStyle(oldStyle);
}}) }}) }}) }}) }}) }}); }}); }}); }}); }}); }}); }});
} };
Effect.SlideDown = function(element) { Effect.SlideDown = function(element) {
element = $(element).cleanWhitespace(); element = $(element).cleanWhitespace();
@@ -722,18 +704,20 @@ Effect.SlideDown = function(element) {
effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); } effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); }
}, arguments[1] || { }) }, arguments[1] || { })
); );
} };
Effect.SlideUp = function(element) { Effect.SlideUp = function(element) {
element = $(element).cleanWhitespace(); element = $(element).cleanWhitespace();
var oldInnerBottom = element.down().getStyle('bottom'); var oldInnerBottom = element.down().getStyle('bottom');
var elementDimensions = element.getDimensions();
return new Effect.Scale(element, window.opera ? 0 : 1, return new Effect.Scale(element, window.opera ? 0 : 1,
Object.extend({ scaleContent: false, Object.extend({ scaleContent: false,
scaleX: false, scaleX: false,
scaleMode: 'box', scaleMode: 'box',
scaleFrom: 100, scaleFrom: 100,
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
restoreAfterFinish: true, restoreAfterFinish: true,
beforeStartInternal: function(effect) { afterSetup: function(effect) {
effect.element.makePositioned(); effect.element.makePositioned();
effect.element.down().makePositioned(); effect.element.down().makePositioned();
if (window.opera) effect.element.setStyle({top: ''}); if (window.opera) effect.element.setStyle({top: ''});
@@ -744,12 +728,12 @@ Effect.SlideUp = function(element) {
(effect.dims[0] - effect.element.clientHeight) + 'px' }); (effect.dims[0] - effect.element.clientHeight) + 'px' });
}, },
afterFinishInternal: function(effect) { afterFinishInternal: function(effect) {
effect.element.hide().undoClipping().undoPositioned().setStyle({bottom: oldInnerBottom}); effect.element.hide().undoClipping().undoPositioned();
effect.element.down().undoPositioned(); effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom});
} }
}, arguments[1] || { }) }, arguments[1] || { })
); );
} };
// Bug in opera makes the TD containing this element expand for a instance after finish // Bug in opera makes the TD containing this element expand for a instance after finish
Effect.Squish = function(element) { Effect.Squish = function(element) {
@@ -762,7 +746,7 @@ Effect.Squish = function(element) {
effect.element.hide().undoClipping(); effect.element.hide().undoClipping();
} }
}); });
} };
Effect.Grow = function(element) { Effect.Grow = function(element) {
element = $(element); element = $(element);
@@ -833,10 +817,10 @@ Effect.Grow = function(element) {
effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle); effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
} }
}, options) }, options)
) );
} }
}); });
} };
Effect.Shrink = function(element) { Effect.Shrink = function(element) {
element = $(element); element = $(element);
@@ -890,20 +874,22 @@ Effect.Shrink = function(element) {
effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); } effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); }
}, options) }, options)
); );
} };
Effect.Pulsate = function(element) { Effect.Pulsate = function(element) {
element = $(element); element = $(element);
var options = arguments[1] || {}; var options = arguments[1] || { },
var oldOpacity = element.getInlineOpacity(); oldOpacity = element.getInlineOpacity(),
var transition = options.transition || Effect.Transitions.sinoidal; transition = options.transition || Effect.Transitions.linear,
var reverser = function(pos){ return transition(1-Effect.Transitions.pulse(pos, options.pulses)) }; reverser = function(pos){
reverser.bind(transition); return 1 - transition((-Math.cos((pos*(options.pulses||5)*2)*Math.PI)/2) + .5);
};
return new Effect.Opacity(element, return new Effect.Opacity(element,
Object.extend(Object.extend({ duration: 2.0, from: 0, Object.extend(Object.extend({ duration: 2.0, from: 0,
afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); } afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
}, options), {transition: reverser})); }, options), {transition: reverser}));
} };
Effect.Fold = function(element) { Effect.Fold = function(element) {
element = $(element); element = $(element);
@@ -926,69 +912,68 @@ Effect.Fold = function(element) {
}}, arguments[1] || { })); }}, arguments[1] || { }));
}; };
Effect.Morph = Class.create(); Effect.Morph = Class.create(Effect.Base, {
Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), {
initialize: function(element) { initialize: function(element) {
this.element = $(element); this.element = $(element);
if (!this.element) throw(Effect._elementDoesNotExistError); if (!this.element) throw(Effect._elementDoesNotExistError);
var options = Object.extend({ var options = Object.extend({
style: { } style: { }
}, arguments[1] || { }); }, arguments[1] || { });
if (typeof options.style == 'string') {
if(options.style.indexOf(':') == -1) { if (!Object.isString(options.style)) this.style = $H(options.style);
var cssText = '', selector = '.' + options.style; else {
$A(document.styleSheets).reverse().each(function(styleSheet) { if (options.style.include(':'))
if (styleSheet.cssRules) cssRules = styleSheet.cssRules; this.style = options.style.parseStyle();
else if (styleSheet.rules) cssRules = styleSheet.rules; else {
$A(cssRules).reverse().each(function(rule) { this.element.addClassName(options.style);
if (selector == rule.selectorText) { this.style = $H(this.element.getStyles());
cssText = rule.style.cssText; this.element.removeClassName(options.style);
throw $break; var css = this.element.getStyles();
} this.style = this.style.reject(function(style) {
return style.value == css[style.key];
}); });
if (cssText) throw $break;
});
this.style = cssText.parseStyle();
options.afterFinishInternal = function(effect) { options.afterFinishInternal = function(effect) {
effect.element.addClassName(effect.options.style); effect.element.addClassName(effect.options.style);
effect.transforms.each(function(transform) { effect.transforms.each(function(transform) {
if(transform.style != 'opacity') effect.element.style[transform.style] = '';
effect.element.style[transform.style.camelize()] = '';
}); });
};
}
} }
} else this.style = options.style.parseStyle();
} else this.style = $H(options.style)
this.start(options); this.start(options);
}, },
setup: function(){ setup: function(){
function parseColor(color){ function parseColor(color){
if (!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff'; if (!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff';
color = color.parseColor(); color = color.parseColor();
return $R(0,2).map(function(i){ return $R(0,2).map(function(i){
return parseInt( color.slice(i*2+1,i*2+3), 16 ) return parseInt( color.slice(i*2+1,i*2+3), 16 );
}); });
} }
this.transforms = this.style.map(function(pair){ this.transforms = this.style.map(function(pair){
var property = pair[0].underscore().dasherize(), value = pair[1], unit = null; var property = pair[0], value = pair[1], unit = null;
if (value.parseColor('#zzzzzz') != '#zzzzzz') { if (value.parseColor('#zzzzzz') != '#zzzzzz') {
value = value.parseColor(); value = value.parseColor();
unit = 'color'; unit = 'color';
} else if (property == 'opacity') { } else if (property == 'opacity') {
value = parseFloat(value); value = parseFloat(value);
if(/MSIE/.test(navigator.userAgent) && !window.opera && (!this.element.currentStyle.hasLayout)) if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
this.element.setStyle({zoom: 1}); this.element.setStyle({zoom: 1});
} else if(Element.CSS_LENGTH.test(value)) } else if (Element.CSS_LENGTH.test(value)) {
var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/), var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/);
value = parseFloat(components[1]), unit = (components.length == 3) ? components[2] : null; value = parseFloat(components[1]);
unit = (components.length == 3) ? components[2] : null;
}
var originalValue = this.element.getStyle(property); var originalValue = this.element.getStyle(property);
return $H({ return {
style: property, style: property.camelize(),
originalValue: unit=='color' ? parseColor(originalValue) : parseFloat(originalValue || 0), originalValue: unit=='color' ? parseColor(originalValue) : parseFloat(originalValue || 0),
targetValue: unit=='color' ? parseColor(value) : value, targetValue: unit=='color' ? parseColor(value) : value,
unit: unit unit: unit
}); };
}.bind(this)).reject(function(transform){ }.bind(this)).reject(function(transform){
return ( return (
(transform.originalValue == transform.targetValue) || (transform.originalValue == transform.targetValue) ||
@@ -996,26 +981,28 @@ Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), {
transform.unit != 'color' && transform.unit != 'color' &&
(isNaN(transform.originalValue) || isNaN(transform.targetValue)) (isNaN(transform.originalValue) || isNaN(transform.targetValue))
) )
) );
}); });
}, },
update: function(position) { update: function(position) {
var style = $H(), value = null; var style = { }, transform, i = this.transforms.length;
this.transforms.each(function(transform){ while(i--)
value = transform.unit=='color' ? style[(transform = this.transforms[i]).style] =
$R(0,2).inject('#',function(m,v,i){ transform.unit=='color' ? '#'+
return m+(Math.round(transform.originalValue[i]+ (Math.round(transform.originalValue[0]+
(transform.targetValue[i] - transform.originalValue[i])*position)).toColorPart() }) : (transform.targetValue[0]-transform.originalValue[0])*position)).toColorPart() +
transform.originalValue + Math.round( (Math.round(transform.originalValue[1]+
((transform.targetValue - transform.originalValue) * position) * 1000)/1000 + transform.unit; (transform.targetValue[1]-transform.originalValue[1])*position)).toColorPart() +
style[transform.style] = value; (Math.round(transform.originalValue[2]+
}); (transform.targetValue[2]-transform.originalValue[2])*position)).toColorPart() :
this.element.setStyle(style); (transform.originalValue +
(transform.targetValue - transform.originalValue) * position).toFixed(3) +
(transform.unit === null ? '' : transform.unit);
this.element.setStyle(style, true);
} }
}); });
Effect.Transform = Class.create(); Effect.Transform = Class.create({
Object.extend(Effect.Transform.prototype, {
initialize: function(tracks){ initialize: function(tracks){
this.tracks = []; this.tracks = [];
this.options = arguments[1] || { }; this.options = arguments[1] || { };
@@ -1023,9 +1010,10 @@ Object.extend(Effect.Transform.prototype, {
}, },
addTracks: function(tracks){ addTracks: function(tracks){
tracks.each(function(track){ tracks.each(function(track){
var data = $H(track).values().first(); track = $H(track);
var data = track.values().first();
this.tracks.push($H({ this.tracks.push($H({
ids: $H(track).keys().first(), ids: track.keys().first(),
effect: Effect.Morph, effect: Effect.Morph,
options: { style: data } options: { style: data }
})); }));
@@ -1035,8 +1023,9 @@ Object.extend(Effect.Transform.prototype, {
play: function(){ play: function(){
return new Effect.Parallel( return new Effect.Parallel(
this.tracks.map(function(track){ this.tracks.map(function(track){
var elements = [$(track.ids) || $$(track.ids)].flatten(); var ids = track.get('ids'), effect = track.get('effect'), options = track.get('options');
return elements.map(function(e){ return new track.effect(e, Object.extend({ sync:true }, track.options)) }); var elements = [$(ids) || $$(ids)].flatten();
return elements.map(function(e){ return new effect(e, Object.extend({ sync:true }, options)) });
}).flatten(), }).flatten(),
this.options this.options
); );
@@ -1056,35 +1045,79 @@ Element.CSS_PROPERTIES = $w(
Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/; Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
String.__parseStyleElement = document.createElement('div');
String.prototype.parseStyle = function(){ String.prototype.parseStyle = function(){
var element = Element.extend(document.createElement('div')); var style, styleRules = $H();
element.innerHTML = '<div style="' + this + '"></div>'; if (Prototype.Browser.WebKit)
var style = element.down().style, styleRules = $H(); style = new Element('div',{style:this}).style;
else {
String.__parseStyleElement.innerHTML = '<div style="' + this + '"></div>';
style = String.__parseStyleElement.childNodes[0].style;
}
Element.CSS_PROPERTIES.each(function(property){ Element.CSS_PROPERTIES.each(function(property){
if(style[property]) styleRules[property] = style[property]; if (style[property]) styleRules.set(property, style[property]);
}); });
if(/MSIE/.test(navigator.userAgent) && !window.opera && this.indexOf('opacity') > -1) {
styleRules.opacity = this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1]; if (Prototype.Browser.IE && this.include('opacity'))
} styleRules.set('opacity', this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1]);
return styleRules; return styleRules;
}; };
Element.morph = function(element, style) { if (document.defaultView && document.defaultView.getComputedStyle) {
Element.getStyles = function(element) {
var css = document.defaultView.getComputedStyle($(element), null);
return Element.CSS_PROPERTIES.inject({ }, function(styles, property) {
styles[property] = css[property];
return styles;
});
};
} else {
Element.getStyles = function(element) {
element = $(element);
var css = element.currentStyle, styles;
styles = Element.CSS_PROPERTIES.inject({ }, function(results, property) {
results[property] = css[property];
return results;
});
if (!styles.opacity) styles.opacity = element.getOpacity();
return styles;
};
}
Effect.Methods = {
morph: function(element, style) {
element = $(element);
new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || { })); new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || { }));
return element; return element;
},
visualEffect: function(element, effect, options) {
element = $(element);
var s = effect.dasherize().camelize(), klass = s.charAt(0).toUpperCase() + s.substring(1);
new Effect[klass](element, options);
return element;
},
highlight: function(element, options) {
element = $(element);
new Effect.Highlight(element, options);
return element;
}
}; };
['setOpacity','getOpacity','getInlineOpacity','forceRerendering','setContentZoom', $w('fade appear grow shrink fold blindUp blindDown slideUp slideDown '+
'collectTextNodes','collectTextNodesIgnoreClass','morph'].each( 'pulsate shake puff squish switchOff dropOut').each(
function(f) { Element.Methods[f] = Element[f]; } function(effect) {
Effect.Methods[effect] = function(element, options){
element = $(element);
Effect[effect.charAt(0).toUpperCase() + effect.substring(1)](element, options);
return element;
};
}
); );
Element.Methods.visualEffect = function(element, effect, options) { $w('getInlineOpacity forceRerendering setContentZoom collectTextNodes collectTextNodesIgnoreClass getStyles').each(
s = effect.gsub(/_/, '-').camelize(); function(f) { Effect.Methods[f] = Element[f]; }
effect_class = s.charAt(0).toUpperCase() + s.substring(1); );
new Effect[effect_class](element, options);
return $(element);
};
Element.addMethods(); Element.addMethods(Effect.Methods);