livegraphs-django/dashboard_project/static/js/ajax-navigation.js

/**
 * ajax-navigation.js - JavaScript for AJAX-based navigation across the entire application
 *
 * This script handles AJAX navigation between pages in the Chat Analytics Dashboard.
 * It intercepts link clicks, loads content via AJAX, and updates the browser history.
 */

document.addEventListener("DOMContentLoaded", function () {
    // Only initialize if AJAX navigation is enabled
    if (typeof ENABLE_AJAX_NAVIGATION !== "undefined" && ENABLE_AJAX_NAVIGATION) {
        setupAjaxNavigation();
    }

    // Function to set up AJAX navigation for the application
    function setupAjaxNavigation() {
        // Configuration
        const config = {
            mainContentSelector: "#main-content", // Selector for the main content area
            navLinkSelector: ".ajax-nav-link", // Selector for links to handle with AJAX
            loadingIndicatorId: "nav-loading-indicator", // ID of the loading indicator
            excludePatterns: [
                // URL patterns to exclude from AJAX navigation
                /\.(pdf|xlsx?|docx?|csv|zip|png|jpe?g|gif|svg)$/i, // File downloads
                /\/admin\//, // Admin pages
                /\/accounts\/logout\//, // Logout page
                /\/api\//, // API endpoints
            ],
        };

        // Create and insert the loading indicator
        if (!document.getElementById(config.loadingIndicatorId)) {
            const loadingIndicator = document.createElement("div");
            loadingIndicator.id = config.loadingIndicatorId;
            loadingIndicator.className = "position-fixed top-0 start-0 end-0";
            loadingIndicator.innerHTML =
                '<div class="progress" style="height: 3px; border-radius: 0;"><div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" style="width: 100%"></div></div>';
            loadingIndicator.style.display = "none";
            loadingIndicator.style.zIndex = "9999";
            document.body.appendChild(loadingIndicator);
        }

        // Get the loading indicator element
        const loadingIndicator = document.getElementById(config.loadingIndicatorId);

        // Get the main content container
        const mainContent = document.querySelector(config.mainContentSelector);
        if (!mainContent) {
            console.warn("Main content container not found. AJAX navigation disabled.");
            return;
        }

        // Function to check if a URL should be excluded from AJAX navigation
        function shouldExcludeUrl(url) {
            for (const pattern of config.excludePatterns) {
                if (pattern.test(url)) {
                    return true;
                }
            }
            return false;
        }

        // Function to show the loading indicator
        function showLoading() {
            loadingIndicator.style.display = "block";
        }

        // Function to hide the loading indicator
        function hideLoading() {
            loadingIndicator.style.display = "none";
        }

        // Function to handle AJAX page navigation
        function handlePageNavigation(url, pushState = true) {
            if (shouldExcludeUrl(url)) {
                window.location.href = url;
                return;
            }
            showLoading();
            const currentScrollPos = window.scrollY;
            fetch(url, {
                headers: {
                    "X-Requested-With": "XMLHttpRequest",
                    "X-AJAX-Navigation": "true",
                    Accept: "text/html",
                },
            })
                .then((response) => {
                    if (!response.ok)
                        throw new Error(`Network response was not ok: ${response.status}`);
                    return response.text();
                })
                .then((html) => {
                    // Parse the HTML and extract #main-content
                    const tempDiv = document.createElement("div");
                    tempDiv.innerHTML = html;
                    const newContent = tempDiv.querySelector(config.mainContentSelector);
                    if (!newContent) throw new Error("Could not find main content in the response");
                    mainContent.innerHTML = newContent.innerHTML;
                    // Update the page title
                    const titleMatch = html.match(/<title>(.*?)<\/title>/i);
                    if (titleMatch) document.title = titleMatch[1];
                    // Re-initialize dynamic content
                    reloadScripts(mainContent);
                    attachEventListeners();
                    initializePageScripts();
                    if (pushState) {
                        history.pushState(
                            { url: url, title: document.title, scrollPos: currentScrollPos },
                            document.title,
                            url,
                        );
                        window.scrollTo({ top: 0, behavior: "smooth" });
                    } else if (window.history.state && window.history.state.scrollPos) {
                        window.scrollTo({ top: window.history.state.scrollPos });
                    }
                    hideLoading();
                })
                .catch((error) => {
                    console.error("Error during AJAX navigation:", error);
                    hideLoading();
                    window.location.href = url;
                });
        }

        // Function to reload and execute scripts in new content
        function reloadScripts(container) {
            const scripts = container.getElementsByTagName("script");
            for (let script of scripts) {
                const newScript = document.createElement("script");

                // Copy all attributes
                Array.from(script.attributes).forEach((attr) => {
                    newScript.setAttribute(attr.name, attr.value);
                });

                // Copy inline script content
                newScript.textContent = script.textContent;

                // Replace old script with new one
                script.parentNode.replaceChild(newScript, script);
            }
        }

        // Function to handle form submissions
        function handleFormSubmission(form, e) {
            e.preventDefault();

            // Show loading indicator
            showLoading();

            // Get form data
            const formData = new FormData(form);
            const method = form.method.toLowerCase();
            const url = form.action || window.location.href;

            // Configure fetch options
            const fetchOptions = {
                method: method,
                headers: {
                    "X-AJAX-Navigation": "true",
                },
            };

            // Handle different HTTP methods
            if (method === "get") {
                const queryParams = new URLSearchParams(formData).toString();
                handlePageNavigation(url + (queryParams ? "?" + queryParams : ""));
            } else {
                fetchOptions.body = formData;

                fetch(url, fetchOptions)
                    .then((response) => {
                        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                        return response.json();
                    })
                    .then((data) => {
                        if (data.redirect) {
                            // Handle server-side redirects
                            handlePageNavigation(data.redirect, true);
                        } else {
                            // Update page content
                            mainContent.innerHTML = data.html;
                            document.title = data.title || document.title;

                            // Re-initialize dynamic content
                            reloadScripts(mainContent);
                            attachEventListeners();
                            initializePageScripts();

                            // Update URL if needed
                            if (data.url) {
                                history.pushState({ url: data.url }, document.title, data.url);
                            }
                        }
                    })
                    .catch((error) => {
                        console.error("Form submission error:", error);
                        // Fallback to traditional form submission
                        form.submit();
                    })
                    .finally(() => {
                        hideLoading();
                    });
            }
        }

        // Function to initialize scripts needed for the new page content
        function initializePageScripts() {
            // Re-initialize any custom scripts that might be needed
            if (typeof setupAjaxPagination === "function") {
                setupAjaxPagination();
            }

            // Initialize Bootstrap tooltips, popovers, etc.
            if (typeof bootstrap !== "undefined") {
                // Initialize tooltips
                const tooltipTriggerList = [].slice.call(
                    document.querySelectorAll('[data-bs-toggle="tooltip"]'),
                );
                tooltipTriggerList.map(function (tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl);
                });

                // Initialize popovers
                const popoverTriggerList = [].slice.call(
                    document.querySelectorAll('[data-bs-toggle="popover"]'),
                );
                popoverTriggerList.map(function (popoverTriggerEl) {
                    return new bootstrap.Popover(popoverTriggerEl);
                });
            }
        }

        // Function to attach event listeners to forms and links
        function attachEventListeners() {
            // Handle AJAX navigation links
            document.querySelectorAll(config.navLinkSelector).forEach((link) => {
                if (!link.dataset.ajaxNavInitialized) {
                    link.addEventListener("click", function (e) {
                        if (e.ctrlKey || e.metaKey || e.shiftKey || shouldExcludeUrl(this.href)) {
                            return; // Let the browser handle these cases
                        }
                        e.preventDefault();
                        handlePageNavigation(this.href);
                    });
                    link.dataset.ajaxNavInitialized = "true";
                }
            });

            // Handle forms with AJAX
            document
                .querySelectorAll("form.ajax-form, form.search-form, form.filter-form")
                .forEach((form) => {
                    if (!form.dataset.ajaxFormInitialized) {
                        form.addEventListener("submit", (e) => handleFormSubmission(form, e));
                        form.dataset.ajaxFormInitialized = "true";
                    }
                });
        }

        // Initial attachment of event listeners
        attachEventListeners();

        // Handle browser back/forward buttons
        window.addEventListener("popstate", function (event) {
            if (event.state && event.state.url) {
                handlePageNavigation(event.state.url, false);
            } else {
                // Fallback to current URL if no state
                handlePageNavigation(window.location.href, false);
            }
        });
    }
});