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

NodeBB · Aug 21, 2023 · a7a266d · a7a266d
1 parent 4a84680
commit a7a266d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 54 deletions.
diff --git 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
@@ -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
@@ -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),
 			});
 		});
 	}