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>

문제는 페이지를 벗어나도 해당 클래스가 그대로 남아 있다는 점입니다. 페이지를 떠날 때 그 클래스를 제거하는 방법이 필요합니다. 아마도 쉬운 방법이 있을 텐데, 저는 자바스크립트에 대해 잘 알지 못해서 그걸 알아낼 만큼 영리하지는 않습니다. 여러분이 더 나은 방법을 찾아주셨으면 좋겠지만, 투박한 방법은 스크립트의 끝부분을 다음과 같이 변경하는 것입니다.

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

이렇게 하면 추가된 모든 가능한 groupname 클래스를 제거할 수 있습니다. 하지만 이 역시 매우 투박한 방법처럼 보이며, 새 그룹을 추가할 때마다 코드를 수정해야 합니다.

1개의 좋아요