Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

"Copier dans le presse-papier" Devient Facile avec Clipboard.js

by
Difficulty:IntermediateLength:ShortLanguages:

French (Français) translation by Flavien B (you can also view the original English article)

Sur n'importe quelle page web, il n'est pas rare de copier une partie de texte, comme un paragraphe, un bout de code ou un URL. Et pour le faire, l'utilisateur a premièrement besoin de sélectionner le texte, ensuite d'utiliser le menu dans le navigateur ou le raccourci clavier pour copier le contenu sélectionné.

Cependant, en ce qui concerne UX, nous pouvons simplifier le processus si il est susceptible de se reproduire souvent. Sur Github, par exemple, il y a un bouton pour copier l'url du dépôt.

Thanks Github
Merci Github

Sur Bit.ly, vous allez trouver un bouton similaire pour copier l'URL court. Ce bouton est très pratique pour les utilisateurs afin de copier un morceau de contenu qui est expressément destiné à être copié.

Thanks Bitly
Merci Bit.ly

En raison des restrictions des navigateur, ajouter cette fonctionnalité pouvait être dans le passé un problème compliqué à résoudre. La majorité des développeurs devaient avoir recours à une librairie dépendant de Flash comme Clippy par exemple. Heureusement maintenant nous avons une librairie JavaScript qui nous permet de l'implémenter bien plus facilement. Elle est appelée Clipboard.js, et dans ce tutoriel pour débutant, je vais vous enseigner la manière de mettre en place cette fonctionnalité.

Installation

Pour installer Clipboard.js sur votre site, téléchargez le fichier, placez le dans un dossier approrié à l'intérieur du dossier de votre site web et faites le lien de ce fichier dans le document. Alternativement, nous pouvons le charger à partir du fichier hébergé dans CDN, alors ajoutez ceci au pied de votre page HTML.

Maintenant nous avons besoin de deux éléments dans notre document. Premièrement c'est la cible qui contient le contenu que nous voulons copier. L'élément cible pourrait être, par exemple, une input (avec un identifiant) contenant une URL court.

Le second élément est l'élément qui va exécuter la fonction. Cet élément, dans notre cas, est un bouton. L'élément qui déclenche la fonction doit employé l'attribue "data" data-clipboard-target, qui permet au programme de savoir quel élément doit déclencher la fonction via son identifiant.

Une fois que ces éléments sont en place, nous devons activer Clipboard.js en l'ajoutant à l'intérieur de la balise "script", ou dans un fichier JavaScript séparé :

Bingo! Nous devrions maintenant être capable de copier l'url court présent dans l'élément "input" en cliquant sur le bouton.

Continuons

Dans certains cas, ajouter un identifiant, la classe et l'attribue data-* à un élément cible de notre contenu n'est pas possible --- quelque chose qui pourrait se passer quand on veut gérer des éléments cibles multiples.

En tant qu'exemple, disons que nous avons un site dont le contenu comprend des paragraphes et un certain nombre d'extraits de code. Nous allons utiliser PrismJs, une fantastique librairie pour afficher le code proprement avec une syntaxe surlignée. PrismJS ne contient pas de base l"outil "copier", alors nous avons décidé de le faire avec Clipboard.js. Mais le problème est : nous avons des centaines de pages tout au long de notre site Web avec ce genre de contenu.

C'est où l'API Clipboard.js monte en scène.

A l'intérieur de l'API

Clipboard.js présente pas mal "d'events", success et error, qui respectivement permettent de savoir si l'action d'avoir copié est un succès ou non. Le error serait susceptible de se produire dans Safari car il ne supporte pas la commande copie/ couper de la méthode de execCommand que Clipboard.js invoque.

De plus, ces évènements (events) retournent également les propriétés suivantes :

  • action : retourne l'action que nous donnons à l'élément target (cible). Ceci va retourner soit copy, soit cut
  • text : uniquement retourné lors de l’événement success. Il retourne le text qui a été copié ou coupé à partir de l'élément target.
  • trigger: renvoie l'élément qui a déclenché l'action de copie (copy) ou de coupe (cut).

