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>
|
---|
26 | import { mapState } from "vuex";
|
---|
27 | import MacronRestorationModule from "../js/MacronRestorationModule"
|
---|
28 |
|
---|
29 | const macroniser = new MacronRestorationModule();
|
---|
30 |
|
---|
31 | export 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.