Changeset 35397 for main/trunk

Timestamp:

2021-09-15T10:34:13+12:00 (3 years ago)

Author:

cstephen

Message:

Use onkeyup to process editor input

File:

• main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue (modified) (5 diffs)

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

@@ -24 +24 @@
                     <input :size="word.word.length <= 1 ? 1 : word.word.length - 1" :ref="word.id"
                         class="editor-word" v-model="word.word" type="text"
-                        @input="onEditorInput($event, index)" @focusout="onEditorFocusOut(index)" @keydown="onEditorKeyDown($event, index)" />
+                        @input="onEditorInput($event, index)" @focusout="onEditorFocusOut(index)" @keyup="onEditorKeyUp($event, index)" />
                     <span>&nbsp;</span>
                 </li>
@@ -159 +159 @@
             }
         },
-        onEditorKeyDown(event, index) {
+        onEditorKeyUp(event, index) {
             /** @type {Word} */
             const word = this.words[index];
 
-            // Remove the word if the user is repetitively hitting backspace/backspace on an empty cell
-            if (event.code === "Backspace" || event.Code === "Delete") {
-                if (word.word.length <= 1) {
+            // Remove the word if the user is repetitively hitting backspace/delete on an empty cell
+            if (event.code === "Backspace" || event.code === "Delete") {
+                if (word.word.length < 1) {
                     if (word.deletionAttempts === 1) {
                         this.words.splice(index, 1);
@@ -176 +176 @@
                 }
             }
+            else {
+                word.deletionAttempts = 0;
+            }
 
             // Focus on the next word if the user is moving right with their caret at the word's end
-            if (event.code === "ArrowRight") {
-                const inputElement = this.$refs[word.id];
-
-                if (inputElement.selectionStart === word.word.length) {
-                    setFocus(false, this);
-                }
-            }
+            // if (event.code === "ArrowRight") {
+            //     const inputElement = this.$refs[word.id];
+
+            //     if (inputElement.selectionStart === word.word.length) {
+            //         setFocus(false, this);
+            //     }
+            // }
 
             // Focus on the previous word if the user is moving left with their caret at the word's start
-            if (event.code === "ArrowLeft") {
-                const inputElement = this.$refs[word.id];
-
-                if (inputElement.selectionStart === 0) {
-                    setFocus(true, this);
-                }
-            }
+            // if (event.code === "ArrowLeft") {
+            //     const inputElement = this.$refs[word.id];
+
+            //     if (inputElement.selectionStart === 0) {
+            //         setFocus(true, this);
+            //     }
+            // }
 
             /**
              * Gets the index of an adjacent word to focus on.
              * @param {Boolean} focusLeft Whether to focus on the word to the left or right of the current index.
-             * @param that The view model.
+             * @param vm The view model.
              */
-            function getFocusIndex(focusLeft, that) {
+            function getFocusIndex(focusLeft, vm) {
                 let focusIndex = 0;
 
@@ -207 +210 @@
                 }
                 else {
-                    focusIndex = index === that.words.length - 1 ? that.words.length - 1 : index + 1;
+                    focusIndex = index === vm.words.length - 1 ? vm.words.length - 1 : index + 1;
                 }
 
@@ -216 +219 @@
              * Sets the focus to an adjacent word.
              * @param {Boolean} focusLeft Whether to focus on the word to the left or right of the current index.
-             * @param that The view model.
+             * @param vm The view model.
              */
-            function setFocus(focusLeft, that) {
-                const focusIndex = getFocusIndex(focusLeft, that);
-                const focusId = that.words[focusIndex].id;
-                that.$refs[focusId].focus();
+            function setFocus(focusLeft, vm) {
+                const focusIndex = getFocusIndex(focusLeft, vm);
+                const focusId = vm.words[focusIndex].id;
+                vm.$refs[focusId].focus();
 
                 if (!focusLeft) {
-                    that.$refs[focusId].setSelectionRange(-1, 0);
+                    vm.$refs[focusId].setSelectionRange(-1, 0);
                 }
             }