Fix navbar + menu flashing on page load (#31281)

Fixes
https://github.com/go-gitea/gitea/pull/31273#issuecomment-2153771331.
Same method as used in https://github.com/go-gitea/gitea/pull/30215. All
left-opening dropdowns need to use it method.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2024-06-12 16:58:03 +02:00 committed by GitHub
parent 45dbeb5600
commit 21ba5ca03b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 46 additions and 28 deletions

View file

@ -94,6 +94,22 @@ function delegateOne($dropdown) {
updateSelectionLabel($label[0]);
return $label;
});
const oldSet = dropdownCall('internal', 'set');
const oldSetDirection = oldSet.direction;
oldSet.direction = function($menu) {
oldSetDirection.call(this, $menu);
const classNames = dropdownCall('setting', 'className');
$menu = $menu || $dropdown.find('> .menu');
const elMenu = $menu[0];
// detect whether the menu is outside the viewport, and adjust the position
// there is a bug in fomantic's builtin `direction` function, in some cases (when the menu width is only a little larger) it wrongly opens the menu at right and triggers the scrollbar.
elMenu.classList.add(classNames.loading);
if (elMenu.getBoundingClientRect().right > document.documentElement.clientWidth) {
elMenu.classList.add(classNames.leftward);
}
elMenu.classList.remove(classNames.loading);
};
}
// for static dropdown elements (generated by server-side template), prepare them with necessary aria attributes