Update copy button icon on click

CodeWithDennis · Oct 18, 2024 · 73ddcc3 · 73ddcc3
1 parent d3aa56c
commit 73ddcc3
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/resources/dist/filament-theme-inspector.js b/resources/dist/filament-theme-inspector.js
diff --git a/resources/js/index.js b/resources/js/index.js
@@ -12,20 +12,35 @@ function createPopup() {
     popup.appendChild(textNode);
 
     const copyButton = document.createElement('button');
-    copyButton.innerHTML = `
+    let copyIcon = `
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="fi-btn-icon transition duration-75 h-5 w-5 text-gray-400 dark:text-gray-500">
             <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
         </svg>`;
 
+    copyButton.innerHTML = copyIcon;
+
     copyButton.style.cssText = `
         background: rgba(0, 0, 0, 0.5); color: white; border: none; 
         cursor: pointer; padding: 5px 10px; 
         font-size: 12px; border-radius: 5px;`;
 
+    const checkmarkSVG = `
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="green" class="fi-btn-icon transition duration-75 h-5 w-5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12l5 5L19 7" />
+        </svg>`;
+
     copyButton.addEventListener('click', () => {
         const textToCopy = textNode.textContent; // Get text from the span
-        navigator.clipboard.writeText(textToCopy).then(() => hidePopup(popup))
-            .catch(err => console.error('Failed to copy: ', err));
+        navigator.clipboard.writeText(textToCopy).then(() => {
+            // Change button icon to checkmark
+            copyButton.innerHTML = checkmarkSVG;
+
+            // Reset button icon after 2 seconds
+            setTimeout(() => {
+                copyButton.innerHTML = copyIcon;
+            }, 2000);
+
+        }).catch(err => console.error('Failed to copy: ', err));
     });
 
     popup.appendChild(copyButton);