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