From 65b76042967afe1c7d092b08e0a3cf571d3dedef Mon Sep 17 00:00:00 2001
From: Blake Gearin <blakegearin@pm.me>
Date: Sun, 10 Apr 2022 08:42:45 +0000
Subject: [PATCH] Add temporary check mark icon on copy to clipboard
---
static/icons/check.svg | 1 +
assets/js/index.js | 4 ++++
assets/sass/_components.sass | 8 ++++----
assets/js/code.js | 30 ++++++++++++++++++------------
4 files changed, 27 insertions(+), 16 deletions(-)
diff --git a/assets/js/code.js b/assets/js/code.js
index fdb10f3..6a66f89 100644
--- a/assets/js/code.js
+++ b/assets/js/code.js
@@ -1,6 +1,6 @@
const codeActionButtons = [
{
- icon: 'copy',
+ icon: 'copy',
id: 'copy',
title: 'Copy Code',
show: true
@@ -9,7 +9,7 @@
icon: 'order',
id: 'lines',
title: 'Toggle Line Numbers',
- show: true
+ show: true
},
{
icon: 'carly',
@@ -21,7 +21,7 @@
icon: 'expand',
id: 'expand',
title: 'Toggle code block expand',
- show: false
+ show: false
}
];
@@ -175,7 +175,13 @@
}
function copyCode(codeElement) {
- lineNumbers = elems('.ln', codeElement);
+ const codeElementClone = codeElement.cloneNode(true);
+ const copyBtn = codeElement.parentNode.parentNode.querySelector(`.${copyId}`);
+ const originalTitle = copyBtn.title;
+ loadSvg('check', copyBtn);
+ copyBtn.title = 'Code Copied';
+
+ lineNumbers = elems('.ln', codeElementClone);
// remove line numbers before copying
if(lineNumbers.length) {
lineNumbers.forEach(function(line){
@@ -183,9 +189,13 @@
});
}
- const codeToCopy = codeElement.textContent;
// copy code
- copyToClipboard(codeToCopy);
+ copyToClipboard(codeElementClone.textContent);
+
+ setTimeout(function() {
+ copyBtn.title = originalTitle;
+ loadSvg('copy', copyBtn);
+ }, 2250);
}
function disableCodeLineNumbers(block){
@@ -213,7 +223,7 @@
const wrapIcon = elem(`.${wrapId}`, panel);
codeBlockFits(block) ? false : deleteClass(wrapIcon, panelHide);
- // append buttons
+ // append buttons
highlightWrapper.appendChild(panel);
});
@@ -264,11 +274,7 @@
}
}
- if(isCopyIcon) {
- // clone code element
- const codeElementClone = codeElement.cloneNode(true);
- copyCode(codeElementClone);
- }
+ if(isCopyIcon) copyCode(codeElement);
}
});
diff --git a/assets/js/index.js b/assets/js/index.js
index 28411e4..4cae091 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -217,9 +217,13 @@
copyText.classList.add(yanked);
copyText.innerText = 'Link Copied';
if(!elem(`.${yanked}`, parent)) {
+ const icon = parent.getElementsByTagName('img')[0];
+ const originalSrc = icon.src;
+ icon.src = '{{ absURL "icons/check.svg" }}';
parent.appendChild(copyText);
setTimeout(function() {
parent.removeChild(copyText)
+ icon.src = originalSrc;
}, 2250);
}
}
diff --git a/assets/sass/_components.sass b/assets/sass/_components.sass
index 9e8f30d..8f1e815 100644
--- a/assets/sass/_components.sass
+++ b/assets/sass/_components.sass
@@ -129,7 +129,7 @@
opacity: 1
&ed
position: absolute
- right: -1rem
+ right: -2.2rem
top: -2rem
background-color: var(--theme)
color: var(--light)
@@ -273,7 +273,7 @@
background-image: var(--sunIcon)
background-size: 60%
background-repeat: no-repeat
- background-position: center
+ background-position: center
&_icon
height: 1rem
@@ -297,7 +297,7 @@
border: none
&::before
display: none
- p
+ p
&:first-child, ~ p
padding-top: 0
&:last-child
@@ -336,4 +336,4 @@
stroke: var(--text) !important
.messageLine0, .loopLine
stroke: var(--theme) !important
- fill: var(--theme) !important
\ No newline at end of file
+ fill: var(--theme) !important
diff --git a/static/icons/check.svg b/static/icons/check.svg
new file mode 100644
index 0000000..d4ab455
--- /dev/null
+++ b/static/icons/check.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#666"><path d="M99.941 293.748a21.78 21.78 0 0 1-7.175-16.153c0-11.938 9.823-21.765 21.764-21.765a21.772 21.772 0 0 1 15.737 6.733l85.958 83.825 164.42-194.504c18.463-21.833 51.574 6.326 33.213 28.125L234.276 392.324l-1.032 1.135c-8.327 8.55-22.218 8.74-30.773.412L99.941 293.748z"/></svg>
--
Gitblit v1.10.0