markItUp! Part II, Intégration avancée. Une librairie d'image grâce à Flickr

Si vous ne le savez pas encore, markItUp! est un plugin pour jQuery qui permet de transformer n'importe quel textarea en éditeur de tags configurable à souhait et ce, de manière totalement non intrusive.

Pour faire suite au premier tutoriel, voici un exemple de configurations un peu plus avancées mettant en scène un élément extérieur qui interagira avec l'éditeur. Ici nous allons utiliser un simple badge Flickr comme une mini-librairie d'images interfacé avec notre éditeur markItUp!.

Voir la démo

Que va-t-on faire ?

L'idée est d'ajouter un bouton à la barre de markItUp! qui affichera une mini-librairie d'images Flickr. Lorsqu'une image de la librairie sera cliquée, son code s'ajoutera à l'éditeur. Mieux, lorsque la touche ALT sera enfoncée, c'est le thumbnail qui s'ajoutera avec un lien vers l'image originale.
Preuve qu'avec un peu d'imagination et de jQuery on peut faire pas mal de choses amusantes.

Un librairie grâce à Flickr

Un badge Flickr est un simple lien vers un petit javascript sur le serveur Flickr qui affichera quelques unes de vos photos uploadées. Ces badges sont très à la mode sur les blogs, vous pouvez même en voir sur ce même blog dans la barre de droite.

Si ce n'est pas déjà fait, créez-vous un compte Flickr et uploadez-y quelques photos. Puis allez sur la page de création de badge, configurez selon vos besoins (module HTML, pas flash) et récupérez le code fournis.

Création d'un badge Flickr

http://www.flickr.com/badge.gne

Insérer ce lien dans votre page à l'endroit où vous souhaitez voir apparaitre le badge. Placez-le dans une balise div avec l'id #flickr.

<div id="flickr">
    <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne...></script>
</div>

Personnellement je n'ai pas utilisé les styles Css fournis par défaut. Pour accorder le tout à ma page j'ai stylé quelque chose comme ça :

#flickr {
    /* display: none; */
    border: 1px solid #3C769D;
    outline: 3px solid #FFF;	
    margin: 5px;
    padding: 5px 0 0 0;
    width: 698px;
}
#flickr img {
    border: 1px solid #3C769D;
}
#flickr a {
    margin: 5px;
}

Remarquez le display: none; qui une fois décommenté, masquera la librairie. markItUp! se chargera de l'afficher une fois le bouton flickr cliqué.

Un bouton Flickr pour markItUp!

On va partir du set réalisé lors du précédent tutorial auquel on va ajouter un nouveau bouton.
Editez le fichier /sets/tutorial/set.js et ajoutez la portion de code suivante là où vous souhaitez voir apparaitre le bouton dans votre barre d'outils.

mySettings = {	
    ...
    markupSet:  [	 
        ...
         {name:'Flickr',
            key:'F', 
            className:'flickr', 
            beforeInsert:function() { 
                // Ouvre ou ferme le volet FlickR lorsque le bouton est cliqué
                $('#flickr').slideToggle(); 

            }
        },

        ...
    ]
}

Puis téléchargez le nouveau bouton ci-dessus et ajoutez-le dans votre dossier /sets/tutorial/images/. Enfin, éditez le fichier /sets/tutorial/style.css et ajoutez-y le style du bouton.

.markItUp .flickr a {
    background-image:url(images/flickr.png);
}

Notre nouveau bouton est ajouté. Si on regarde de plus près, on voit que le bouton se contentera d'afficher ou de masquer le volet d'images Flickr. Tout le reste de la manipulation se fera par un script externe qui interagira avec markItUp! pour lui envoyer les données souhaitées.

La magie jQuery

La démarche est d'ajouter un peu de jQuery pour intercepter les clics effectués sur les images du badge. On récupère le Src de la petite image cliquée et on construit le Src de l'image de grande taille que l'on veut obtenir tout simplement en supprimant le _s de l'Url. Puis on ajoutera notre nouvelle balise Img à l'éditeur. Pour finir on referme le volet Flickr pour que l'effet soit parfait.

