diff --git a/public/src/client/topic.js b/public/src/client/topic.js index 30d58e25c6..c3fc08a76f 100644 --- a/public/src/client/topic.js +++ b/public/src/client/topic.js @@ -64,7 +64,6 @@ define('forum/topic', [ addBlockQuoteHandler(); addCodeBlockHandler(); addParentHandler(); - addDropupHandler(); addRepliesHandler(); addPostsPreviewHandler(); 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() { $('[component="topic"]').on('click', '[component="post/reply-count"]', function () { const btn = $(this); diff --git a/public/src/client/topic/postTools.js b/public/src/client/topic/postTools.js index 5cf95d9374..e8b6b17970 100644 --- a/public/src/client/topic/postTools.js +++ b/public/src/client/topic/postTools.js @@ -39,6 +39,9 @@ define('forum/topic/postTools', [ $('[component="topic"]').on('show.bs.dropdown', '.moderator-tools', function () { const $this = $(this); const dropdownMenu = $this.find('.dropdown-menu'); + const { top } = this.getBoundingClientRect(); + $this.toggleClass('dropup', top > window.innerHeight / 2); + if (dropdownMenu.attr('data-loaded')) { return; } diff --git a/public/src/client/topic/threadTools.js b/public/src/client/topic/threadTools.js index da37ddb17c..4fc648e247 100644 --- a/public/src/client/topic/threadTools.js +++ b/public/src/client/topic/threadTools.js @@ -200,31 +200,22 @@ define('forum/topic/threadTools', [ }; function renderMenu(container) { - container = container.get(0); if (!container) { return; } - - container.querySelectorAll('.thread-tools').forEach((toolsEl) => { - toolsEl.addEventListener('show.bs.dropdown', (e) => { - const dropdownMenu = e.target.nextElementSibling; - if (!dropdownMenu) { - return; - } - - socket.emit('topics.loadTopicTools', { tid: ajaxify.data.tid, cid: ajaxify.data.cid }, function (err, data) { - if (err) { - return alerts.error(err); - } - app.parseAndTranslate('partials/topic/topic-menu-list', data, function (html) { - $(dropdownMenu).html(html); - hooks.fire('action:topic.tools.load', { - element: $(dropdownMenu), - }); - }); - }); - }, { - once: true, + container.on('show.bs.dropdown', '.thread-tools', async function () { + const $this = $(this); + const dropdownMenu = $this.find('.dropdown-menu'); + const { top } = this.getBoundingClientRect(); + $this.toggleClass('dropup', top > window.innerHeight / 2); + if (dropdownMenu.attr('data-loaded')) { + return; + } + const data = await socket.emit('topics.loadTopicTools', { tid: ajaxify.data.tid, cid: ajaxify.data.cid }); + const html = await app.parseAndTranslate('partials/topic/topic-menu-list', data); + $(dropdownMenu).attr('data-loaded', 'true').html(html); + hooks.fire('action:topic.tools.load', { + element: $(dropdownMenu), }); }); }