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 décrite en 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
dans le presse papier
<!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>
dans le presse papier
$(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);
});
});
dans le presse papier
.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
Le code HTML
Dans l'entête, on retrouve les appels aux bibliothèques jQuery, jQuery-ui et clipboard téléchargés sur le CDN "cdnjs" et le lien vers notre script index.js
Le corps du code situé dans balise <div id=clipWrap> 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"> )
Le 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.