Merge branch '17-bouton-copier-coller-code' into 'main'

Resolve "Bouton copier-coller code"

Closes #17

See merge request !9

dsfr/base.html

@@ -20,6 +20,7 @@
     <link rel="manifest" href="{{ 'favicon/manifest.webmanifest'|url }}" crossorigin="use-credentials">
     <script src="{{ 'js/strikethrough_replacer.js'|url }}" defer></script>
     <script src="{{ 'js/checkbox_replacer.js'|url }}" defer></script>
+    <script src="{{ 'js/copy_code.js'|url }}" defer></script>
 
     <!-- Modifier les chemins relatifs des favicons en fonction de la structure du projet -->
     <!-- Dans le fichier manifest.webmanifest aussi, modifier les chemins vers les images -->

dsfr/css/theme.css

@@ -239,6 +239,18 @@ th {
     }
 }
 
+.copy-code-button {
+    opacity: 0;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    transition: all 0.3s ease;
+}
+
+pre:hover .copy-code-button {
+    opacity: 1;
+}
+
 
 pre { line-height: 125%; }
 td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }

dsfr/js/copy_code.js

+document.addEventListener('DOMContentLoaded', () => {
+    const codeBlocks = document.querySelectorAll('pre > code');
+    console.log(codeBlocks)
+
+
+    codeBlocks.forEach((codeBlock, index) => {
+        const copyButton = document.createElement('button');
+        copyButton.textContent = 'Copier';
+        copyButton.className = 'fr-btn fr-btn--sm copy-code-button';
+        copyButton.setAttribute('data-clipboard-index', index);
+        codeBlock.parentElement.style.position = 'relative';
+        codeBlock.parentElement.appendChild(copyButton);
+
+        copyButton.addEventListener('click', () => {
+            const textarea = document.createElement('textarea');
+            textarea.textContent = codeBlock.textContent;
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textarea);
+
+            // Indiquer que le texte a été copié
+            copyButton.textContent = 'Copié!';
+            setTimeout(() => {
+                copyButton.textContent = 'Copier';
+            }, 2000);
+
+        });
+    });
+});