Unique CSS class for Group pages?

Contribute UX
7

これは、非常に不恰好な実装方法です。クラスの追加は簡単です。これにより、main ID に groupname が追加されます。ここで 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>

問題は、ページを移動してもクラスが残ってしまうことです。ページを離れる際にそのクラスを削除する方法が必要です。おそらく簡単な方法があるはずですが、JavaScript がよくわからないため、私にはそれを見出すことができません。より良い方法をご提案いただければ幸いです。しかし、不恰好な方法として、スクリプトの末尾を以下のように変更する方法があります。

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

これにより、追加された可能性のあるすべての groupname クラスが削除されます。しかし、これは非常に不恰好な方法のように思え、新しいグループを追加するたびにコードを変更する必要があります。

「いいね！」 1