diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue index 5c7e7d641..bc026fae6 100644 --- a/packages/frontend/src/components/MkModal.vue +++ b/packages/frontend/src/components/MkModal.vue @@ -63,17 +63,17 @@ let transformOrigin = $ref('center'); let showing = $ref(true); let content = $ref(); const zIndex = os.claimZIndex(props.zPriority); -const type = $computed(() => { - if (props.preferType === 'auto') { - if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') { - return 'drawer'; - } else { - return props.src != null ? 'popup' : 'dialog'; - } +let type = $ref(); +console.log(props.preferType, isTouchUsing, deviceKind); +if (props.preferType === 'auto') { + if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') { + type = 'drawer'; } else { - return props.preferType!; + type = props.src != null ? 'popup' : 'dialog'; } -}); +} else { + type = props.preferType!; +} let transitionName = $ref(defaultStore.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''); let transitionDuration = $ref(defaultStore.state.animation ? 200 : 0); diff --git a/packages/frontend/src/scripts/touch.ts b/packages/frontend/src/scripts/touch.ts index 5251bc2e2..4afd0e5dd 100644 --- a/packages/frontend/src/scripts/touch.ts +++ b/packages/frontend/src/scripts/touch.ts @@ -1,23 +1,13 @@ +import { deviceKind } from '@/scripts/device-kind'; + const isTouchSupported = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0; -export let isTouchUsing = false; +export let isTouchUsing = deviceKind === 'tablet' || deviceKind === 'smartphone'; -export let isScreenTouching = false; - -if (isTouchSupported) { +if (isTouchSupported && !isTouchUsing) { window.addEventListener('touchstart', () => { // maxTouchPointsなどでの判定だけだと、「タッチ機能付きディスプレイを使っているがマウスでしか操作しない」場合にも // タッチで使っていると判定されてしまうため、実際に一度でもタッチされたらtrueにする isTouchUsing = true; - - isScreenTouching = true; - }, { passive: true }); - - window.addEventListener('touchend', () => { - // 子要素のtouchstartイベントでstopPropagation()が呼ばれると親要素に伝搬されずタッチされたと判定されないため、 - // touchendイベントでもtouchstartイベントと同様にtrueにする - isTouchUsing = true; - - isScreenTouching = false; }, { passive: true }); }