Unique CSS class for Group pages?

Contribute UX
7

Aqui está uma maneira feia de fazer isso. Adicionar a classe é fácil. Isso adicionará um groupname ao seu id main, onde groupname = qualquer que seja o nome do grupo, ou seja, <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>

O problema é que a classe permanece lá mesmo depois que você navega para outro lugar. Precisamos de uma maneira de remover essa classe ao sair da página. Provavelmente existe uma maneira fácil de fazer isso, mas como não sei muito de JS, não sou inteligente o suficiente para descobrir. Espero que você consiga encontrar uma maneira melhor de fazer isso, mas a maneira feia de fazer é alterar o final do script para:

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

Isso removerá qualquer classe de groupname que você tenha adicionado. Mas parece uma maneira realmente feia de fazer isso, e você terá que alterar o código sempre que adicionar um novo grupo.

1 curtida