Copy to Clipboard
Ce billet résume les éléments clés qui permettent d'utiliser le plugin "clipboard" dans une page pour permettre le "copier-coller" d'un contenu de la page web pars le presse-papier de l'utilisateur.
La page à réaliser est construite à l'aide de 3 fichiers :
index.html pour le code html de la page ;
index.js pour le javascript (interaction utilisateur) ;
clipboard.css pour l'aspect visuel.
Les fichiers ( .. et une démo en direct)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="clipboard.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="index.js"></script>
<title>Copy to Clipboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="clipWrap">
<div class="clipHead">
<div class="clip-input-group">
<span id="clip-dh-0">
Cliquez sur le bouton pour copier le code<br /> dans le presse papier
</span>
<span class="clip-input-group-button">
<button class="btn" id="btn0" type="button" data-clipboard-demo="" data-clipboard-target="#foo">
<!--img id="btn" class="clippy" src="../images/clippy.svg" width="13" alt="Copy to clipboard"-->
Copy to Clipboard
</button>
</span>
</div>
</div>
<pre class="clipSnippet content">
<code id="foo" >
la ligne 1
la ligne 2
la ligne 3
</code>
</pre>
</div>
</body>
</html>
$(function(){
<!-- Instancier Clipboard -->
var clipboard0 = new ClipboardJS('#btn0');
clipboard0.on('success', function(e) {
//console.log(e);
//console.log ("copied : action : " + e.action + " le texte : " +e.text );
$("#clip-dh-0").html('<span style="color:red"><strong>C\'est fait ; le code est dans le presse-papier </strong></span>');
$("#btn0").html('copied');
});
clipboard0.on('error', function(e) {
//console.log(e);
});
});
.wrap {
margin: 0 auto 90px;
max-width: 540px;
padding: 0 15px;
}
.example {
position: relative;
margin: 15px 0 0;
padding: 20px 20px 20px;
background-color: #fff;
border-radius: 4px 4px 0 0;
border: 1px solid #ddd;
z-index: 2;
}
.input-group {
display: table;
}
.input-group-button {
width: 1%;
vertical-align: middle;
}
.input-group input, .input-group-button {
display: table-cell;
}
.input-group-button:last-child .btn {
margin-left: -1px;
}
.input-group input:last-child, .input-group-button:last-child .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group-button:last-child .btn {
margin-left: -1px;
}
.input-group input:last-child, .input-group-button:last-child .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.clippy {
margin-top: -3px;
position: relative;
top: 3px;
}
img {
border: 0;
}
.btn {
position: relative;
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color:#eee;
background-image: linear-gradient(#fcfcfc,#eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-appearance: none;
}
.snippet {
background: #f8f8f8;
border-radius: 4px;
border: 1px solid #ddd;
clear: both;
top: -20px;
padding: 20px 0 0;
} Cliquez ici pour afficher ces fichiers dans une fenêtre surgissante
Analyse du code HTML
Dans l'entête (balise "header"), on retrouve les appels aux bibliothèques jQuery, jQuery-ui et clipboard téléchargés sur le CDN "cdnjs" et l'appel de notre script index.js
Le corps du code (balise "body") est contenu dans balise <div id=clipWrap> et se découpe en 2 parties :
une zone de "titre" de classe "clipHead" qui contient le texte du "titre"
(identifié "clip-dh-0") et le bouton "Copy to Clipboard ."
Le code <button class="btn" id="btn0" type="button" data-clipboard-demo="" data-clipboard-target="#foo"> est fondamental pour l'exécution du script. Seules les valeurs des paramètres id et data-clipbord-target peuvent être modifiées.
id="btn0" est utile si l'on souhaite copier-coller des parties de code situées dans différentes zone de la page
la valeur du paramètre data-clipbord-target est l'identifiant de la zone de code à copier-coller
une zone identifiée "foo" contenant le texte proposé à la copie entre les balises <pre></pre>
Notez que le texte "Copy to Clipboard" peut être remplacé par une image (cf : <img id="btn0" class ="clippy" src="../images/clippy.svg" width="13" alt="Copy to clipboard"> )
Analyse du script
Par $(function(){....}), on applique le jQuery sur le DOM de la page. puis on crée une instance de l'objet ClipboardJS sur l'élément bouton identifié "btn0" avec le code clipboard0 = new ClipboardJS('#btn0').
Enfin grâce à la méthode on de l'objet clipboard, on réagit aux réponses "success"ou "error" rendue par le plugin lors d'un appui sur le bouton.
Ici, en cas de succès ( le code est copié dans le presse-papier), on informe l'utilisateur par 2 actions :
$("#clip-dh-0").html('...') remplace le texte du titre grâce à
jQuery et l'identification id=clip-dh-0 de l'élément;$("#btn0").html('copied') remplace le texte du bouton par "copied", merci encore jQuery.
