YUI vs Prototype : cas pratique

J’ai réalisé un petit bout d’interface pour présenter des témoignages. Le principe :

• un div « dg_photos » contient les images des tous les utilisateurs dont on affiche le témoignage.
• On n’affiche que 5 ou 6 photos dans ce div.
• On utilise deux boutons latéraux pou faire défiler les photos.

Le tout animé en javascript. Si l’utilisateur n’a pas javascript, toutes les photos s’affichent selon le sacro-saint principe de la graceful degradation ou du design dégradable (la formulation anglosaxonne est quand même plus classe).

Voici deux morceaux de code qui permettent de réaliser ce genre d’animation, l’un avec la librairie YUI, l’autre avec les librairies Prototype et script.aculo.us.

YUI

var divToAnimate = 'dg_photos';
var leftButtonId = 'scroll_left';
var rightButtonId = 'scroll_right';

scroll_right = function() {
var myAnim = new YAHOO.util.Scroll(divToAnimate, {
scroll: {by: [150, ]}
}, 1, YAHOO.util.Easing.easeOut);
var animate = function(e) {
myAnim.animate();
return false;
};
YAHOO.util.Event.addListener(rightButtonId, 'click', animate);
};

scroll_left = function() {
var myAnim = new YAHOO.util.Scroll(divToAnimate, {
scroll: {by: [-150, 0]}
}, 1, YAHOO.util.Easing.easeOut);
var animate = function(e) {
myAnim.animate();
return false;
};
YAHOO.util.Event.addListener(leftButtonId, 'click', animate);
}

YAHOO.util.Event.addListener(window, 'load', scroll_right);
YAHOO.util.Event.addListener(window, 'load', scroll_left);

Prototype + scriptaculous

Récupéré dans le « treasure Chest » de scriptaculous, par Jeff Pennal

Effect.SlideRight = function(element) {
element = $(element);
Element.cleanWhitespace(element);
// SlideDown need to have the content of the element wrapped in a container element with fixed height!
var oldInnerRight = Element.getStyle(element.firstChild, 'right');
var elementDimensions = Element.getDimensions(element);
return new Effect.Scale(element, 100, Object.extend({
scaleContent: false,
scaleY: false,
scaleFrom: 0,
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
restoreAfterFinish: true,
afterSetup: function(effect) { with(Element) {
makePositioned(effect.element);
makePositioned(effect.element.firstChild);
if(window.opera) setStyle(effect.element, {top: ''});
makeClipping(effect.element);
setStyle(effect.element, {width: '0px'});
show(element); }},
afterUpdateInternal: function(effect) { with(Element) {
setStyle(effect.element.firstChild, {right:
(effect.dims[0] - effect.element.clientWidth) + 'px' }); }},
afterFinishInternal: function(effect) { with(Element) {
undoClipping(effect.element);
undoPositioned(effect.element.firstChild);
undoPositioned(effect.element);
setStyle(effect.element.firstChild, {right: oldInnerRight}); }}
}, arguments[1] || {})
);
}

Effect.SlideLeft = function(element) {
element = $(element);
Element.cleanWhitespace(element);
var oldInnerRight = Element.getStyle(element.firstChild, 'right');
return new Effect.Scale(element, 0,
Object.extend({ scaleContent: false,
scaleY: false,
scaleMode: 'box',
scaleFrom: 100,
restoreAfterFinish: true,
beforeStartInternal: function(effect) { with(Element) {
makePositioned(effect.element);
makePositioned(effect.element.firstChild);
if(window.opera) setStyle(effect.element, {top: ''});
makeClipping(effect.element);
show(element); }},
afterUpdateInternal: function(effect) { with(Element) {
setStyle(effect.element.firstChild, {right:
(effect.dims[0] - effect.element.clientWidth) + 'px' }); }},
afterFinishInternal: function(effect) { with(Element) {
[hide, undoClipping].call(effect.element);
undoPositioned(effect.element.firstChild);
undoPositioned(effect.element);
setStyle(effect.element.firstChild, {right: oldInnerRight}); }}
}, arguments[1] || {})
);
}

Voilà, ça se passe de commentaires. Enfin bon, si tu veux commenter, lecteur, tu es le bienvenu !