Changeset 35367


Ignore:
Timestamp:
2021-09-13T10:35:05+12:00 (3 years ago)
Author:
cstephen
Message:

Pull translations from properties file when using node serve

Location:
main/trunk/model-interfaces-dev/atea
Files:
1 added
4 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue

    r35355 r35367  
    11<template>
    2     <div class="editor-controls">
    3         <label for="displayMode">{{ translations.get("TranscriptionItemEditor_SetDisplayMode") }}:</label>
    4         <select id="displayMode" v-model="displayMode">
    5             <option value="words">{{ translations.get("TranscriptionItemEditor_DisplayMode_Words") }}</option>
    6             <option value="chars">{{ translations.get("TranscriptionItemEditor_DisplayMode_Chars") }}</option>
    7             <option value="editor">{{ translations.get("TranscriptionItemEditor_DisplayMode_Editor") }}</option>
    8         </select>
    9 
    10         <!-- <input type="checkbox" v-model="showCharDisplay" title="Show characters" />
    11 
    12         <input type="checkbox" v-model="enableTextEditing" title="Enable text editing" /> -->
     2    <div>
     3        <div class="editor-controls">
     4            <label for="displayMode">{{ translations.get("TranscriptionItemEditor_SetDisplayMode") }}:</label>
     5            <select id="displayMode" v-model="displayMode">
     6                <option value="words">{{ translations.get("TranscriptionItemEditor_DisplayMode_Words") }}</option>
     7                <option value="chars">{{ translations.get("TranscriptionItemEditor_DisplayMode_Chars") }}</option>
     8                <option value="editor">{{ translations.get("TranscriptionItemEditor_DisplayMode_Editor") }}</option>
     9            </select>
     10
     11            <!-- <input type="checkbox" v-model="showCharDisplay" title="Show characters" />
     12
     13            <input type="checkbox" v-model="enableTextEditing" title="Enable text editing" /> -->
     14        </div>
     15
     16        <ul class="list-view" v-if="displayMode == 'words'">
     17            <li v-for="word in words" :key="word.id" class="word-container" @click="playAudio(word.startTime)"
     18                :class="{ 'word-highlight-applied': word.shouldHighlight }">
     19                    <span class="word-highlight">{{ word.word }}</span>
     20                    <span>&nbsp;</span>
     21            </li>
     22        </ul>
     23
     24        <ul class="list-view" v-if="displayMode == 'chars'">
     25            <li v-for="char in chars" :key="char.id" class="word-container" @click="playAudio(char.startTime)"
     26                :class="{ 'word-highlight-applied': char.shouldHighlight }">
     27                <span class="word-highlight">{{ char.word }}</span>
     28            </li>
     29        </ul>
     30
     31        <ul class="list-view" v-if="displayMode == 'editor'">
     32            <li v-for="(word, index) in words" :key="word.id" class="word-container">
     33                <contenteditable class="editor-word" tag="span" v-model="word.word" :noNL="true" :noHTML="true" @input="onEditorInput($event, index)" />
     34                <span>&nbsp;</span>
     35            </li>
     36        </ul>
     37        <!-- <ul class="list-view" v-if="displayMode == 'editor'">
     38            <li v-for="(word, index) in transcription.words" class="transcription__word-container">
     39                <span class="transcription__word" v-on:input="onEditorWordInput($event, word.word)" contenteditable="true" v-text="word.word" />
     40                <input type="text" v-bind:size="word.word.length == 1 ? 1 : word.word.length - 1" v-model="word.word"
     41                    class="transcription__word" v-on:input="onEditorWordInput($event, index, id)" />
     42                <span>&nbsp;</span>
     43            </li>
     44        </ul> -->
    1345    </div>
    14 
    15     <ul class="list-view" v-if="displayMode == 'words'">
    16         <li v-for="word in words" :key="word.id" class="word-container" @click="playAudio(word.startTime)"
    17             :class="{ 'word-highlight-applied': word.shouldHighlight }">
    18                 <span class="word-highlight">{{ word.word }}</span>
    19                 <span>&nbsp;</span>
    20         </li>
    21     </ul>
    22 
    23     <ul class="list-view" v-if="displayMode == 'chars'">
    24         <li v-for="char in chars" :key="char.id" class="word-container" @click="playAudio(char.startTime)"
    25             :class="{ 'word-highlight-applied': char.shouldHighlight }">
    26             <span class="word-highlight">{{ char.word }}</span>
    27         </li>
    28     </ul>
    29 
    30     <ul class="list-view" v-if="displayMode == 'editor'">
    31         <li v-for="(word, index) in words" :key="word.id" class="word-container">
    32             <contenteditable class="editor-word" tag="span" v-model="word.word" :noNL="true" :noHTML="true" @input="onEditorInput($event, index)" />
    33             <span>&nbsp;</span>
    34         </li>
    35     </ul>
    36     <!-- <ul class="list-view" v-if="displayMode == 'editor'">
    37         <li v-for="(word, index) in transcription.words" class="transcription__word-container">
    38             <span class="transcription__word" v-on:input="onEditorWordInput($event, word.word)" contenteditable="true" v-text="word.word" />
    39             <input type="text" v-bind:size="word.word.length == 1 ? 1 : word.word.length - 1" v-model="word.word"
    40                 class="transcription__word" v-on:input="onEditorWordInput($event, index, id)" />
    41             <span>&nbsp;</span>
    42         </li>
    43     </ul> -->
    4446</template>
    4547

  • main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/main.js

    r35356 r35367  
    7676        translations.set(key, gs.text.atea[key]);
    7777    }
     78
     79    store.commit("setTranslations", translations)
    7880}
    7981/* eslint-enable no-undef */
    8082else {
    81     translations.set("AudioUpload_SelectFileText", "Select audio file/s...");
    82     translations.set("AudioUpload_TranscribeFiles", "Transcribe");
    83     translations.set("AudioUpload_TranscriptionFailed_Message", "Failed to transcribe");
    84     translations.set("AudioUpload_TranscriptionFailed_Reason", "Reason");
     83    fetch("interface_atea.properties")
     84        .then(async response => {
     85            const responseText = await response.text();
     86            const responseTranslations = responseText.split("\n");
    8587
    86     translations.set("TranscriptionItem_FileName", "File");
    87     translations.set("TranscriptionItem_Remove", "Remove");
    88     translations.set("TranscriptionItem_ExpandEditor", "Playback and Edit");
     88            for (const translation of responseTranslations) {
     89                const components = translation.split("=");
    8990
    90     translations.set("TranscriptionItemEditor_SetDisplayMode", "Display Mode");
    91     translations.set("TranscriptionItemEditor_DisplayMode_Words", "Words");
    92     translations.set("TranscriptionItemEditor_DisplayMode_Chars", "Characters");
    93     translations.set("TranscriptionItemEditor_DisplayMode_Editor", "Editor");
     91                if (components[0] === "") {
     92                    continue;
     93                }
     94
     95                const namespaceEndIndex = components[0].lastIndexOf(".");
     96                translations.set(components[0].slice(namespaceEndIndex + 1), components[1]);
     97            }
     98
     99            store.commit("setTranslations", translations)
     100        });
    94101}
    95 
    96 store.commit("setTranslations", translations)

  • main/trunk/model-interfaces-dev/atea/korero-maori-asr/vue.config.js

    r35355 r35367  
    88    filenameHashing: false, // Allows us to easily setup direct links in our asr.xsl. You may want to change this for production in order to help with caching
    99
     10    chainWebpack: config => {
     11        config
     12            .plugin("html")
     13            .tap(args => {
     14                args[0].title = "Korero Maori ASR Interface";
     15                return args;
     16            })
     17    },
     18
    1019    css: {
    1120        loaderOptions: {

  • main/trunk/model-interfaces-dev/atea/transform/pages/korero-maori-asr.xsl

    r35355 r35367  
    4949
    5050        <noscript>
    51             <strong>We're sorry but <xsl:text disable-output-escaping="yes">&lt;%= htmlWebpackPlugin.options.title %&gt;</xsl:text> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     51            <strong>We're sorry but the Korero Maori ASR interface doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    5252        </noscript>
    5353       
Note: See TracChangeset for help on using the changeset viewer.