Add copy-to-clipboard feature

Change-Id: If531e8bb3b45b8659d02156e4b4eb76c253492b1
diff --git a/Changes b/Changes
index ea16f49..e1cdb8d 100755
--- a/Changes
+++ b/Changes
@@ -1,4 +1,5 @@
 0.42 2021-06-17
+0.42 2021-06-15
         - Added GitHub based CI for perl.
         - Added further methods for communicating JSON Files
           with the server to the APIs (lerepp).
@@ -29,6 +30,7 @@
         - Added settings navigation by default.
         - Fix rendering bug in unauthenticated oauth route.
         - Add option to toggle password fields.
+        - Add "copy to clipboard" feature for input fields.
 
         WARNING: Upgrading to Mojolicious 9.19 will
           invalidate all sessions. This is a security update.
diff --git a/dev/js/spec/utilSpec.js b/dev/js/spec/utilSpec.js
index 895a5e9..0c1afa5 100644
--- a/dev/js/spec/utilSpec.js
+++ b/dev/js/spec/utilSpec.js
@@ -37,4 +37,21 @@
             expect(div.lastChild.classList.contains("hide")).toBeTruthy();
         });
     });
+
+    describe('KorAP.util.initCopyToClipboard', function () {
+      it('should be initializable', function () {
+          const div = document.createElement('div');
+          let input = div.addE('input');
+          input.value = "abcde";
+          input.setAttribute('type', 'text');
+          input.setAttribute('class', 'copy-to-clipboard');
+          expect(div.children.length).toEqual(1);
+          initCopyToClipboard(div);
+          expect(div.children.length).toEqual(2);
+          expect(div.lastChild.tagName).toEqual("A");
+      });
+
+      // document.execCommand() can't be tested without user
+      // intervention.
+  });
 });
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 98dc54a..d246a8c 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -437,6 +437,13 @@
       KorAP.Panel['query'] = queryPanel;
     }
 
+
+    /**
+     * Initialize password toggle.
+     */
+    initCopyToClipboard(d);
+
+      
     /**
      * Initialize password toggle.
      */
diff --git a/dev/js/src/util.js b/dev/js/src/util.js
index 14480bc..86e6214 100644
--- a/dev/js/src/util.js
+++ b/dev/js/src/util.js
@@ -110,6 +110,25 @@
 };
 
 
+/**
+ * Add option to copy to clipboard.
+ */
+function initCopyToClipboard (element) {
+    const el = element.querySelectorAll("input.copy-to-clipboard");
+    for (let x = 0; x < el.length; x++) {     
+        const text = el[x];
+        const a = document.createElement('a');
+        a.classList.add('copy-to-clipboard');         
+        a.addEventListener('click', function () {
+            text.select();
+            text.setSelectionRange(0, 99999);
+            document.execCommand("copy");
+        });
+        text.parentNode.insertBefore(a, text.nextSibling);
+    };
+};
+
+
 define(function () {
   // Todo: That's double now!
   KorAP.API = KorAP.API || {};
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
index 5e095a2..d5cb6c8 100644
--- a/dev/scss/base/base.scss
+++ b/dev/scss/base/base.scss
@@ -9,6 +9,7 @@
 @import "menu";
 @import "banner";
 @import "showPWD";
+@import "copyToClipboard";
 
 /**
  * Basic global CSS rules for Kalamar
diff --git a/dev/scss/base/copyToClipboard.scss b/dev/scss/base/copyToClipboard.scss
new file mode 100644
index 0000000..c792282
--- /dev/null
+++ b/dev/scss/base/copyToClipboard.scss
@@ -0,0 +1,12 @@
+@import "icons";
+
+a.copy-to-clipboard::after {
+    position: absolute;
+    @include icon-font;
+    width: 1em;
+    content: $fa-copy;
+    cursor: pointer;
+    margin-left: .2em;
+    margin-top: .6em;
+    font-size: 130%;
+}
diff --git a/dev/scss/base/icons.scss b/dev/scss/base/icons.scss
index ab8bcc0..2db98d6 100644
--- a/dev/scss/base/icons.scss
+++ b/dev/scss/base/icons.scss
@@ -38,3 +38,4 @@
 $fa-token:        "\f084";
 $fa-show:         "\f06e";
 $fa-hide:         "\f070";
+$fa-copy:         "\f0c5";