閉じずに残ってしまうメニューなどの修正 (#5496)

* Fix: ページ移動等してもメニュー等が閉じずに残ってしまう

* Fix: ページ移動してもメディアビューワーが残ってしまう

src/client/app/common/scripts/note-mixin.ts

@@ -143,12 +143,15 @@ export default (opts: Opts = {}) => ({
 		react(viaKeyboard = false) {
 			pleaseLogin(this.$root);
 			this.blur();
-			this.$root.new(MkReactionPicker, {
+			const w = this.$root.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
 				note: this.appearNote,
 				showFocus: viaKeyboard,
 				animation: !viaKeyboard
 			}).$once('closed', this.focus);
+			this.$once('hook:beforeDestroy', () => {
+				w.close();
+			});
 		},
 
 		reactDirectly(reaction) {
@@ -195,7 +198,7 @@ export default (opts: Opts = {}) => ({
 		menu(viaKeyboard = false) {
 			if (this.openingMenu) return;
 			this.openingMenu = true;
-			this.$root.new(MkNoteMenu, {
+			const w = this.$root.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
 				note: this.appearNote,
 				animation: !viaKeyboard
@@ -203,6 +206,9 @@ export default (opts: Opts = {}) => ({
 				this.openingMenu = false;
 				this.focus();
 			});
+			this.$once('hook:beforeDestroy', () => {
+				w.destroyDom();
+			});
 		},
 
 		toggleShowContent() {

src/client/app/common/scripts/post-form.ts

@@ -328,6 +328,9 @@ export default (opts) => ({
 			w.$once('chosen', v => {
 				this.applyVisibility(v);
 			});
+			this.$once('hook:beforeDestroy', () => {
+				w.close();
+			});
 		},
 
 		applyVisibility(v: string) {
@@ -457,6 +460,9 @@ export default (opts) => ({
 			vm.$once('chosen', emoji => {
 				insertTextAtCursor(this.$refs.text, emoji);
 			});
+			this.$once('hook:beforeDestroy', () => {
+				vm.close();
+			});
 		},
 
 		saveDraft() {

src/client/app/common/views/components/media-image.vue

@@ -59,9 +59,12 @@ export default Vue.extend({
 	},
 	methods: {
 		onClick() {
-			this.$root.new(ImageViewer, {
+			const viewer = this.$root.new(ImageViewer, {
 				image: this.image
 			});
+			this.$once('hook:beforeDestroy', () => {
+				viewer.close();
+			});
 		}
 	}
 });

src/client/app/common/views/deck/deck.user-column.vue

@@ -112,10 +112,13 @@ export default Vue.extend({
 		},
 
 		menu() {
-			this.$root.new(XUserMenu, {
+			const w = this.$root.new(XUserMenu, {
 				source: this.$refs.menu,
 				user: this.user
 			});
+			this.$once('hook:beforeDestroy', () => {
+				w.destroyDom();
+			});
 		}
 	}
 });

src/client/app/desktop/views/components/media-video.vue

@@ -53,10 +53,13 @@ export default Vue.extend({
 				start = videoTag.currentTime
 				videoTag.pause()
 			}
-			this.$root.new(MkMediaVideoDialog, {
+			const viewer = this.$root.new(MkMediaVideoDialog, {
 				video: this.video,
 				start,
-			})
+			});
+			this.$once('hook:beforeDestroy', () => {
+				viewer.close();
+			});
 		}
 	}
 })

src/client/app/desktop/views/home/user/user.header.vue

@@ -106,10 +106,13 @@ export default Vue.extend({
 		},
 
 		menu() {
-			this.$root.new(XUserMenu, {
+			const w = this.$root.new(XUserMenu, {
 				source: this.$refs.menu,
 				user: this.user
 			});
+			this.$once('hook:beforeDestroy', () => {
+				w.destroyDom();
+			});
 		}
 	}
 });