L'instruction intéressante ici est la fonction $.markItUp( { options } ) qui permet d'injecter du contenu et d'utiliser toutes les fonctions de markItUp! depuis l'extérieur de l'éditeur. Cette fonction accepte quasiment les mêmes paramètres qu'un bouton classique de set.js.

$(document).ready(function()	{
    $('#markItUp').markItUp(mySettings);

    // Code à ajouter pour gérer les clicks sur le badge Flickr
    $('#flickr a').click(function() {
        // Récupère les données interessantes
        alt = $('img', this).attr('alt');
        src = $('img', this).attr('src').replace('_s', '');
	
        // Insère l'image dans l'éditeur	
        $.markItUp({ replaceWith:'<img src="'+src+'" alt="'+alt+'" />' });
	
        // Referme le volet FlickR
        $('#flickr').slideUp();
        return false;
    });
});

Ca marche ! Notre mini-librairie est en place.

Insertion alternative

Allons plus loin. markItUp! permet une insertion de contenu alternative lorsque la touche ALT est pressée pendant un clic sur un bouton. Profitons de cette option pour rendre la librairie plus intéressante. Un clic simple insèrera l'image alors qu'un ALT+clic insèrera la petite image avec un lien vers l'image de grande taille.

Pour définir le contenu alternatif, il faut utiliser les tags spéciaux (!(contenu alternatif)!) ou (!(contenu normal |!| contenu alternatif)!). Partant ce ça, on utilise la même démarche que ci-dessus en agrémentant notre code de quelques caractères.

$(document).ready(function()	{
    $('#markItUp').markItUp(mySettings);

    // Code à ajouter pour gérer les clicks sur le badge Flickr
    $('#flickr a').click(function() {
        // Récupère les données interessantes
        alt = $('img', this).attr('alt');
        src = $('img', this).attr('src').replace('_s', '');
        thb = $('img', this).attr('src');
			
        // Insère l'image et éventuellement le lien dans l'éditeur	
        $.markItUp( { replaceWith:'(!(<a href="'+src+'">\n)!) ¬
            <img src="(!('+src+'|!|'+thb+')!)" alt="'+alt+'" /> ¬
            (!(\n)!)' } );
		
        // Referme le volet FlickR
        $('#flickr').slideUp();
        return false;
    });
});

C'est un peu cabalistique, je vous l'accorde.

Déchiffrage

Déchiffrons la ligne point par point.

$.markItUp( { replaceWith:'(!(<a href="'+src+'">\n)!) ¬
    <img src="(!('+src+'|!|'+thb+')!)" alt="'+alt+'" /> ¬
    (!(\n)!)' } );

• <img src=" ... " alt="'+alt+'" />
  Cette portion sera affichée quoi qu'il arrive.
• (!(<a href="'+src+'">\n)!)
  Cette portion ne sera affiché que si la touche ALT est pressée lors du click sur le bouton.
• (!('+src+'|!|'+thb+')!)
  La variable thb sera affichée si la touche ALT est pressée lors du click sur le bouton. Sinon c'est la variable src qui sera affichée.
• {!(\n)!)
  Cette portion ne sera affiché que si la touche ALT est pressée lors du click sur le bouton.

Conclusion

Je ne sais pas si cette mini-librairie a beaucoup d'intérêt. C'était en tout cas un très bon prétexte pour entrer dans les possibilités plus avancées de markItUp!. Un prochain tutorial verra certainement le jour dans les prochains mois et se penchera sur les possibilités de la prévisualisation intégrée, couplée notamment à l'utilisation de parsers, très utiles dans le cas d'éditeur de markups autres que HTML (markDown, Textile...).

markItUp! Part I - Installation et personnalisation

http://blog.jaysalvat.com/articles/markitup-part-I-installation-et-personnalisation.php