[SCRIPT] Ranger ses fonctions Javascript dans un module masqué

On peut trouver, sur divers blogs et sur le forum, de nombreuses fonctions écrites en javascript.

Ces fonctions peuvent être réutilisées dans plusieurs articles.
Inutile donc de les écrire en doublon dans chacun des articles, il vaut mieux les écrire dans un module dédié.

Ainsi, si on corrige une fonction utilisée par plusieurs articles, la correction sera appliquée automatiquement à tous les articles qui appellent cette fonction.

C'est beaucoup plus simple, et cela permet d'avoir toutes ses fonctions à un seul endroit pour les retrouver facilement.
On peut aussi envisager de créer plusieurs modules pour regrouper des fonctions.

Par exemple, j'ai une fonction pour lire le pseudo de l'utilisateur connecté :

// Recherche le nom d'utilisateur connecté
function EklaGetUser()
{
	try {
		var ekla_login=document.id('menubar_section_account');
		if (ekla_login) 
		{
			ekla_login=ekla_login.getElementsByTagName("a").item(0);
			ekla_login = (ekla_login.innerText) ? ekla_login.innerText : ekla_login.text;
			return ekla_login.trim();
		}
		else 
		{return "";}
	} catch(e) {return "";}
}

Cliquez sur le bouton ci-dessous pour tester cette fonction qui affichera votre pseudo (si vous êtes connecté) dans une fenêtre de message :

Notez que cette fonction est écrite dans un module de mon blog que vous ne voyez pas : il est masqué.
Les articles, pages et modules peuvent partager des fonctions Javascript, dans la mesure où ils sont chargés.

Un module est toujours chargé, même s'il est masqué : on peut donc appeler une fonction d'un module depuis un article ou une page.

Pour masquer un module, il suffit d'ajouter ce code au CSS du blog, en modifiant XXXXXXXXX par l'identifiant de votre module :

/* Masquer ce module : remplacer l'identifiant numérique par celui de votre module */
#module_menuXXXXXXXXX {display:none}

Si vous ne savez pas où mettre ce code, voir cet article : Mon premier code CSS - images au coins arrondis avec ombrage.

Pour trouvez l'identifiant du module, utilisez les outils développeurs du navigateur, voir cet article : Structure d'un blog Eklablog.
Vous pouvez également voir l'identifiant en survolant les boutons d'édition ou de suppression du module ; l'identifiant est numérique : par exemple 139801640.

Vous pouvez éventuellement préférer écrire ce code dans le module (en édition « Code Source ») en ajoutant alors des balises style :

<style type="text/css"><!--
/* Masquer ce module : remplacer l'identifiant numérique par celui de votre module */
#module_menuXXXXXXXXX {display:none}
--></style>

Le module est alors invisible : vous pouvez le retrouver dans le menu « Apparence » => « Gérer les menus ».

Pour écrire du code Javascript, éditer le module et passez en édition « Code source ».

Note : passez en mode « Normal » ou « Expert » pour voir cette option de l'éditeur.

Il faut ensuite indiquer que l'on va écrire du code Javascript : cela se fait en plaçant le code dans un élément script :

<script>// <![CDATA[
// Recherche le nom d'utilisateur connecté
function EklaGetUser()
{
	try {
		var ekla_login=document.id('menubar_section_account');
		if (ekla_login) 
		{
			ekla_login=ekla_login.getElementsByTagName("a").item(0);
			ekla_login = (ekla_login.innerText) ? ekla_login.innerText : ekla_login.text;
			return ekla_login.trim();
		}
		else 
		{return "";}
	} catch(e) {return "";}
}
// ]]>
</script>

Votre fonction EklaGetUser peut maintenant être utilisée n'importe où dans le blog.