From ea37ff3b61674c3ee54a6c536b4b335caeaed6d5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 20 Sep 2020 21:29:22 +0900
Subject: [PATCH] wip

---
 src/client/components/note.vue                |  2 +-
 src/client/components/post-form.vue           |  2 +-
 src/client/components/timeline.vue            |  2 +-
 src/client/components/ui/radio.vue            |  3 ++-
 src/client/components/url-preview-popup.vue   | 10 +++++--
 src/client/components/url.vue                 | 26 ++++++++-----------
 src/client/deck.vue                           |  2 +-
 src/client/default.vue                        |  2 +-
 src/client/pages/messaging/messaging-room.vue |  2 +-
 src/client/pages/my-settings/drive.vue        |  2 +-
 src/client/pages/my-settings/reaction.vue     | 14 +++++-----
 .../page-editor/els/page-editor.el.image.vue  |  2 +-
 src/client/pages/page-editor/page-editor.vue  |  2 +-
 src/client/pages/test.vue                     | 17 +++++++++++-
 src/client/root.vue                           | 17 ++++++++++--
 15 files changed, 68 insertions(+), 37 deletions(-)

diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 903d7631ac..d93f24144f 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -40,7 +40,7 @@
 			<x-note-header class="header" :note="appearNote" :mini="true"/>
 			<div class="body" ref="noteBody">
 				<p v-if="appearNote.cw != null" class="cw">
