skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

mardi 2 novembre 2010

Zero Clipboard pour pallier à un manque des fureteurs

Publié par Infinite Loop, à 20 h 22 0 commentaire

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...


Tags: JavaScript

0 réponse à "Zero Clipboard pour pallier à un manque des fureteurs"


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ▼  2010 (398)
      • ►  décembre 2010 (29)
      • ▼  novembre 2010 (28)
        • Des arbres en 3D dans Google Earth 6
        • Tracer une zone circulaire sur une carte Google
        • Citation no. 109 sur Facebook
        • Instrument de musique fabriqué avec des tuyaux
        • Disque dur DeLorean USB de BTTF
        • Les programmeurs mélangent l'Halloween et Noël
        • Top 5 des sites complètement inutiles
        • Désolé, vous ne savez pas compter
        • Comment démarrer une vidéo YouTube à un temps spéc...
        • Citation no. 108 sur le programmeur
        • Clé USB à écran de 16 pouces
        • Mike Patton ressemble tout à fait à Johnny Depp
        • L'éthique des hackers
        • Piège avec un URL en paramètre GET
        • La cohérence chez Brick, c'est imbattable
        • Le framework est-il synonyme de mal ?
        • Citation no. 107 sur l'intelligence
        • Piège JavaScript no. 8 avec delete
        • Acheter une maison à Montréal
        • 1750 RIPJSB Hacker et Musique
        • Convertir un fichier Word docx en format doc
        • Liste des thumbnails d'une vidéo YouTube
        • Citation no. 106 sur l'apprentissage
        • De la base 60 vers le binaire
        • Regex de validation de lien YouTube
        • La poutine, d'un océan à l'autre
        • Zero Clipboard pour pallier à un manque des fureteurs
        • Windows 3.1 en JavaScript dans un browser
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft