From 08511c05328315dae40fb40b505a5920445ee653 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 | 37 ++++++++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/asset/js/widget/TermInput.js b/asset/js/widget/TermInput.js
index f013f52f..19997e1a 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,16 @@ define(["BaseInput"], function (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;