From 5352d1424d4845b6b6c604986c20f9a2ef6bd984 Mon Sep 17 00:00:00 2001
From: Sukhwinder Dhillon <sukhwinder33445@gmail.com>
Date: Mon, 16 May 2022 10:25:29 +0200
Subject: [PATCH] TermInput: Add attr `data-term-separator` and code for term
 read-only mode

---
 asset/js/widget/TermInput.js | 44 ++++++++++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/asset/js/widget/TermInput.js b/asset/js/widget/TermInput.js
index f013f52f..5e866681 100644
--- a/asset/js/widget/TermInput.js
+++ b/asset/js/widget/TermInput.js
@@ -1,4 +1,4 @@
-define(["BaseInput"], function (BaseInput) {
+define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
 
     "use strict";
 
@@ -6,11 +6,19 @@ define(["BaseInput"], function (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;