HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Address comments

Browse source
This commit is contained in:
eana 2024-04-01 15:08:01 +00:00
parent 0666a78dcf
commit a5cd3c8b70
2 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/client/src/components/MkPullToRefresh.vue
View file

@ -16,8 +16,7 @@
/> />
<i <i
v-else v-else
class="ti ti-arrow-bar-to-down" :class="[$style.icon, icon('ph-arrow-down'), { [$style.refresh]: pullEnded }]"
:class="[$style.icon, { [$style.refresh]: pullEnded }]"
></i> ></i>
<div :class="$style.text"> <div :class="$style.text">
<template v-if="pullEnded">{{ <template v-if="pullEnded">{{
@ -39,12 +38,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, onUnmounted, ref, shallowRef } from "vue"; import { onMounted, onUnmounted, ref, shallowRef } from "vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
import { getScrollContainer } from "@/scripts/scroll"; import { getScrollContainer } from "@/scripts/scroll";
import { isDuringHorizontalSwipe } from "@/scripts/touch"; import { isDuringHorizontalSwipe } from "@/scripts/touch";
import icon from "@/scripts/icon";
const SCROLL_STOP = 10; const SCROLL_STOP = 10;
const MAX_PULL_DISTANCE = Infinity; const MAX_PULL_DISTANCE = Infinity;
const FIRE_THRESHOLD = 230; const FIRE_THRESHOLD = defaultStore.state.pullToRefreshThreshold;
const RELEASE_TRANSITION_DURATION = 200; const RELEASE_TRANSITION_DURATION = 200;
const PULL_BRAKE_BASE = 1.5; const PULL_BRAKE_BASE = 1.5;
const PULL_BRAKE_FACTOR = 170; const PULL_BRAKE_FACTOR = 170;
@ -197,7 +198,7 @@ function onScrollContainerScroll() {
function registerEventListenersForReadyToPull() { function registerEventListenersForReadyToPull() {
if (rootEl.value == null) return; if (rootEl.value == null) return;
rootEl.value.addEventListener("touchstart", moveStart, { passive: true }); rootEl.value.addEventListener("touchstart", moveStart, { passive: true });
rootEl.value.addEventListener("touchmove", moving, { passive: false }); // passive: falseにしないとpreventDefaultが使えない rootEl.value.addEventListener("touchmove", moving, { passive: false }); // setting passive to false to allow preventDefault
} }
function unregisterEventListenersForReadyToPull() { function unregisterEventListenersForReadyToPull() {

6
packages/client/src/scripts/touch.ts
View file

@ -11,13 +11,13 @@ if (isTouchSupported && !isTouchUsing) {
window.addEventListener( window.addEventListener(
"touchstart", "touchstart",
() => { () => {
// maxTouchPointsなどでの判定だけだと、「タッチ機能付きディスプレイを使っているがマウスでしか操作しない」場合にも // maxTuochPoints reflects the property of the display, but there are cases where the display has touch functionality but the user uses a mouse.
// タッチで使っていると判定されてしまうため、実際に一度でもタッチされたらtrueにする // Therefore, we need to check if the user actually uses touch functionality.
isTouchUsing = true; isTouchUsing = true;
}, },
{ passive: true }, { passive: true },
); );
} }
/** (MkHorizontalSwipe) 横スワイプ中か？ */ /** (MkHorizontalSwipe) is during horizontal swipe? */
export const isDuringHorizontalSwipe = ref(false); export const isDuringHorizontalSwipe = ref(false);