Un petit billet technique pour nyroModal, suite à une demande postée sur github.
La demande est simple : ajouter un lien dans le titre de la fenêtre modale.
Dans ce billet, je vais expliquer pas à pas la méthode pour ajouter cette fonctionnalité à nyroModal sur une image. L'url du lien a ajouter devra se trouver dans l'attribut rev du lien ouvrant la fenêtre modale.
L'ensemble des fichiers est téléchargeable à la fin du billet.
Étape 1 : Télécharger nyroModal
La première étape consiste évidemment à télécharger la dernière version de nyroModal. Vous pouvez choisir de télécharger l'ensemble des fichiers, mais je préfère toujours créer mon propre package avec uniquement les éléments dont j'ai besoin.
Pour l'exemple, voici ceux que j'ai sélectionné :
- anims.fade : pas obligatoire, mais toujours plus agréable d'avoir quelques animations pour l'ouverture ou la fermeture de la modale.
- filters.title : on en a évidemment besoin, on va se baser dessus pour ajouter le lien
- filters.link : obligatoire aussi, c'est le filtre qui permet d'ajouter la réaction au click sur le lien
- filters.image : j'ai décidé d'ouvrir une image pour l'exemple, donc j'en ai besoin.
Une fois le zip téléchargé, une petite extraction là où en a envie. On va pouvoir commencer à travailler.
Étape 2 : Créer le fichier HTML de base
Avant d'ajouter la fonctionnalité, commençons par mettre en place notre fichier HTML avec le strict minimum :
<!DOCTYPE HTML>
<html>
<head>
<title>nyroModal : Link in title</title>
<link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
</head>
<body>
<a href="http://images.easyart.com/i/prints/rw/lg/1/3/Romero-Britto-Flower-Power-IV-130134.jpg" class="nyroModal" title="Flower Power IV">Flower Power IV</a>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script>
<![endif]-->
<script type="text/javascript">
jQuery(function($) {
$('.nyroModal').nm();
});
</script>
</body>
</html>
Dans cette page, je charge la CSS de nyroModal, ajoute un lien vers une image et charge les JavaScript nécessaires. Puis en une ligne, nyroModal est instanciée.
Le lien vers l'image a déjà l'attribut title pour créer automatiquement, via le filters.title le titre de la fenêtre modale.
Étape 3 : Étudier filters.title
Pour tenter d'ajouter une fonctionnalité au titre de la modale, il faut d'abord comprendre comment il fonctionne. Pour ce faire, on regarde la source sur github.
On y voit que l'élément h1 du titre est stocké dans la variable nm.store.title et est créé dans le callback beforeShowCont.
nyroModal est développé de sorte que tous les callbacks des filtres sont appelés. Puis, les callbacks définis lors de l'instanciation de nyroModal (via le paramètre callbacks) sont appelés.
Pour ajouter la fonctionnalité, nous allons donc pouvoir la mettre dans le callback beforeShowCont de ce paramètre, en utilisant la variable nm.store.title et du jQuery habituel.
Étape 4 : Ajouter la fonctionnalité
On sait maintenant comment procéder. Il ne reste plus qu'à...
On ajoute l'attribut rev destiné à contenir l'URL du lien à ajouter, puis dans le code de l'instanciation des liens nyroModal, on ajoute un callback. La page HTML devient :
<!DOCTYPE HTML>
<html>
<head>
<title>nyroModal : Link in title</title>
<link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
</head>
<body>
<a href="http://images.easyart.com/i/prints/rw/lg/1/3/Romero-Britto-Flower-Power-IV-130134.jpg" class="nyroModal"
title="Flower Power IV" rev="http://www.easyart.fr/posters/Romero-Britto/Flower-Power-IV-130134.html">Flower Power IV</a>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script>
<![endif]-->
<script type="text/javascript">
jQuery(function($) {
$('.nyroModal').nm({
callbacks: {
beforeShowCont: function(nm) {
if (nm._hasFilter('title') && nm.opener.is('[rev]')) {
nm.store.title.html('<a href="'+nm.opener.attr('rev')+'">'+nm.store.title.text()+'</a>');
}
}
}
});
});
</script>
</body>
</html>
Alors, qu'y a t-il dans ce callback ?
On vérifie d'abord que le filtre title soit bien activé et que le lien ouvrant possède un attribut rev => Les conditions sont remplis pour ajouter la fonctionnalité.
Puis la ligne en dessous, on modifie le h1 stocké dans nm.store.title pour remplacer le simple texte par un lien vers l'URL de l'attribut rev et le texte est conservé.
Voilà, fini. 2 lignes de code effective pour ajouter cette fonctionnalité.
Conclusion
Pour ajouter des fonctionnalité à un script open-source, il faut toujours se poser deux questions avant de commencer :
- Qu'est-ce qu'on veut réaliser ?
- Comment va-t-on le mettre en place ?
Puis, par l'analyse du code et de la documentation, on trouve un moyen de développer ce qu'on veut plus ou moins simplement.
Je dis toujours à mes clients : "Oui, tout est possible. Il suffit d'avoir le temps."
Les fichiers
Vous pouvez voir les source ici : http://nyrodev.info/dl/nyroModalLinkTitle/
Vous pouvez télécharger l'ensemble des sources au format Zip ici : http://nyrodev.info/dl/nyroModalLinkTitle/nyroModalLinkTitle.zip