From 994d90b548f314a8cccaa194c8df885eb776899e Mon Sep 17 00:00:00 2001
From: "alexandre.caldato" <alexandre.caldato@i-carre.net>
Date: Fri, 3 Nov 2023 10:44:40 +0000
Subject: [PATCH] Resolve "Bouton copier-coller code"

---
 dsfr/base.html       |  1 +
 dsfr/css/theme.css   | 12 ++++++++++++
 dsfr/js/copy_code.js | 30 ++++++++++++++++++++++++++++++
 3 files changed, 43 insertions(+)
 create mode 100644 dsfr/js/copy_code.js

diff --git a/dsfr/base.html b/dsfr/base.html
index 7f9ae3a..6b86287 100644
--- a/dsfr/base.html
+++ b/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 -->
diff --git a/dsfr/css/theme.css b/dsfr/css/theme.css
index 833ad20..f7abccd 100644
--- a/dsfr/css/theme.css
+++ b/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; }
diff --git a/dsfr/js/copy_code.js b/dsfr/js/copy_code.js
new file mode 100644
index 0000000..4ae9be6
--- /dev/null
+++ b/dsfr/js/copy_code.js
@@ -0,0 +1,30 @@
+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);
+
+        });
+    });
+});
-- 
GitLab