bouton copier (refs #27)

IGNF · Apr 30, 2024 · b16bbc2 · b16bbc2
1 parent 6466d57
commit b16bbc2
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -32,6 +32,7 @@
     <script src="/js/mermaid.initialize.js"></script>
   {% endif %}
 
+  <script src="/js/copy.js" defer></script>
   <title>{{ title or metadata.title }}</title>
 </head>
 <body id="top">

diff --git a/content/fr/tutoriels/alimentation-diffusion-simple/index.md b/content/fr/tutoriels/alimentation-diffusion-simple/index.md
@@ -88,8 +88,6 @@ POST /datastores/{datastore}/uploads
 
 ??? Requête et réponse
 
-Requête : `POST /datastores/{datastore}/uploads`
-
 **Corps de requête JSON**
 
 ```json

diff --git a/public/css/index.css b/public/css/index.css
@@ -144,3 +144,14 @@ div.fr-callout__text p {
 .text-center {
     text-align: center;
 }
+
+/* Copy button on every code blocks */
+pre[class*="language"] {
+    position: relative;
+}
+
+.code-copy-btn {
+    position: absolute;
+    right: .5em;
+    top: .5em;
+}
diff --git a/public/js/copy.js b/public/js/copy.js
@@ -0,0 +1,21 @@
+/**
+ * Ajoute un bouton pour copier les exemples de code
+ */
+(() => {
+    const code = document.querySelectorAll('pre[class*="language"]');
+
+    const buttonClasses = ['fr-btn', 'code-copy-btn'];
+
+    code.forEach((pre) => {
+      const button = document.createElement('button');
+      button.title = 'Copier';
+      button.classList.add(...buttonClasses);
+      button.innerHTML = 'Copier';
+      button.addEventListener('click', () => {
+        navigator.clipboard.writeText(pre.firstElementChild.textContent);
+        button.innerHTML = 'Copié !';
+        setTimeout(() => {button.innerHTML = 'Copier';}, 1500);
+      });
+      pre.appendChild(button);
+    });
+  })();