oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

tweak client

Browse source
This commit is contained in:
syuilo 2022-03-06 23:21:19 +09:00
parent 69a801b472
commit 0f736e7e9d
3 changed files with 36 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -30,7 +30,7 @@ type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer';
const props = withDefaults(defineProps<{
manualShowing?: boolean | null;
srcCenter?: boolean;
anchor?: { x: string; y: string; };
src?: HTMLElement;
preferType?: ModalTypes | 'auto';
zPriority?: 'low' | 'middle' | 'high';
@ -39,6 +39,7 @@ const props = withDefaults(defineProps<{
}>(), {
manualShowing: null,
src: null,
anchor: { x: 'center', y: 'bottom' },
preferType: 'auto',
zPriority: 'low',
noOverlap: true,
@ -113,16 +114,23 @@ const align = () => {
let left;
let top;
if (props.srcCenter) {
const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2);
const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + (props.src.offsetHeight / 2);
left = (x - (width / 2));
const x = rect.left + (fixed.value ? 0 : window.pageXOffset);
const y = rect.top + (fixed.value ? 0 : window.pageYOffset);
if (props.anchor.x === 'center') {
left = x + (props.src.offsetWidth / 2) - (width / 2);
} else if (props.anchor.x === 'left') {
// TODO
} else if (props.anchor.x === 'right') {
left = x + props.src.offsetWidth;
}
if (props.anchor.y === 'center') {
top = (y - (height / 2));
} else {
const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2);
const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + props.src.offsetHeight;
left = (x - (width / 2));
top = y;
} else if (props.anchor.y === 'top') {
// TODO
} else if (props.anchor.y === 'bottom') {
top = y + props.src.offsetHeight;
}
if (fixed.value) {
@ -136,7 +144,7 @@ const align = () => {
// 画面から縦にはみ出る場合
if (top + height > (window.innerHeight - MARGIN)) {
if (props.noOverlap) {
if (props.noOverlap && props.anchor.x === 'center') {
if (underSpace >= (upperSpace / 3)) {
maxHeight.value = underSpace;
} else {
@ -160,7 +168,7 @@ const align = () => {
// 画面から縦にはみ出る場合
if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) {
if (props.noOverlap) {
if (props.noOverlap && props.anchor.x === 'center') {
if (underSpace >= (upperSpace / 3)) {
maxHeight.value = underSpace;
} else {
@ -183,14 +191,23 @@ const align = () => {
left = 0;
}
let transformOriginX = 'center';
let transformOriginY = 'center';
if (top > rect.top + (fixed.value ? 0 : window.pageYOffset)) {
transformOrigin.value = 'center top';
transformOriginY = 'top';
} else if ((top + height) <= rect.top + (fixed.value ? 0 : window.pageYOffset)) {
transformOrigin.value = 'center bottom';
} else {
transformOrigin.value = 'center';
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';
}
transformOrigin.value = `${transformOriginX} ${transformOriginY}`;
popover.style.left = left + 'px';
popover.style.top = top + 'px';
};