BaseInput: Add functions isReadOnly(), isTermDirectionVertical()

* Add `ArrowUp` and `ArrowDown` case
Icinga · Aug 29, 2022 · bcadec9 · bcadec9
1 parent 5692ba5
commit bcadec9
Showing 1 changed file with 54 additions and 6 deletions.
diff --git a/asset/js/widget/BaseInput.js b/asset/js/widget/BaseInput.js
@@ -53,10 +53,14 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
             $(this.input).on('focusin', this.onTermFocus, this);
             $(this.termContainer).on('input', '[data-label]', this.onInput, this);
             $(this.termContainer).on('keydown', '[data-label]', this.onKeyDown, this);
+
             $(this.termContainer).on('keyup', '[data-label]', this.onKeyUp, this);
-            $(this.termContainer).on('focusout', '[data-index]', this.onTermFocusOut, this);
             $(this.termContainer).on('focusin', '[data-index]', this.onTermFocus, this);
 
+            if (! this.isReadOnlyMode()) {
+                $(this.termContainer).on('focusout', '[data-index]', this.onTermFocusOut, this);
+            }
+
             // Copy/Paste
             $(this.input).on('paste', this.onPaste, this);
             $(this.input).on('copy', this.onCopyAndCut, this);
@@ -295,6 +299,14 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
             return this.usedTerms.length > 0;
         }
 
+        isReadOnlyMode() {
+            return this.input.dataset.termMode === 'read-only';
+        }
+
+        isTermDirectionVertical() {
+            return this.input.dataset.termDirection === 'vertical';
+        }
+
         hasSyntaxError(input) {
             if (typeof input === 'undefined') {
                 input = this.input;
@@ -561,7 +573,10 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
                 toFocus = this.input;
             }
 
-            toFocus.selectionStart = toFocus.selectionEnd = 0;
+            if (! this.isReadOnlyMode()) {
+                toFocus.selectionStart = toFocus.selectionEnd = 0;
+            }
+
             $(toFocus).focus();
 
             return toFocus;
@@ -584,7 +599,10 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
                 toFocus = this.input;
             }
 
-            toFocus.selectionStart = toFocus.selectionEnd = toFocus.value.length;
+            if (! this.isReadOnlyMode()) {
+                toFocus.selectionStart = toFocus.selectionEnd = toFocus.value.length;
+            }
+
             $(toFocus).focus();
 
             return toFocus;
@@ -688,6 +706,10 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
                     }
                     break;
                 case 'Backspace':
+                    if (this.isTermDirectionVertical() || this.isReadOnlyMode()) {
+                        break;
+                    }
+
                     removedTerms = this.clearSelectedTerms();
 
                     if (termIndex >= 0 && ! input.value) {
@@ -720,6 +742,10 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
                     this.autoSubmit(input, 'remove', removedTerms);
                     break;
                 case 'Delete':
+                    if (this.isTermDirectionVertical()) {
+                        break;
+                    }
+
                     removedTerms = this.clearSelectedTerms();
 
                     if (termIndex >= 0 && ! input.value) {
@@ -750,19 +776,37 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
                     }
                     break;
                 case 'ArrowLeft':
-                    if (input.selectionStart === 0 && this.hasTerms()) {
+                    if (! this.isTermDirectionVertical() && this.hasTerms()
+                        && (input.selectionStart === 0 || input.selectionStart === null && this.isReadOnlyMode())) {
                         event.preventDefault();
                         this.moveFocusBackward();
                     }
                     break;
                 case 'ArrowRight':
-                    if (input.selectionStart === input.value.length && this.hasTerms()) {
+                    if (! this.isTermDirectionVertical() && this.hasTerms()
+                        && (input.selectionStart === input.value.length || input.selectionStart === null && this.isReadOnlyMode())) {
+                        event.preventDefault();
+                        this.moveFocusForward();
+                    }
+                    break;
+                case 'ArrowUp':
+                    if (this.isTermDirectionVertical() && this.hasTerms()
+                        && (this.completer === null || ! this.completer.isBeingCompleted(input))
+                    ) {
+                        event.preventDefault();
+                        this.moveFocusBackward();
+                    }
+                    break;
+                case 'ArrowDown':
+                    if (this.isTermDirectionVertical() && this.hasTerms()
+                        && (this.completer === null || ! this.completer.isBeingCompleted(input))
+                    ) {
                         event.preventDefault();
                         this.moveFocusForward();
                     }
                     break;
                 case 'a':
-                    if ((event.ctrlKey || event.metaKey) && ! this.readPartialTerm(input)) {
+                    if (! this.isTermDirectionVertical() && (event.ctrlKey || event.metaKey) && ! this.readPartialTerm(input)) {
                         this.selectTerms();
                     }
             }
@@ -834,6 +878,10 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
 
             this.deselectTerms();
 
+            if (this.isReadOnlyMode()) {
+                return;
+            }
+
             let input = event.target;
             if (! this.hasSyntaxError(input) && ! this.completer.isBeingCompleted(input, false)) {
                 // Only request suggestions if the input is valid and not already being completed