Copy to Clipboard

Vous trouverz 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 rappelé 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 du site (qui propose ell-aussi le copier-coller de code).

Les différentes étapes :

  1. Ajouter dans la page le bloc de contenu contenant le code à copier-coller ;
  2. Modifier le script js vu à la page "ajouter un script" ;
  3. Compléter le fichier CSS de votre thème ;
  4. Compléter le fichier libraries.yml  de votre thème.

1. le bloc de contenu

Pour cela :

  1. aller sur la page "copy to clipboard" dans l'onglet HTML. Cliquer sur le bouton pour copier le code dans le presse-papier ;
  2. ouvrez votre page en mode édition du contenu ;
  3. créer  un  bloc personnalisé ;
  4. passer en mode "source" ;
  5. coller le contenu du presse-papier ;
  6. supprimer toutes les parties en dehors de la balise <div class="clipWrap"> ;
  7. saisissez le contenu que vous souhaitez offrir au copier-coller du visiteur dans la  balise  <pre > ;
  8. enregistrer.

2. la modification du script

Dans la fonction
       function (context, settings) {...}
il suffit j'ajouter la portion de code

Cliquez sur le bouton pour copier le code
dans le presse papier
			
   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 :

  1. aller sur la page "copy to clipboard" dans l'onglet CSS. Cliquer sur le bouton pour copier le code dans le presse-papier
  2. ouvrez le fichier CSS de votre thème, aller à la fin du fichier et coller le contenu du presse-papier.
  3. enregistrer votre fichier CSS

4. Complément au fichier de librairie

Dans le fichier xxx.lbrairies.yml (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.

Dans monthème, cette section est reprise ci-dessous

  js:
        https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js: { type: external, minified: true }
        js/dhv3.js: {}
  dependencies:
    ......

NB : penser à exécuter les étapes 4 - 5 et 6  vu à la page "ajouter un script" pour que votre modification soit visible.

Mots Clé Système