merge: keep popup elements on screen (!744)
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/744 Approved-by: dakkar <dakkar@thenautilus.net> Approved-by: Marie <github@yuugi.dev> Approved-by: Hazelnoot <acomputerdog@gmail.com>
This commit is contained in:
commit
9bf18546fc
|
@ -119,7 +119,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;
|
||||||
|
|
|
@ -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,6 +81,8 @@ 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) {
|
||||||
|
@ -106,6 +114,8 @@ 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 - 1;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue