WIP: Load button colors from CSS

jannis-baum · Feb 21, 2025 · 733d51a · 733d51a
1 parent 34ec9fd
commit 733d51a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/static/copycode/client.js b/static/copycode/client.js
@@ -1,11 +1,37 @@
 let clipboard = new ClipboardJS('.copy-button');
 
+// Setup copy button icons
 const Icons = {
-    Copy: 'icon-copy',
-    Success: 'icon-check',
-    Fail: 'icon-x',
+    Copy: {
+        Class: 'icon-copy',
+        ForgroundColor: '',
+        BackgroundColor: '',
+    },
+    Success: {
+        Class: 'icon-check',
+        ForgroundColor: '',
+        BackgroundColor: '',
+    },
+    Fail: {
+        Class: 'icon-x',
+        ForgroundColor: '',
+        BackgroundColor: '',
+    },
 };
 
+// Get icon color values from css
+function getIconColors() {
+    let element = window.getComputedStyle(document.documentElement);
+    Object.entries(Icons).forEach(([, icon]) => {
+        icon.ForgroundColor = element.getPropertyValue(`--${icon.Class}-primary`);
+        icon.BackgroundColor = element.getPropertyValue(`--${icon.Class}-secondary`);
+    });
+}
+getIconColors();
+
+// TODO: add event handle for color scheme change
+
+// TODO: Replace this with a loop of the setIcon function
 document.querySelectorAll('.icon-check').forEach(function (icon) {
     icon.style.display = 'none';
 });
@@ -15,9 +41,11 @@ document.querySelectorAll('.icon-x').forEach(function (icon) {
 
 function setIcon(btn, icon) {
     for (let child of btn.children) {
-        console.log(child.classList.contains(icon));
-        if (child.classList.contains(icon)) {
+        console.log(child.classList.contains(icon.Class));
+        if (child.classList.contains(icon.Class)) {
             child.style.display = 'inline-block';
+            btn.style.fill = icon.ForgroundColor;
+            btn.style.background = icon.BackgroundColor;
         } else {
             child.style.display = 'none';
         }
@@ -28,17 +56,12 @@ function setIcon(btn, icon) {
 clipboard.on('success', function (e) {
     console.info('Trigger:', e.trigger);
     const btn = e.trigger;
-    btn.style.fill = '#00ff00';
-    btn.children[0].style.display = 'none';
-    btn.children[1].style.display = 'inline-block';
 
-    console.log(window.getComputedStyle(document.documentElement).getPropertyValue('--text-primary'));
     console.info(Icons);
 
     setIcon(btn, Icons.Success);
 
     setTimeout(() => {
-        btn.style.fill = '#0000ff';
         setIcon(btn, Icons.Copy);
     }, 2000);
 });

diff --git a/static/markdown.css b/static/markdown.css
@@ -193,7 +193,7 @@ blockquote {
     border: 0;
     border-radius: 0.4rem;
     background: none;
-    opacity: 1;
+    opacity: 0;
     outline: none;
     cursor: pointer;
     transition: opacity 0.2s, background 0.2s;