-				<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
+					<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
 					<x-cw-button v-model:value="showContent" :note="appearNote"/>
 				</p>
 				<div class="content" v-show="appearNote.cw == null || showContent">
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 212172039f..ea1bad82cf 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -379,7 +379,7 @@ export default defineComponent({
 		},
 
 		chooseFileFromDrive() {
-			selectDriveFile(this.$root, true).then(files => {
+			selectDriveFile(true).then(files => {
 				for (const file of files) {
 					this.attachMedia(file);
 				}
diff --git a/src/client/components/timeline.vue b/src/client/components/timeline.vue
index 5879d61bb4..28fa7056b4 100644
--- a/src/client/components/timeline.vue
+++ b/src/client/components/timeline.vue
@@ -63,7 +63,7 @@ export default defineComponent({
 			this.$emit('note');
 
 			if (this.sound) {
-				this.$root.sound(note.userId === this.$store.state.i.id ? 'noteMy' : 'note');
+				os.sound(note.userId === this.$store.state.i.id ? 'noteMy' : 'note');
 			}
 		};
 
diff --git a/src/client/components/ui/radio.vue b/src/client/components/ui/radio.vue
index 7ad6015692..b15c06c8b4 100644
--- a/src/client/components/ui/radio.vue
+++ b/src/client/components/ui/radio.vue
@@ -17,7 +17,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';import * as os from '@/os';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	model: {
diff --git a/src/client/components/url-preview-popup.vue b/src/client/components/url-preview-popup.vue
index 72817e6aa1..9e02159c7f 100644
--- a/src/client/components/url-preview-popup.vue
+++ b/src/client/components/url-preview-popup.vue
@@ -1,6 +1,8 @@
 <template>
 <div class="fgmtyycl _panel _shadow" :style="{ top: top + 'px', left: left + 'px' }">
-	<mk-url-preview :url="url"/>
+	<transition name="zoom" @after-leave="$emit('closed')">
+		<mk-url-preview :url="url" v-if="showing"/>
+	</transition>
 </div>
 </template>
 
@@ -21,7 +23,11 @@ export default defineComponent({
 		},
 		source: {
 			required: true
-		}
+		},
+		showing: {
+			type: Boolean,
+			required: true
+		},
 	},
 
 	data() {
diff --git a/src/client/components/url.vue b/src/client/components/url.vue
index 98583a3ff1..5dd103668e 100644
--- a/src/client/components/url.vue
+++ b/src/client/components/url.vue
@@ -23,7 +23,6 @@ import { defineComponent } from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode as decodePunycode } from 'punycode';
 import { url as local } from '@/config';
-import MkUrlPreview from './url-preview-popup.vue';
 import { isDeviceTouch } from '@/scripts/is-device-touch';
 import * as os from '@/os';
 
@@ -54,7 +53,7 @@ export default defineComponent({
 			showTimer: null,
 			hideTimer: null,
 			checkTimer: null,
-			preview: null,
+			close: null,
 			faExternalLinkSquareAlt
 		};
 	},
@@ -68,29 +67,26 @@ export default defineComponent({
 		this.hash = decodeURIComponent(url.hash);
 	},
 	methods: {
-		showPreview() {
+		async showPreview() {
 			if (!document.body.contains(this.$el)) return;
-			if (this.preview) return;
+			if (this.close) return;
 
-			this.preview = new MkUrlPreview({
-				parent: this,
-				propsData: {
-					url: this.url,
-					source: this.$el
-				}
-			}).$mount();
+			const promise = os.popup(await import('@/components/url-preview-popup.vue'), {
+				url: this.url,
+				source: this.$el
+			});
 
-			document.body.appendChild(this.preview.$el);
+			this.close = promise.cancel;
 
 			this.checkTimer = setInterval(() => {
 				if (!document.body.contains(this.$el)) this.closePreview();
 			}, 1000);
 		},
 		closePreview() {
-			if (this.preview) {
+			if (this.close) {
 				clearInterval(this.checkTimer);
-				this.preview.destroyDom();
-				this.preview = null;
+				this.close();
+				this.close = null;
 			}
 		},
 		onMouseover() {
diff --git a/src/client/deck.vue b/src/client/deck.vue
index 5598bce3fc..1888667215 100644
--- a/src/client/deck.vue
+++ b/src/client/deck.vue
@@ -169,7 +169,7 @@ export default defineComponent({
 					notification
 				});
 			}
-			this.$root.sound('notification');
+			os.sound('notification');
 		},
 
 		async addColumn(ev) {
diff --git a/src/client/default.vue b/src/client/default.vue
index 269b52f5de..d2d60a4811 100644
--- a/src/client/default.vue
+++ b/src/client/default.vue
@@ -342,7 +342,7 @@ export default defineComponent({
 				});
 			}
 
-			this.$root.sound('notification');
+			os.sound('notification');
 		},
 
 		widgetFunc(id) {
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index f05a22e6a5..c6bfdb5afd 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -192,7 +192,7 @@ export default defineComponent({
 		},
 
 		onMessage(message) {
-			this.$root.sound('chat');
+			os.sound('chat');
 
 			const _isBottom = isBottom(this.$el, 64);
 
diff --git a/src/client/pages/my-settings/drive.vue b/src/client/pages/my-settings/drive.vue
index fa59c17e0f..8622eacaf2 100644
--- a/src/client/pages/my-settings/drive.vue
+++ b/src/client/pages/my-settings/drive.vue
@@ -38,7 +38,7 @@ export default defineComponent({
 
 	methods: {
 		chooseUploadFolder() {
-			selectDriveFolder(this.$root, false).then(async folder => {
+			selectDriveFolder(false).then(async folder => {
 				await this.$store.dispatch('settings/set', { key: 'uploadFolder', value: folder ? folder.id : null });
 				os.dialog({
 					type: 'success',
diff --git a/src/client/pages/my-settings/reaction.vue b/src/client/pages/my-settings/reaction.vue
index 857ad57eec..cf2dccdf6c 100644
--- a/src/client/pages/my-settings/reaction.vue
+++ b/src/client/pages/my-settings/reaction.vue
@@ -20,7 +20,6 @@ import { faLaugh, faSave, faEye } from '@fortawesome/free-regular-svg-icons';
 import { faUndo } from '@fortawesome/free-solid-svg-icons';
 import MkInput from '@/components/ui/input.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkReactionPicker from '@/components/reaction-picker.vue';
 import { emojiRegexWithCustom } from '../../../misc/emoji-regex';
 import { defaultSettings } from '../../store';
 import * as os from '@/os';
@@ -57,11 +56,12 @@ export default defineComponent({
 			this.changed = false;
 		},
 
-		preview(ev) {
-			os.modal(MkReactionPicker, {
-				source: ev.currentTarget || ev.target,
+		async preview(ev) {
+			os.modal(await import('@/components/reaction-picker.vue'), {
 				reactions: this.splited,
 				showFocus: false,
+			}, {}, {
+				source: ev.currentTarget || ev.target,
 			});
 		},
 
@@ -70,11 +70,11 @@ export default defineComponent({
 		},
 
 		async chooseEmoji(ev) {
-			const vm = os.modal(await import('@/components/emoji-picker.vue'), {
+			os.modal(await import('@/components/emoji-picker.vue'), {
+			}, {}, {
 				source: ev.currentTarget || ev.target
-			}).$once('chosen', emoji => {
+			}).then(emoji => {
 				this.reactions += emoji;
-				vm.close();
 			});
 		}
 	}
diff --git a/src/client/pages/page-editor/els/page-editor.el.image.vue b/src/client/pages/page-editor/els/page-editor.el.image.vue
index e328989278..8a7885e12f 100644
--- a/src/client/pages/page-editor/els/page-editor.el.image.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.image.vue
@@ -58,7 +58,7 @@ export default defineComponent({
 
 	methods: {
 		async choose() {
-			selectDriveFile(this.$root, false).then(file => {
+			selectDriveFile(false).then(file => {
 				this.file = file;
 				this.value.fileId = file.id;
 			});
diff --git a/src/client/pages/page-editor/page-editor.vue b/src/client/pages/page-editor/page-editor.vue
index 056e5ebfac..d0533a0614 100644
--- a/src/client/pages/page-editor/page-editor.vue
+++ b/src/client/pages/page-editor/page-editor.vue
@@ -414,7 +414,7 @@ export default defineComponent({
 		},
 
 		setEyeCatchingImage() {
-			selectDriveFile(this.$root, false).then(file => {
+			selectDriveFile(false).then(file => {
 				this.eyeCatchingImageId = file.id;
 			});
 		},
diff --git a/src/client/pages/test.vue b/src/client/pages/test.vue
index f6ca8d69ba..16ff5aa135 100644
--- a/src/client/pages/test.vue
+++ b/src/client/pages/test.vue
@@ -2,7 +2,7 @@
 <div>
 	<portal to="header"><fa :icon="faExclamationTriangle"/>TEST</portal>
 
-	<div class="_card">
+	<div class="_card _vMargin">
 		<div class="_title">Dialog</div>
 		<div class="_content">
 			<mk-input v-model:value="dialogTitle">
@@ -26,6 +26,18 @@
 			<span>Result: {{ dialogResult }}</span>
 		</div>
 	</div>
+
+	<div class="_card _vMargin">
+		<div class="_title">MFM</div>
+		<div class="_content">
+			<mk-textarea v-model:value="mfm">
+				<span>MFM</span>
+			</mk-textarea>
+		</div>
+		<div class="_content">
+			<mfm :text="mfm"/>
+		</div>
+	</div>
 </div>
 </template>
 
@@ -35,6 +47,7 @@ import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/ui/input.vue';
 import MkSwitch from '@/components/ui/switch.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
 import * as os from '@/os';
 
 export default defineComponent({
@@ -42,6 +55,7 @@ export default defineComponent({
 		MkButton,
 		MkInput,
 		MkSwitch,
+		MkTextarea,
 	},
 
 	metaInfo() {
@@ -58,6 +72,7 @@ export default defineComponent({
 			dialogCancelByBgClick: true,
 			dialogInput: false,
 			dialogResult: null,
+			mfm: '',
 			faExclamationTriangle
 		}
 	},
diff --git a/src/client/root.vue b/src/client/root.vue
index 98250df4d4..5b217a7c12 100644
--- a/src/client/root.vue
+++ b/src/client/root.vue
@@ -2,11 +2,24 @@
 <DeckUI v-if="deckmode"/>
 <DefaultUI v-else/>
 
-<XModal v-for="modal in $store.state.popups.filter(x => x.type === 'modal')" :key="modal.id" @closed="modal.closed" @click="modal.bgClick" :showing="modal.showing" :source="modal.source">
+<XModal v-for="modal in $store.state.popups.filter(x => x.type === 'modal')"
+	:key="modal.id"
+	@closed="modal.closed"
+	@click="modal.bgClick"
+	:showing="modal.showing"
+	:source="modal.source"
+>
 	<component :is="modal.component" v-bind="modal.props" v-on="modal.events" @done="modal.done"/>
 </XModal>
 
-<component v-for="popup in $store.state.popups.filter(x => x.type === 'popup')" :key="popup.id" :is="popup.component" v-bind="popup.props" :showing="popup.showing" v-on="popup.events" @closed="popup.closed"/>
+<component v-for="popup in $store.state.popups.filter(x => x.type === 'popup')"
+	:key="popup.id"
+	:is="popup.component"
+	v-bind="popup.props"
+	:showing="popup.showing"
+	v-on="popup.events"
+	@closed="popup.closed"
+/>
 
 <div id="wait" v-if="$store.state.pendingApiRequestsCount > 0"></div>
 </template>