Added copy button to translated text (#394)

Author: Aayush-hub

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;

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 () {

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