monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

🎨

Browse source
This commit is contained in:
syuilo 2023-01-02 09:20:49 +09:00
parent a4a614e180
commit 8bc0aa3e7b
2 changed files with 13 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/frontend/src/components/MkModal.vue
View file

@ -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);

18
packages/frontend/src/scripts/touch.ts
View file

@ -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 });
} }