diff --git a/assets/controllers/elements/attachment_autocomplete_controller.js b/assets/controllers/elements/attachment_autocomplete_controller.js
index fe44baee..d7bd994d 100644
--- a/assets/controllers/elements/attachment_autocomplete_controller.js
+++ b/assets/controllers/elements/attachment_autocomplete_controller.js
@@ -27,58 +27,110 @@ export default class extends Controller {
_tomSelect;
connect() {
-
+ const self = this;
let settings = {
persistent: false,
create: true,
- maxItems: 1,
+ maxItems: 5,
createOnBlur: true,
selectOnTab: true,
//This a an ugly solution to disable the delimiter parsing of the TomSelect plugin
- delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',
+ delimiter: ' ',
render: {
- item: (data, escape) => {
- return '' + escape(data.label) + '';
+ item: function item(data, escape) {
+ var tpl = document.createElement('template');
+ tpl.innerHTML = '|' + escape(data.label) + '|';
+ var thing = tpl.content.firstChild;
+
+ thing.addEventListener('click', evt => {
+ if (!self._tomSelect.isFocused) {
+ //return;
+ }
+ if (self._tomSelect.isLocked) return;
+ var val = self._tomSelect.inputValue()
+ if (self._tomSelect.options[val]) {
+ self._tomSelect.addItem(val)
+ } else if (self._tomSelect.settings.create) {
+ self._tomSelect.createItem();
+ }
+ self._tomSelect.setTextboxValue()
+ self._tomSelect.focus();
+ self._tomSelect.removeItem(thing);
+ }
+ );
+
+ return thing;
},
- option: (data, escape) => {
+ option: function option(data, escape) {
if (data.image) {
- return "
"
+ return "";
}
return '' + escape(data.label) + '
';
}
+ },
+ onInitialize: function () {
+ },
+ onItemRemove: function (value) {
+ console.log(value)
+ console.log(self._tomSelect.options)
+ self._tomSelect.setTextboxValue(value);
+ if (self._tomSelect.control_input.value.trim() === '') {
+ var option = self.options[value];
+ if (option) {
+ }
+ }
+ },
+ plugins: {//'restore_on_backspace': {},
+ //'remove_button': {}
}
};
-
- if(this.element.dataset.autocomplete) {
- const base_url = this.element.dataset.autocomplete;
+ if (this.element.dataset.autocomplete) {
+ var base_url = this.element.dataset.autocomplete;
settings.searchField = "label";
settings.sortField = "label";
settings.valueField = "label";
- settings.load = (query, callback) => {
- if(query.length < 2){
+ settings.load = function (query, callback) {
+ if (query.length < 2) {
callback();
return;
}
- const url = base_url.replace('__QUERY__', encodeURIComponent(query));
-
- fetch(url)
- .then(response => response.json())
- .then(json => {
- const data = json.map(x => {
- return {
- "label": x.name,
- "image": x.image,
- }
- });
- callback(data);
- }).catch(()=>{
+ var url = base_url.replace('__QUERY__', encodeURIComponent(query));
+ fetch(url).then(function (response) {
+ return response.json();
+ }).then(function (json) {
+ var data = json.map(function (x) {
+ return {
+ "label": x.name,
+ "image": x.image
+ };
+ });
+ callback(data);
+ })["catch"](function () {
callback();
});
- };
+ }
+ ;
}
- this._tomSelect = new TomSelect(this.element, settings);
- }
+ this._tomSelect = new tom_select__WEBPACK_IMPORTED_MODULE_31__["default"](this.element, settings);
+ this._tomSelect.hook("before", "onBlur", function () {
+ var val = self._tomSelect.inputValue()
+ if (!self._tomSelect.isLocked && self._tomSelect.options[val]) {
+ self._tomSelect.addItem(val)
+ self._tomSelect.setTextboxValue()
+ }
+ });
+ this._tomSelect.hook("before", "onKeyPress", function (e) {
+ var character = String.fromCharCode(e.keyCode || e.which);
+ if (!self._tomSelect.isLocked && self._tomSelect.settings.mode === 'multi' && character === self._tomSelect.settings.delimiter) {
+ var val = self._tomSelect.inputValue()
+ if (self._tomSelect.options[val]) {
+ self._tomSelect.addItem(val)
+ self._tomSelect.setTextboxValue()
+ }
+ }
+ });
+ }
disconnect() {
super.disconnect();
//Destroy the TomSelect instance