Add a "Copy" button. Closes #5

This commit is contained in:
Midou36O 2023-10-13 08:03:57 +01:00
parent 99a4eca07b
commit febf0f3523
Signed by untrusted user: midou
GPG Key ID: 1D134A95FE521A7A

View File

@ -70,7 +70,7 @@
{{range $key, $value := .TranslateAll}}
<div class="item-wrapper">
Engine: {{.Engine}}
<textarea class="translation item" dir="auto" placeholder="Translation" readonly>
<textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
{{.OutputText}}</textarea>
{{if .AutoDetect}}
Detected Language: {{.AutoDetect}}{{end}} {{if $.TtsTo}}
@ -82,7 +82,7 @@
{{end}}
{{ else }} {{if .TranslationExists}}
<div class="item-wrapper">
<textarea class="translation item" dir="auto" placeholder="Translation" readonly>
<textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
{{.Translation.OutputText}}</textarea>
{{if .Translation.AutoDetect}}
Detected Language: {{.Translation.AutoDetect}}{{end}} {{if .TtsTo}}
@ -94,6 +94,9 @@
{{end}}
<button class="wrap" type="submit">
Translate!
</button>
<button class="wrap" type="button" onclick="copyToClipboard()">
Copy
</button>
{{ if and .Engine .From .To .OriginalText }}<p><a href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>{{end}}
</form>
@ -111,6 +114,13 @@
var options = { searchable: true };
NiceSelect.bind(document.getElementById("targetLanguage"), options);
NiceSelect.bind(document.getElementById("sourceLanguage"), options);
// This function allows to copy the translated text to the clipboard
function copyToClipboard() {
var copyText = document.getElementById("output");
copyText.select();
copyText.setSelectionRange(0, 99999); // This is for mobile devices.
document.execCommand("copy");
}
</script>
</main>
{{ template "footer" .}}