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";