Unique CSS class for Group pages?

Contribute UX
7

Hier ist eine hässliche Möglichkeit, dies zu tun. Das Hinzufügen der Klasse ist einfach. Dies fügt deinem main-ID einen groupname hinzu, wobei groupname der Name der Gruppe ist, also <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>

Das Problem ist, dass die Klasse bleibt, sobald du die Seite verlässt. Wir benötigen eine Möglichkeit, diese Klasse beim Verlassen der Seite zu entfernen. Es gibt wahrscheinlich einen einfachen Weg, dies zu tun, aber ich kenne JavaScript nicht wirklich gut genug, um darauf zu kommen. Hoffentlich kannst du einen besseren Weg finden, dies zu tun, aber die hässliche Methode besteht darin, das Ende des Skripts wie folgt zu ändern:

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

Dies entfernt alle möglichen groupname-Klassen, die du hinzugefügt hast. Aber es scheint wirklich eine hässliche Methode zu sein, und du musst den Code jedes Mal ändern, wenn du eine neue Gruppe hinzufügst.

1 „Gefällt mir“