Add a "Copy" button. Closes #5

This commit is contained in:
Midou36O 2023-10-13 08:03:57 +01:00
parent 99a4eca07b
commit febf0f3523
No known key found for this signature in database
GPG key ID: 1D134A95FE521A7A

View file

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