source: main/trunk/model-interfaces-dev/atea/macron-restoration/src/components/DirectInput.vue@ 35716

Last change on this file since 35716 was 35716, checked in by cstephen, 13 months ago

Amend previous commit

File size: 1.6 KB
Line 
1<template>
2<div class="root">
3 <textarea class="text-input input-area" @input="onTextInput"
4 v-model="input" :placeholder="translations.get('DirectInput_InputPlaceholder')" />
5 <div class="text-container">
6 {{ output }}
7 </div>
8</div>
9</template>
10
11<style scoped lang="scss">
12.root {
13 display: grid;
14 grid-template-columns: 1fr 1fr;
15 gap: 1em;
16}
17
18.input-area {
19 resize: none;
20 min-height: 4em;
21 overflow: hidden;
22}
23</style>
24
25<script>
26import { mapState } from "vuex";
27import MacronRestorationModule from "../js/MacronRestorationModule"
28
29const macroniser = new MacronRestorationModule();
30
31export default {
32 name: "DirectInput",
33 data() {
34 return {
35 input: "",
36 output: "",
37 transcribeTimeout: null
38 }
39 },
40 computed: {
41 ...mapState({
42 translations: state => state.translations
43 })
44 },
45 watch: {
46 input() {
47 if (this.transcribeTimeout !== null) {
48 clearTimeout(this.transcribeTimeout);
49 }
50
51 this.transcribeTimeout = setTimeout(this.updateMacronisedText, 1000);
52 }
53 },
54 methods: {
55 /**
56 * Handles input on an element, and grows its height so that the text is always visible.
57 * @param {InputEvent} event The input event.
58 */
59 onTextInput(event) {
60 event.target.height = event.target.scrollHeight;
61 },
62 async updateMacronisedText() {
63 const response = await macroniser.directMacronisation(this.input);
64 this.output = response.fragment2;
65 }
66 }
67}
68</script>
Note: See TracBrowser for help on using the repository browser.