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( + '' + ); + + 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;