Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-02-16 11:37:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into develop

Browse Source
This commit is contained in:
Barış Soner Uşaklı
2025-06-10 10:47:22 -04:00
parent 78ebe2988b 14e30c4bf8
commit 341b570d0d
2 changed files with 34 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/src/client/topic.js
View File

@@ -312,12 +312,27 @@ define('forum/topic', [
const postCache = {}; const postCache = {};
function destroyTooltip() { function destroyTooltip() {
clearTimeout(timeoutId); clearTimeout(timeoutId);
timeoutId = 0;
$('#post-tooltip').remove(); $('#post-tooltip').remove();
destroyed = true; destroyed = true;
} }
function onClickOutside(ev) {
// If the click is outside the tooltip, destroy it
if (!$(ev.target).closest('#post-tooltip').length) {
destroyTooltip();
}
}
$(window).one('action:ajaxify.start', destroyTooltip); $(window).one('action:ajaxify.start', destroyTooltip);
$('[component="topic"]').on('mouseenter', 'a[component="post/parent"], [component="post/content"] a, [component="topic/event"] a', async function () { $('[component="topic"]').on('mouseenter', 'a[component="post/parent"], [component="post/parent/content"] a,[component="post/content"] a, [component="topic/event"] a', async function () {
const link = $(this); const link = $(this);
link.one('mouseleave', function() {
if (timeoutId > 0) {
clearTimeout(timeoutId);
timeoutId = 0;
}
});
destroyed = false; destroyed = false;
async function renderPost(pid) { async function renderPost(pid) {
@@ -335,8 +350,13 @@ define('forum/topic', [
const postRect = postContent.offset(); const postRect = postContent.offset();
const postWidth = postContent.width(); const postWidth = postContent.width();
const linkRect = link.offset(); const linkRect = link.offset();
const { top } = link.get(0).getBoundingClientRect();
const dropup = top > window.innerHeight / 2;
tooltip.one('mouseleave', destroyTooltip);
$(window).off('click', onClickOutside).one('click', onClickOutside);
tooltip.css({ tooltip.css({
top: linkRect.top + 30, top: dropup ? linkRect.top - tooltip.outerHeight() : linkRect.top + 30,
left: postRect.left, left: postRect.left,
width: postWidth, width: postWidth,
}); });
@@ -357,16 +377,18 @@ define('forum/topic', [
} }
timeoutId = setTimeout(async () => { timeoutId = setTimeout(async () => {
timeoutId = 0;
renderPost(pid); renderPost(pid);
}, 300); }, 300);
} else if (topicMatch) { } else if (topicMatch) {
timeoutId = setTimeout(async () => { timeoutId = setTimeout(async () => {
timeoutId = 0;
const tid = topicMatch[1]; const tid = topicMatch[1];
const topicData = await api.get('/topics/' + tid, {}); const topicData = await api.get('/topics/' + tid, {});
renderPost(topicData.mainPid); renderPost(topicData.mainPid);
}, 300); }, 300);
} }
}).on('mouseleave', '[component="post"] a, [component="topic/event"] a', destroyTooltip); });
} }
function setupQuickReply() { function setupQuickReply() {

15
src/views/partials/topic/post-preview.tpl
View File

@@ -1,11 +1,14 @@
<div id="post-tooltip" class="card card-body shadow bg-body text-body z-1 position-absolute"> <div id="post-tooltip" class="card card-body shadow bg-body text-body z-1 position-absolute">
<div class="d-flex flex-column gap-2"> <div class="d-flex flex-column gap-2">
<div class="d-flex gap-1 align-items-center"> <div class="d-flex gap-2 align-items-center">
<a href="{{{ if post.user.userslug }}}{config.relative_path}/user/{post.user.userslug}{{{ else }}}#{{{ end }}}"> <div>
{buildAvatar(post.user, "24px", true, "", "user/picture")} {post.user.username} <a href="{{{ if post.user.userslug }}}{config.relative_path}/user/{post.user.userslug}{{{ else }}}#{{{ end }}}">{buildAvatar(post.user, "20px", true, "", "user/picture")}</a>
</a> <a href="{{{ if post.user.userslug }}}{config.relative_path}/user/{post.user.userslug}{{{ else }}}#{{{ end }}}">{post.user.username}</a>
<span class="timeago text-xs" title="{post.timestampISO}"></span> </div>
<div>
<span class="timeago text-xs text-secondary lh-1" style="vertical-align: middle;" title="{post.timestampISO}"></span>
</div>
</div> </div>
<div class="content">{post.content}</div> <div class="content ghost-scrollbar" style="max-height: 300px; overflow-y:auto;">{post.content}</div>
</div> </div>
</div> </div>