feat(tms): Pull-to-Refreshでページ全体をリロードする

taiyme · Apr 24, 2024 · 8a40db5 · 8a40db5
1 parent 8bc2301
commit 8a40db5
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 2 deletions.
diff --git a/locales/index.d.ts b/locales/index.d.ts
@@ -9994,6 +9994,16 @@ export interface Locale extends ILocale {
                  */
                 readonly "forceList": string;
             };
+            readonly "_pullToRefreshAllReload": {
+                /**
+                 * Pull-to-Refreshでページ全体をリロードする
+                 */
+                readonly "label": string;
+                /**
+                 * タイムラインだけではなく、構成しているページ全体を再読み込みします。
+                 */
+                readonly "caption": string;
+            };
             readonly "_pakuru": {
                 /**
                  * 「パクる」機能を有効にする

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -2664,6 +2664,9 @@ _tms:
       default: "デフォルト"
       classic: "クラシック"
       forceList: "リスト強制"
+    _pullToRefreshAllReload:
+      label: "Pull-to-Refreshでページ全体をリロードする"
+      caption: "タイムラインだけではなく、構成しているページ全体を再読み込みします。"
     _pakuru:
       label: "「パクる」機能を有効にする"
       caption: "リノートメニューに「パクる」を追加します。添付ファイルを含むノートをパクる場合、時間がかかる場合があります。"

diff --git a/packages/frontend/src/components/MkPullToRefresh.vue b/packages/frontend/src/components/MkPullToRefresh.vue
@@ -23,10 +23,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
+import { computed, onMounted, onUnmounted, ref, shallowRef } from 'vue';
 import { i18n } from '@/i18n.js';
 import { getScrollContainer } from '@/scripts/scroll.js';
 import { isHorizontalSwipeSwiping } from '@/scripts/touch.js';
+import { tmsStore } from '@/tms/store.js';
 
 const SCROLL_STOP = 10;
 const MAX_PULL_DISTANCE = Infinity;
@@ -50,14 +51,27 @@ let disabled = false;
 
 const props = withDefaults(defineProps<{
 	refresher: () => Promise<void>;
+	disableAllReload?: boolean;
 }>(), {
 	refresher: () => Promise.resolve(),
+	disableAllReload: false,
 });
 
 const emit = defineEmits<{
 	(ev: 'refresh'): void;
 }>();
 
+const refresher = computed(() => {
+	if (!props.disableAllReload && tmsStore.reactiveState.pullToRefreshAllReload.value) {
+		return {
+			handler: async () => location.reload(),
+		} as const;
+	}
+	return {
+		handler: props.refresher,
+	} as const;
+});
+
 function getScreenY(event) {
 	if (supportPointerDesktop) {
 		return event.screenY;
@@ -117,7 +131,7 @@ function moveEnd() {
 			isRefreshing.value = true;
 			fixOverContent().then(() => {
 				emit('refresh');
-				props.refresher().then(() => {
+				refresher.value.handler().then(() => {
 					refreshFinished();
 				});
 			});

diff --git a/packages/frontend/src/pages/tms/settings/index.main.vue b/packages/frontend/src/pages/tms/settings/index.main.vue
@@ -17,6 +17,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkSelect>
 		</div>
 	</FormSection>
+	<FormSection>
+		<template #label>{{ i18n.ts.operations }}</template>
+		<div class="_gaps">
+			<MkSwitch v-model="pullToRefreshAllReload">
+				<template #label>{{ i18n.ts._tms._settings._pullToRefreshAllReload.label }}</template>
+				<template #caption>{{ i18n.ts._tms._settings._pullToRefreshAllReload.caption }}</template>
+			</MkSwitch>
+		</div>
+	</FormSection>
 	<FormSection>
 		<div class="_gaps">
 			<MkSwitch v-model="enablePakuru">
@@ -43,6 +52,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
 
 //#region 即時変更
 const superMenuDisplayMode = computed(tmsStore.makeGetterSetter('superMenuDisplayMode'));
+const pullToRefreshAllReload = computed(tmsStore.makeGetterSetter('pullToRefreshAllReload'));
 //#endregion
 
 //#region 即時変更 (ダイアログ付き)

diff --git a/packages/frontend/src/tms/store.ts b/packages/frontend/src/tms/store.ts
@@ -14,6 +14,10 @@ export const tmsStore = markRaw(new Storage('tmsMain', {
 		where: 'deviceAccount',
 		default: 'default' as 'default' | 'classic' | 'forceList',
 	},
+	pullToRefreshAllReload: {
+		where: 'device',
+		default: false,
+	},
 	enablePakuru: {
 		where: 'device',
 		default: false,