TermInput: Add attr data-term-separator and code for term read-only…

… mode
Icinga · May 16, 2022 · 08511c0 · 08511c0
1 parent 2cbde3e
commit 08511c0
Showing 1 changed file with 35 additions and 2 deletions.
diff --git a/asset/js/widget/TermInput.js b/asset/js/widget/TermInput.js
@@ -1,16 +1,21 @@
-define(["BaseInput"], function (BaseInput) {
+define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
 
     "use strict";
 
     class TermInput extends BaseInput {
         constructor(input) {
             super(input);
 
-            this.separator = ' ';
+            this.separator = this.input.dataset.termSeparator ? this.input.dataset.termSeparator : ' ';
             this.ignoreSpaceUntil = null;
             this.ignoreSpaceSince = null;
         }
 
+        bind() {
+            $(this.termContainer).on('click', '[data-index]', this.onTermClick, this);
+            return super.bind();
+        }
+
         reset() {
             super.reset();
 
@@ -61,6 +66,26 @@ define(["BaseInput"], function (BaseInput) {
             super.complete(input, data);
         }
 
+        renderTerm(termData, termIndex) {
+            if (! this.isReadOnlyMode()) {
+                return super.renderTerm(termData, termIndex);
+            }
+
+            let label = $.render('<label><input type="button"><i class="fa fa-trash term-icon"></i></label>');
+
+            if (termData.class) {
+                label.classList.add(termData.class);
+            }
+
+            label.dataset.label = termData.label;
+            label.dataset.search = termData.search;
+            label.dataset.index = termIndex;
+
+            label.firstChild.value = termData.label;
+
+            return label;
+        }
+
         /**
          * Event listeners
          */
@@ -122,6 +147,14 @@ define(["BaseInput"], function (BaseInput) {
                     }
             }
         }
+
+        onTermClick(event) {
+            if (this.isReadOnlyMode()) {
+                let termIndex = event.target.parentNode.dataset.index;
+                this.removeTerm(event.target.parentNode);
+                this.moveFocusForward(termIndex - 1);
+            }
+        }
     }
 
     return TermInput;