diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue index 5c7e7d641116ef3bb7f8d7dcaf6ece17d6427bb9..bc026fae6ef769d39f8fec869704edb1b0e3dba2 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<HTMLElement>(); 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<ModalTypes>(); +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 5251bc2e27e0c0b04e5576e1e2ec1275bfa62543..4afd0e5dd4defa047fdbfe018771221a64bb8972 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 }); }