Introduce new dataset Attributes

'data-term-separator', 'data-term-mode' and 'data-term-direction'

Author: sukhwinder33445

asset/js/widget/BaseInput.js

@@ -56,6 +56,7 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
             $(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);
+            $(this.termContainer).on('click', '[data-index]', this.onTermClick, this);
 
             // Copy/Paste
             $(this.input).on('paste', this.onPaste, this);
@@ -468,7 +469,14 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
         }
 
         renderTerm(termData, termIndex) {
-            let label = $.render('<label><input type="text"></label>');
+            let inputContainer;
+            if (this.isReadOnlyMode()) {
+                inputContainer = '<label><input type="button"><i class="icon-cancel term-icon"></i></label>';
+            } else {
+                inputContainer = '<label><input type="input"></label>';
+            }
+
+            let label = $.render(inputContainer);
 
             if (termData.class) {
                 label.classList.add(termData.class);
@@ -539,7 +547,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;
@@ -562,7 +573,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;
@@ -657,6 +671,8 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
                 }
             }
 
+            let arrowUpOrLeft = this.isTermDirectionVertical() ? 'ArrowUp' : 'ArrowLeft';
+            let arrowDownOrRight = this.isTermDirectionVertical() ? 'ArrowDown' : 'ArrowRight';
             let removedTerms;
             switch (event.key) {
                 case ' ':
@@ -723,14 +739,17 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
                         this.saveTerm(input, false);
                     }
                     break;
-                case 'ArrowLeft':
-                    if (input.selectionStart === 0 && this.hasTerms()) {
+                case arrowUpOrLeft:
+                    if ((input.selectionStart === 0 || input.selectionStart === null && this.isReadOnlyMode())
+                        && this.hasTerms()) {
                         event.preventDefault();
                         this.moveFocusBackward();
                     }
                     break;
-                case 'ArrowRight':
-                    if (input.selectionStart === input.value.length && this.hasTerms()) {
+                case arrowDownOrRight:
+                    if ((input.selectionStart === input.value.length
+                        || input.selectionStart === null && this.isReadOnlyMode())
+                        && this.hasTerms()) {
                         event.preventDefault();
                         this.moveFocusForward();
                     }
@@ -812,6 +831,20 @@ define(["../notjQuery", "Completer"], function ($, Completer) {
             }
         }
 
+        onTermClick(event) {
+            if (this.isReadOnlyMode()) {
+               this.removeTerm(event.target.parentNode);
+            }
+        }
+
+        isReadOnlyMode() {
+            return this.input.dataset.termMode === 'read-only'
+        }
+
+        isTermDirectionVertical() {
+            return this.input.dataset.termDirection === 'vertical'
+        }
+
         onButtonClick(event) {
             if (! this.hasSyntaxError()) {
                 // Register current input value, otherwise it's not included

asset/js/widget/TermInput.js

@@ -6,7 +6,7 @@ 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;
         }