aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/assets
diff options
context:
space:
mode:
authorEgor Tensin <Egor.Tensin@gmail.com>2022-03-17 23:05:07 +0300
committerEgor Tensin <Egor.Tensin@gmail.com>2022-03-17 23:05:07 +0300
commita5685deab639b3ba49d344f66bd273a893605c9d (patch)
tree3da382a7470bdde3d3859d78a8d66ab3ddbaeba0 /assets
parentreplace text in buttons with icons (diff)
downloadwireguard-config-a5685deab639b3ba49d344f66bd273a893605c9d.tar.gz
wireguard-config-a5685deab639b3ba49d344f66bd273a893605c9d.zip
add a "Copy" button
Diffstat (limited to '')
-rw-r--r--assets/js/main.js61
1 files changed, 61 insertions, 0 deletions
diff --git a/assets/js/main.js b/assets/js/main.js
index 84970dc..fdda3f4 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -386,6 +386,60 @@ function dload_btn_on_click(btn, path, pre) {
link[0].click();
}
+function copy_to_clipboard(elem) {
+ // This is rather neat, thanks:
+ // https://stackoverflow.com/a/22581382/514684
+
+ // Apparently, you can only do execCommand('copy') from <input> and
+ // <textarea> elements. Another stupidity, I'm so surprised.
+ var is_input = elem.tagName === 'INPUT' || elem.tagName === 'TEXTAREA';
+ var orig_select_start, orig_select_end;
+
+ if (is_input) {
+ var target = elem;
+ orig_select_start = elem.selectionStart;
+ orig_select_end = elem.selectionEnd;
+ } else {
+ var target = document.createElement('textarea');
+ target.textContent = elem.textContent;
+ document.body.appendChild(target);
+ }
+
+ var current_focus = document.activeElement;
+ target.focus();
+ target.setSelectionRange(0, target.value.length);
+
+ var succeed;
+ try {
+ // Supposedly, this is deprecated. But the "proper" method sucks balls,
+ // so I'm using this one:
+ // https://stackoverflow.com/a/30810322/514684
+ succeed = document.execCommand('copy');
+ } catch (e) {
+ succeed = false;
+ }
+
+ if (current_focus && typeof current_focus.focus === "function") {
+ current_focus.focus();
+ }
+
+ if (is_input) {
+ elem.setSelectionRange(orig_select_start, orig_select_end);
+ } else {
+ document.body.removeChild(target);
+ }
+ return succeed;
+}
+
+function copy_btn_init(btn) {
+ btn.empty();
+ btn.append('<span class="glyphicon glyphicon-copy"/>');
+}
+
+function copy_btn_on_click(btn, pre) {
+ copy_to_clipboard(pre[0]);
+}
+
function make_pre_buttons(path, pre) {
var edit_btn = $('<button class="btn btn-default" type="button" title="Edit"/>');
edit_btn_init(edit_btn);
@@ -399,7 +453,14 @@ function make_pre_buttons(path, pre) {
dload_btn_on_click(dload_btn, path, pre);
});
+ var copy_btn = $('<button class="btn btn-default" type="button" title="Copy"/>');
+ copy_btn_init(copy_btn);
+ copy_btn.click(function() {
+ copy_btn_on_click(copy_btn, pre);
+ });
+
return $('<div class="pre_buttons btn-group btn-group-xs" role="group"/>')
+ .append(copy_btn)
.append(dload_btn)
.append(edit_btn);
}