enhance: ブラウザの戻るボタンで閉じる

packages/frontend/src/boot/common.ts

@@ -99,6 +99,11 @@ export async function common(createVue: () => Promise<App<Element>>) {
 	// タッチデバイスでCSSの:hoverを機能させる
 	window.document.addEventListener('touchend', () => {}, { passive: true });
 
+	// URLに#pswpを含む場合は取り除く
+	if (window.location.hash === '#pswp') {
+		window.history.replaceState(null, '', window.location.href.replace('#pswp', ''));
+	}
+
 	// 一斉リロード
 	reloadChannel.addEventListener('message', path => {
 		if (path !== null) window.location.href = path;

packages/frontend/src/components/MkImageGallery.item.vue

@@ -796,6 +796,7 @@ function onDeactive() {
 defineExpose({
 	onActive,
 	onDeactive,
+	closeThis,
 });
 </script>
 

packages/frontend/src/components/MkImageGallery.vue

@@ -48,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, nextTick, onBeforeUnmount } from 'vue';
+import { ref, watch, nextTick, onBeforeUnmount, onMounted } from 'vue';
 import XItem from './MkImageGallery.item.vue';
 import type { Content } from './MkImageGallery.item.vue';
 import type { Keymap } from '@/utility/hotkey.js';
@@ -133,6 +133,14 @@ function scrollToCurrentIndex() {
 	contentsOffset.value = targetOffset;
 }
 
+function close() {
+	if (items.has(currentIndex.value)) {
+		items.get(currentIndex.value)!.closeThis();
+	} else {
+		showing.value = false;
+	}
+}
+
 function onSlideTransitionFinished(ev: TransitionEvent) {
 	if (ev.propertyName !== 'translate') return;
 	enableSlideTransition.value = false;
@@ -169,6 +177,17 @@ function onAfterLeave() {
 	emit('closed');
 }
 
+function onPopState() {
+	if (showing.value) {
+		close();
+	}
+}
+
+onMounted(() => {
+	window.history.pushState(null, '', '#pswp');
+	window.addEventListener('popstate', onPopState);
+});
+
 const keymap = {
 	'esc': {
 		allowRepeat: true,
@@ -186,6 +205,11 @@ const keymap = {
 
 onBeforeUnmount(() => {
 	window.removeEventListener('resize', onResize);
+	window.removeEventListener('popstate', onPopState);
+});
+
+defineExpose({
+	close,
 });
 </script>