Changeset 35728 for main

Timestamp:

2021-11-11T15:22:25+13:00 (2 years ago)

Author:

cstephen

Message:

Allow linebreak normalisation in direct input

Location:

main/trunk/model-interfaces-dev/atea/macron-restoration/src

Files:

• components/DirectInput.vue (modified) (9 diffs)
• styles/_material.scss (modified) (5 diffs)

main/trunk/model-interfaces-dev/atea/macron-restoration/src/components/DirectInput.vue

@@ -8 +8 @@
         <span v-if="errorState" class="error-text">Something went wrong! Please try modifying your input text.</span>
 
-        <!-- eslint-disable-next-line vue/require-v-for-key -->
-        <span v-for="word in validRestored" :class="{ 'highlight': word.macronised && this.showMacronisedWords }">{{ word.w }}&nbsp;</span>
+        <span class="preserveWhitespace" v-html="formattedRestored" />
     </div>
 
     <div class="flex">
-        <input type="checkbox" id="i-preserve-existing-macrons" v-model="preserveExistingMacrons" />
+        <input type="checkbox" id="i-preserve-existing-macrons" v-model="preserveExistingMacrons" @input="startMacronisationWait" />
         <label for="i-preserve-existing-macrons">{{ translations.get('DirectInput_PreserveExistingMacrons') }}</label>
     </div>
@@ -20 +19 @@
         <input type="checkbox" id="i-show-macronised-words" v-model="showMacronisedWords" />
         <label for="i-show-macronised-words">{{ translations.get('DirectInput_ShowMacronisedWords') }}</label>
+    </div>
+
+    <div class="flex right-column">
+        <input type="checkbox" id="i-show-macronised-words" v-model="normaliseLinebreaks" />
+        <label for="i-show-macronised-words">{{ translations.get('DirectInput_NormaliseLinebreaks') }}</label>
     </div>
 
@@ -33 +37 @@
 }
 
+.preserveWhitespace {
+    white-space: pre-line;
+}
+
 .input-area {
-    resize: none;
+    resize: vertical;
     min-height: 4em;
-    overflow: hidden;
 }
 
@@ -72 +79 @@
             preserveExistingMacrons: true,
             showMacronisedWords: false,
-            transcribeTimeout: null,
-            waitingOnTranscribe: false,
-            errorState: false
+            macroniseWaitTimeout: null,
+            waitingToMacronise: false,
+            errorState: false,
+            normaliseLinebreaks: false
         }
     },
     computed: {
         canDownload() {
-            return this.restored !== null && !this.waitingOnTranscribe;
+            return this.restored !== null && !this.waitingToMacronise;
         },
         input: {
@@ -87 +95 @@
             set(newValue) {
                 this.$store.commit("setDirectInput", newValue);
+                this.startMacronisationWait();
             }
         },
@@ -97 +106 @@
             }
         },
-        validRestored() {
-            return this.restored.filter(w => w.w !== "");
+        formattedRestored() {
+            let restored = "";
+
+            for (const word of this.restored) {
+                if (word.w) {
+                    if (word[0] !== "-") {
+                        restored += " ";
+                    }
+
+                    if (word.macronised && this.showMacronisedWords) {
+                        restored += `<mark class="highlight">${word.w}</mark>`;
+                    }
+                    else {
+                        restored += word.w;
+                    }
+                }
+
+                if (word.linebreak) {
+                    restored += this.normaliseLinebreak(word.linebreak);
+                }
+            }
+
+            return restored;
         },
         ...mapState({
             translations: state => state.translations
         })
-    },
-    watch: {
-        input() {
-            this.waitingOnTranscribe = true;
-
-            if (this.transcribeTimeout !== null) {
-                clearTimeout(this.transcribeTimeout);
-            }
-
-            this.transcribeTimeout = setTimeout(this.updateMacronisedText, 1000);
-        }
     },
     methods: {
@@ -124 +143 @@
             event.target.height = event.target.scrollHeight;
         },
+        startMacronisationWait() {
+            if (this.input === null || this.input === "") {
+                return;
+            }
+
+            this.waitingToMacronise = true;
+
+            if (this.macroniseWaitTimeout !== null) {
+                clearTimeout(this.macroniseWaitTimeout);
+            }
+
+            this.macroniseWaitTimeout = setTimeout(this.updateMacronisedText, 1000);
+        },
         async updateMacronisedText() {
             this.errorState = false;
@@ -129 +161 @@
             try {
                 this.restored = await macroniser.directMacronisation(this.input, this.preserveExistingMacrons);
-                this.waitingOnTranscribe = false;
+                this.waitingToMacronise = false;
             }
             catch (ex) {
@@ -139 +171 @@
             const blob = new Blob([ this.restored ], { type: "text/plain;charset=utf-8" });
             saveAs(blob, "restored.txt");
+        },
+        /**
+         * Normalises a linebreak.
+         * @param {String} linebreak The linebreak sequence.
+         */
+        normaliseLinebreak(linebreak) {
+            if (!this.normaliseLinebreaks) {
+                return linebreak;
+            }
+
+            const rCount = linebreak.split("\r").length - 1;
+            const nCount = linebreak.split("\n").length - 1;
+
+            if (rCount > 1) {
+                if (nCount > 0) {
+                    return "\r\n\r\n";
+                }
+
+                return "\r\r";
+            }
+            else if (nCount > 1) {
+                return "\n\n";
+            }
+
+            return linebreak;
         }
     }

main/trunk/model-interfaces-dev/atea/macron-restoration/src/styles/_material.scss

@@ -32 +32 @@
     // Default theme
     @extend .theme-primary;
+}
+
+/* Scrollbar replacement */
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1; 
+}
+
+::-webkit-scrollbar-thumb {
+    background: #CCC;
+    border-radius: 3px;
+
+    transition-duration: var(--transition-duration);
+
+    &:hover {
+        background: #666;
+        height: 8px;
+        width: 8px;
+    }
 }
 
@@ -114 +138 @@
     display: flex;
     flex-wrap: wrap;
+    align-content: flex-start;
+    align-items: flex-start;
 
     border-radius: var(--border-radius);
@@ -123 +149 @@
     @extend .text-container;
 
+    align-items: center;
     overflow-x: auto;
     overflow-y: hidden;
@@ -140 +167 @@
     font-size: 1em;
 
-    transition-duration: var(--transition-duration);
+    transition: border var(--transition-duration);
 
     &:hover {
@@ -416 +443 @@
 }
 
-/* Scrollbar replacement */
-
-::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-}
-
-::-webkit-scrollbar-track {
-    background: #f1f1f1; 
-}
-
-::-webkit-scrollbar-thumb {
-    background: #CCC;
-    border-radius: 3px;
-
-    transition-duration: var(--transition-duration);
-
-    &:hover {
-        background: #666;
-        height: 8px;
-        width: 8px;
-    }
-}
-
 /* === Start Theme Definitions === */