yume/paricafe
1
0
Fork 0
mirror of https://github.com/paricafe/misskey.git synced 2025-01-29 15:10:16 -06:00
Code Issues Projects Releases Packages Wiki Activity

keep popup elements on screen

Browse source
This commit is contained in:
fly_mc 2024-11-26 21:20:12 +08:00
parent d1965bf9a3
commit a4cb7acfa8
2 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/frontend/src/components/MkUserPopup.vue
View file

@ -107,7 +107,7 @@ onMounted(() => {
} }
const rect = props.source.getBoundingClientRect(); const rect = props.source.getBoundingClientRect();
const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.scrollX; const x = Math.max(1, ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.scrollX);
const y = rect.top + props.source.offsetHeight + window.scrollY; const y = rect.top + props.source.offsetHeight + window.scrollY;
top.value = y; top.value = y;

18
packages/frontend/src/scripts/popup-position.ts
View file

@ -15,6 +15,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
const contentWidth = el.offsetWidth; const contentWidth = el.offsetWidth;
const contentHeight = el.offsetHeight; const contentHeight = el.offsetHeight;
const HORIZONTAL_MARGIN = 1;
let rect: DOMRect; let rect: DOMRect;
if (props.anchorElement) { if (props.anchorElement) {
@ -36,9 +38,11 @@ export function calcPopupPosition(el: HTMLElement, props: {
left -= (el.offsetWidth / 2); left -= (el.offsetWidth / 2);
if (left + contentWidth - window.scrollX > window.innerWidth) { if (left + contentWidth - window.scrollX > window.innerWidth) {
left = window.innerWidth - contentWidth + window.scrollX - 1; left = window.innerWidth - contentWidth + window.scrollX - HORIZONTAL_MARGIN;
} }
left = Math.max(HORIZONTAL_MARGIN, left);
return [left, top]; return [left, top];
}; };
@ -57,9 +61,11 @@ export function calcPopupPosition(el: HTMLElement, props: {
left -= (el.offsetWidth / 2); left -= (el.offsetWidth / 2);
if (left + contentWidth - window.scrollX > window.innerWidth) { if (left + contentWidth - window.scrollX > window.innerWidth) {
left = window.innerWidth - contentWidth + window.scrollX - 1; left = window.innerWidth - contentWidth + window.scrollX - HORIZONTAL_MARGIN;
} }
left = Math.max(HORIZONTAL_MARGIN, left);
return [left, top]; return [left, top];
}; };
@ -75,10 +81,12 @@ export function calcPopupPosition(el: HTMLElement, props: {
top = props.y; top = props.y;
} }
left = Math.max(HORIZONTAL_MARGIN, left);
top -= (el.offsetHeight / 2); top -= (el.offsetHeight / 2);
if (top + contentHeight - window.scrollY > window.innerHeight) { if (top + contentHeight - window.scrollY > window.innerHeight) {
top = window.innerHeight - contentHeight + window.scrollY - 1; top = window.innerHeight - contentHeight + window.scrollY - HORIZONTAL_MARGIN;
} }
return [left, top]; return [left, top];
@ -106,8 +114,10 @@ export function calcPopupPosition(el: HTMLElement, props: {
top -= (el.offsetHeight / 2); top -= (el.offsetHeight / 2);
} }
left = Math.max(HORIZONTAL_MARGIN, left);
if (top + contentHeight - window.scrollY > window.innerHeight) { if (top + contentHeight - window.scrollY > window.innerHeight) {
top = window.innerHeight - contentHeight + window.scrollY - 1; top = window.innerHeight - contentHeight + window.scrollY - HORIZONTAL_MARGIN;
} }
return [left, top]; return [left, top];