Unique CSS class for Group pages?

Contribute UX
7

Voici une méthode peu élégante pour le faire. Ajouter la classe est simple. Cela ajoutera un groupname à votre identifiant main, où groupname correspond au nom du groupe, par exemple : <section id="main" class="ember-application groupname">

<script type="text/discourse-plugin" version="0.8">
        function getGroupInfo() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                if (myObj.group.name) {
                    document.getElementById("main").classList.add(myObj.group.name);
                }
            }
        };
        var url = window.location.href;
        xmlhttp.open("GET", url + ".json", true);
        xmlhttp.send();            
    }
    api.onPageChange(() =>{
        getGroupInfo();
    });
</script>

Le problème est que la classe reste présente une fois que vous naviguez ailleurs. Nous devons trouver un moyen de supprimer cette classe en quittant la page. Il existe probablement une solution simple, mais comme je ne connais pas vraiment JavaScript, je ne suis pas assez ingénieux pour la trouver. J’espère que vous pourrez trouver une meilleure méthode, mais la façon peu élégante de procéder consiste à modifier la fin du script comme suit :

    api.onPageChange(() =>{
        document.getElementById("main").classList.remove("group1");
        document.getElementById("main").classList.remove("group2");
        document.getElementById("main").classList.remove("group3");
        getGroupInfo();
    });

Cela supprimera toutes les classes de nom de groupe éventuelles que vous avez ajoutées. Mais cela semble vraiment être une méthode peu élégante, et vous devrez modifier le code à chaque fois que vous ajouterez un nouveau groupe.

1 « J'aime »