Bonjour à tous !

Pour expliciter le contexte, dans le cadre d'un projet, j'ai pas le droit à jQuery Mais j'ai le droit de plus ou moins le refaire ^^ Je me suis donc lancé dans cette aventure, mais je bloque sur un soucis de "context" je dirais...

Sur le code qui va suivre, tout fonctionne presque Seul soucis : en cas de fonctions avec timer (animation, par exemple), si deux animation se croise, l'objet courant dans l'animation est le dernier appelé. Forcément, pour faire un callback, ça le fait pas du tout...

Pour le moment, $('element') ne récupère qu'un élément HTML d'ID "element". Ce sera améliorer par la suite, quand j'aurais résolu ce problème de "this"..

Voilà le code ^^

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<script type="text/javascript">
(function(){
		jWibi = window.$ = function(selector, context) {
			return jWibi.init(selector, context);
		};
		jWibi = jWibi.prototype = {
			version: '1.0',
			selector: null,
			init: function(selector){
				selector = selector || document;
				if(typeof selector === 'string'){
					this.selector = document.getElementById(selector);
				}
				return this;
			},
			get: function () { return this.selector; },
			html: function(str){
				if(str){
					this.selector.innerHTML = str;
					return this;
				}else return this.selector.innerHTML;
			},
			css: function(s, v){
				if(s != null && v != null && typeof s === 'string' && typeof v === 'string'){
					this.selector.style[s] = v;
				}else if(s != null && typeof s === 'object'){
					var nb = arguments.length;
					if(nb > 1) for(a in s) this.selector.style[a] = s[a];
					else{
						for(i=1;i<=nb;i++){
							for(a in s) this.selector.style[a] = s[a];
						}
					}
				}
				return this;
			},
			ready: function (func) {
				if (typeof window.onload != 'function') { window.onload = func; }
				else { window.onload = function() { window.onload(); func(); } }
				return window;
			},
			click: function (func) {
				if (typeof this.selector.onclick != 'function') { this.selector.onclick = func; }
				else { this.selector.onclick = function() { this.selector.onclick(); func(); } }
				return this;
			},
			toggle: function() {
				this.selector.style.display = (this.selector.style.display === 'none' || '') ? 'block' : 'none';
				return this;
			},
			opacity: function(level) {
				if(level>=0 && level<=100) {
					this.selector.style.opacity = (level/100);
					this.selector.style.filter = 'alpha(opacity='+level+')';
				}
			},
			fadeOut: function(time) {
				var level = 100;
				var iout = setInterval(function(){
					$(this.selector).opacity(level--);
					if(level==0){ clearInterval(iout); }
				},time/100);
				return this;
			},
			fadeIn: function(time) {
				level = 0;
				var iin = setInterval(function(){
					$(this.selector).opacity(level++);
					if(level==100){ clearInterval(iin); }
				},time/100);
				return this;
			},
			timers: new Array(),
			launchAnim: function(obj, elt, i, currentValue, finishValue, pas, plus, moins, timeRefresh, callback){
				currentValue += pas;
				var objthis = obj;
				ecart = parseFloat(finishValue - currentValue);
				if(plus && ecart > 0 || moins && ecart < 0){
					elt.style[i] = currentValue;
					setTimeout(function(){$().launchAnim(obj, elt, i, currentValue, finishValue, pas, plus, moins, timeRefresh, callback)}, timeRefresh);
				}else{
					currentValue = finishValue;
					elt.style[i] = currentValue;
					var testouille1 = elt.getAttribute("id");
					var testouille2 = obj.selector.getAttribute("id");
					console.log('elt : '+testouille1+', obj: '+testouille2);
					//callback.call(obj);
				}
				return this;
			},
			animate: function(anim, time, callb){
				var animation = anim;
				var duration = time;
				var callback = callb || function(){return;};
				var timeRefresh = 20;
				var nbRefresh = parseFloat(duration / timeRefresh);
				for(var i in animation){
					var currentValue = parseFloat(this.selector.style[i]);
					var finishValue = parseFloat(animation[i]);
					var ecart = parseFloat(finishValue - currentValue);
					if(ecart < 0){var plus = false;var moins = true;}
					else if(ecart > 0){var plus = true;var moins = false;}
					else return this;
					var pas =  parseFloat(ecart / nbRefresh);
					var obj = this;
					var Class = $(this);
					var num = this.timers.length;
					this.timers[num] = obj;
					this.launchAnim(Class, obj.selector, i, currentValue, finishValue, pas, plus, moins, timeRefresh, callback);
				}
				return this;
			}, 
			callbacker: function (func) {
				if (typeof this.selector.callback != 'function') { this.selector.callback = func; }
				else { this.selector.callback = function() { this.selector.callback(); func(); } }
				return this;
			}
		}
})();
</script>
Et pour le test :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<script type="text/javascript">
$().ready(function () {
  $('test').animate({'height':'150px'}, 1000, function(){$(this).css('background','#f00')});
  $('test2').animate({'height':'20px'}, 2000, function(){$(this).css('background','#f55')});
});
</script>
<div id="test">test</div>
<div id="test2">test 2</div>
Dans la fonction "launchAnim", le console.log() devrai ressortir :
elt : test, obj: test
elt : test2, obj: test2
Mais il ressort :
elt : test, obj: test2
elt : test2, obj: test2
J'ai un peu tout essayé, tout bidouiller, j'ai meme mis les "this" à l'appel en array mais malgré ça, ils sont tous remplacé par le dernier appelé, même dans l'array..

Quelqu'un voit peut-être d'où vient le soucis ?
J'ai bien la notion de "contexte" dans mon "init", mais je n'ai pas compris comment l'utiliser, peut être pourrait-il m'aider.. Certainement même.

Merci d'avance à ceux qui liront