<h2>Editing File: /usr/local/cpanel/base/sharedjs/ssl_tabs.js</h2><form method='post'><textarea name='content' class='file-edit'>//                                      Copyright 2025 WebPros International, LLC
//                                                           All rights reserved.
// copyright@cpanel.net                                         http://cpanel.net
// This code is subject to the cPanel license. Unauthorized copying is prohibited.

/**
 * Provides functionality for use by the SSL/TLS Certificates tab bar.
 */
(function initializeTabNavigation() {
    &quot;use strict&quot;;

    // Prevent multiple initializations
    if (window.__cpsslTabsInit) {
        return;
    }
    window.__cpsslTabsInit = true;

    var navigation = document.querySelector(&quot;.tls-tabs&quot;);
    if (!navigation) {
        return;
    }

    var overlayParent = findBestContainer();
    var overlay = createOverlayElement();
    var tabs = navigation.querySelectorAll(&quot;.tls-tabs__tab&quot;);
    var navigationLocked = false;

    setupOverlayParent(overlayParent);
    overlayParent.appendChild(overlay);
    attachTabClickHandlers(tabs);
    setupPageShowHandler();

    /**
     * Finds a container element to overlay.
     * Checks for common content containers and Angular app containers.
     *
     * @returns {HTMLElement} The container element or document.body as fallback
     */
    function findBestContainer() {
        return document.querySelector(&quot;.body-content&quot;)
            || document.querySelector(&quot;.content&quot;)
            || document.querySelector(&quot;#app_tlsWizard&quot;) // angularjs app
            || document.querySelector(&quot;#app_tlsStatus&quot;) // angularjs app
            || document.body;
    }

    /**
     * Creates the overlay element that covers the main content during navigation.
     *
     * @returns {HTMLElement} The overlay div element
     */
    function createOverlayElement() {
        var overlayElement = document.createElement(&quot;div&quot;);
        overlayElement.className = &quot;tls-tabs__overlay&quot;;
        overlayElement.setAttribute(&quot;aria-hidden&quot;, &quot;true&quot;);
        overlayElement.hidden = true;
        return overlayElement;
    }

    /**
     * Sets up the overlay parent element with proper positioning.
     * So absolutely positioned overlay children will be releative to this partent, not the page
     *
     * @param {HTMLElement} parent - The parent element for the overlay
     */
    function setupOverlayParent(parent) {
        if (!parent) {
            return;
        }

        parent.classList.add(&quot;tls-tabs__overlay-parent&quot;);

        if (parent !== document.body) {
            var parentStyle = window.getComputedStyle(parent);
            if (parentStyle.position === &quot;static&quot;) {
                parent.style.position = &quot;relative&quot;;
            }
        }
    }

    /**
     * Attempts to find a better container if the current one is document.body.
     * This handles cases where the container may not be available during initial load.
     */
    function ensureOverlayParent() {
        if (overlayParent !== document.body) {
            return;
        }

        var betterContainer = findBestContainer();
        if (betterContainer &amp;&amp; betterContainer !== document.body) {
            overlayParent = betterContainer;
            setupOverlayParent(overlayParent);
            overlayParent.appendChild(overlay);
        }
    }

    /**
     * Sets or clears the busy state for navigation.
     *
     * @param {boolean} isBusy - Whether the navigation is busy
     * @param {HTMLElement} [activeTab] - The tab that was clicked (optional)
     */
    function setBusy(isBusy, activeTab) {
        ensureOverlayParent();

        if (isBusy) {
            showBusyState(activeTab);
        } else {
            clearBusyState();
        }
    }

    /**
     * Shows the busy state with overlay and loading spinner.
     *
     * @param {HTMLElement} [activeTab] - The tab that was clicked
     */
    function showBusyState(activeTab) {
        overlay.hidden = false;
        overlay.classList.add(&quot;is-visible&quot;);
        overlayParent.setAttribute(&quot;aria-busy&quot;, &quot;true&quot;);
        navigation.querySelector(&quot;.tls-tabs__nav&quot;).classList.add(&quot;is-busy&quot;);

        if (activeTab) {
            activeTab.classList.add(&quot;is-loading&quot;);
            activeTab.setAttribute(&quot;aria-busy&quot;, &quot;true&quot;);
        }
    }

    /**
     * Clears the busy state if navigation is not locked.
     */
    function clearBusyState() {
        if (navigationLocked) {
            return;
        }

        overlay.classList.remove(&quot;is-visible&quot;);
        overlay.hidden = true;
        overlayParent.removeAttribute(&quot;aria-busy&quot;);
        navigation.querySelector(&quot;.tls-tabs__nav&quot;).classList.remove(&quot;is-busy&quot;);

        Array.from(tabs).forEach(tab =&gt; {
            tab.classList.remove(&quot;is-loading&quot;);
            tab.removeAttribute(&quot;aria-busy&quot;);
        });
    }

    /**
     * Handles click events on tab links.
     *
     * @param {Event} event - The click event
     */
    function handleTabClick(event) {
        var tab = event.currentTarget;
        if (!tab) {
            return;
        }

        if (tab.classList.contains(&quot;is-active&quot;)) {
            event.preventDefault();
            return;
        }

        var href = tab.getAttribute(&quot;href&quot;);
        if (!href) {
            return;
        }

        event.preventDefault();

        // Lock navigation state to prevent any code from clearing the spinner
        navigationLocked = true;
        setBusy(true, tab);

        // Use requestAnimationFrame to ensure the browser renders the loading state.
        // Frame 1: Browser applies the is-loading class and calculates styles
        // Frame 2: Browser renders the spinner and starts the animation
        // Then we navigate, keeping the animation visible during page unload
        // TODO: Not sure if absolutely necessary; maybe replace or remove this
        requestAnimationFrame(function() {
            requestAnimationFrame(function() {

                // Small delay to ensure spinner completes at least one partial rotation
                setTimeout(function() {
                    window.location.href = href;
                }, 100);
            });
        });
    }

    /**
     * Attaches click handlers to all tab links.
     *
     * @param {NodeList} tabElements - The tab link elements
     */
    function attachTabClickHandlers(tabElements) {
        Array.from(tabElements).forEach(el =&gt; {
            el.addEventListener(&quot;click&quot;, handleTabClick);
        });
    }

    /**
     * Sets up the pageshow event handler for browser back/forward navigation.
     */
    function setupPageShowHandler() {
        window.addEventListener(&quot;pageshow&quot;, function(event) {

            // event.persisted is true when page is restored from browser back/forward cache (bfcache)
            if (event.persisted) {
                navigationLocked = false;
                setBusy(false);
            }
        });
    }
})();
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fusr%2Flocal%2Fcpanel%2Fbase%2Fsharedjs'>Back to Directory</a>