🎨
This commit is contained in:
		
							parent
							
								
									a4a614e180
								
							
						
					
					
						commit
						8bc0aa3e7b
					
				
					 2 changed files with 13 additions and 23 deletions
				
			
		|  | @ -63,17 +63,17 @@ let transformOrigin = $ref('center'); | ||||||
| let showing = $ref(true); | let showing = $ref(true); | ||||||
| let content = $ref<HTMLElement>(); | let content = $ref<HTMLElement>(); | ||||||
| const zIndex = os.claimZIndex(props.zPriority); | const zIndex = os.claimZIndex(props.zPriority); | ||||||
| const type = $computed(() => { | let type = $ref<ModalTypes>(); | ||||||
|  | console.log(props.preferType, isTouchUsing, deviceKind); | ||||||
| if (props.preferType === 'auto') { | if (props.preferType === 'auto') { | ||||||
| 	if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') { | 	if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') { | ||||||
| 			return 'drawer'; | 		type = 'drawer'; | ||||||
| 	} else { | 	} else { | ||||||
| 			return props.src != null ? 'popup' : 'dialog'; | 		type = props.src != null ? 'popup' : 'dialog'; | ||||||
| 	} | 	} | ||||||
| } else { | } else { | ||||||
| 		return props.preferType!; | 	type = props.preferType!; | ||||||
| } | } | ||||||
| }); |  | ||||||
| let transitionName = $ref(defaultStore.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''); | let transitionName = $ref(defaultStore.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''); | ||||||
| let transitionDuration = $ref(defaultStore.state.animation ? 200 : 0); | let transitionDuration = $ref(defaultStore.state.animation ? 200 : 0); | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -1,23 +1,13 @@ | ||||||
|  | import { deviceKind } from '@/scripts/device-kind'; | ||||||
|  | 
 | ||||||
| const isTouchSupported = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0; | 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 && !isTouchUsing) { | ||||||
| 
 |  | ||||||
| if (isTouchSupported) { |  | ||||||
| 	window.addEventListener('touchstart', () => { | 	window.addEventListener('touchstart', () => { | ||||||
| 		// maxTouchPointsなどでの判定だけだと、「タッチ機能付きディスプレイを使っているがマウスでしか操作しない」場合にも
 | 		// maxTouchPointsなどでの判定だけだと、「タッチ機能付きディスプレイを使っているがマウスでしか操作しない」場合にも
 | ||||||
| 		// タッチで使っていると判定されてしまうため、実際に一度でもタッチされたらtrueにする
 | 		// タッチで使っていると判定されてしまうため、実際に一度でもタッチされたらtrueにする
 | ||||||
| 		isTouchUsing = true; | 		isTouchUsing = true; | ||||||
| 
 |  | ||||||
| 		isScreenTouching = true; |  | ||||||
| 	}, { passive: true }); |  | ||||||
| 	 |  | ||||||
| 	window.addEventListener('touchend', () => { |  | ||||||
| 		// 子要素のtouchstartイベントでstopPropagation()が呼ばれると親要素に伝搬されずタッチされたと判定されないため、
 |  | ||||||
| 		// touchendイベントでもtouchstartイベントと同様にtrueにする
 |  | ||||||
| 		isTouchUsing = true; |  | ||||||
| 
 |  | ||||||
| 		isScreenTouching = false; |  | ||||||
| 	}, { passive: true }); | 	}, { passive: true }); | ||||||
| } | } | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue