From 5aeedf59ff73debbce36aeff4a27f170a2bf1ef4 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 4 May 2025 11:04:51 +0900
Subject: enhance(frontend): 中クリックでPullToRefreshするように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close #15931
---
 .../frontend/src/components/MkPullToRefresh.vue    | 59 +++++++++++-----------
 .../frontend/src/pages/settings/preferences.vue    |  1 +
 2 files changed, 30 insertions(+), 30 deletions(-)

(limited to 'packages/frontend')

diff --git a/packages/frontend/src/components/MkPullToRefresh.vue b/packages/frontend/src/components/MkPullToRefresh.vue
index 7f5148dac0..7b5335aa74 100644
--- a/packages/frontend/src/components/MkPullToRefresh.vue
+++ b/packages/frontend/src/components/MkPullToRefresh.vue
@@ -77,31 +77,37 @@ function unlockDownScroll() {
 }
 
 function moveStart(event: PointerEvent) {
+	if (event.pointerType === 'mouse' && event.button !== 1) return;
+	if (isRefreshing.value) return;
+
 	const scrollPos = scrollEl!.scrollTop;
-	if (scrollPos === 0) {
-		lockDownScroll();
-		if (!isPulling.value && !isRefreshing.value) {
-			isPulling.value = true;
-			startScreenY = getScreenY(event);
-			pullDistance.value = 0;
-
-			// タッチデバイスでPointerEventを使うとなんか挙動がおかしいので、TouchEventとMouseEventを使い分ける
-			if (event.pointerType === 'mouse') {
-				window.addEventListener('mousemove', moving, { passive: true });
-				window.addEventListener('mouseup', () => {
-					window.removeEventListener('mousemove', moving);
-					onPullRelease();
-				}, { passive: true, once: true });
-			} else {
-				window.addEventListener('touchmove', moving, { passive: true });
-				window.addEventListener('touchend', () => {
-					window.removeEventListener('touchmove', moving);
-					onPullRelease();
-				}, { passive: true, once: true });
-			}
-		}
-	} else {
+	if (scrollPos !== 0) {
 		unlockDownScroll();
+		return;
+	}
+
+	lockDownScroll();
+
+	// マウスでのpull時、画面上のテキスト選択が発生したり、ブラウザの中クリックによる挙動が競合したりして画面がスクロールされたりするのを防ぐ
+	window.document.body.setAttribute('inert', 'true');
+
+	isPulling.value = true;
+	startScreenY = getScreenY(event);
+	pullDistance.value = 0;
+
+	// タッチデバイスでPointerEventを使うとなんか挙動がおかしいので、TouchEventとMouseEventを使い分ける
+	if (event.pointerType === 'mouse') {
+		window.addEventListener('mousemove', moving, { passive: true });
+		window.addEventListener('mouseup', () => {
+			window.removeEventListener('mousemove', moving);
+			onPullRelease();
+		}, { passive: true, once: true });
+	} else {
+		window.addEventListener('touchmove', moving, { passive: true });
+		window.addEventListener('touchend', () => {
+			window.removeEventListener('touchmove', moving);
+			onPullRelease();
+		}, { passive: true, once: true });
 	}
 }
 
@@ -168,8 +174,6 @@ function toggleScrollLockOnTouchEnd() {
 }
 
 function moving(event: MouseEvent | TouchEvent) {
-	if (!isPulling.value || isRefreshing.value) return;
-
 	if ((scrollEl?.scrollTop ?? 0) > SCROLL_STOP + pullDistance.value || isHorizontalSwipeSwiping.value) {
 		pullDistance.value = 0;
 		isPulledEnough.value = false;
@@ -185,11 +189,6 @@ function moving(event: MouseEvent | TouchEvent) {
 	const moveHeight = moveScreenY - startScreenY!;
 	pullDistance.value = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
 
-	// マウスでのpull時、画面上のテキスト選択が発生して画面がスクロールされたりするのを防ぐ
-	if (pullDistance.value > 3) { // ある程度遊びを持たせないと通常のクリックでも発火しクリックできなくなる
-		window.document.body.setAttribute('inert', 'true');
-	}
-
 	isPulledEnough.value = pullDistance.value >= FIRE_THRESHOLD;
 }
 
diff --git a/packages/frontend/src/pages/settings/preferences.vue b/packages/frontend/src/pages/settings/preferences.vue
index 758bbc13b3..4d718d21b4 100644
--- a/packages/frontend/src/pages/settings/preferences.vue
+++ b/packages/frontend/src/pages/settings/preferences.vue
@@ -475,6 +475,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<MkPreferenceContainer k="enablePullToRefresh">
 									<MkSwitch v-model="enablePullToRefresh">
 										<template #label><SearchLabel>{{ i18n.ts._settings.enablePullToRefresh }}</SearchLabel></template>
+										<template #caption><SearchKeyword>{{ i18n.ts._settings.enablePullToRefresh_description }}</SearchKeyword></template>
 									</MkSwitch>
 								</MkPreferenceContainer>
 							</SearchMarker>
-- 
cgit v1.2.3-freya