全モーダルに対応

traPtitech · Nov 8, 2023 · e4038bb · e4038bb
1 parent 0ba03c0
commit e4038bb
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/src/components/Modal/FileModal/FileModal.vue b/src/components/Modal/FileModal/FileModal.vue
@@ -21,7 +21,7 @@ import FileModalImage from '/@/components/Modal/FileModal/FileModalImage.vue'
 import FileModalFile from '/@/components/Modal/FileModal/FileModalFile.vue'
 import FileModalVideo from '/@/components/Modal/FileModal/FileModalVideo.vue'
 import FileModalAudio from '/@/components/Modal/FileModal/FileModalAudio.vue'
-import { computed, onMounted, onUnmounted, reactive } from 'vue'
+import { computed, reactive } from 'vue'
 import useFileMeta from '/@/composables/files/useFileMeta'
 import { useModalStore } from '/@/store/ui/modal'
 
@@ -34,19 +34,6 @@ const fileIdState = reactive({
 })
 const { fileMeta, fileType } = useFileMeta(fileIdState)
 const { clearModal } = useModalStore()
-
-const onKeyDown = (e: KeyboardEvent) => {
-  if (e.key === 'Escape') {
-    clearModal()
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('keydown', onKeyDown)
-})
-onUnmounted(() => {
-  window.removeEventListener('keydown', onKeyDown)
-})
 </script>
 
 <style module lang="scss">

diff --git a/src/store/ui/modal.ts b/src/store/ui/modal.ts
@@ -148,6 +148,14 @@ const useModalStorePinia = defineStore('ui/modal', () => {
     }
   }
 
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && shouldShowModal.value) {
+      popModal()
+    }
+  }
+
+  window.addEventListener('keydown', onKeyDown)
+
   return {
     isOnInitialModalRoute,
     isClearingModal,