puniko/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix(client): fix popup menu direction calclation

Browse source
This commit is contained in:
syuilo 2022-03-19 22:03:53 +09:00
parent 544b5ba838
commit c928941d29
1 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
packages/client/src/components/ui/modal.vue
View file

@ -39,7 +39,7 @@ const props = withDefaults(defineProps<{
}>(), {
manualShowing: null,
src: null,
anchor: { x: 'center', y: 'bottom' },
anchor: () => ({ x: 'center', y: 'bottom' }),
preferType: 'auto',
zPriority: 'low',
noOverlap: true,
@ -106,7 +106,7 @@ const align = () => {
const popover = content.value!;
if (popover == null) return;
const rect = props.src.getBoundingClientRect();
const srcRect = props.src.getBoundingClientRect();
const width = popover.offsetWidth;
const height = popover.offsetHeight;
@ -114,8 +114,8 @@ const align = () => {
let left;
let top;
const x = rect.left + (fixed.value ? 0 : window.pageXOffset);
const y = rect.top + (fixed.value ? 0 : window.pageYOffset);
const x = srcRect.left + (fixed.value ? 0 : window.pageXOffset);
const y = srcRect.top + (fixed.value ? 0 : window.pageYOffset);
if (props.anchor.x === 'center') {
left = x + (props.src.offsetWidth / 2) - (width / 2);
@ -140,7 +140,7 @@ const align = () => {
}
const underSpace = (window.innerHeight - MARGIN) - top;
const upperSpace = (rect.top - MARGIN);
const upperSpace = (srcRect.top - MARGIN);
// 画面から縦にはみ出る場合
if (top + height > (window.innerHeight - MARGIN)) {
@ -164,7 +164,7 @@ const align = () => {
}
const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
const upperSpace = (rect.top - MARGIN);
const upperSpace = (srcRect.top - MARGIN);
// 画面から縦にはみ出る場合
if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) {
@ -194,16 +194,16 @@ const align = () => {
let transformOriginX = 'center';
let transformOriginY = 'center';
if (top > rect.top + (fixed.value ? 0 : window.pageYOffset)) {
if (top >= srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.pageYOffset)) {
transformOriginY = 'top';
} else if ((top + height) <= rect.top + (fixed.value ? 0 : window.pageYOffset)) {
} else if ((top + height) <= srcRect.top + (fixed.value ? 0 : window.pageYOffset)) {
transformOriginY = 'bottom';
}
if (left > rect.left + (fixed.value ? 0 : window.pageXOffset)) {
transformOriginY = 'left';
} else if ((left + width) <= rect.left + (fixed.value ? 0 : window.pageXOffset)) {
transformOriginY = 'right';
if (left >= srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.pageXOffset)) {
transformOriginX = 'left';
} else if ((left + width) <= srcRect.left + (fixed.value ? 0 : window.pageXOffset)) {
transformOriginX = 'right';
}
transformOrigin.value = `${transformOriginX} ${transformOriginY}`;