59 lines
3.1 KiB
JavaScript
59 lines
3.1 KiB
JavaScript
import { Controller } from '@hotwired/stimulus';
|
|
|
|
export default class extends Controller {
|
|
initialize() {
|
|
this._onPreConnect = this._onPreConnect.bind(this);
|
|
this._onConnect = this._onConnect.bind(this);
|
|
}
|
|
|
|
connect() {
|
|
document.querySelector("#search").onsubmit = (event) => {
|
|
event.preventDefault();
|
|
const autocompleteController = this.application.getControllerForElementAndIdentifier(this.element, 'symfony--ux-autocomplete--autocomplete')
|
|
window.location.href = `/search?term=${autocompleteController.tomSelect.lastValue}`
|
|
}
|
|
this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect);
|
|
this.element.addEventListener('autocomplete:connect', this._onConnect);
|
|
}
|
|
|
|
disconnect() {
|
|
// You should always remove listeners when the controller is disconnected to avoid side-effects
|
|
this.element.removeEventListener('autocomplete:connect', this._onConnect);
|
|
this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect);
|
|
}
|
|
|
|
_onPreConnect(event) {
|
|
// TomSelect has not been initialized - options can be changed
|
|
// console.log(event.detail); // Options that will be used to initialize TomSelect
|
|
event.detail.options.onItemAdd = (value, $item) => {
|
|
const params = value.split('|')
|
|
window.location.href = `/result/${params[0]}/${params[1]}`
|
|
};
|
|
event.detail.options.render.loading = (data, escape) => {
|
|
return `
|
|
<span data-controller="loading-icon" data-loading-icon-total-value="52" data-loading-icon-count-value="20" class="loading-icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" height="20" width="20" data-loading-icon-target="icon" class="text-end" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M12 6.99998C9.1747 6.99987 6.99997 9.24998 7 12C7.00003 14.55 9.02119 17 12 17C14.7712 17 17 14.75 17 12"><animateTransform attributeName="transform" attributeType="XML" dur="560ms" from="0,12,12" repeatCount="indefinite" to="360,12,12" type="rotate"></animateTransform></path></svg>
|
|
</span>
|
|
`;
|
|
}
|
|
event.detail.options.render.option = (data, escape) => {
|
|
if (data.data.description.length > 60) {
|
|
data.data.description = data.data.description.substring(0, 107) + "...";
|
|
}
|
|
return `<div class="flex flex-row">
|
|
<img src="${data.data.poster}" class="w-16 rounded-md">
|
|
<div class="p-2 flex flex-col">
|
|
<h2>${data.data.title}</h2>
|
|
<p class="max-w-[60ch] text-wrap">${data.data.description}</p>
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
_onConnect(event) {
|
|
// TomSelect has just been initialized and you can access details from the event
|
|
// console.log(event.detail.tomSelect); // TomSelect instance
|
|
// console.log(event.detail.options); // Options used to initialize TomSelect
|
|
}
|
|
} |