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.

assets/controllers/elements/part_search_controller.js

@@ -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();
+                    }
                 }
             },
 

assets/controllers/elements/sidebar_tree_controller.js

@@ -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);
 

assets/controllers/pages/label_download_btn_controller.js

@@ -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;
+        }
     }
-}
+}

assets/controllers/turbo/locale_menu_controller.js

@@ -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;
+        }
     }
-}
+}

assets/js/register_events.js

@@ -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();

templates/base.html.twig

@@ -95,6 +95,14 @@
                         <turbo-frame id="content" data-turbo-action="advance">
                             {# Here will be the real content be injected#}
 
+                            {# These empty divs are here to ensure that Turbo Morphing correctly removes homepage elements when navigating away #}
+                            <div id="homepage-search-container" class="d-none" data-turbo-temporary></div>
+                            <div id="homepage-banner-container" class="d-none" data-turbo-temporary></div>
+                            <div id="homepage-first-steps" class="d-none" data-turbo-temporary></div>
+                            <div id="homepage-license" class="d-none" data-turbo-temporary></div>
+                            <div id="homepage-last-activity-container" class="d-none" data-turbo-temporary></div>
+                            <div id="new-version-alert" class="d-none" data-turbo-temporary></div>
+
                             {% block content %}
                             {% endblock %}
 

templates/components/new_version.macro.html.twig

@@ -1,9 +1,9 @@
 {% macro new_version_alert(is_available, new_version, new_version_url) %}
     {% if is_available %}
-        <div class="alert alert-success" role="alert">
+        <div id="new-version-alert" class="alert alert-success" role="alert" data-turbo-temporary>
             <h5><i class="fa-solid fa-champagne-glasses"></i> {% trans %}update_manager.new_version_available.title{% endtrans %}</h5>
             {% trans %}update_manager.new_version_available.text{% endtrans %}: <b><a href="{{ new_version_url }}" class="alert-link link-external" target="_blank">{% trans %}version.caption{% endtrans %} {{ new_version }}</a></b>
             <br><small>{% trans %}update_manager.new_version_available.only_administrators_can_see{% endtrans %}</small>
         </div>
     {% endif %}
-{% endmacro %}
+{% endmacro %}

templates/components/search.macro.html.twig

@@ -250,6 +250,8 @@
                 data-initial-query="{{ searchFilter ? searchFilter.keyword : app.request.get('keyword') }}">
 
             <input type="hidden" name="keyword" required {{ stimulus_target('elements/part_search', 'input') }} value="{{ searchFilter ? searchFilter.keyword : app.request.get('keyword') }}">
+            {# Hidden submit button to allow form submission on enter, even if the real input is hidden/handled by JS #}
+            <input type="submit" class="d-none" aria-hidden="true">
         </div>
 
         {# And right in the standalone mode #}

templates/homepage.html.twig

@@ -6,33 +6,37 @@
 
 {% block item_search %}
     {% if is_granted('@parts.read') %}
-        {{ search.search_form("standalone") }}
+        <div id="homepage-search-container" data-turbo-temporary>
+            {{ search.search_form("standalone") }}
+        </div>
     {% endif %}
 {% endblock %}
 
 {% block item_banner %}
-    <div class="rounded p-4 bg-body-secondary">
-        <h1 class="display-3">{{ vars.partdb_title() }}</h1>
-        {% if settings_instance('customization').showVersionOnHomepage %}
-            <h4>
-                {% trans %}version.caption{% endtrans %}: {{ shivas_app_version }}
-                {% if git_branch is not empty or git_commit is not empty %}
-                    ({{ git_branch ?? '' }}/{{ git_commit ?? '' }})
-                {% endif %}
-            </h4>
-        {% endif %}
-        {% if banner is not empty %}
-            <hr>
-            <div class="latex" data-controller="common--latex">
-                <h5>{{ banner | format_markdown }}</h5>
-            </div>
-        {% endif %}
+    <div id="homepage-banner-container" class="container-fluid" data-turbo-temporary>
+        <div id="homepage-banner" class="rounded p-4 bg-body-secondary">
+            <h1 class="display-3">{{ vars.partdb_title() }}</h1>
+            {% if settings_instance('customization').showVersionOnHomepage %}
+                <h4>
+                    {% trans %}version.caption{% endtrans %}: {{ shivas_app_version }}
+                    {% if git_branch is not empty or git_commit is not empty %}
+                        ({{ git_branch ?? '' }}/{{ git_commit ?? '' }})
+                    {% endif %}
+                </h4>
+            {% endif %}
+            {% if banner is not empty %}
+                <hr>
+                <div class="latex" data-controller="common--latex">
+                    <h5>{{ banner | format_markdown }}</h5>
+                </div>
+            {% endif %}
+        </div>
     </div>
 {% endblock %}
 
 {% block item_first_steps %}
     {% if show_first_steps %}
-        <div class="card border-info">
+        <div id="homepage-first-steps" class="card border-info" data-turbo-temporary>
             <div class="card-header bg-info ">
                 <h4><i class="fa fa-circle-play fa-fw " aria-hidden="true"></i> {% trans %}homepage.first_steps.title{% endtrans %}</h4>
             </div>
@@ -53,7 +57,7 @@
 {% endblock %}
 
 {% block item_license %}
-    <div class="card border-primary">
+    <div id="homepage-license" class="card border-primary" data-turbo-temporary>
         <div class="card-header bg-primary text-white">
             <h4><i class="fa fa-book fa-fw" aria-hidden="true"></i> {% trans %}homepage.license{% endtrans %}</h4>
         </div>
@@ -73,18 +77,19 @@
 
 {% block item_last_activity %}
     {% if datatable is not null %}
-        <div class="card">
-            <div class="card-header"><i class="fas fa-fw fa-history"></i> {% trans %}homepage.last_activity{% endtrans %}</div>
-            <div class="card-body">
-                {% import "components/history_log_macros.html.twig" as log %}
-                {{ log.last_activity_component(datatable) }}
+        <div id="homepage-last-activity-container" class="container-fluid" data-turbo-temporary>
+            <div id="homepage-last-activity" class="card">
+                <div class="card-header"><i class="fas fa-fw fa-history"></i> {% trans %}homepage.last_activity{% endtrans %}</div>
+                <div class="card-body">
+                    {% import "components/history_log_macros.html.twig" as log %}
+                    {{ log.last_activity_component(datatable) }}
+                </div>
             </div>
         </div>
     {% endif %}
 {% endblock %}
 
 {% block content %}
-
     {% if is_granted('@system.show_updates') %}
         {{ nv.new_version_alert(new_version_available, new_version, new_version_url) }}
     {% endif %}
@@ -99,5 +104,4 @@
             </div>
         {% endif %}
     {% endfor %}
-
 {% endblock %}