From 93b7de928e8ab59396fcd5ac263aed37afc5ec85 Mon Sep 17 00:00:00 2001
From: Igor Tolmachev <me@igorek.dev>
Date: Sat, 20 Apr 2024 17:40:45 +0900
Subject: Add "click to copy" tooltip

---
 index.html           |  7 +++----
 minecraft/index.html | 11 +++++------
 script.js            | 18 +++++++++++++++++
 style.css            | 55 +++++++++++++++++++++++++++++-----------------------
 4 files changed, 57 insertions(+), 34 deletions(-)
 create mode 100644 script.js
diff --git a/index.html b/index.html
index 2542722..a88fa21 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="stylesheet" href="style.css">
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <script src="/script.js"></script>
+    <link rel="stylesheet" href="/style.css" />
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 
     <title>igorek.dev</title>
   </head>
@@ -36,5 +36,4 @@
     <pre>󰍳    Minecraft servers <a href="/minecraft">https://igorek.dev/minecraft</a></pre>
     <pre>And more ...</pre>
   </body>
-
 </html>
diff --git a/minecraft/index.html b/minecraft/index.html
index 5a07615..1e082b9 100644
--- a/minecraft/index.html
+++ b/minecraft/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-  
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="stylesheet" href="/style.css">
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <script src="/script.js"></script>
+    <link rel="stylesheet" href="/style.css" />
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 
     <title>Minecraft server list</title>
   </head>
@@ -41,13 +41,12 @@
     <pre>
     Version: <a href="https://minecraft.wiki/w/Java_Edition_1.20.4">1.20.4</a>
      Map: <a href="https://mc.igorek.dev">https://mc.igorek.dev</a>
-     IP: <span class="copy" onclick='navigator.clipboard.writeText("mc.igorek.dev:25565")' >mc.igorek.dev:25565 [󰆏]</span>
+     IP: <span class="copy" copy-text="mc.igorek.dev:25565">mc.igorek.dev:25565</span>
      Recommended mods: <a href="https://modrinth.com/plugin/simple-voice-chat">Simple Voice Chat</a>
     </pre>
     <pre>
     Version: <a href="https://minecraft.wiki/w/Java_Edition_Beta_1.7.3">beta 1.7.3</a>
-     IP: <span class="copy" onclick='navigator.clipboard.writeText("mc.igorek.dev:25575")' >mc.igorek.dev:25575 [󰆏]</span>
+     IP: <span class="copy" copy-text="mc.igorek.dev:25575">mc.igorek.dev:25575</span>
     </pre>
   </body>
-
 </html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..b16142f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,18 @@
+function copy(text, tooltip) {
+  return () => {
+    navigator.clipboard.writeText(text);
+    tooltip.textContent = "[copied]";
+    setTimeout(() => (tooltip.textContent = "[click to copy]"), 1000);
+  };
+}
+
+window.onload = () => {
+  document.querySelectorAll(".copy").forEach((element) => {
+    const tooltip = document.createElement("span");
+    tooltip.classList.add("copy-tooltip");
+    tooltip.textContent = "[click to copy]";
+
+    element.onclick = copy(element.attributes["copy-text"]?.value, tooltip);
+    element.appendChild(tooltip);
+  });
+};
diff --git a/style.css b/style.css
index ceac6b3..b88584d 100644
--- a/style.css
+++ b/style.css
@@ -1,48 +1,55 @@
 @font-face {
-    font-family: Noto Sans Mono;
-    src: url(font.ttf);
+  font-family: Noto Sans Mono;
+  src: url(font.ttf);
 }
 
 * {
-    font-family: Noto Sans Mono;
+  font-family: Noto Sans Mono;
 }
 
 @media screen and (max-width: 700px) {
-    * {
-        font-size: small;
-    }
+  * {
+    font-size: small;
+  }
 }
 
 @media screen and (min-width: 700px) {
-    * {
-        font-size: x-large;
-    }
+  * {
+    font-size: x-large;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
-    body {
-        color: #a7a7a7;
-        background: #1e1e1e;
-    }
+  body {
+    color: #a7a7a7;
+    background: #1e1e1e;
+  }
 }
 
 @media (prefers-color-scheme: light) {
-    body {
-        color: #464b50;
-        background: #ffffff;
-    }
+  body {
+    color: #464b50;
+    background: #ffffff;
+  }
 }
 
 a,
 .copy {
-    cursor: pointer;
-    text-decoration: underline;
-    color: #7587a6;
+  cursor: pointer;
+  color: #7587a6;
 }
 
 a:active,
 .copy:active {
-    cursor: pointer;
-    text-decoration: underline;
-    color: #9b859d;
-}
\ No newline at end of file
+  cursor: pointer;
+  color: #9b859d;
+}
+
+.copy > .copy-tooltip {
+  visibility: hidden;
+  margin-left: 1em;
+}
+
+.copy:hover > .copy-tooltip {
+  visibility: visible;
+}
-- 
cgit v1.2.3

