- Timestamp:
- 2021-09-15T10:34:13+12:00 (3 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue
r35396 r35397 24 24 <input :size="word.word.length <= 1 ? 1 : word.word.length - 1" :ref="word.id" 25 25 class="editor-word" v-model="word.word" type="text" 26 @input="onEditorInput($event, index)" @focusout="onEditorFocusOut(index)" @key down="onEditorKeyDown($event, index)" />26 @input="onEditorInput($event, index)" @focusout="onEditorFocusOut(index)" @keyup="onEditorKeyUp($event, index)" /> 27 27 <span> </span> 28 28 </li> … … 159 159 } 160 160 }, 161 onEditorKey Down(event, index) {161 onEditorKeyUp(event, index) { 162 162 /** @type {Word} */ 163 163 const word = this.words[index]; 164 164 165 // Remove the word if the user is repetitively hitting backspace/ backspace on an empty cell166 if (event.code === "Backspace" || event. Code === "Delete") {167 if (word.word.length < =1) {165 // Remove the word if the user is repetitively hitting backspace/delete on an empty cell 166 if (event.code === "Backspace" || event.code === "Delete") { 167 if (word.word.length < 1) { 168 168 if (word.deletionAttempts === 1) { 169 169 this.words.splice(index, 1); … … 176 176 } 177 177 } 178 else { 179 word.deletionAttempts = 0; 180 } 178 181 179 182 // Focus on the next word if the user is moving right with their caret at the word's end 180 if (event.code === "ArrowRight") {181 const inputElement = this.$refs[word.id];182 183 if (inputElement.selectionStart === word.word.length) {184 setFocus(false, this);185 }186 }183 // if (event.code === "ArrowRight") { 184 // const inputElement = this.$refs[word.id]; 185 186 // if (inputElement.selectionStart === word.word.length) { 187 // setFocus(false, this); 188 // } 189 // } 187 190 188 191 // Focus on the previous word if the user is moving left with their caret at the word's start 189 if (event.code === "ArrowLeft") {190 const inputElement = this.$refs[word.id];191 192 if (inputElement.selectionStart === 0) {193 setFocus(true, this);194 }195 }192 // if (event.code === "ArrowLeft") { 193 // const inputElement = this.$refs[word.id]; 194 195 // if (inputElement.selectionStart === 0) { 196 // setFocus(true, this); 197 // } 198 // } 196 199 197 200 /** 198 201 * Gets the index of an adjacent word to focus on. 199 202 * @param {Boolean} focusLeft Whether to focus on the word to the left or right of the current index. 200 * @param thatThe view model.203 * @param vm The view model. 201 204 */ 202 function getFocusIndex(focusLeft, that) {205 function getFocusIndex(focusLeft, vm) { 203 206 let focusIndex = 0; 204 207 … … 207 210 } 208 211 else { 209 focusIndex = index === that.words.length - 1 ? that.words.length - 1 : index + 1;212 focusIndex = index === vm.words.length - 1 ? vm.words.length - 1 : index + 1; 210 213 } 211 214 … … 216 219 * Sets the focus to an adjacent word. 217 220 * @param {Boolean} focusLeft Whether to focus on the word to the left or right of the current index. 218 * @param thatThe view model.221 * @param vm The view model. 219 222 */ 220 function setFocus(focusLeft, that) {221 const focusIndex = getFocusIndex(focusLeft, that);222 const focusId = that.words[focusIndex].id;223 that.$refs[focusId].focus();223 function setFocus(focusLeft, vm) { 224 const focusIndex = getFocusIndex(focusLeft, vm); 225 const focusId = vm.words[focusIndex].id; 226 vm.$refs[focusId].focus(); 224 227 225 228 if (!focusLeft) { 226 that.$refs[focusId].setSelectionRange(-1, 0);229 vm.$refs[focusId].setSelectionRange(-1, 0); 227 230 } 228 231 }
Note:
See TracChangeset
for help on using the changeset viewer.