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

Author: sukhwinder33445

asset/js/widget/TermInput.js

@@ -1,16 +1,24 @@
-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.ignoreSpaceUntil = null;
             this.ignoreSpaceSince = null;
         }
 
+        bind() {
+            if (this.isReadOnlyMode()) {
+                $(this.termContainer).on('click', '[data-index]', this.onTermClick, this);
+            }
+
+            return super.bind();
+        }
+
         reset() {
             super.reset();
 
@@ -61,6 +69,32 @@ 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" class="term-badge"><i class="fa fa-trash trash-icon"></i></label>'
+            );
+
+            if (termData.class) {
+                label.classList.add(termData.class);
+            }
+
+            if (termData.title) {
+                label.title = termData.title;
+            }
+
+            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 +156,12 @@ define(["BaseInput"], function (BaseInput) {
                     }
             }
         }
+
+        onTermClick(event) {
+            let termIndex = event.target.parentNode.dataset.index;
+            this.removeTerm(event.target.parentNode);
+            this.moveFocusForward(termIndex - 1);
+        }
     }
 
     return TermInput;