From 35c8407a9e27003bd36526957517d7b25c2bb39c Mon Sep 17 00:00:00 2001
From: "Felix W. Dekker" <felix@fwdekker.com>
Date: Sat, 11 Apr 2020 00:12:42 +0200
Subject: [PATCH] Use Fork Awesome instead, JS-ify

---
 index.html | 70 ++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 60 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 0e73aa1..d7293c7 100644
--- a/index.html
+++ b/index.html
@@ -13,8 +13,8 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
           crossorigin="anonymous" />
     <link rel="stylesheet" href="https://static.fwdekker.com/css/milligram-bundle.min.css" crossorigin="anonymous" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
-          integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.1.7/css/fork-awesome.min.css"
+          integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous" />
 
     <!--suppress CssUnresolvedCustomProperty, CssUnusedSymbol -->
     <style>
@@ -82,6 +82,11 @@
             color: var(--error-color);
         }
 
+        #networkTable th a i {
+            font-size: 0.9em;
+            font-weight: normal;
+        }
+
 
         /***
          * Loading icon
@@ -198,7 +203,7 @@
             <a href="https://git.fwdekker.com/FWDekker/interlanguage-checker/src/branch/master/LICENSE">MIT License</a>.
             Source code available on <a href="https://git.fwdekker.com/FWDekker/interlanguage-checker/">git</a>.
 
-            <div style="float: right;">v1.2.0</div>
+            <div style="float: right;">v1.2.1</div>
         </section>
     </footer>
 </main>
@@ -550,19 +555,18 @@
             const editIconLink = document.createElement("a");
             editIconLink.href = url + "?action=edit";
             editIconLink.target = "_blank";
-            const editIcon = document.createElement("i");
-            editIcon.classList.add("fa", "fa-edit");
-            editIconLink.appendChild(editIcon);
+            new FontIcon("pencil").appendTo(editIconLink);
             span.appendChild(editIconLink);
 
             span.appendChild(padding.cloneNode(true));
 
             const copyIconLink = document.createElement("a");
             copyIconLink.href = "#";
-            copyIconLink.addEventListener("click", () => navigator.clipboard.writeText(`[[${linkStr}]]`));
-            const copyIcon = document.createElement("i");
-            copyIcon.classList.add("fa", "fa-copy");
-            copyIconLink.appendChild(copyIcon);
+            const copyIcon = new FontIcon("clipboard").appendTo(copyIconLink);
+            copyIconLink.addEventListener("click", () => {
+                navigator.clipboard.writeText(`[[${linkStr}]]`);
+                copyIcon.changeTo("check", 1000);
+            });
             span.appendChild(copyIconLink);
 
             return span;
@@ -849,6 +853,52 @@
     }
 
 
+    /**
+     * A font-based icon.
+     */
+    class FontIcon {
+        /**
+         * Constructs a new `FontIcon`.
+         *
+         * @param name {string} the name of the icon
+         */
+        constructor(name) {
+            this._node = document.createElement("i");
+            this._node.classList.add("fa", `fa-${name}`);
+
+            this._name = name;
+        }
+
+
+        /**
+         * Appends this icon to the given parent node.
+         *
+         * @param parent {HTMLElement} the node to append the icon to
+         * @return {FontIcon} this `FontIcon`
+         */
+        appendTo(parent) {
+            parent.appendChild(this._node);
+            return this;
+        }
+
+        /**
+         * Temporarily changes this icon to the given name.
+         *
+         * @param name {string} the temporary icon to display
+         * @param time {number} the number of milliseconds to display the other icon
+         */
+        changeTo(name, time) {
+            this._node.classList.remove(`fa-${this._name}`);
+            this._node.classList.add(`fa-${name}`);
+
+            setTimeout(() => {
+                this._node.classList.remove(`fa-${name}`);
+                this._node.classList.add(`fa-${this._name}`);
+            }, time);
+        }
+    }
+
+
     // noinspection JSUnresolvedFunction
     doAfterLoad(async () => {
         const urlInput = new ValidatableInput($("#url"), (value) => {