문제는 getGroupInfo() 에서 api.onPageChange(() =>{ 로 변수를 전달하는 방법을 찾지 못했다는 것이었습니다.
아래 코드는 쿠키를 사용하여 이 문제를 해결하며, 사용자가 속한 모든 그룹에 대해 div ID main 에 현재 그룹 이름인 "name-of-current-group" 클래스를 자동으로 추가하고 제거합니다.
<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);
var groupName = myObj.group.name;
if (groupName) {
document.getElementById("main").classList.add(groupName);
$.cookie('groupCookie', groupName, { expires: 7, path: '/' });
}
}
};
var url = window.location.href;
xmlhttp.open("GET", url + ".json", true);
xmlhttp.send();
}
api.onPageChange(() =>{
var group = $.cookie('groupCookie');
document.getElementById("main").classList.remove(group);
$.cookie('groupCookie', 'false', { expires: -1, path: '/' })
getGroupInfo();
});
</script>