Server-side rendering of topic events (#9733)

* style: reformat list of helpers exported

* refactor: move topic events partial into a helper, invoke helper in topic.tpl (see persona), update how events are added to the DOM via addTopicEvents

closes #9731

* style: lint
This commit is contained in:
Julian Lam
2021-08-24 11:56:04 -04:00
committed by GitHub
parent 0743554dd4
commit 152f194aee
2 changed files with 65 additions and 65 deletions

View File

@@ -10,7 +10,8 @@ define('forum/topic/posts', [
'components',
'translator',
'hooks',
], function (pagination, infinitescroll, postTools, images, navigator, components, translator, hooks) {
'helpers',
], function (pagination, infinitescroll, postTools, images, navigator, components, translator, hooks, helpers) {
var Posts = { };
Posts.onNewPost = function (data) {
@@ -281,56 +282,13 @@ define('forum/topic/posts', [
posts.find('[component="post/content"] img:not(.not-responsive)').addClass('img-responsive');
Posts.addBlockquoteEllipses(posts);
hidePostToolsForDeletedPosts(posts);
addNecroPostMessage(Posts.addTopicEvents);
addNecroPostMessage();
};
Posts.addTopicEvents = function (events) {
events = events || ajaxify.data.events;
if (!events || !Array.isArray(events)) {
return;
}
if (config.topicPostSort !== 'newest_to_oldest' && config.topicPostSort !== 'oldest_to_newest') {
return;
}
// Filter out events already in DOM
const eventIdsInDOM = Array.from(document.querySelectorAll('[component="topic/event"]')).map(el => parseInt(el.getAttribute('data-topic-event-id'), 10));
events = events.filter(event => !eventIdsInDOM.includes(event.id));
let postTimestamps = ajaxify.data.posts.map(post => post.timestamp);
const reverse = config.topicPostSort === 'newest_to_oldest';
events = events.slice(0);
if (reverse) {
events.reverse();
postTimestamps = postTimestamps.slice(1); // OP is always at top, so exclude from calculations
}
Promise.all(events.map((event) => {
const beforeIdx = postTimestamps.findIndex(
timestamp => (reverse ? (timestamp < event.timestamp) : (timestamp > event.timestamp))
);
let postEl;
if (beforeIdx > -1) {
postEl = document.querySelector(`[component="post"][data-pid="${ajaxify.data.posts[beforeIdx + (reverse ? 1 : 0)].pid}"]`);
}
return new Promise((resolve) => {
event.isAdminOrMod = ajaxify.data.privileges.isAdminOrMod;
app.parseAndTranslate('partials/topic/event', event, function (html) {
html = html.get(0);
if (postEl) {
document.querySelector('[component="topic"]').insertBefore(html, postEl);
} else {
document.querySelector('[component="topic"]').append(html);
}
resolve();
});
});
})).then(() => {
const html = helpers.renderEvents.call(ajaxify.data, events);
translator.translate(html, (translated) => {
document.querySelector('[component="topic"]').insertAdjacentHTML('beforeend', translated);
$('[component="topic/event"] .timeago').timeago();
});
};