사용자 정의 사용자 필드에 포함된 키워드가 있는 게시글을 차단하는 테마 컴포넌트를 개발 중입니다. 데스크톱 뷰에서 최신 또는 인기 목록에 표시될 때 답글과 주제(topic)를 모두 숨기는 기능은 정상적으로 작동합니다. 하지만 앱이나 모바일에서 보게 되면 주제가 차단되었다는 알림은 추가되지만, 콘텐츠에는 차단 클래스가 적용되지 않습니다. 주제 안의 답글을 차단하는 기능은 모바일이나 앱에서 모두 정상적으로 작동합니다.
components를 살펴봤는데 모바일용으로는 별도의 .hbs가 사용되지 않는 것으로 보이는데, 제가 놓치고 있는 다른 부분이 있을까요?
const discourseComputed = require("discourse-common/utils/decorators").default;
function addIgnoredTopicClass() {
if (currentUser) {
api.container.lookup('store:main').find('user', currentUser.username).then((user) => {
const blocklist = user.user_fields[1];
const case_sensitive = user.user_fields[2];
const whole_words = user.user_fields[3];
const blocked = blocklist.split(",").map(function(item) {
if (case_sensitive) {
return item.trim();
} else {
return item.trim().toLowerCase();
}
});
let classList = this._super(...arguments);
let elem = document.querySelectorAll("[data-topic-id='" + this.topic.id.toString() + "']")[0];
console.log(elem);
const title = (case_sensitive) ? this.topic.fancy_title : this.topic.fancy_title.toLowerCase();
const excerpt = (case_sensitive) ? this.topic.excerpt : this.topic.excerpt.toLowerCase();
let result = "";
for (let index = 0; index < blocked.length; ++index) {
let pattern = (whole_words) ? new RegExp('(?:\\b|\\s|^)' + blocked[index] + '(?:\\b|\\s|$)') : new RegExp(blocked[index]);
// console.log(pattern)
if (pattern.test(title)) {
classList += "blocker-blocked"
const found = blocked.filter(text => title.includes(text));
if (found.length >= 2) {
const last = found.pop();
result = found.join(', ') + ' and ' + last;
} else {
result = found.join(', ');
}
const newNode = document.createElement("a");
const textNode = document.createTextNode("Blocked for containing " + result + ".");
newNode.classList.add("block-notice")
newNode.appendChild(textNode);
newNode.onclick = function() { showComment(this); };
elem.children[0].insertBefore(newNode, elem.children[0].children[0]);
for (let index = 0; index < elem.children.length; ++index) {
if (elem.children[index].classList.contains('main-link')) {
elem.children[index].classList.add("blocker-blocked");
}
}
newNode.classList.remove("blocker-blocked");
}
}
// console.log(classList);
return classList;
});
}
}
api.modifyClass("component:topic-list-item", {
@discourseComputed()
unboundClassNames() {
return addIgnoredTopicClass.call(this);
}
});
api.modifyClass("component:latest-topic-list-item", {
@discourseComputed()
unboundClassNames() {
return addIgnoredTopicClass.call(this);
}
});