Bricksextras: Tabreiter Pro so modifizieren, dass bei Reload des Browsers der Tabreiter offen bleibt

Problem:

Wenn man verschiedene Tabreiter bei Tabreiter Pro erstellt und die Seite neu lädt, wird nur der 1. Tabreiter geöffnet. Für eine verbesserte UX wäre es schön, wenn der zuletzt geöffnete Tabreiter geöffnet bleibt.

Lösung:

1. In Pro Tabs Hash-URL einschalten (Open via URL-Parameter) einschalten, GET-Parameter = tab
2. Pro Tabs bringt eigene Javascript-Events mit. Wir benötigen das Event “x_tabs:switch”.
3. Folgenden Code (initialisierung im Fuß und möglichst nur auf Seiten, in denen auch die Tabreiter erscheinen:
   

document.addEventListener("DOMContentLoaded", () => {
    const tabs = document.getElementById("myProTabsID");
    if (tabs) {
        tabs.addEventListener("x_tabs:switch", () => {
            const activeTabPanel = tabs.querySelector(".x-tabs_panel-current");
            if (activeTabPanel && activeTabPanel.id) {
                const activeTabId = activeTabPanel.id;
                const url = new URL(window.location); // Aktuelle URL abrufen
                url.searchParams.set('tab', activeTabId); // GET-Parameter 'tab' setzen
                window.history.pushState({}, "", url); // URL ohne Neuladen aktualisieren
            }
        });
    }
});Code-Sprache: JavaScript (javascript)

Ersetze myProTabsID durch die ID, des Root Elements von “Pro Tabs”