Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-10-26 16:46:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: closes #11937, add dropup early based on position on screen

Browse Source
This commit is contained in:
Barış Soner Uşaklı
2023-08-21 19:51:50 -04:00
parent 4a846803e8
commit a7a266d72c
3 changed files with 16 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -64,7 +64,6 @@ define('forum/topic', [
addBlockQuoteHandler(); addBlockQuoteHandler();
addCodeBlockHandler(); addCodeBlockHandler();
addParentHandler(); addParentHandler();
addDropupHandler();
addRepliesHandler(); addRepliesHandler();
addPostsPreviewHandler(); addPostsPreviewHandler();
setupQuickReply(); setupQuickReply();
@@ -278,37 +277,6 @@ define('forum/topic', [
}); });
} }
Topic.applyDropup = function () {
const containerRect = this.getBoundingClientRect();
const dropdownEl = this.querySelector('.dropdown-menu');
const dropdownStyle = window.getComputedStyle(dropdownEl);
const dropdownHeight = dropdownStyle.getPropertyValue('height').slice(0, -2);
const offset = document.documentElement.style.getPropertyValue('--panel-offset').slice(0, -2);
// Toggler position (including its height, since the menu spawns above it),
// minus the dropdown's height and navbar offset
const dropUp = (containerRect.top + containerRect.height - dropdownHeight - offset) > 0;
this.classList.toggle('dropup', dropUp);
};
function addDropupHandler() {
// Locate all dropdowns
const topicEl = components.get('topic');
const target = topicEl.find('.dropdown-menu').parent();
$(target).on('shown.bs.dropdown', function () {
const dropdownEl = this.querySelector('.dropdown-menu');
if (dropdownEl.innerHTML) {
Topic.applyDropup.call(this);
}
});
hooks.onPage('action:topic.tools.load', ({ element }) => {
Topic.applyDropup.call(element.get(0).parentNode);
});
hooks.onPage('action:post.tools.load', ({ element }) => {
Topic.applyDropup.call(element.get(0).parentNode);
});
}
function addRepliesHandler() { function addRepliesHandler() {
$('[component="topic"]').on('click', '[component="post/reply-count"]', function () { $('[component="topic"]').on('click', '[component="post/reply-count"]', function () {
const btn = $(this); const btn = $(this);

3
public/src/client/topic/postTools.js
View File

@@ -39,6 +39,9 @@ define('forum/topic/postTools', [
$('[component="topic"]').on('show.bs.dropdown', '.moderator-tools', function () { $('[component="topic"]').on('show.bs.dropdown', '.moderator-tools', function () {
const $this = $(this); const $this = $(this);
const dropdownMenu = $this.find('.dropdown-menu'); const dropdownMenu = $this.find('.dropdown-menu');
const { top } = this.getBoundingClientRect();
$this.toggleClass('dropup', top > window.innerHeight / 2);
if (dropdownMenu.attr('data-loaded')) { if (dropdownMenu.attr('data-loaded')) {
return; return;
} }

35
public/src/client/topic/threadTools.js
View File

@@ -200,31 +200,22 @@ define('forum/topic/threadTools', [
}; };
function renderMenu(container) { function renderMenu(container) {
container = container.get(0);
if (!container) { if (!container) {
return; return;
} }
container.on('show.bs.dropdown', '.thread-tools', async function () {
container.querySelectorAll('.thread-tools').forEach((toolsEl) => { const $this = $(this);
toolsEl.addEventListener('show.bs.dropdown', (e) => { const dropdownMenu = $this.find('.dropdown-menu');
const dropdownMenu = e.target.nextElementSibling; const { top } = this.getBoundingClientRect();
if (!dropdownMenu) { $this.toggleClass('dropup', top > window.innerHeight / 2);
return; if (dropdownMenu.attr('data-loaded')) {
} return;
}
socket.emit('topics.loadTopicTools', { tid: ajaxify.data.tid, cid: ajaxify.data.cid }, function (err, data) { const data = await socket.emit('topics.loadTopicTools', { tid: ajaxify.data.tid, cid: ajaxify.data.cid });
if (err) { const html = await app.parseAndTranslate('partials/topic/topic-menu-list', data);
return alerts.error(err); $(dropdownMenu).attr('data-loaded', 'true').html(html);
} hooks.fire('action:topic.tools.load', {
app.parseAndTranslate('partials/topic/topic-menu-list', data, function (html) { element: $(dropdownMenu),
$(dropdownMenu).html(html);
hooks.fire('action:topic.tools.load', {
element: $(dropdownMenu),
});
});
});
}, {
once: true,
}); });
}); });
} }