안녕하세요,
우리는 topic-timeline 위젯 뒤에 토픽 수준의 북마크 버튼을 표시하는 topic-timeline-bookmark 위젯을 만들었습니다.
현재 topic-timeline 북마크 버튼을 클릭하면 북마크를 설정하는 모달 박스가 표시되고, 북마크를 저장하면 first-post-menu 버튼 아래 및 topic-footer-button의 북마크 버튼은 업데이트되지만, topic-timeline 위젯이 새로고침될 때까지(즉, 스크롤할 때까지) 위젯 자체는 업데이트되지 않으며, 그 반대도 마찬가지입니다.
first-post-menu
topic-footer-button
북마크가 설정/해제될 때마다 post-stream 위젯이 새로고침되어 post-menu와 topic-footer-button의 북마크 버튼이 동기화되어 작동한다는 것을 발견했습니다.
그렇다면 북마크가 설정/해제되거나 post-stream 위젯이 새로고침될 때마다 제 topic-timeline-bookmark 위젯을 어떻게 새로고침할 수 있을까요? 제 코드는 다음과 같습니다:
<script type="text/discourse-plugin" version="0.8">
const { h } = require('virtual-dom');
const { getOwner } = require("discourse-common/lib/get-owner");
const topicController = getOwner(this).lookup("controller:topic");
api.createWidget("topic-timeline-bookmark", {
tagName: 'div.discourse-bookmark-button-wrapper',
buildKey: () => `topic-timeline-bookmark`,
toggleBookmark() {
topicController.send('toggleBookmark');
},
html(attrs, state) {
let contents = [];
const user = api.getCurrentUser();
if (user) {
let tooltip = 'bookmarked.help.bookmark';
let label = 'bookmarked.title';
let buttonClass = 'btn btn-default bookmark';
let icon = "bookmark";
let bookmarkedPosts = topicController.model.bookmarked_posts;
let bookmarkCount = 0;
if(bookmarkedPosts && bookmarkedPosts.length > 0){
bookmarkCount = bookmarkedPosts.length;
//Icon
if (bookmarkedPosts.some((bookmark) => bookmark.reminder_at))
icon = "discourse-bookmark-clock";
else
icon = "bookmark";
//Label
if (bookmarkCount === 0)
label = "bookmarked.title";
else if (bookmarkCount === 1)
label = "bookmarked.edit_bookmark";
else
label = "bookmarked.clear_bookmarks";
//Tooltip
if (bookmarkedPosts.length === 1)
tooltip = 'bookmarked.help.edit_bookmark';
else if (bookmarkedPosts.find((x) => x.reminder_at))
tooltip = 'bookmarked.help.unbookmark_with_reminder';
//Append CSS class if bookmark is set
if (bookmarkCount > 0) { buttonClass += ' bookmarked' }
}
contents.push(
this.attach('button', {
action: 'toggleBookmark',
title: tooltip,
label: label,
icon: icon,
className: buttonClass
})
);
}
return contents;
},
});
api.decorateWidget('topic-timeline:after', function(helper) {
return helper.attach('topic-timeline-bookmark');
});
</script>
