nothus

Exemple de scripts: un outil de notes de bas de page

Noter ce billet

par

Nothus

, 10/05/2015 à 16h30 (1512 Affichages)

Bonjour,

J'indiquais dans un article récent (le lien vers l'article) un certain intérêt à utiliser une sorte de BB-code pour créer des "événements" à la volée (en réalité, à chaque chargement de page ou de contenu, analyser par une expression régulière un texte formaté qui sera utilisé).

Restait à montrer par l'exemple l'intérêt d'un tel système, un peu détourné, au quotidien : ci-dessous, un système de notes de bas de page.

L'utilisateur peut ajouter des notes suivant le format :

Code :

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

%%Note:{texte à afficher dans le corps},{texte à afficher dans la liste des notes associées d'un article}%%

Le script ici, va parser tous les éléments du DOM du type "article" (balise native du HTML5 - sauf erreur de ma part). Chaque objet du DOM devient donc un terrain de jeu où, en deux étapes, on va tenter de trouver les notes ($Notes.Trouver) puis les afficher ($Notes.Afficher), sous la forme d'une liste.

Entre les deux, on utilise une ancre et donc on génère un lien. Oui mais voilà : le lien doit renvoyer vers quelque chose. Si la liste n'est pas défini en position par :

Code :

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

%%Notes

... on ne devra pas afficher de lien pour ces notes.

Idem, on ajoute une mesure utile : rien ne sert de convoquer $Notes.Afficher si aucune note n'a été trouvé dans l'article...

L'ensemble des notes sont ordonnées (et sauvegardées) dans un tableau à clé numérique, qui est parcouru et disponible dans $Notes.Liste : on peut donc jouer avec, si besoin est.

L'ordre dans $Notes.Liste est fonction d'une première clé qui est la clé du tableau de la recherche dans le DOM des éléments "articles". Cette première clé donne accès à un second tableau à clé numérique, pour les clés de chaque note dans chaque article : ainsi les liens vers les ancres ne se mélangent pas. De plus, la simple méthode "length" permet de retourner l'existence ou non des éléments trouvés dans le DOM et s'ils disposaient de notes.

Mieux qu'un long discours, 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
<!DOCTYPE html> 
<html lang="fr"> 
<head> 
	<meta charset="utf-8"> 
	<title>Nothus - Editeur en ligne</title> 
	<style type="text/css"> 
	</style> 
</head> 
<body> 

<div id="flux_d_articles_interessants"> 
	
	<article> 
		<h1>Ceci est mon premier article</h1> 
		Il contient %%Note:{des notes évidemment},{hé oui}%%, et %%Note:{même deux notes},{c'est fou quand même !}%%. 
		%%Notes%% 
	</article> 
	
	<article> 
		<h1>Ceci est mon second article</h1> 
		Il contient aussi %%Note:{une note},{plus ça aurait été trop}%%. 
		%%Notes%% 
	</article> 
	
	<article> 
		<h1>Ceci est mon second article</h1> 
		Il contient aussi %%Note:{une note},{plus ça aurait été trop}%%, mais rien pour l'afficher... il n'y a donc pas lieu d'insérer un lien ! 
	</article> 
	
	<article> 
		<h1>Ceci est mon troisième article</h1> 
		Qui n'en contient pas ! 
	</article> 
	
</div> 

<script type="text/javascript"> 
try { window.addEventListener("load",function() { 
	
	$Notes = function() { 
		
		this.Initialisation = function(Type) { 
			ObjsHTML = document.getElementsByTagName((Type==null)?"article":Type); 
			for(var obj_i=0; obj_i<ObjsHTML.length; obj_i++) { 
				$Notes.Trouver(obj_i,ObjsHTML[obj_i]); 
				if ($Notes.Liste[obj_i].length>0) 
					$Notes.Afficher(obj_i,ObjsHTML[obj_i]); 
			} 
			$Notes.Initialisation = true; 
		}; 
		
		this.Liste = []; 
		
		this.Trouver = function(ListeNotes_id,ObjHTML) { 
			var HTML = ObjHTML.innerHTML; 
			var secu = -99; 
			var ExpReg_listenotes = (/\%\%Notes\%\%/.test(HTML))?true:false; 
			var ExpReg = /\%\%Note\:\{(.[^\%\}]+)\}\,\{(.[^\%\}]+)\}\%\%/; 
			$Notes.Liste[ListeNotes_id] = []; 
			while ( 
				ExpReg.test(HTML) 
				& 
				secu<0 
			) { 
				var r = HTML.match(ExpReg); 
				if (typeof r=="object") { 
					var note_i = $Notes.Liste[ListeNotes_id].push(r); /* N : attention, la fonction "push" renvoie 1 (car c'est la taille du tableau qui est retournée, devenant alors notre clé numérique */ 
					if (ExpReg_listenotes) { 
						HTML = HTML.replace(r[0],"<a href=\"#nths_note_"+ListeNotes_id+"_"+note_i+"\" class=\"note\">"+r[1]+" ("+note_i+")</a>"); 
					} else { 
						HTML = HTML.replace(r[0],r[1]); 
					} 
					secu++; 
				} 
			} 
			ObjHTML.innerHTML = HTML; 
		}; 
		
		this.Afficher = function(ListeNotes_id,ObjHTML) { 
			var HTML = ObjHTML.innerHTML; 
			var secu = -1; 
			var ExpReg = /\%\%Notes\%\%/; 
			var notes = $Notes.Liste[ListeNotes_id]; 
			var obj_ul = "-"; 
			if (ExpReg.test(HTML)) { 
				obj_ul = "<span class=\"notes\"><h3>Notes de l'article</h3><ul>"; 
				for(var note_i=0; note_i<notes.length; note_i++) { 
					/* N : la fonction "push" de la méthode this.Trouver a fait démarrer les clés numériques à partir de 1 et non de 0, alors que le stockage démarre bien, quant à lui, de 0 */ 
					obj_ul += "<li id=\"nths_note_"+ListeNotes_id+"_"+(note_i+1)+"\">("+(note_i+1)+") : "+notes[note_i][2]+"</li>"; 
				} 
				obj_ul += "</ul></span>"; 
			} 
			HTML = HTML.replace("%%Notes%%",obj_ul); 
			ObjHTML.innerHTML = HTML; 
		}; 
		
	}; 
	
	$Notes = new $Notes(); 
	$Notes.Initialisation(); 
	
}); } catch(e) { 
	alert("Votre navigateur ne semble pas compatible avec grand chose..."); 
}
</script>
</body>
</html>