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

/**
 * @example
 * Dispatch an event named &quot;breadcrumbSetCrumbs&quot; with the payload
 *
 * dispatchEvent(new CustomEvent('breadcrumbSetCrumbs', {
 *     bubbles: true,
 *     detail: {
 *       separator: &quot;&gt;&quot;,
 *       crumbs: [
 *	        {
 *              displayName: &quot;&quot;,
 *              longName: &quot;&quot;,
 *              link: &quot;&quot;
 *	        }
 *      ]
 *      }
 *   })
 *);
 *
 * Listen for event &quot;breadcrumbNavigate&quot; to pick up on user clicks of a breadcrumb element. Payload (e[&quot;detail&quot;]):
 * {
 *      link: &quot;&quot;
 * }
 */

(function() {
    &quot;use strict&quot;;

    /**
     * Breadcrumb class that handles all of logic for creating a breadcrumb DOM element
    */
    function Breadcrumb() {
        this.crumbs = [];
        this.crumbId = -1;
    }

    Breadcrumb.prototype = {

        /**
         * Adds an id to the array of breadcrumbs that was in the action
         * @param {Object[]} arrOfCrumbs Array of breadcrumbs to have an id added
        */
        setBreadcrumbId: function(arrOfCrumbs) {
            this.crumbs = [];
            this.crumbs = arrOfCrumbs.map(function(crumb, i) {
                this.crumbId++;
                return {
                    id: &quot;breadcrumbItem_&quot; + i,
                    displayName: crumb.displayName,
                    longName: crumb.longName,
                    link: crumb.link,
                    isRealHref: crumb.isRealHref,
                };
            }, this);
        },

        /**
         * Creates the breadcrumb DOM fragment.
         * @param {Object[]} arrOfCrumbs Array of breadcrumbs to have an id added
         * @param {string} separator A string of characters to be used for separating each breadcrumb
         * @throws Will throw an error when the container element is not present.
        */
        buildBreadcrumbFragment: function(arrOfCrumbs, separator) {
            var breadcrumbContainer = document.getElementById(&quot;cpanel-breadcrumbs&quot;);
            if (!breadcrumbContainer) {
                throw &quot;Missing parent container for breadcrumbs&quot;;
            }

            // Note: Temporary solution to make breadcrumbs work with bootstrap5.
            // TODO: Create a breadcrumb component that works in all technologies
            var isJupiterStyle = breadcrumbContainer.getAttribute(&quot;data-jupiter-style&quot;);

            separator = separator || &quot;/&quot;;
            this.setBreadcrumbId(arrOfCrumbs);
            var breadcrumbDOMFragment = document.createDocumentFragment();
            breadcrumbContainer.appendChild(breadcrumbDOMFragment);

            for (var i = 0; i &lt; this.crumbs.length; i++) {
                var crumbsLength = this.crumbs.length;
                var crumb = this.crumbs[i];
                var element = this.createAnElement(crumb, i, crumbsLength);

                breadcrumbDOMFragment.appendChild(element);

                // eslint-disable-next-line eqeqeq
                if (isJupiterStyle == null) {
                    var separatorElement = this.createSeparatorElement(separator);

                    // Check that there are more than 1 breadcrumb and it's not on the last element before adding a separator element
                    if (
                        crumbsLength &gt; 1 &amp;&amp; i &lt; crumbsLength - 1
                    ) {
                        breadcrumbDOMFragment.appendChild(separatorElement);
                    }
                }

            }

            breadcrumbContainer.textContent = &quot;&quot;;
            breadcrumbContainer.appendChild(breadcrumbDOMFragment);

            // Display the element in case it was hidden previously
            breadcrumbContainer.style = &quot;display: flex&quot;;
        },

        /**
         * The logic for deciding what type of element to create for the breadcrumb fragment.
         * @param {Object} crumb A specific breadcrumb JS object
         * @param {number} position The position of the breadcrumb JS object in the breadcrumb array
         * @param {number} length The length of the breadcrumb array
        */
        createAnElement: function(crumb, position, length) {

            // One item make it only a span with no link
            if (length === 1) {
                return this.createParentSpanElement(crumb);
            }

            // Make an anchor element that shows on mobile for the 2nd to last element in list
            if (position === (length - 2)) {
                return this.createParentAnchorElement(crumb);
            }

            // Make the last element a span without an anchor tag. Different from above because it hides on mobile
            if (position === (length - 1)) {
                return this.createLastSpanElement(crumb);
            }
            return this.createMiddleAnchorElement(crumb);
        },

        /**
         * Creates the seperator element for the breadcrumb fragment being created.
         * @param {string} separatorString String of characters used to separate each breadcrumb element.
        */
        createSeparatorElement: function(separatorString) {
            var separatorElement = document.createElement(&quot;span&quot;);
            separatorElement.setAttribute(&quot;class&quot;, &quot;hidden-xs breadcrumb-separator&quot;);
            separatorElement.textContent = separatorString;
            return separatorElement;
        },

        /**
         * Creates a span element without an anchor tag.
         * @param {Object} crumb A specific breadcrumb JS object
        */
        createParentSpanElement: function(crumb) {
            var span = document.createElement(&quot;span&quot;);
            span.setAttribute(&quot;id&quot;, crumb.id);
            span.setAttribute(&quot;aria-current&quot;, &quot;page&quot;);
            span.setAttribute(&quot;class&quot;, &quot;breadcrumb-item&quot;);
            span.textContent = crumb.displayName;
            return span;
        },

        /**
         * Creates a span element without an anchor tag that is hidden on a mobile view.
         * @param {Object} crumb A specific breadcrumb JS object
        */
        createLastSpanElement: function(crumb) {
            var element = this.createParentSpanElement(crumb);
            element.setAttribute(&quot;class&quot;, &quot;breadcrumb-item hidden-xs d-none d-sm-block&quot;);
            return element;
        },

        /**
         * Creates an anchor element that does not navigate and dispatches an event when clicked.
         * @param {Object} crumb A specific breadcrumb JS object
        */
        createParentAnchorElement: function(crumb) {
            var anchor = document.createElement(&quot;a&quot;);
            anchor.textContent = crumb.displayName;

            // This stops the anchor tag from doing anything and allows angular to handle routing
            var linkHref = &quot;javascript:;&quot;;
            var isRealHref = Object.hasOwn(crumb, &quot;isRealHref&quot;) &amp;&amp; crumb.isRealHref;
            if ( isRealHref ) {
                linkHref = crumb.link;
            }
            anchor.setAttribute(&quot;href&quot;, linkHref);
            anchor.setAttribute(&quot;id&quot;, crumb.id);
            anchor.setAttribute(&quot;class&quot;, &quot;breadcrumb-item&quot;);
            if ( Object.hasOwn( crumb, &quot;longName&quot; ) &amp;&amp; crumb.longName ) {
                anchor.setAttribute(&quot;title&quot;, crumb.longName);
            }
            anchor.addEventListener(&quot;click&quot;, function(e) {
                anchor.dispatchEvent(new CustomEvent(&quot;breadcrumbNavigate&quot;, {
                    bubbles: true,
                    detail: {
                        link: crumb.link,
                    },
                }));
            });
            return anchor;
        },

        /**
         * Creates an anchor element that also hides on mobile.
         * @param {Object} crumb A specific breadcrumb JS object
        */
        createMiddleAnchorElement: function(crumb) {
            var element = this.createParentAnchorElement(crumb);
            element.setAttribute(&quot;class&quot;, &quot;hidden-xs breadcrumb-item d-none d-sm-block&quot;);
            return element;
        },
    };

    function appendHelpLink(helpLink) {
        var breadcrumbContainer = document.getElementById(&quot;cpanel-breadcrumbs&quot;);
        var helpElem = document.createElement(&quot;a&quot;);
        helpElem.setAttribute( &quot;href&quot;, helpLink );
        helpElem.setAttribute( &quot;target&quot;, &quot;_blank&quot; );
        helpElem.setAttribute( &quot;style&quot;, &quot;text-decoration:none;&quot; );
        var helpIcon = document.createElement(&quot;span&quot;);
        helpIcon.setAttribute( &quot;title&quot;, &quot;Documentation&quot; ); // XXX TODO: Localize?
        helpIcon.setAttribute( &quot;class&quot;, &quot;ri-question-line&quot; );
        helpIcon.setAttribute( &quot;style&quot;, &quot;margin-left:.25rem;width:1rem;height:1rem;color:black;&quot;);
        helpElem.appendChild(helpIcon);
        breadcrumbContainer.appendChild(helpElem);
    }

    var breadcrumb = new Breadcrumb();

    /**
     * Adds event listener to global window for setting breadcrumbs
    */
    document.addEventListener(&quot;breadcrumbSetCrumbs&quot;, function(e) {
        breadcrumb.buildBreadcrumbFragment(e.detail.crumbs, e.detail.separator);

        // Add help link if provided
        if ( Object.hasOwn(e.detail, &quot;help&quot;) &amp;&amp; e.detail.help ) {
            appendHelpLink(e.detail.help);
        }
    });
})();
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fusr%2Flocal%2Fcpanel%2Fbase%2Ffrontend%2Fmeridian%2F_assets'>Back to Directory</a>