fix: Add copy button in input fields (#37)

* Add copy button in input fields

* catch error in navigator api on http

web/assets/css/styles.css

@@ -281,7 +281,13 @@ a {
 .dark .editor__header .description {
   color: #ffffffcc;
 }
-.editor > .editor__input {
+
+.editor > .editor__cont {
+  height: 100%;
+  position: relative;
+}
+
+.editor__cont > .editor__input {
   height: 100%;
   font-size: 14px;
 }
@@ -339,6 +345,51 @@ a {
   cursor: pointer;
 }
 
+.editor-copy-btn {
+  cursor: pointer;
+  position: absolute;
+  top: 10px;
+  right: 30px;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.editor-copy-icon {
+  width: 40px;
+  height: 40px;
+  margin-bottom: 5px;
+  display: none;
+}
+
+.copy-hover {
+  background-color: white;
+  width: 135px;
+  height: 33px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 4px;
+  align-items: center;
+  justify-content: center;
+  display: none;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
+}
+
+.copy-click {
+  display: none;
+  background-color: #69C98A;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 4px;
+  width: 68px;
+  height: 33px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
+}
+
 /* Footer */
 
 footer {

web/assets/js/main.js

@@ -62,20 +62,25 @@ toggleBtn.addEventListener("click", function () {
 function toggleMode(theme) {
   let toggleIcon = document.getElementsByClassName("toggle-theme__icon")[0];
   let celLogo = document.getElementsByClassName("cel-logo")[0];
+  let copyIcon = document.querySelectorAll(".editor-copy-icon");
 
   if (theme === "dark") {
     document.body.classList.add("dark");
     toggleIcon.src = "./assets/img/moon.svg";
     celEditor.editor.setTheme("ace/theme/tomorrow_night");
     dataEditor.editor.setTheme("ace/theme/tomorrow_night");
     celLogo.src = "./assets/img/logo-dark.svg";
+    copyIcon[0].src = "./assets/img/copy-dark.svg";
+    copyIcon[1].src = "./assets/img/copy-dark.svg";
     localStorage.setItem("theme", "dark");
   } else {
     document.body.classList.remove("dark");
     toggleIcon.src = "./assets/img/sun.svg";
     celEditor.editor.setTheme("ace/theme/clouds");
     dataEditor.editor.setTheme("ace/theme/clouds");
     celLogo.src = "./assets/img/logo.svg";
+    copyIcon[0].src = "./assets/img/copy.svg";
+    copyIcon[1].src = "./assets/img/copy.svg";
     localStorage.setItem("theme", "light");
   }
 }
@@ -127,6 +132,68 @@ if (urlParams.has("content")) {
   }
 }
 
+let celCopyIcon = document.getElementById("cel-copy-icon");
+let celCopyHover = document.getElementById("cel-copy-hover");
+let celCopyClick = document.getElementById("cel-copy-click");
+let celInput = document.getElementById("cel-cont");
+
+celInput.addEventListener("mouseover", () => {
+  celCopyIcon.style.display = "inline";
+})
+celInput.addEventListener("mouseleave", () => {
+  celCopyIcon.style.display = "none";
+})
+
+celCopyIcon.addEventListener("click", () => {
+  let value = celEditor.editor.getValue();
+  navigator.clipboard.writeText(value).catch(console.error);
+  celCopyHover.style.display = "none"
+  celCopyClick.style.display = "flex";
+  setTimeout(() => {
+    celCopyClick.style.display = "none";
+  }, 1000)
+})
+
+celCopyIcon.addEventListener("mouseover", () => {
+  celCopyHover.style.display = "flex"
+})
+
+celCopyIcon.addEventListener("mouseleave", () => {
+  celCopyHover.style.display = "none"
+})
+
+let dataCopyIcon = document.getElementById("data-copy-icon");
+let dataCopyHover = document.getElementById("data-copy-hover");
+let dataCopyClick = document.getElementById("data-copy-click");
+let dataInput = document.getElementById("data-cont");
+
+dataInput.addEventListener("mouseover", () => {
+  dataCopyIcon.style.display = "inline"
+})
+
+dataInput.addEventListener("mouseleave", () => {
+  dataCopyIcon.style.display = "none"
+})
+
+dataCopyIcon.addEventListener("click", () => {
+  let value = dataEditor.editor.getValue();
+  navigator.clipboard.writeText(value);
+  dataCopyHover.style.display = "none";
+  dataCopyClick.style.display = "flex";
+  setTimeout(() => {
+    dataCopyClick.style.display = "none";
+  }, 1000);
+})
+
+dataCopyIcon.addEventListener("mouseover", () => {
+  dataCopyHover.style.display = "flex";
+})
+
+dataCopyIcon.addEventListener("mouseleave", () => {
+  dataCopyHover.style.display = "none";
+})
+
+
 function copy() {
   const copyText = document.querySelector(".share-url__input");
   copyText.select();

web/index.html

@@ -111,7 +111,14 @@
 						<option data-display="Examples" value="" disabled selected hidden>Examples</option>
 					</select>
 				</div>
-				<div id="cel-input" class="editor__input"></div>
+				<div id="cel-cont" class="editor__cont">
+					<div class="editor-copy-btn">
+						<img src="./assets/img/copy.svg" alt="copy" class="editor-copy-icon" id="cel-copy-icon">
+						<div class="copy-hover" id="cel-copy-hover">Copy to clipboard</div>
+						<div class="copy-click" id="cel-copy-click">Copied!</div>
+					</div>
+					<div id="cel-input" class="editor__input"></div>
+				</div>
 			</div>
 			<div class="output-container">
 				<div class="editor">
@@ -126,7 +133,14 @@
 							Run
 						</button>
 					</div>
-					<div id="data-input" class="editor__input"></div>
+					<div id="data-cont" class="editor__cont">
+						<div class="editor-copy-btn">
+							<img src="./assets/img/copy.svg" alt="copy" class="editor-copy-icon" id="data-copy-icon">
+							<div class="copy-hover" id="data-copy-hover">Copy to clipboard</div>
+							<div class="copy-click" id="data-copy-click">Copied!</div>
+						</div>
+						<div id="data-input" class="editor__input"></div>
+					</div>
 				</div>
 				<div class="editor editor--output">
 					<div class="editor__header">