Remove inline scripts for clipboard

package.json

@@ -1,6 +1,6 @@
 {
     "name": "interlanguage-checker",
-    "version": "1.11.1",
+    "version": "1.11.2",
     "description": "Check the consistency of MediaWiki interlanguage links in a simple overview.",
     "author": "Felix W. Dekker",
     "browser": "dist/bundle.js",

src/main/js/DOM.js

@@ -1,18 +1,5 @@
-window.ilc = window.ilc || {};
-
-/**
- * Upon clicking the icon at `target`, copies the string `[[${link}]]` to the clipboard and temporarily replaces the
- * clipboard icon with a checkmark.
- *
- * @param target the icon that is clicked on
- * @param link {String} the link to copy to the clipboard
- */
-window.ilc.onClickCopy = function(target, link) {
-    // noinspection JSIgnoredPromiseFromCall
-    navigator.clipboard.writeText(`[[${link}]]`);
-    target.classList.replace("fa-clipboard", "fa-check");
-    setTimeout(() => target.classList.replace("fa-check", "fa-clipboard"), 1000);
-}
+// noinspection JSUnresolvedVariable
+const {stringToHtml} = window.fwdekker;
 
 
 /**
@@ -268,7 +255,7 @@ export class InterlangTable {
             /**/`<span> </span>` +
             /**/`<a href="${page.url}?action=edit" target="_blank" title="Edit"><i class="fa fa-pencil"></i></a>` +
             /**/`<span> </span>` +
-            /**/`<a title="Copy"><i class="fa fa-clipboard" onclick="window.ilc.onClickCopy(this, '${page.link}')"></i></a>` +
+            /**/`<a title="Copy"><i class="fa fa-clipboard copyIcon" data-clipboarddata="${page.link}"></i></a>` +
             `</span>`;
     }
 
@@ -355,13 +342,28 @@ export class InterlangTable {
      *
      * @param id {String} the ID to assign to the table element
      * @param network {InterlangNetwork} the network of pages to render
-     * @return {String} the generated table
+     * @return {HTMLElement} the generated table
      */
     render(id, network) {
-        return "" +
+        const table = stringToHtml(
             `<table id="${id}">` +
             /**/this._generateTableHead(network) +
             /**/this._generateTableBody(network) +
-            `</table>`;
+            `</table>`,
+            "table"
+        );
+
+        // Add event handlers
+        table.querySelectorAll(".copyIcon").forEach(icon => {
+            icon.addEventListener("click", () => {
+                // noinspection JSIgnoredPromiseFromCall
+                navigator.clipboard.writeText(`[[${icon.dataset.clipboarddata}]]`);
+
+                icon.classList.replace("fa-clipboard", "fa-check");
+                setTimeout(() => icon.classList.replace("fa-check", "fa-clipboard"), 1000);
+            });
+        });
+
+        return table;
     }
 }

src/main/js/Main.js

@@ -1,5 +1,5 @@
 // noinspection JSUnresolvedVariable
-const {$, doAfterLoad, footer, header, nav, showPage, stringToHtml} = window.fwdekker;
+const {$, doAfterLoad, footer, header, nav, showPage} = window.fwdekker;
 import {InterlangTable, MessageHandler, ValidatableInput} from "./DOM";
 import {discoverNetwork, InterlangNetwork, MediaWiki, MediaWikiManager} from "./MediaWiki";
 
@@ -111,7 +111,7 @@ doAfterLoad(async () => {
 
                 const form = $("#networkTableForm");
                 form.textContent = "";
-                form.appendChild(stringToHtml((new InterlangTable()).render("networkTable", network), "table"));
+                form.appendChild((new InterlangTable()).render("networkTable", network));
 
                 switch (network.getVerdict()) {
                     case "perfect":