Copy to Clipboard
Vous trouverez ci-dessous, la description en pas à pas des étapes successives à suivre pour placer dans vos pages un bloc de code que l'utilisateur pourra "copier-coller" en cliquant simplement sur un bouton de la page.
Ce bloc, qui est utilisé dans l'onglet ci-dessous, est présent dans de nombreuses pages du site. Pour comprendre le fonctionnement du copier-coller, consultez la page"copy to clipboard" de la section dev_web-jQuery du site (qui propose elle-aussi le copier-coller de code).
Les différentes étapes :
Ajouter dans la page le bloc de contenu contenant le code à copier-coller ;
Modifier le script js vu à la page "ajouter un script" ;
Compléter le fichier CSS de votre thème ;
- Compléter le fichier "--.libraries.yml" de votre thème.
1. le bloc de contenu
Pour cela :
aller sur la page "copy to clipboard" de ce site, puis dans l'onglet HTML, cliquer sur le bouton pour copier le code dans le presse-papier ;
ouvrez votre page en mode édition du contenu ;
créer un bloc personnalisé ;
passer en mode "source" ;
coller le contenu du presse-papier ;
supprimer toutes les parties en dehors de la balise <div class="clipWrap"> ;
saisissez le contenu que vous souhaitez offrir au copier-coller du visiteur dans la balise <pre> ;
- enregistrer.
2. la modification du script
Dans la fonction
function (context, settings) {...}
il suffit d'ajouter la portion de code qui figure dans l'onglet ci-dessous.
var clipboard0 = new ClipboardJS('#btn0');
clipboard0.on('success', function(e) {
$("#clip-dh-0").html('<span style="color:#9e2049ad;">
<strong>C\'est fait ;
</br>le code est dans le presse-papier
</strong></span>');
//console.log(e);
});
clipboard0.on('error', function(e) {
//console.log(e);
});
3. le complément au fichier CSS
Pour cela :
aller sur la page "copy to clipboard" dans l'onglet CSS. Cliquer sur le bouton pour copier le code dans le presse-papier ;
ouvrez le fichier CSS de votre thème, aller à la fin du fichier et coller le contenu du presse-papier ;
- enregistrer votre fichier CSS.
4. Complément au fichier de librairie
Dans le fichier xxx.lbrairies.yml (où xxx représente le nom de votre thème), ajouter la ligne suivante dans la la section js :
https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js: { type: external, minified: true }
dont le rôle est d'appeler la bibliothèque (minimifiée) clipboard.js du serveur cdn : cloudflare.
Voici un extrait de la section JS de mon thème :
js:
https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js: { type: external, minified: true }
js/dhv3.js: {}
dependencies:
......
