mirror of
https://github.com/Dolibarr/dolibarr.git
synced 2025-12-18 07:21:30 +01:00
Mise jour de scriptaculous et de prototype
This commit is contained in:
423
htdocs/includes/scriptaculous/src/effects.js
vendored
423
htdocs/includes/scriptaculous/src/effects.js
vendored
@@ -1,17 +1,18 @@
|
||||
// script.aculo.us effects.js v1.6.4, Wed Sep 06 11:30:58 CEST 2006
|
||||
// script.aculo.us effects.js v1.7.0, Fri Jan 19 19:16:36 CET 2007
|
||||
|
||||
// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||
// Copyright (c) 2005, 2006 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||
// Contributors:
|
||||
// Justin Palmer (http://encytemedia.com/)
|
||||
// Mark Pilgrim (http://diveintomark.org/)
|
||||
// Martin Bialasinki
|
||||
//
|
||||
// See scriptaculous.js for full license.
|
||||
// script.aculo.us is freely distributable under the terms of an MIT-style license.
|
||||
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||||
|
||||
// converts rgb() and #xxx to #xxxxxx format,
|
||||
// returns self (or first argument) if not convertable
|
||||
String.prototype.parseColor = function() {
|
||||
var color = '#';
|
||||
var color = '#';
|
||||
if(this.slice(0,4) == 'rgb(') {
|
||||
var cols = this.slice(4,this.length-1).split(',');
|
||||
var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3);
|
||||
@@ -43,48 +44,21 @@ Element.collectTextNodesIgnoreClass = function(element, className) {
|
||||
|
||||
Element.setContentZoom = function(element, percent) {
|
||||
element = $(element);
|
||||
Element.setStyle(element, {fontSize: (percent/100) + 'em'});
|
||||
element.setStyle({fontSize: (percent/100) + 'em'});
|
||||
if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
|
||||
return element;
|
||||
}
|
||||
|
||||
Element.getOpacity = function(element){
|
||||
var opacity;
|
||||
if (opacity = Element.getStyle(element, 'opacity'))
|
||||
return parseFloat(opacity);
|
||||
if (opacity = (Element.getStyle(element, 'filter') || '').match(/alpha\(opacity=(.*)\)/))
|
||||
if(opacity[1]) return parseFloat(opacity[1]) / 100;
|
||||
return 1.0;
|
||||
Element.getOpacity = function(element){
|
||||
return $(element).getStyle('opacity');
|
||||
}
|
||||
|
||||
Element.setOpacity = function(element, value){
|
||||
element= $(element);
|
||||
if (value == 1){
|
||||
Element.setStyle(element, { opacity:
|
||||
(/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
|
||||
0.999999 : 1.0 });
|
||||
if(/MSIE/.test(navigator.userAgent) && !window.opera)
|
||||
Element.setStyle(element, {filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')});
|
||||
} else {
|
||||
if(value < 0.00001) value = 0;
|
||||
Element.setStyle(element, {opacity: value});
|
||||
if(/MSIE/.test(navigator.userAgent) && !window.opera)
|
||||
Element.setStyle(element,
|
||||
{ filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +
|
||||
'alpha(opacity='+value*100+')' });
|
||||
}
|
||||
}
|
||||
|
||||
Element.getInlineOpacity = function(element){
|
||||
Element.setOpacity = function(element, value){
|
||||
return $(element).setStyle({opacity:value});
|
||||
}
|
||||
|
||||
Element.getInlineOpacity = function(element){
|
||||
return $(element).style.opacity || '';
|
||||
}
|
||||
|
||||
Element.childrenWithClassName = function(element, className, findFirst) {
|
||||
var classNameRegExp = new RegExp("(^|\\s)" + className + "(\\s|$)");
|
||||
var results = $A($(element).getElementsByTagName('*'))[findFirst ? 'detect' : 'select']( function(c) {
|
||||
return (c.className && c.className.match(classNameRegExp));
|
||||
});
|
||||
if(!results) results = [];
|
||||
return results;
|
||||
}
|
||||
|
||||
Element.forceRerendering = function(element) {
|
||||
@@ -116,6 +90,7 @@ var Effect = {
|
||||
|
||||
var tagifyStyle = 'position:relative';
|
||||
if(/MSIE/.test(navigator.userAgent) && !window.opera) tagifyStyle += ';zoom:1';
|
||||
|
||||
element = $(element);
|
||||
$A(element.childNodes).each( function(child) {
|
||||
if(child.nodeType==3) {
|
||||
@@ -168,32 +143,35 @@ var Effect2 = Effect; // deprecated
|
||||
|
||||
/* ------------- transitions ------------- */
|
||||
|
||||
Effect.Transitions = {}
|
||||
|
||||
Effect.Transitions.linear = Prototype.K;
|
||||
|
||||
Effect.Transitions.sinoidal = function(pos) {
|
||||
return (-Math.cos(pos*Math.PI)/2) + 0.5;
|
||||
}
|
||||
Effect.Transitions.reverse = function(pos) {
|
||||
return 1-pos;
|
||||
}
|
||||
Effect.Transitions.flicker = function(pos) {
|
||||
return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
|
||||
}
|
||||
Effect.Transitions.wobble = function(pos) {
|
||||
return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
|
||||
}
|
||||
Effect.Transitions.pulse = function(pos) {
|
||||
return (Math.floor(pos*10) % 2 == 0 ?
|
||||
(pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10)));
|
||||
}
|
||||
Effect.Transitions.none = function(pos) {
|
||||
return 0;
|
||||
}
|
||||
Effect.Transitions.full = function(pos) {
|
||||
return 1;
|
||||
}
|
||||
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 ------------- */
|
||||
|
||||
@@ -220,6 +198,9 @@ Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
|
||||
e.finishOn += effect.finishOn;
|
||||
});
|
||||
break;
|
||||
case 'with-last':
|
||||
timestamp = this.effects.pluck('startOn').max() || timestamp;
|
||||
break;
|
||||
case 'end':
|
||||
// start effect after last queued effect has finished
|
||||
timestamp = this.effects.pluck('finishOn').max() || timestamp;
|
||||
@@ -233,7 +214,7 @@ Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
|
||||
this.effects.push(effect);
|
||||
|
||||
if(!this.interval)
|
||||
this.interval = setInterval(this.loop.bind(this), 40);
|
||||
this.interval = setInterval(this.loop.bind(this), 15);
|
||||
},
|
||||
remove: function(effect) {
|
||||
this.effects = this.effects.reject(function(e) { return e==effect });
|
||||
@@ -244,7 +225,8 @@ Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
|
||||
},
|
||||
loop: function() {
|
||||
var timePos = new Date().getTime();
|
||||
this.effects.invoke('loop', timePos);
|
||||
for(var i=0, len=this.effects.length;i<len;i++)
|
||||
if(this.effects[i]) this.effects[i].loop(timePos);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -264,7 +246,7 @@ Effect.Queue = Effect.Queues.get('global');
|
||||
Effect.DefaultOptions = {
|
||||
transition: Effect.Transitions.sinoidal,
|
||||
duration: 1.0, // seconds
|
||||
fps: 25.0, // max. 25fps due to Effect.Queue implementation
|
||||
fps: 60.0, // max. 60fps due to Effect.Queue implementation
|
||||
sync: false, // true for combining
|
||||
from: 0.0,
|
||||
to: 1.0,
|
||||
@@ -332,7 +314,10 @@ Effect.Base.prototype = {
|
||||
if(this.options[eventName]) this.options[eventName](this);
|
||||
},
|
||||
inspect: function() {
|
||||
return '#<Effect:' + $H(this).inspect() + ',options:' + $H(this.options).inspect() + '>';
|
||||
var data = $H();
|
||||
for(property in this)
|
||||
if(typeof this[property] != 'function') data[property] = this[property];
|
||||
return '#<Effect:' + data.inspect() + ',options:' + $H(this.options).inspect() + '>';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -356,6 +341,17 @@ Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), {
|
||||
}
|
||||
});
|
||||
|
||||
Effect.Event = Class.create();
|
||||
Object.extend(Object.extend(Effect.Event.prototype, Effect.Base.prototype), {
|
||||
initialize: function() {
|
||||
var options = Object.extend({
|
||||
duration: 0
|
||||
}, arguments[0] || {});
|
||||
this.start(options);
|
||||
},
|
||||
update: Prototype.emptyFunction
|
||||
});
|
||||
|
||||
Effect.Opacity = Class.create();
|
||||
Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
|
||||
initialize: function(element) {
|
||||
@@ -469,7 +465,7 @@ Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
|
||||
this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale);
|
||||
},
|
||||
finish: function(position) {
|
||||
if (this.restoreAfterFinish) this.element.setStyle(this.originalStyle);
|
||||
if(this.restoreAfterFinish) this.element.setStyle(this.originalStyle);
|
||||
},
|
||||
setDimensions: function(height, width) {
|
||||
var d = {};
|
||||
@@ -502,9 +498,11 @@ Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype),
|
||||
// Prevent executing on elements not in the layout flow
|
||||
if(this.element.getStyle('display')=='none') { this.cancel(); return; }
|
||||
// Disable background image during the effect
|
||||
this.oldStyle = {
|
||||
backgroundImage: this.element.getStyle('background-image') };
|
||||
this.element.setStyle({backgroundImage: 'none'});
|
||||
this.oldStyle = {};
|
||||
if (!this.options.keepBackgroundImage) {
|
||||
this.oldStyle.backgroundImage = this.element.getStyle('background-image');
|
||||
this.element.setStyle({backgroundImage: 'none'});
|
||||
}
|
||||
if(!this.options.endcolor)
|
||||
this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff');
|
||||
if(!this.options.restorecolor)
|
||||
@@ -559,8 +557,7 @@ Effect.Fade = function(element) {
|
||||
to: 0.0,
|
||||
afterFinishInternal: function(effect) {
|
||||
if(effect.options.to!=0) return;
|
||||
effect.element.hide();
|
||||
effect.element.setStyle({opacity: oldOpacity});
|
||||
effect.element.hide().setStyle({opacity: oldOpacity});
|
||||
}}, arguments[1] || {});
|
||||
return new Effect.Opacity(element,options);
|
||||
}
|
||||
@@ -575,8 +572,7 @@ Effect.Appear = function(element) {
|
||||
effect.element.forceRerendering();
|
||||
},
|
||||
beforeSetup: function(effect) {
|
||||
effect.element.setOpacity(effect.options.from);
|
||||
effect.element.show();
|
||||
effect.element.setOpacity(effect.options.from).show();
|
||||
}}, arguments[1] || {});
|
||||
return new Effect.Opacity(element,options);
|
||||
}
|
||||
@@ -600,8 +596,7 @@ Effect.Puff = function(element) {
|
||||
Position.absolutize(effect.effects[0].element)
|
||||
},
|
||||
afterFinishInternal: function(effect) {
|
||||
effect.effects[0].element.hide();
|
||||
effect.effects[0].element.setStyle(oldStyle); }
|
||||
effect.effects[0].element.hide().setStyle(oldStyle); }
|
||||
}, arguments[1] || {})
|
||||
);
|
||||
}
|
||||
@@ -614,8 +609,7 @@ Effect.BlindUp = function(element) {
|
||||
scaleX: false,
|
||||
restoreAfterFinish: true,
|
||||
afterFinishInternal: function(effect) {
|
||||
effect.element.hide();
|
||||
effect.element.undoClipping();
|
||||
effect.element.hide().undoClipping();
|
||||
}
|
||||
}, arguments[1] || {})
|
||||
);
|
||||
@@ -631,9 +625,7 @@ Effect.BlindDown = function(element) {
|
||||
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
|
||||
restoreAfterFinish: true,
|
||||
afterSetup: function(effect) {
|
||||
effect.element.makeClipping();
|
||||
effect.element.setStyle({height: '0px'});
|
||||
effect.element.show();
|
||||
effect.element.makeClipping().setStyle({height: '0px'}).show();
|
||||
},
|
||||
afterFinishInternal: function(effect) {
|
||||
effect.element.undoClipping();
|
||||
@@ -653,14 +645,10 @@ Effect.SwitchOff = function(element) {
|
||||
duration: 0.3, scaleFromCenter: true,
|
||||
scaleX: false, scaleContent: false, restoreAfterFinish: true,
|
||||
beforeSetup: function(effect) {
|
||||
effect.element.makePositioned();
|
||||
effect.element.makeClipping();
|
||||
effect.element.makePositioned().makeClipping();
|
||||
},
|
||||
afterFinishInternal: function(effect) {
|
||||
effect.element.hide();
|
||||
effect.element.undoClipping();
|
||||
effect.element.undoPositioned();
|
||||
effect.element.setStyle({opacity: oldOpacity});
|
||||
effect.element.hide().undoClipping().undoPositioned().setStyle({opacity: oldOpacity});
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -682,9 +670,7 @@ Effect.DropOut = function(element) {
|
||||
effect.effects[0].element.makePositioned();
|
||||
},
|
||||
afterFinishInternal: function(effect) {
|
||||
effect.effects[0].element.hide();
|
||||
effect.effects[0].element.undoPositioned();
|
||||
effect.effects[0].element.setStyle(oldStyle);
|
||||
effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle);
|
||||
}
|
||||
}, arguments[1] || {}));
|
||||
}
|
||||
@@ -706,16 +692,14 @@ Effect.Shake = function(element) {
|
||||
{ x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
|
||||
new Effect.Move(effect.element,
|
||||
{ x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
|
||||
effect.element.undoPositioned();
|
||||
effect.element.setStyle(oldStyle);
|
||||
effect.element.undoPositioned().setStyle(oldStyle);
|
||||
}}) }}) }}) }}) }}) }});
|
||||
}
|
||||
|
||||
Effect.SlideDown = function(element) {
|
||||
element = $(element);
|
||||
element.cleanWhitespace();
|
||||
element = $(element).cleanWhitespace();
|
||||
// SlideDown need to have the content of the element wrapped in a container element with fixed height!
|
||||
var oldInnerBottom = $(element.firstChild).getStyle('bottom');
|
||||
var oldInnerBottom = element.down().getStyle('bottom');
|
||||
var elementDimensions = element.getDimensions();
|
||||
return new Effect.Scale(element, 100, Object.extend({
|
||||
scaleContent: false,
|
||||
@@ -725,34 +709,24 @@ Effect.SlideDown = function(element) {
|
||||
restoreAfterFinish: true,
|
||||
afterSetup: function(effect) {
|
||||
effect.element.makePositioned();
|
||||
effect.element.firstChild.makePositioned();
|
||||
effect.element.down().makePositioned();
|
||||
if(window.opera) effect.element.setStyle({top: ''});
|
||||
effect.element.makeClipping();
|
||||
effect.element.setStyle({height: '0px'});
|
||||
effect.element.show(); },
|
||||
effect.element.makeClipping().setStyle({height: '0px'}).show();
|
||||
},
|
||||
afterUpdateInternal: function(effect) {
|
||||
effect.element.firstChild.setStyle({bottom:
|
||||
effect.element.down().setStyle({bottom:
|
||||
(effect.dims[0] - effect.element.clientHeight) + 'px' });
|
||||
},
|
||||
afterFinishInternal: function(effect) {
|
||||
effect.element.undoClipping();
|
||||
// IE will crash if child is undoPositioned first
|
||||
if(/MSIE/.test(navigator.userAgent) && !window.opera){
|
||||
effect.element.undoPositioned();
|
||||
effect.element.firstChild.undoPositioned();
|
||||
}else{
|
||||
effect.element.firstChild.undoPositioned();
|
||||
effect.element.undoPositioned();
|
||||
}
|
||||
effect.element.firstChild.setStyle({bottom: oldInnerBottom}); }
|
||||
effect.element.undoClipping().undoPositioned();
|
||||
effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); }
|
||||
}, arguments[1] || {})
|
||||
);
|
||||
}
|
||||
|
||||
Effect.SlideUp = function(element) {
|
||||
element = $(element);
|
||||
element.cleanWhitespace();
|
||||
var oldInnerBottom = $(element.firstChild).getStyle('bottom');
|
||||
element = $(element).cleanWhitespace();
|
||||
var oldInnerBottom = element.down().getStyle('bottom');
|
||||
return new Effect.Scale(element, window.opera ? 0 : 1,
|
||||
Object.extend({ scaleContent: false,
|
||||
scaleX: false,
|
||||
@@ -761,32 +735,32 @@ Effect.SlideUp = function(element) {
|
||||
restoreAfterFinish: true,
|
||||
beforeStartInternal: function(effect) {
|
||||
effect.element.makePositioned();
|
||||
effect.element.firstChild.makePositioned();
|
||||
effect.element.down().makePositioned();
|
||||
if(window.opera) effect.element.setStyle({top: ''});
|
||||
effect.element.makeClipping();
|
||||
effect.element.show(); },
|
||||
effect.element.makeClipping().show();
|
||||
},
|
||||
afterUpdateInternal: function(effect) {
|
||||
effect.element.firstChild.setStyle({bottom:
|
||||
(effect.dims[0] - effect.element.clientHeight) + 'px' }); },
|
||||
effect.element.down().setStyle({bottom:
|
||||
(effect.dims[0] - effect.element.clientHeight) + 'px' });
|
||||
},
|
||||
afterFinishInternal: function(effect) {
|
||||
effect.element.hide();
|
||||
effect.element.undoClipping();
|
||||
effect.element.firstChild.undoPositioned();
|
||||
effect.element.undoPositioned();
|
||||
effect.element.setStyle({bottom: oldInnerBottom}); }
|
||||
effect.element.hide().undoClipping().undoPositioned().setStyle({bottom: oldInnerBottom});
|
||||
effect.element.down().undoPositioned();
|
||||
}
|
||||
}, arguments[1] || {})
|
||||
);
|
||||
}
|
||||
|
||||
// Bug in opera makes the TD containing this element expand for a instance after finish
|
||||
Effect.Squish = function(element) {
|
||||
return new Effect.Scale(element, window.opera ? 1 : 0,
|
||||
{ restoreAfterFinish: true,
|
||||
beforeSetup: function(effect) {
|
||||
effect.element.makeClipping(effect.element); },
|
||||
afterFinishInternal: function(effect) {
|
||||
effect.element.hide(effect.element);
|
||||
effect.element.undoClipping(effect.element); }
|
||||
return new Effect.Scale(element, window.opera ? 1 : 0, {
|
||||
restoreAfterFinish: true,
|
||||
beforeSetup: function(effect) {
|
||||
effect.element.makeClipping();
|
||||
},
|
||||
afterFinishInternal: function(effect) {
|
||||
effect.element.hide().undoClipping();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -842,9 +816,7 @@ Effect.Grow = function(element) {
|
||||
y: initialMoveY,
|
||||
duration: 0.01,
|
||||
beforeSetup: function(effect) {
|
||||
effect.element.hide();
|
||||
effect.element.makeClipping();
|
||||
effect.element.makePositioned();
|
||||
effect.element.hide().makeClipping().makePositioned();
|
||||
},
|
||||
afterFinishInternal: function(effect) {
|
||||
new Effect.Parallel(
|
||||
@@ -855,13 +827,10 @@ Effect.Grow = function(element) {
|
||||
sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
|
||||
], Object.extend({
|
||||
beforeSetup: function(effect) {
|
||||
effect.effects[0].element.setStyle({height: '0px'});
|
||||
effect.effects[0].element.show();
|
||||
effect.effects[0].element.setStyle({height: '0px'}).show();
|
||||
},
|
||||
afterFinishInternal: function(effect) {
|
||||
effect.effects[0].element.undoClipping();
|
||||
effect.effects[0].element.undoPositioned();
|
||||
effect.effects[0].element.setStyle(oldStyle);
|
||||
effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
|
||||
}
|
||||
}, options)
|
||||
)
|
||||
@@ -915,13 +884,10 @@ Effect.Shrink = function(element) {
|
||||
new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
|
||||
], Object.extend({
|
||||
beforeStartInternal: function(effect) {
|
||||
effect.effects[0].element.makePositioned();
|
||||
effect.effects[0].element.makeClipping(); },
|
||||
effect.effects[0].element.makePositioned().makeClipping();
|
||||
},
|
||||
afterFinishInternal: function(effect) {
|
||||
effect.effects[0].element.hide();
|
||||
effect.effects[0].element.undoClipping();
|
||||
effect.effects[0].element.undoPositioned();
|
||||
effect.effects[0].element.setStyle(oldStyle); }
|
||||
effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); }
|
||||
}, options)
|
||||
);
|
||||
}
|
||||
@@ -931,10 +897,10 @@ Effect.Pulsate = function(element) {
|
||||
var options = arguments[1] || {};
|
||||
var oldOpacity = element.getInlineOpacity();
|
||||
var transition = options.transition || Effect.Transitions.sinoidal;
|
||||
var reverser = function(pos){ return transition(1-Effect.Transitions.pulse(pos)) };
|
||||
var reverser = function(pos){ return transition(1-Effect.Transitions.pulse(pos, options.pulses)) };
|
||||
reverser.bind(transition);
|
||||
return new Effect.Opacity(element,
|
||||
Object.extend(Object.extend({ duration: 3.0, from: 0,
|
||||
Object.extend(Object.extend({ duration: 2.0, from: 0,
|
||||
afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
|
||||
}, options), {transition: reverser}));
|
||||
}
|
||||
@@ -946,7 +912,7 @@ Effect.Fold = function(element) {
|
||||
left: element.style.left,
|
||||
width: element.style.width,
|
||||
height: element.style.height };
|
||||
Element.makeClipping(element);
|
||||
element.makeClipping();
|
||||
return new Effect.Scale(element, 5, Object.extend({
|
||||
scaleContent: false,
|
||||
scaleX: false,
|
||||
@@ -955,15 +921,162 @@ Effect.Fold = function(element) {
|
||||
scaleContent: false,
|
||||
scaleY: false,
|
||||
afterFinishInternal: function(effect) {
|
||||
effect.element.hide();
|
||||
effect.element.undoClipping();
|
||||
effect.element.setStyle(oldStyle);
|
||||
effect.element.hide().undoClipping().setStyle(oldStyle);
|
||||
} });
|
||||
}}, arguments[1] || {}));
|
||||
};
|
||||
|
||||
Effect.Morph = Class.create();
|
||||
Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), {
|
||||
initialize: function(element) {
|
||||
this.element = $(element);
|
||||
if(!this.element) throw(Effect._elementDoesNotExistError);
|
||||
var options = Object.extend({
|
||||
style: {}
|
||||
}, arguments[1] || {});
|
||||
if (typeof options.style == 'string') {
|
||||
if(options.style.indexOf(':') == -1) {
|
||||
var cssText = '', selector = '.' + options.style;
|
||||
$A(document.styleSheets).reverse().each(function(styleSheet) {
|
||||
if (styleSheet.cssRules) cssRules = styleSheet.cssRules;
|
||||
else if (styleSheet.rules) cssRules = styleSheet.rules;
|
||||
$A(cssRules).reverse().each(function(rule) {
|
||||
if (selector == rule.selectorText) {
|
||||
cssText = rule.style.cssText;
|
||||
throw $break;
|
||||
}
|
||||
});
|
||||
if (cssText) throw $break;
|
||||
});
|
||||
this.style = cssText.parseStyle();
|
||||
options.afterFinishInternal = function(effect){
|
||||
effect.element.addClassName(effect.options.style);
|
||||
effect.transforms.each(function(transform) {
|
||||
if(transform.style != 'opacity')
|
||||
effect.element.style[transform.style.camelize()] = '';
|
||||
});
|
||||
}
|
||||
} else this.style = options.style.parseStyle();
|
||||
} else this.style = $H(options.style)
|
||||
this.start(options);
|
||||
},
|
||||
setup: function(){
|
||||
function parseColor(color){
|
||||
if(!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff';
|
||||
color = color.parseColor();
|
||||
return $R(0,2).map(function(i){
|
||||
return parseInt( color.slice(i*2+1,i*2+3), 16 )
|
||||
});
|
||||
}
|
||||
this.transforms = this.style.map(function(pair){
|
||||
var property = pair[0].underscore().dasherize(), value = pair[1], unit = null;
|
||||
|
||||
if(value.parseColor('#zzzzzz') != '#zzzzzz') {
|
||||
value = value.parseColor();
|
||||
unit = 'color';
|
||||
} else if(property == 'opacity') {
|
||||
value = parseFloat(value);
|
||||
if(/MSIE/.test(navigator.userAgent) && !window.opera && (!this.element.currentStyle.hasLayout))
|
||||
this.element.setStyle({zoom: 1});
|
||||
} else if(Element.CSS_LENGTH.test(value))
|
||||
var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/),
|
||||
value = parseFloat(components[1]), unit = (components.length == 3) ? components[2] : null;
|
||||
|
||||
var originalValue = this.element.getStyle(property);
|
||||
return $H({
|
||||
style: property,
|
||||
originalValue: unit=='color' ? parseColor(originalValue) : parseFloat(originalValue || 0),
|
||||
targetValue: unit=='color' ? parseColor(value) : value,
|
||||
unit: unit
|
||||
});
|
||||
}.bind(this)).reject(function(transform){
|
||||
return (
|
||||
(transform.originalValue == transform.targetValue) ||
|
||||
(
|
||||
transform.unit != 'color' &&
|
||||
(isNaN(transform.originalValue) || isNaN(transform.targetValue))
|
||||
)
|
||||
)
|
||||
});
|
||||
},
|
||||
update: function(position) {
|
||||
var style = $H(), value = null;
|
||||
this.transforms.each(function(transform){
|
||||
value = transform.unit=='color' ?
|
||||
$R(0,2).inject('#',function(m,v,i){
|
||||
return m+(Math.round(transform.originalValue[i]+
|
||||
(transform.targetValue[i] - transform.originalValue[i])*position)).toColorPart() }) :
|
||||
transform.originalValue + Math.round(
|
||||
((transform.targetValue - transform.originalValue) * position) * 1000)/1000 + transform.unit;
|
||||
style[transform.style] = value;
|
||||
});
|
||||
this.element.setStyle(style);
|
||||
}
|
||||
});
|
||||
|
||||
Effect.Transform = Class.create();
|
||||
Object.extend(Effect.Transform.prototype, {
|
||||
initialize: function(tracks){
|
||||
this.tracks = [];
|
||||
this.options = arguments[1] || {};
|
||||
this.addTracks(tracks);
|
||||
},
|
||||
addTracks: function(tracks){
|
||||
tracks.each(function(track){
|
||||
var data = $H(track).values().first();
|
||||
this.tracks.push($H({
|
||||
ids: $H(track).keys().first(),
|
||||
effect: Effect.Morph,
|
||||
options: { style: data }
|
||||
}));
|
||||
}.bind(this));
|
||||
return this;
|
||||
},
|
||||
play: function(){
|
||||
return new Effect.Parallel(
|
||||
this.tracks.map(function(track){
|
||||
var elements = [$(track.ids) || $$(track.ids)].flatten();
|
||||
return elements.map(function(e){ return new track.effect(e, Object.extend({ sync:true }, track.options)) });
|
||||
}).flatten(),
|
||||
this.options
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
Element.CSS_PROPERTIES = $w(
|
||||
'backgroundColor backgroundPosition borderBottomColor borderBottomStyle ' +
|
||||
'borderBottomWidth borderLeftColor borderLeftStyle borderLeftWidth ' +
|
||||
'borderRightColor borderRightStyle borderRightWidth borderSpacing ' +
|
||||
'borderTopColor borderTopStyle borderTopWidth bottom clip color ' +
|
||||
'fontSize fontWeight height left letterSpacing lineHeight ' +
|
||||
'marginBottom marginLeft marginRight marginTop markerOffset maxHeight '+
|
||||
'maxWidth minHeight minWidth opacity outlineColor outlineOffset ' +
|
||||
'outlineWidth paddingBottom paddingLeft paddingRight paddingTop ' +
|
||||
'right textIndent top width wordSpacing zIndex');
|
||||
|
||||
Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
|
||||
|
||||
String.prototype.parseStyle = function(){
|
||||
var element = Element.extend(document.createElement('div'));
|
||||
element.innerHTML = '<div style="' + this + '"></div>';
|
||||
var style = element.down().style, styleRules = $H();
|
||||
|
||||
Element.CSS_PROPERTIES.each(function(property){
|
||||
if(style[property]) styleRules[property] = style[property];
|
||||
});
|
||||
if(/MSIE/.test(navigator.userAgent) && !window.opera && this.indexOf('opacity') > -1) {
|
||||
styleRules.opacity = this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1];
|
||||
}
|
||||
return styleRules;
|
||||
};
|
||||
|
||||
Element.morph = function(element, style) {
|
||||
new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || {}));
|
||||
return element;
|
||||
};
|
||||
|
||||
['setOpacity','getOpacity','getInlineOpacity','forceRerendering','setContentZoom',
|
||||
'collectTextNodes','collectTextNodesIgnoreClass','childrenWithClassName'].each(
|
||||
'collectTextNodes','collectTextNodesIgnoreClass','morph'].each(
|
||||
function(f) { Element.Methods[f] = Element[f]; }
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user