diff --git a/assets/controllers/elements/tagsinput_controller.js b/assets/controllers/elements/tagsinput_controller.js new file mode 100644 index 00000000..779e82da --- /dev/null +++ b/assets/controllers/elements/tagsinput_controller.js @@ -0,0 +1,32 @@ +import {Controller} from "@hotwired/stimulus"; +import Bloodhound from "corejs-typeahead/dist/bloodhound"; +import 'corejs-typeahead'; +import '../../js/lib/tagsinput'; +import '../../css/tagsinput.css' + + +export default class extends Controller { + connect() { + if(this.element.dataset.autocomplete) { + const engine = new Bloodhound({ + //@ts-ignore + datumTokenizer: Bloodhound.tokenizers.obj.whitespace(''), + //@ts-ignore + queryTokenizer: Bloodhound.tokenizers.obj.whitespace(''), + remote: { + url: this.element.dataset.autocomplete, + wildcard: 'QUERY' + } + }); + + $(this.element).tagsinput({ + typeaheadjs: { + name: 'tags', + source: engine.ttAdapter() + } + }); + } else { // Init tagsinput without typeahead + $(this.element).tagsinput(); + } + } +} \ No newline at end of file diff --git a/assets/js/register_events.js b/assets/js/register_events.js index 07e997f8..8521622e 100644 --- a/assets/js/register_events.js +++ b/assets/js/register_events.js @@ -8,10 +8,6 @@ import "bootstrap-fileinput/css/fileinput.css" import "./lib/jquery.tristate" import "bootstrap-fileinput"; -import 'corejs-typeahead'; -const Bloodhound = require('corejs-typeahead/dist/bloodhound.js'); -import './lib/tagsinput'; - const RegisterEventHelper = class { @@ -25,8 +21,6 @@ const RegisterEventHelper = class { this.registerSpecialCharInput(); this.registerHoverPics(); - - this.registerAutocompleteTagsinput(); } registerLoadHandler(fn) { @@ -96,42 +90,6 @@ const RegisterEventHelper = class { }); }) } - - registerAutocompleteTagsinput() { - this.registerLoadHandler(() => { - $('input.tagsinput').each(function() { - - //Use typeahead if an autocomplete url was specified. - if($(this).data('autocomplete')) { - - //@ts-ignore - var engine = new Bloodhound({ - //@ts-ignore - datumTokenizer: Bloodhound.tokenizers.obj.whitespace(''), - //@ts-ignore - queryTokenizer: Bloodhound.tokenizers.obj.whitespace(''), - remote: { - url: $(this).data('autocomplete'), - wildcard: 'QUERY' - } - }); - - //@ts-ignore - $(this).tagsinput({ - typeaheadjs: { - name: 'tags', - source: engine.ttAdapter() - } - }); - - - } else { //Init tagsinput without typeahead - //@ts-ignore - $(this).tagsinput(); - } - }) - }); - } registerSpecialCharInput() { this.registerLoadHandler(() => { diff --git a/src/Form/Part/PartBaseType.php b/src/Form/Part/PartBaseType.php index 0ddafb74..898b8790 100644 --- a/src/Form/Part/PartBaseType.php +++ b/src/Form/Part/PartBaseType.php @@ -147,6 +147,7 @@ class PartBaseType extends AbstractType 'empty_data' => '', 'attr' => [ 'class' => 'tagsinput', + 'data-controller' => 'elements--tagsinput', 'data-autocomplete' => $this->urlGenerator->generate('typeahead_tags', ['query' => 'QUERY']), ], 'disabled' => !$this->security->isGranted('tags.edit', $part),