Turbo-Kompatibilität verbessern.

Hinzufügen von Prüfungen auf Vorhandensein von DOM-Elementen in mehreren Controllern sowie Optimierung der Form-Submit-Logik für bessere Turbo-Integration. Anpassung von Template-Elementen und JavaScript-Events zur Unterstützung von Turbo Morphing auf der Startseite.
This commit is contained in:
Marcel Diegelmann 2026-04-16 16:07:35 +02:00
parent 66c905738d
commit 563d39ff2d
9 changed files with 104 additions and 35 deletions

View file

@ -73,6 +73,7 @@ export default class extends Controller {
//If the element is in navbar mode, or not
const navbar_mode = this.element.dataset.navbarMode === "true";
const panel_container_element = document.getElementById("navbar-search-form");
const that = this;
@ -124,7 +125,7 @@ export default class extends Controller {
query: this.element.dataset.initialQuery || that.inputTarget.value || ""
},
//Place the panel in the navbar, if the element is in navbar mode
panelContainer: navbar_mode ? document.getElementById("navbar-search-form") : document.body,
panelContainer: (navbar_mode && panel_container_element) ? panel_container_element : document.body,
panelPlacement: this.element.dataset.panelPlacement,
plugins: [recentSearchesPlugin],
openOnFocus: true,
@ -152,6 +153,11 @@ export default class extends Controller {
// If the form is submitted, forward the term to the form
onSubmit({ state, event, ...setters }) {
// If the user pressed enter, we want to submit the form
if (event) {
event.preventDefault();
}
//Put the current text into each target input field
const input = that.inputTarget;
@ -167,7 +173,13 @@ export default class extends Controller {
input.value = state.query;
if (input.form) {
input.form.requestSubmit();
// We prefer requestSubmit() as it is more compatible with Turbo and triggers submit event listeners
// However, we fallback to submit() if requestSubmit() is not available
if (typeof input.form.requestSubmit === 'function') {
input.form.requestSubmit();
} else {
input.form.submit();
}
}
},

View file

@ -60,6 +60,10 @@ export default class extends TreeController {
doUpdateIfNeeded()
{
const info_element = document.getElementById('sidebar-last-time-updated');
if (!info_element) {
return;
}
const date_str = info_element.dataset.lastUpdate;
const server_last_update = new Date(date_str);

View file

@ -22,6 +22,9 @@ import {Controller} from "@hotwired/stimulus";
export default class extends Controller
{
download(event) {
this.element.href = document.getElementById('pdf_preview').data
const preview = document.getElementById('pdf_preview');
if (preview) {
this.element.href = preview.data;
}
}
}
}

View file

@ -22,6 +22,8 @@ import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
connect() {
const menu = document.getElementById('locale-select-menu');
menu.innerHTML = this.element.innerHTML;
if (menu) {
menu.innerHTML = this.element.innerHTML;
}
}
}
}

View file

@ -35,6 +35,7 @@ class RegisterEventHelper {
});
this.registerModalDropRemovalOnFormSubmit();
this.registerHomepageCleanupOnSearch();
}
@ -63,6 +64,39 @@ class RegisterEventHelper {
document.addEventListener('turbo:load', fn);
}
registerHomepageCleanupOnSearch() {
const cleanup = () => {
const ids = [
'homepage-banner-container',
'homepage-last-activity-container',
'homepage-search-container',
'homepage-first-steps',
'homepage-license',
'new-version-alert'
];
const isSearchPage = window.location.pathname.includes('/search') || window.location.search.includes('keyword=');
ids.forEach(id => {
const elements = document.querySelectorAll('#' + id);
elements.forEach(el => {
if (isSearchPage) {
//We hide it, instead of removing it, to not break Turbo Morphing anchors
el.style.setProperty('display', 'none', 'important');
} else {
//On non-search pages, we ensure it is visible again if it was hidden by this script
//But only if it's not one of the "anchor" divs from base.html.twig which should stay hidden
if (el.hasAttribute('data-turbo-temporary')) {
el.style.display = '';
}
}
});
});
};
this.registerLoadHandler(cleanup);
}
configureDropdowns() {
this.registerLoadHandler(() => {
//Set the dropdown strategy to fixed, so that the dropdowns are not cut off by the overflow: hidden of the body.
@ -328,4 +362,4 @@ class RegisterEventHelper {
}
}
export default new RegisterEventHelper();
export default new RegisterEventHelper();