Unique CSS class for Group pages?

Contribute UX
7

Ecco un modo poco elegante per farlo. Aggiungere la classe è semplice. Questo aggiungerà un groupname al tuo id main, dove groupname è il nome del gruppo, ad esempio <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>

Il problema è che la classe rimane lì una volta che ti sposti altrove. Dobbiamo trovare un modo per rimuovere quella classe quando lasciamo la pagina. Probabilmente esiste un modo semplice per farlo, ma non conosco bene JavaScript, quindi non sono abbastanza abile da risolverlo da solo. Spero tu possa trovare un modo migliore per farlo, ma il metodo poco elegante consiste nel modificare la fine dello script come segue:

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

Questo rimuoverà qualsiasi classe di groupname che hai aggiunto. Ma sembra un modo davvero poco elegante per farlo, e devi modificare il codice ogni volta che aggiungi un nuovo gruppo.

1 Mi Piace