Unique CSS class for Group pages?

Contribute UX
7

Aquí hay una forma poco elegante de hacerlo. Añadir la clase es sencillo. Esto agregará un groupname a tu id main, donde groupname es el nombre del grupo, por ejemplo: <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>

El problema es que la clase permanece ahí una vez que navegas a otra página. Necesitamos una forma de eliminar esa clase al salir de la página. Probablemente haya una manera sencilla de hacerlo, pero como no sé mucho de JavaScript, no tengo la suficiente astucia para resolverlo. Espero que puedas encontrar una mejor forma de hacerlo, pero la forma poco elegante sería cambiar el final del script así:

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

Esto eliminará cualquier clase de nombre de grupo que hayas añadido. Pero parece una forma realmente poco elegante de hacerlo, y tendrás que modificar el código cada vez que añadas un nuevo grupo.

1 me gusta