fix: prevent calendar context menu from going off-screen
- Added smart positioning logic to keep menu within viewport bounds - Menu now adjusts horizontal position if it would overflow right edge - Menu moves above cursor if it would overflow bottom edge - Changed position from absolute to fixed for consistent behavior - Added 10px safety margins from all edges - Menu is temporarily hidden during position calculation for smooth appearance
This commit is contained in:
parent
25004e538a
commit
5699f6db50
@ -741,10 +741,45 @@ export function initCalendarWidget(options = {}) {
|
||||
divider.classList.toggle('d-none', !perms.can_delete);
|
||||
}
|
||||
|
||||
// Позиционируем меню
|
||||
contextMenu.style.left = x + 'px';
|
||||
contextMenu.style.top = y + 'px';
|
||||
// Сначала показываем меню для получения его размеров
|
||||
contextMenu.style.display = 'block';
|
||||
contextMenu.style.visibility = 'hidden';
|
||||
|
||||
// Получаем размеры меню и окна
|
||||
const menuRect = contextMenu.getBoundingClientRect();
|
||||
const menuWidth = menuRect.width;
|
||||
const menuHeight = menuRect.height;
|
||||
const windowWidth = window.innerWidth;
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
// Корректируем позицию по горизонтали
|
||||
let finalX = x;
|
||||
if (x + menuWidth > windowWidth) {
|
||||
// Меню выходит за правый край - сдвигаем влево
|
||||
finalX = windowWidth - menuWidth - 10; // 10px отступ от края
|
||||
}
|
||||
if (finalX < 10) {
|
||||
finalX = 10; // Минимальный отступ слева
|
||||
}
|
||||
|
||||
// Корректируем позицию по вертикали
|
||||
let finalY = y;
|
||||
if (y + menuHeight > windowHeight) {
|
||||
// Меню выходит за нижний край - показываем выше курсора
|
||||
finalY = y - menuHeight;
|
||||
// Если и сверху не помещается, прижимаем к нижнему краю
|
||||
if (finalY < 10) {
|
||||
finalY = windowHeight - menuHeight - 10;
|
||||
}
|
||||
}
|
||||
if (finalY < 10) {
|
||||
finalY = 10; // Минимальный отступ сверху
|
||||
}
|
||||
|
||||
// Применяем скорректированную позицию
|
||||
contextMenu.style.left = finalX + 'px';
|
||||
contextMenu.style.top = finalY + 'px';
|
||||
contextMenu.style.visibility = 'visible';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{# Контекстное меню для действий с событиями календаря #}
|
||||
<div id="calendarContextMenu" class="calendar-context-menu" style="display: none; position: absolute; z-index: 9999;">
|
||||
<div id="calendarContextMenu" class="calendar-context-menu" style="display: none; position: fixed; z-index: 9999;">
|
||||
<div class="dropdown-menu show">
|
||||
<button class="dropdown-item" id="contextMenuView" type="button">
|
||||
<i class="bi-eye me-2"></i>Просмотреть
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user