1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
|
/**
* METHODE PERMETTANT DE RECUPERER DES OBJETS PAR RAPPORT A SA CLASSE ET/OU UN CONTENEUR ET TYPE DE TAG
* @param {className} Nom de la classe recherchée
* @param {tag} Permet de filtrer par exemple uniquement sur des div ou des li ou autre
* @param {elm} Représente , le parent dans lequel effectuer la recherche ( par défaut le document )
*/
function getElementsByClassName(className, tag, elm){
var testClass = new RegExp("(^|s)" + className + "(s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i ];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
};
/**
* L'obejet de type togle.
* Cet objet comporte 2 méthodes principales :
* - create, permet de créer , et retourner l'objet qui sera affecter par l'effet
* - move, qui permet d'effectuer l'action sur l'objet, ce qui permet d'agir sur l'objet a partir de n'importe quel autre.
* @param {target} définit sur quel objet , on va effectuer la méthode de replis et d'ouverture
*/
var Toggle = {
create: function(target) {
return {
//Déclaration et instantiation des propriétés
id: "no name",
orientation: "vertical",
myObject : target,
min: 0,
max: target.offsetHeight,
speed: 350,
isOpen : true,
//Méthode move , effectuant les calculs
move: function(titleChange) {
if(this.myObject.testTime == null){
start = (this.isOpen) ? this.max:this.min;
end = (this.isOpen) ? this.min:this.max;
c = (350 / 50);
d = Math.round(this.speed / c);
w = new Array();
this.myObject.currentStepX = 0;
this.myObject.testTime = null;
//Etape permettant de calculer les pas pour avoir une animation fluide et dont la durée sera
//toujours la même, quelque soit la hauteur du conteneur
for (var i = 1; i <= d; i++) {
w.push(this.easeOutCubic(i * c, start, end - start, this.speed))
}
titleChange.className = (this.isOpen) ? "toggleTitle close":"toggleTitle open"
this.go(this,c,w);
}
},
//Méthode effectuant l'ouverture ou fermeture
go: function(b, c , w) {
b.myObject.testTime = window.setInterval(function() {
var a = true;
if (w[b.myObject.currentStepX]) {
b.myObject.style['height'] = w[b.myObject.currentStepX] + 'px';
b.myObject.currentStepX++;
a = false
}
if (a) {
window.clearInterval(b.myObject.testTime);
b.myObject.testTime = null;
b.isOpen = (b.isOpen) ? false:true;
if (b.callBack) {
b.callBack()
}
return
}
},
c);
},
//Méthode d'algo calculant les pas ;)
easeOutCubic : function (t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
}
}
}
}; |
Partager