nothus

Exemple de scripts : les déclencheurs en simili-BB-code pour développer un site complet

Noter ce billet

par

Nothus

, 16/05/2015 à 11h17 (1046 Affichages)

Bonjour,

Dans mes billets précédents, j'ai illustré une technique - loin d'être la seule - pour disposer ça et là des déclencheurs dans une page lors de son chargement ou d'une mise à jour.

L'intérêt : dépasser certaines limites du DOM avec addEventListener, qui implique de disposer précisément de l'élément ou de récupérer de manière plus ou moins heureusement un événement lors du bouillonnement. Par évidemment, pas forcément adapté à toutes les situations.

Ici, on applique cette méthode avec une petite fonction AJAX bien utile, qui sérialise la création d'une requête : ULR, un objet d'éléments à envoyer et une fonction qui gérer ensuite les états de la requête (ici, on se limite à l'étape 4 (fin de la requête) et au code de retour 200 (page trouvée, ok, renvoyée).

Etape 1 : le widget est initié dans la page par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

%%Widgets:{"id":"Accueil"}%%

déclenche la "création" d'un widget qui est stocké localement dans une liste, ses données au format JSON vérifiée, puis envoyé au serveur.

Etape 2 : le serveur var vérifier la requête et renvoyer en fonction de l'ID du widget le bon contenu. Par défaut, on vérifie si une page .inc existe dans le dossier "/inc", avec en nom de fichier l'identifiant => ce qui permet de stocker de manière unique le widget, en se servant de l'unicité des noms de fichiers sur le serveur.

Etape 3 : on récupère le retour du serveur (du texte au format JSON), on vérifier dans la liste des widgets trouvés s'il existe toujours bien, on récupére sa position dans la page (qui a été précédemment stocké par une ancre de format :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{{Widget:id}}

Éventuellement - fioritures obligent... -, si le titre de la page doit être changé, on le change (valeur fixée dans le retour du serveur). On déclenche aussi un parcours de l'élément mis à jour afin de vérifier que le serveur n'a pas envoyé de nouveaux déclencheurs / widgets à charger.

Côté PHP : on envoie la page de départ (qui est principalement du JS en réalité) si une requête n'est pas fournie. Sinon, on renvoie du texte au format JSON, en utilisant une condition qui, si elle est remplie, stoppe la page (exit). La fonction array_merge et un simple switch permettent de comprendre la ressource voulue par la requête. Dans mon exemple, le widget Accueil va faire "exécuter" une fonction de concaténation de textes (inutile, c'est pour l'exemple), et deux autres widgets (un flux d'actualités et une aide sous la forme d'un bloc de texte).

Attention, ici pas de gestion des erreurs par ob_clean de l'inclusion : du coup, s'il y en a une qui est renvoyée, elle va provoquer côté client un échec du parseur JSON de Javascript.

Limite : votre imagination...

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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
 
<?php 
	
	if (isset($_REQUEST['requete'])) { 
		$Requete = json_decode($_REQUEST['requete'],true); 
		if (is_array($Requete)) { 
			$Requete = array_merge( 
				array( 
					'id' => false, 
					'HTML' => 'Le widget a été mal appelé.' 
				), 
				$Requete 
			); 
			switch($Requete['id']) { 
				default: 
					$Path = dirname(__FILE__).'/inc/'.$Requete['id'].'inc'; 
					if (is_file($Path)) 
						include($Path); 
					break; 
				case false: 
					break; 
				case 'Accueil': 
					$Requete['titre'] = 'Accueil'; 
					$Requete['HTML'] = ' 
						<div id="accueil"> 
							%%Fonction:"(test)"+"Merveilleux"+" ce site"%% 
							%%Widgets:{"id":"FluxActu"}%% 
							%%Widgets:{"id":"Aide"}%% 
						</div> 
					'; 
					break; 
				case 'FluxActu': 
					$Requete['HTML'] = '
						<div id="fluxactu"> 
							<i>ici pleins d\'actualités...</i> 
						</div> 
					'; 
					break; 
				case 'Aide': 
					$Requete['HTML'] = '
						<div id="aide"> 
							<b>Quelle aide !</b> 
						</div> 
					'; 
					break; 
			} 
			echo json_encode($Requete); 
		} 
		exit; 
	} 
	
?><!DOCTYPE html> 
<html lang="fr"> 
<head> 
	<meta charset="utf-8"> 
	<title>Nothus - Editeur en ligne</title> 
	<style type="text/css"> 
	</style> 
</head> 
<body> 

%%Widgets:{"id":"Accueil"}%%

<script type="text/javascript"> 
try { window.addEventListener("load",function() { 
	
	$Nothus = { 
		
		Declencheurs: {}, 
		
		Requeter: function(url,var_post,fct) { 
			this.url = url; 
			this.var_post = var_post; 
			try { 
				this.xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
			} catch(e) { 
				this.xhr = new XMLHttpRequest(); 
			} 
			this.xhr.onreadystatechange = fct; 
			this.xhr.open('POST',this.url,true); 
			this.xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			this.xhr.send("requete="+JSON.stringify(var_post)); 
		}, 
		
		Declencher: function(ObjHTML) { 
			if ( 
				typeof ObjHTML!="object" 
			) 
				var ObjHTML = document.getElementsByTagName("body")[0]; 
			var secu = -99; 
			var ExpReg = /\%\%([0-9a-zA-Z]+)\:(.[^\%]*)\%\%/; 
			while ( 
				ExpReg.test(ObjHTML.innerHTML) 
				& 
				secu<0 
			) { 
				var r = ObjHTML.innerHTML.match(ExpReg); 
				var tmp = ""; 
				switch(r[1]) { 
					
					default:
						break; 
					
					case 'Widgets': 
						tmp = $Nothus.Widgets.Initier(r[2]); 
						break; 
					
					case "Fonction": 
						tmp = eval("(function() { return "+r[2]+" })()"); 
						break; 
					
					case "Declencheur":
						if (typeof $Nothus.Declencheurs[r[2]]!="undefined") { 
							tmp = $Nothus.Declencheurs[r[2]](); 
						} else { 
							tmp = "oups, ce déclencheur "+r[2]+" n\'a pas été trouvé !"; 
						} 
						break; 
					
				} 
				if (typeof tmp!="string") { 
					tmp = ""; 
				} 
				ObjHTML.innerHTML = ObjHTML.innerHTML.replace(r[0],tmp); 
				secu++; 
			} 
		}, 
		
		Widgets: { 
			
			Liste: {}, 
			
			Initier: function(Parametres) { 
				try { 
					Parametres = JSON.parse(Parametres); 
					$Nothus.Widgets.Liste[Parametres.id] = Parametres; 
					$Nothus.Requeter('test5.php',Parametres,function() { 
						if ( 
							this.readyState==4 
							& 
							this.status==200 
						) 
							$Nothus.Widgets.Retrouver( 
								document.getElementsByTagName("body")[0], 
								this.responseText 
							); 
					}); 
					return "{{Widget:"+Parametres.id+"}}"; 
				} catch(e) { 
					return "<p>Le widget voulu n'est pas valide.</p>"; 
				} 
			}, 
			
			Retrouver: function(ObjHTML,VarAjax) { 
				try { 
					Parametres_r = JSON.parse(VarAjax); 
					if (typeof $Nothus.Widgets.Liste[Parametres_r.id]=="object") { 
						var HTML = ObjHTML.innerHTML; 
						if ( 
							HTML.search("{{Widget:"+Parametres_r.id+"}}")>-1 
						) { 
							ObjHTML.innerHTML = ObjHTML.innerHTML.replace("{{Widget:"+Parametres_r.id+"}}",(
								(typeof Parametres_r.HTML!="undefined")?Parametres_r.HTML:"" 
							)); 
							if (typeof Parametres_r.titre!="undefined") 
								document.title = Parametres_r.titre; 
								
							$Nothus.Declencher(ObjHTML); 
						} 
					} 
				} catch(e) { 
					alert("Oups, une erreur est survenue lors du traitement de la réponse pour les widgets de la page."+e); 
					return false; 
				} 
			} 
			
		} 
		
	}; 
	
	$Nothus.Declencher( 
		document.getElementsByTagName("body")[0] 
	); 
	
}); } catch(e) { 
	alert("Votre navigateur ne semble pas compatible avec grand chose..."); 
}
</script>
</body>
</html>