diff --git a/static/copycode/client.js b/static/copycode/client.js index 499c6e0..d7bc4ec 100644 --- 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 index 688b664..ecf17c7 100644 --- 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;