diff --git a/public/language/en-GB/topic.json b/public/language/en-GB/topic.json index dcc1bfbb54..2b8321df3b 100644 --- a/public/language/en-GB/topic.json +++ b/public/language/en-GB/topic.json @@ -224,5 +224,6 @@ "no-more-next-post": "You don't have more posts in this topic", "post-quick-reply": "Quick reply", - "navigator.index": "Post %1 of %2" + "navigator.index": "Post %1 of %2", + "navigator.unread": "%1 unread" } diff --git a/public/src/client/topic.js b/public/src/client/topic.js index 40e7806aca..317155ff1c 100644 --- a/public/src/client/topic.js +++ b/public/src/client/topic.js @@ -358,14 +358,16 @@ define('forum/topic', [ ) ) { if (app.user.uid) { + ajaxify.data.bookmark = index + 1; + socket.emit('topics.bookmark', { tid: ajaxify.data.tid, index: index, }, function (err) { if (err) { + ajaxify.data.bookmark = currentBookmark; return alerts.error(err); } - ajaxify.data.bookmark = index + 1; }); } else { storage.setItem(bookmarkKey, index); diff --git a/public/src/client/topic/glance.js b/public/src/client/topic/glance.js index a8023e46a7..6700073076 100644 --- a/public/src/client/topic/glance.js +++ b/public/src/client/topic/glance.js @@ -91,15 +91,24 @@ function enableHandle() { return { handleEl }; } -function updateUnreadIndicator(index) { +async function updateUnreadIndicator() { if (ajaxify.data.postcount < ajaxify.data.bookmarkThreshold) { return; } + const index = Math.max(navigator.getIndex(), ajaxify.data.bookmark); const unreadEl = document.querySelector('[component="topic/navigator"] .unread'); - const percentage = 1 - (Math.max(index, ajaxify.data.bookmark) / ajaxify.data.postcount); - + const percentage = 1 - (index / ajaxify.data.postcount); unreadEl.style.height = `${trackHeight * percentage}px`; + + const metaEl = unreadEl.querySelector('.meta'); + const remaining = ajaxify.data.postcount - index; + if (remaining > 0) { + const text = await translate(`[[topic:navigator.unread, ${remaining}]]`); + metaEl.innerText = text; + } else { + metaEl.innerText = ''; + } } function repositionHandle(index) { @@ -111,7 +120,7 @@ function repositionHandle(index) { } updateHandleText(); - updateUnreadIndicator(index); + updateUnreadIndicator(); if (index === 0) { handleEl.style.top = 0;