Unique CSS class for Group pages?

Contribute UX
7

Вот неуклюжий способ сделать это. Добавление класса — дело простое. Это добавит groupname к вашему идентификатору main, где groupname — это имя группы, например: <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>

Проблема в том, что класс остаётся, даже когда вы переходите на другую страницу. Нам нужен способ удалять этот класс при выходе со страницы. Вероятно, есть простой способ сделать это, но я не очень хорошо знаю JS, поэтому не могу сообразить, как. Надеюсь, вы сможете найти более элегантное решение, но неуклюжий способ — изменить конец скрипта следующим образом:

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

Это удалит любой возможный класс с именем группы, который вы добавили. Но это кажется действительно неуклюжим решением, и вам придётся менять код каждый раз, когда вы добавляете новую группу.

1 лайк