Capacité d'ajouter une section personnalisée de liens à la barre latérale

Fonctionnalité
,
14

Voici un autre exemple qui, je l’espère, sera utile à quelqu’un, basé en grande partie sur les exemples ci-dessus. Ce code n’ajoute pas une section entièrement nouvelle, mais ajoute des liens supplémentaires en bas du panneau « Plus » dans la section Communauté (mais avant les liens FAQ et À propos dans le pied de page). Il prend en charge les icônes FontAwesome (en supposant qu’elles sont ajoutées dans les paramètres du site) et les liens externes. Il gère les cas limites où la barre latérale est fermée et rouverte, et/ou la section Communauté est réduite et agrandie. Il fonctionne sur ordinateur et sur mobile.

Je ne suis pas un expert en JavaScript, je m’excuse donc pour tout code incorrect ou non optimal. Sur mon site, du moins, cela semble fonctionner comme prévu.

Il suffit de placer ce code dans l’onglet En-tête d’un composant de thème et de le personnaliser si nécessaire :

<script>
const links = [
    // Les icônes FontAwesome peuvent devoir être ajoutées dans les paramètres du site si elles n'apparaissent pas correctement
    { title: "Mon Compte", src: "/my/billing/subscriptions", icon: "file-invoice-dollar" },
    { title: "Annuaire des utilisateurs", src: "/u?asc=true&cards=yes&order=username&period=all", icon: "address-book" },
    { title: "Docs", src: "/docs", icon: "book-reader" },
    { title: "Site externe", src: "https://google.com/", icon: "globe" }
]

$(document).ready(function () {
    if (document.getElementById("toggle-hamburger-menu")) {
        // Nous sommes en vue mobile
        addToggleListener(document.getElementById("toggle-hamburger-menu"))
    } else {
        // Nous sommes en vue bureau
        addToggleListener(document.getElementsByClassName("btn-sidebar-toggle")[0])
        addHeaderListener()
        addMoreListener()
    }

    function addToggleListener(toggleEl) {
        if (toggleEl) {
            toggleEl.addEventListener("click", function () {
                // Attendre un peu que la barre latérale se charge
                setTimeout(function() {
                    let sidebar = document.getElementsByClassName("sidebar-section-header").length
                    if (sidebar) {
                        addHeaderListener()
                        addMoreListener()
                    }
                }, 100)
            })
        }
    }

    function addHeaderListener() {
        let communityHeader = document.getElementsByClassName("sidebar-section-header")[0]
        if (communityHeader) {
            communityHeader.addEventListener("click", function () {
                // Attendre un peu que la section s'agrandisse
                setTimeout(function() {
                    let communitySection = document.getElementById("sidebar-section-content-community")
                    if (communitySection) {
                        addMoreListener()
                    }
                }, 100)
            })
        }
    }
    
    function addMoreListener() {
        let buttonMore = document.getElementsByClassName("sidebar-more-section-links-details")[0]
        if (buttonMore) {
            buttonMore.addEventListener("click", addCustomLinks)
        }
    }
    
    function addCustomLinks() {
        // Attendre un peu que la navigation soit chargée
        setTimeout(function () {
            const parentEl = document.getElementsByClassName("sidebar-more-section-links-details-content-main")[0]
            let linksAlreadyAdded = document.getElementsByClassName("sidebar-section-custom-link").length
        
            if (parentEl && !linksAlreadyAdded) {
                links.filter(function (link) {
                    let linkDiv = document.createElement("li")
                    let linkTitleTrim = link.title.replace(/\s+/g, '')
                    linkDiv.className = "sidebar-section-link-wrapper sidebar-section-custom-link"
                    linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                            <span class="sidebar-section-link-prefix icon" id="link_${linkTitleTrim}"></span>
                            <span class="sidebar-section-link-content-text"> ${link.title} </span>
                        </a>
                      `
                    parentEl.append(linkDiv)
                    
                    let linkIcon = document.getElementById("link_" + linkTitleTrim)
                    if (linkIcon && link.icon) {
                        linkIcon.innerHTML = `<svg viewBox="0 0 640 512" class="fa d-icon svg-icon prefix-icon svg-string d-icon-${link.icon}" xmlns="http://www.w3.org/2000/svg">
                                <use xlink:href="#${link.icon}"></use>
                            </svg>
                        `
                    }
                })
            }
        }, 100)
    }
})
</script>
4 « J'aime »