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

taiyme · Apr 24, 2024 · 5505af0 · 5505af0
1 parent caade94
commit 5505af0
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 2 deletions.
diff --git a/locales/index.d.ts b/locales/index.d.ts
@@ -10016,6 +10016,16 @@ export interface Locale extends ILocale {
                  */
                 readonly "high": 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
@@ -2670,6 +2670,9 @@ _tms:
       low: "低感度"
       middle: "中感度 (規定)"
       high: "高感度"
+    _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,7 +23,7 @@ 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';
@@ -55,14 +55,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;
@@ -122,7 +135,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
@@ -27,6 +27,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<option value="middle">{{ i18n.ts._tms._settings._pullToRefreshSensitivity.middle }}</option>
 				<option value="high">{{ i18n.ts._tms._settings._pullToRefreshSensitivity.high }}</option>
 			</MkSelect>
+			<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>
@@ -56,6 +60,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
@@ -18,6 +18,10 @@ export const tmsStore = markRaw(new Storage('tmsMain', {
 		where: 'device',
 		default: 'middle' as 'low' | 'middle' | 'high',
 	},
+	pullToRefreshAllReload: {
+		where: 'device',
+		default: false,
+	},
 	enablePakuru: {
 		where: 'device',
 		default: false,