Added copy button to translated text (#394)

apertium · Apr 13, 2021 · cf0ba05 · cf0ba05
1 parent be7366a
commit cf0ba05
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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">