皆様、こんにちは。
「topic-timeline-bookmark」というウィジェットを作成しました。これは、topic-timeline ウィジェットの後に、トピックレベルのブックマークボタンを表示するものです。
現在、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>
