From 0f5d2861e7a7ac8fc34d52ed990b38db708805c5 Mon Sep 17 00:00:00 2001
From: Aayush Garg <ayushgarg1951@gmail.com>
Date: Tue, 13 Apr 2021 10:23:53 +0530
Subject: [PATCH] Added copy button to translated text (#394)

---
 assets/css/translation.css | 14 ++++++++++++++
 assets/js/translator.js    |  5 +++++
 html/index.html.in         |  3 +++
 3 files changed, 22 insertions(+)

diff --git a/assets/css/translation.css b/assets/css/translation.css
index 5610dfa3b..d3e470bdf 100644
--- a/assets/css/translation.css
+++ b/assets/css/translation.css
@@ -117,6 +117,12 @@ html[dir='rtl'] textarea {
     top: 3px;
 }
 
+.copyButton {
+    background-color: rgba(0, 0, 0, 0);
+    padding: 0 3px;
+    top: 3px;
+}
+
 .clearButton:hover,
 .clearButton:focus {
     background-color: #eee;
@@ -131,6 +137,14 @@ html[dir='rtl'] .clearButton {
     left: 18px;
 }
 
+html[dir='ltr'] .copyButton {
+    right: 18px;
+}
+
+html[dir='rtl'] .copyButton {
+    left: 18px;
+}
+
 html[dir='ltr'] .otherTranslationOptions > *:not(*:last-child),
 html[dir='rtl'] .otherTranslationOptions > *:not(*:first-child) {
     margin-right: 5px;
diff --git a/assets/js/translator.js b/assets/js/translator.js
index 34a2a1087..36686a884 100644
--- a/assets/js/translator.js
+++ b/assets/js/translator.js
@@ -52,6 +52,11 @@ if(modeEnabled('translation')) {
                 synchronizeTextareaHeights();
             });
 
+            $('#copyText').click(function () {
+                $('#translatedText').select();
+                document.execCommand('copy');
+            });
+
             $(window).resize(synchronizeTextareaHeights);
 
             $('#originalText').blur(function () {
diff --git a/html/index.html.in b/html/index.html.in
index 7c376eda4..0bc95c388 100644
--- a/html/index.html.in
+++ b/html/index.html.in
@@ -199,6 +199,9 @@
                                             <div class="col-12 col-md-6">
                                                 <textarea class="form-control bg-light" id="translatedText" rows="15" spellcheck="false" aria-label="Translated Text"
                                                     readonly></textarea>
+                                                <button id="copyText" class="btn copyButton position-absolute" aria-label="Copy Text">
+                                                    <i class="fa fa-clipboard"></i>
+                                                </button>
                                             </div>
                                         </div>
                                         <div class="row mt-2">