From c928941d297c5db383afcfd7df8df8a0be3d7caa Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 19 Mar 2022 22:03:53 +0900
Subject: [PATCH] fix(client): fix popup menu direction calclation
---
packages/client/src/components/ui/modal.vue | 24 ++++++++++-----------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/packages/client/src/components/ui/modal.vue b/packages/client/src/components/ui/modal.vue
index ba29575dc4..1e4159055e 100644
--- a/packages/client/src/components/ui/modal.vue
+++ b/packages/client/src/components/ui/modal.vue
@@ -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}`;