Zero Clipboard pour pallier à un manque des fureteurs

La majorité des fureteurs ne donnent pas accès au presse-papier. Sauf Internet Explorer. Aucun client ne m'a demandé ce genre de fonctionnalité dans le passé. Pourtant, c'est quelque chose que je n'avais jamais songé intégrer dans un projet et que pour le peu d'effort que ça demande, je risque de l'offrir plus souvent.

C'est l'interface du raccourcisseur d'URL Bit.ly qui m'y a fait penser. Coller un URL, cliquer dans la case et retrouver immédiatement l'URL court dans mon presse-papier pour le coller dans Facebook, Twitter ou Identi.ca sans avoir à le sélectionner manuellement pour le copier.

Idéal pour faciliter la récupération d'une clé d'API, d'un URL, d'un snippet de code ou de toute autre information qui nécessite le copiage exact pour avoir la certitude qu'il sera collé tel quel sans omettre un caractère important. Ça peut paraître un détail, mais il semble que la notion de copier/coller ne soit pas encore totalement maîtrisée chez certaines personnes. Pour les autres, ça nous permet d'être un peu plus efficace.

Si on fouille dans le code source de Bit.ly (côté client), la librairie JavaScript externe bitly_compressed.js montre que Zero Clipboard est utilisé. En utilisant une combinaison de JavaScript et de Flash, Zero Clipboard peut compenser l'absence de clipboard sur différents browsers.

Essayez les quelques lignes de code ci-dessous. Vous verrez que seul Internet Explorer ne chigne pas sur l'utilisation du presse-papier, malgré qu'il vous demandera une autorisation. Firefox, Safari, Chrome et Opera afficheront plutôt l'alerte "Fonction inexistante".

if( window.clipboardData && clipboardData.setData ){
   clipboardData.setData('Text', 'Code 18');
}
else{
   alert('Fonction inexistante');
}

D'abord, téléchargez la dernière version de Zero Clipboard. Décompressez le dans un répertoire à la racine de votre projet et liez le fichier JavaScript principal à votre page.

<script type="text/javascript" src="/zeroclipboard/ZeroClipboard.js"></script>

Comme configuration, indiquez le chemin du movieclip Flash seulement si votre page ne se trouve pas dans le même répertoire que le fichier .swf. Utilisez le fichier ZeroClipboard10.swf si vous comptez copier du contenu riche (nouveauté disponible depuis la version 1.0.7).

ZeroClipboard.setMoviePath('http://localhost/zeroclipboard/ZeroClipboard.swf');

Pour le markup HTML, vous devez définir un conteneur principal qui accueillera le Flash (dynamiquement, par programmation) ainsi qu'un élément qui servira de bouton pour lancer la copie au presse-papier (utilisez glue() pour faire le pont entre les deux).

<div id="container"></div>
<a id="btn" href="javascript:;">Copier au presse-papier</a>

Le code JavaScript, que j'ai combiné à jQuery :

var clip = null;

$(document).ready(
   function(){
       clip = new ZeroClipboard.Client();
       clip.glue('btn', 'container');

       clip.addEventListener('mouseDown',
           function() {
               clip.setText( $('#textToCopy').val() );

               // effet simpliste pour indiquer textuellement à
               // l'utilisateur que le contenu est copié
               $('#result').show();
               $('#result').html('Contenu copié au presse-papier!').css('color', 'green');
               $('#result').fadeOut(2500);
           }
       );
   }
);

Voilà votre interface utilisateur déjà un peu plus user-friendly.

Quant au service Bit.ly, on ne sait pas combien de temps il survivra. Le roi de la Libye n'est pas heureux que son extension de domaine soit associée à des URL raccourcis...