Add copy icon and tooltip #18

skohub-io · Feb 15, 2024 · d78f489 · d78f489
1 parent b4e191f
commit d78f489
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 4 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -131,6 +131,12 @@ button {
   appearance: none;
 }
 
+button:hover {
+  background-color: var(--skohub-greendark);
+  outline-width: 0;
+}
+
+
 textarea {
   overflow: auto;
 }
@@ -775,3 +781,15 @@ Print Styles
     content: " (" attr(title) ")";
   }
 }
+
+.tooltip {
+  position: absolute;
+  background-color: #555;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 6px;
+  z-index: 1000;
+  display: none; /* Initially hidden */
+  cursor: pointer;
+}
+
diff --git a/public/index.ejs b/public/index.ejs
@@ -70,8 +70,14 @@
       </section>
       <section class="keyvisual-content">
         <p>Test out these URLs as examples in your favorite reconcile spec compliant service (click to copy):</p>
-        <input data-url="https://reconcile-test.skohub.io/reconcile?language=de&account=kim&dataset=https://w3id.org/kim/hochschulfaechersystematik/scheme" type="button" value="Hochschulfächersystematik (german)" class="btn example-url"/>
-        <input data-url="https://reconcile-test.skohub.io/reconcile?language=en&account=nalt-test&dataset=https://lod.nal.usda.gov/nalt-core" type="button" value="AgroVoc (english)" class="btn example-url" />
+          <button data-url="https://reconcile-test.skohub.io/reconcile?language=de&account=kim&dataset=https://w3id.org/kim/hochschulfaechersystematik/scheme" class="btn example-url" type="button">
+            Hochschulfächersystematik (german)
+            <img src="icons/copy.svg" alt="Copy" />
+          </button>
+          <button data-url="https://reconcile-test.skohub.io/reconcile?language=en&account=nalt-test&dataset=https://lod.nal.usda.gov/nalt-core" type="button" class="btn example-url">
+            AgroVoc (english)
+            <img src="icons/copy.svg" alt="Copy" />
+          </button>
           <p>or see <a href="<%= data.reconcileUrl %>/vocabs">all uploaded vocabularies</a>.</p>
       </section>
 
@@ -117,7 +123,7 @@
   const spinner = document.querySelector("#spinner")
   const checkmark = document.querySelector("#checkmark")
   const result = document.querySelector("#result")
-  const exampleUrlButton = document.querySelectorAll("input.btn.example-url")
+  const exampleUrlButton = document.querySelectorAll("button.btn.example-url")
 
   const url = new URL(window.location.href)
   const idParam = url.searchParams.get("id")
@@ -178,7 +184,32 @@
     getData()
   })
 
-  exampleUrlButton.forEach(b => b.addEventListener("click", copyUrl))
+  exampleUrlButton.forEach(b => b.addEventListener("click", (e) => {
+    copyUrl(e)
+    // Create tooltip element
+    var tooltip = document.createElement("div");
+    tooltip.innerHTML = "Copied!";
+    tooltip.className = "tooltip";
+    document.body.appendChild(tooltip);
+
+    // Calculate position for the tooltip. Adjust as needed.
+    var btnRect = b.getBoundingClientRect();
+    var tooltipWidth = tooltip.offsetWidth;
+    var tooltipHeight = tooltip.offsetHeight;
+
+    // Position the tooltip above the button or wherever you prefer
+    tooltip.style.left = btnRect.left + (btnRect.width / 2) - (tooltipWidth / 2) + "px";
+    tooltip.style.top = btnRect.top - tooltipHeight - 15 + "px"; // Adjust "5" for margin between button and tooltip
+
+    // Show the tooltip
+    tooltip.style.display = "block";
+
+    // Hide the tooltip after a few seconds or on another button click
+    setTimeout(function() {
+      tooltip.style.display = "none";
+      document.body.removeChild(tooltip); // Clean up by removing the tooltip from the DOM
+    }, 1000);
+  }))
 
 
   const getData = async () => {