diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue index 5c7e7d641116..bc026fae6ef7 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 5251bc2e27e0..4afd0e5dd4de 100644 --- a/packages/frontend/src/scripts/touch.ts +++ b/packages/frontend/src/scripts/touch.ts @@ -1,23 +1,13 @@ -const isTouchSupported = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0; +import { deviceKind } from '@/scripts/device-kind'; -export let isTouchUsing = false; +const isTouchSupported = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0; -export let isScreenTouching = false; +export let isTouchUsing = deviceKind === 'tablet' || deviceKind === 'smartphone'; -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 }); }