Ces APIs nous permettent d'implémenter Clipboard.js dans notre contenu dans directement modifier son fonctionnement. Dans notre cas, nous pouvons les utiliser pour ajouter l'outil "copy" à l'extrait de code pour le contenu visé.

Clipboard.js + PrismJS

Maintenant, nous devrions avoir PrismJS déjà installé (téléchargez le fichier à l'intérieur du dossier de votre site, et incluez le dans votre document). Dans notre code HTML, chaque extrait de code est "enroulé" dans des éléments pre et code avec une "class" language-{name} Dans cet exemple, nous sommes en train d'utiliser moins de code, alors nous l'avons ajouté avec la classe language-less, comme ci dessous :

Ajouter le bouton pour copier

Nous devons maintenant inclure un bouton dans chacun des éléments pre pour copier les codes respectifs. Pour commencer à faire ça, nous avons toutes les balises pre à l'intérieur desquelles le contenu est sélectionné en utilisant la méthode getElementsByTagName 

Nous avons probablement deux ou plusieurs balises pre dans le contenu, de sorte à ce que nous devions parcourir chaque pre que nous avons choisi.

A l'intérieur de la boucle for, ajouter les lignes suivantes pour inclure le bouton.

Récapitullons le code. Nous validons premièrement si nous avons un élément code ajouté avec la classe préfixe language-. Si ce n'est pas le cas, nous n'incluons pas le bouton.

Donc nous avons le bouton dans l'élément pre. Chaque bouton est mis en place avec une classe copy-button et un texte "Copy" affiché à côté:

Cela devrait maintenant être visible dans chaque extrait de code.

Button is added in the code snippet

Démarrer Clipboard

Maintenant, nous exécutons Clipboard, de sorte que chaque bouton copie le code en définissant l'élément cible à l'élément précédent par rapport au déclenchement, .copy-bouton. Dans notre cas, cet élément est code

Maintenant le bouton fonctionne. Si vous cliquez sur le bouton, il devrait copier l'extrait de code. Mais allons un peu plus loin en travaillant avec les évènements customisés.

Travailler avec les Evènements Customisés

Imaginons que nous voulions rendre "l'expérience de copie" de manière plus intéractive pour nos utilisateurs. Quand l'utilisateur a cliqué sur le bouton, et a avec succès copié le code, nous aimerions changer le texte du bouton de "Copier" à "Copié". Pour le faire, ajoutez les lignes suivantes :

Le code fait trois choses:

  • Premièrement, nous supprimons la sélection a l'intérieur de la zone du contenu copié en utilisant la fonction clearSelection() de Clipboard. Ajouter ceci est optionnel.
  • Alors nous lui changeons le contenu pour qu'il apparaisse "Copied"
  • Enfin, nous revenons de nouveau à "Copier" après deux secondes.

Dans le cas d'une erreur où execCommand n'est pas supporté, comme dans Safari, nous changeons le texte du bouton en 'Press CTRL+C to copy' à la place. Ajoutez le code suivant :

C'est tout ! Nous avons maintenant un bouton entièrement fonctionnel et intéractif qui permet de copier un contenu. La tâche restante qui nous reste à faire ici est de styliser le bouton, mais je vais laisser cela entièrement à vous.

Autours

Clipboard.js est une librairie JavaScript bien utile qui permet d'ajouter une utilitaire de copie pour les pages web d'une manière très simple. Dans ce tutoriel, nous avons examiné les bases, puis certaines choses avancées avec les API exposées et les événements personnalisés.

Clipboard.js repose sur la sélection et l'execCommand donc il ne fonctionnera que dans les navigateurs où ces deux méthodes sont prises en charge: Chrome 42, Firefox 41, Internet Explorer 9, et Opera 9. Comme mentionné, les utilisateurs de Safari n'ont actuellement pas beaucoup de chance.

Enfin, j'espère que vous avez apprécié ce tutoriel et n'oubliez pas la démo !

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.