nyroBlog

nyroModal : créer un lien dans le title

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

 

Version anglais de ce billet

The return...

Last post: october 2010. (and maybe earlier in English...)

This has to stop! nyroBlog come back in a new version, "powered by nyroFwk".

Presentation stays the same but it should be faster.

 

New features in this version:

  • Server-side optimisations to cache MySQL and views (nyroFwk native)
  • Client-side optimisations (YSlow and PageSpeed) (natif nyroFwk)
  • Spam control with Akismet (usage of a native nyroFwk class)
  • Indexing of posts with Zend_Search_Lucene (might be included soon in nyroFwk)

New it's up to me to write new posts about PHP, frameworks, JavaScript, jQuery, and so one...

 

If you see anything wrong or some bugs in this new version, don't hesitate to tell me!

Le retour...

Dernier billet : octobre 2010.

Cela n'a que trop duré ! nyroBlog revient dans une nouvelle version "powered by nyroFwk".

La présentation reste la même, mais il devrait être plus rapide.

 

Les nouveautés de cette version :

  • Optimisations côté serveur avec du cache MySQL et vues (natif nyroFwk)
  • Optimisations côté client (YSlow et PageSpeed) (natif nyroFwk)
  • Contrôle des spams avec Akismet (utilisation classe native nyroFwk)
  • Indexation des billets avec un Zend_Search_Lucene (probablement bientôt inclus dans nyroFwk)

Maintenant, à moi de me remettre à écrire des billets à propos de PHP, de framework, de JavaScript, jQuery, etc...

 

Si vous voyez des bugs ou des choses étranges sur ce blog, n'hésitez pas !

Environnement de travail - Revival

En 2006, j'avais décris ma façon de travailler, et plus particulièrement les logiciels que j'utilisais.

Et si, 4 ans après, on refaisait la même chose ? (histoire de le mettre au goût du jour, et raviver la flamme de ce blog ?)

Allez hop, c'est parti.

Je suis maintenant sur Windows 7 Edition Familiale Premimum. Je ne m'embête plus à essayer d'autres OS ou des choses comme ça, ça me convient tout à fait. J'ai maintenant un joli écran 23 pouces devant moi et un vrai beau clavier. Un vrai ordinateur fixe, ça change du PC portable. Plsu d'espace et plus libre pour la disposition. Et puis comme le dual screen c'est vraiment pratique, un écran 17 pouces sur le côté.

Les logiciels maintenant : Firefox évidemment pour tous les développements, avec comme extension :

  • FireBug pour le déboggage JavaScript, mais aussi et surtout pour l'édition de live de la CSS : je créé mon HTML, j'ouvre Firebug et créé ma CSS en live pour voir directement le résultat. Une fois bon, copier/coller dans le fichier CSS, on réactualise et on passe à la suite.
  • Page Speed et YSlow pour vérifier les performances des sites
  • FireQuey indispensable pour le développement jQuery
  • Tab Mix Plus pour gérer le fonctionnement des onglets comme je veux
  • Web Developer généralement pour vider le cache, désactiver le JavaScript
  • Firefox Sync pour ne plus s'embetter à sauvegarder favoris, mot de passe et tout plein d'autres trucs
  • Echofon pour twitter...

Mais aujourd'hui, j'utilise aussi Chrome pour la plupart de mes navigations privées (facebook par exemple) et visualiser quelques autres sites plus smooth avec celui-ci.

IE8 est là aussi pour les tests, et le mode compatibilité pour IE7 qui permet de tester 2 navigateurs en 1. Une machine virtuelle avec VirtualBox sur Windows XP est toujours indispensable pour les test IE6, quand le client le demande expressément (le cas pour Cartier - Love par exemple)

On a fait le tour côté navigateur. Le serveur, j'utilise maintenant Wamp qui a remplacé depuis bien longtemps le vieillissant EasyPhp.

FileZilla est toujours là aussi pour les transferts FTP. Les fonctionnalités "navigation synchronisée" et "Comparaison des dossiers" sont devenus indispensables pour, d'une part, ne pas écraser un fichier plus récent, et d'autre part, n'envoyer que les nouveaux fichiers, qu'on peut visualiser d'un seul coup d'œil.

Oh, et pour le développement à proprement parler ? Dans quoi j'écris véritablement mes lignes de code ? Dans Netbeans bien sûr. Rapide, efficace, complétion correcte, il correspond exactement à ce dont j'ai besoin. Le CTRL+R pour renommer une variable est des plus efficaces, le CTRL+B pour aller à la déclaration d'une fonction ou variable aussi. un code bien commenté à la javaDoc est indispensable pour bien l'utiliser. Ça tombe bien, c'est le cas de nyroFwk !

J'ai quand même toujours un Notepad++ qui traîne pour l'édition rapide depuis Filezilla ou bien pour les JS ou CSS, quand NetBeans n'est pas très utile.

Voilà pour les principaux. En vrac, on citera aussi :

  • Thunberbird qui est mon fidèle partenaire pour tous mes e-mail depuis 2005
  • Foxit Reader pour lire les PDF à la vitesse de l'éclair
  • VLC pour lire les musiques bien plus vite que le vieillissant Winamp
  • Le vieux mais non moins efficace PuTTY pour les connexions SSH
  • OpenOffice.org pour tous les traitements de texte et excel

Et vous alors, vous utilisez quoi ?

FF1J, une semaine après

Je n'ai pas pu y aller (et d'ailleurs je n'y suis jamais allé, c'est un truc d'artiste ce machin...), mais j'aime toujours regarder les vidéos finales.
Et cette année, il y avait plusieurs équipe de SRC qui m'ont bien plu. D'ailleurs l'équipe Enormous Pelican a gagné le prix du public et le Chrono d'or.

Le FF1J (Festival du film d’un jour) est un festival organisé par les étudiants de l’UTBM de Belfort. Ce festival se déroule sur 3 jours, pendant lesquels des équipes de tournage d’étudiants de toute la France doivent réaliser les meilleurs courts-métrages. Ils ont 50h pour trouver un scénario, tourner et monter leur court, ceci à partir d’un thème dévoilé le premier jour.

La vidéo d'Enormous Pelican :


La vidéo d'Hage :