Copy code feature, custom scrollbar

Nickguitar · Oct 18, 2023 · b361f13 · b361f13
1 parent 4913680
commit b361f13
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 46 deletions.
diff --git a/src/script.js b/src/script.js
@@ -73,7 +73,7 @@ function displayJSON(jsonData){
             lang = lang ? lang : "text";
 			data.command = data.command.replace(/^![^\s]+ */i, "");
 
-            dataDiv.innerHTML += `<span class="description">${safeString(data.description)}</span><pre><code class="language-${lang}">${safeString(data.command)}</code></pre>`;
+            dataDiv.innerHTML += `<span class="description">${safeString(data.description)}</span><div class='code-wrapper'><pre><code class="language-${lang}">${safeString(data.command)}</code></pre><svg class='copy-icon' xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" fill="#060"/></svg><div class='copied'>Copied</div></div>`;
         });
         jsonContainer.appendChild(dataDiv);
 
@@ -107,6 +107,22 @@ function displayJSON(jsonData){
 
 	hljs.highlightAll();
 
+	document.querySelectorAll('.copy-icon').forEach((codeElement) => {
+		codeElement.addEventListener('click', function() {
+			var codeText = codeElement.parentElement;
+
+			navigator.clipboard.writeText(codeText.querySelector('code').innerText).then(function() {
+			var copied = codeText.querySelector('.copied');
+		    copied.classList.add('visible');
+		    setTimeout(() => {
+				copied.classList.remove('visible');
+		    }, 500);			
+			}).catch(function(err) {
+				console.error('Unable to copy code to clipboard', err);
+			});
+		});
+	});
+
 }
 
 function filterItemsByTag(clickedTag) {

diff --git a/src/styles.css b/src/styles.css
@@ -1,5 +1,5 @@
 :root {
-  color-scheme: dark;
+    color-scheme: dark;
 }
 
 body{
@@ -10,7 +10,7 @@ body{
 }
 
 h1 {
-	color: #fff;
+    color: #fff;
 }
 
 h2, h3 {
@@ -25,25 +25,17 @@ h2, h3 {
     overflow-x: auto;
 }
 
-pre.code {
-    background-color: #191919;
-    padding: 10px;
-    border-radius: 5px;
-    overflow-x: auto;
-    color: #fff; /* TODO: syntax highlight according to the language*/
-}
-
 small, small a {
     font-size: 90%;
     color: #006600;
 }
 
 small a:hover{
-	color: #009900;
+    color: #009900;
 }
 
 .description {
-	color: #aaa;
+    color: #aaa;
 }
 
 .separator {
@@ -53,25 +45,25 @@ small a:hover{
 
 #jsonList{
 /*	width: 50%; */
-	padding: 20px 0;
-	margin: 0 auto;
+    padding: 20px 0;
+    margin: 0 auto;
 }
 
 #jsonList a{
     text-decoration: none;
 }
 
 header{
-	font-size:1.3vw;
-	display: flex;
-	align-items: center;
+    font-size:1.3vw;
+    display: flex;
+    align-items: center;
     justify-content: center;
 }
 .header {
-	font-family: courier new, monospace;
-	color:#4e0 !important;
-	text-decoration: none;
-	text-align: left;
+    font-family: courier new, monospace;
+    color:#4e0 !important;
+    text-decoration: none;
+    text-align: left;
 }
 
 
@@ -87,7 +79,7 @@ header{
 .menu a {
     color: #00cc00;
     text-decoration: none;
-	margin: 10px 20px 10px 20px;
+    margin: 10px 20px 10px 20px;
 }
 
 .textbox-container {
@@ -108,21 +100,21 @@ header{
 }
 
 .not-found{
-	color: #a00;
+    color: #a00;
 }
 
 .footer {
-	margin: 40px 0 0 0;
+    margin: 40px 0 0 0;
     color: #444 !important;
     text-align: center;
-	display: block;
+    display: block;
     width: 100%;
     justify-content: center;
     line-height:20px;
 }
 
 .footer a{
-	color: #060;
+    color: #060;
 }
 
 h1 {
@@ -147,23 +139,98 @@ h1:hover::after {
 }
 
 .about{
-	color: #ccc;
+    color: #ccc;
 }
 
- #error-message{
- 	text-align: center;
- 	color: #a00;
- }
+#error-message{
+    text-align: center;
+    color: #a00;
+}
 
 .container{
-	margin: 0 auto;
-	width: 80%;
-	max-width: 900px;
+    margin: 0 auto;
+    width: 80%;
+    max-width: 900px;
 }
 
-/* Styles for syntax highlighting from highlight.js */
+/* .copy-button:hover {
+    background-color: #45a049;
+} */
 
+.copy-icon path {
+    transition: 100ms;
+}
 
+.copy-icon:hover path {
+    fill: #0FCD0F;
+}
+
+pre code {
+    background-color: #191919;
+    padding: 10px;
+    border-radius: 5px;
+    overflow-x: auto;
+    color: #fff;
+}
+
+pre code::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+pre code::-webkit-scrollbar-track {
+    background-color: #050505;
+    border-radius: 5px;
+}
+
+pre code::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background-color: #232323;
+}
+
+pre code::-webkit-scrollbar-thumb:hover {
+    background-color: #454545;
+}
+
+.copy-icon {
+    opacity: 0;
+    cursor: pointer;
+    font-size: 1em;
+    position: absolute;
+    right: 6px;
+    top: 6px;
+    background-color: #141014;
+    padding: 4px;
+}
+
+.copy-icon path{
+    pointer-events: all;
+}
+
+.code-wrapper:hover .copy-icon{
+    opacity: 1;
+}
+
+.code-wrapper{
+    position: relative;
+}
+
+.copied {
+    user-select: none;
+    position: absolute;
+    opacity: 0;
+    top: 13px;
+    right:-70px;
+    transition: opacity 0.35s ease;
+    z-index: 999;
+    pointer-events: none;
+}
+
+.visible {
+    opacity: 1;
+}
+
+/* Styles for syntax highlighting from highlight.js */
 
 pre code.hljs{
     display:block;
@@ -174,15 +241,15 @@ code.hljs{
     padding:3px 5px
 }
 .hljs{
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: #141014;
-  border:solid 1px #050;
-  padding:20px;
-  padding-right:50px;
-  display: inline-block;
-  border-radius:5px;
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+    background: #141014;
+    border:solid 1px #050;
+    padding:20px;
+    padding-right:50px;
+    display: inline-block;
+    border-radius:5px;
 }
 .hljs ::selection,.hljs::selection{
     background-color:#515151;
@@ -235,4 +302,3 @@ code.hljs{
 .hljs-meta .hljs-keyword,.hljs-meta-keyword{
     font-weight:700
 }
-