From 4c07cf74ef744a1449b5fa70710bbd135c5eee6f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 12 Sep 2020 18:24:18 +0900
Subject: [PATCH] wip

---
 src/client/components/visibility-chooser.vue | 95 +++++++++-----------
 src/client/directives/user-preview.ts        | 32 ++++---
 2 files changed, 56 insertions(+), 71 deletions(-)

diff --git a/src/client/components/visibility-chooser.vue b/src/client/components/visibility-chooser.vue
index 03c9b844a1..1dac289545 100644
--- a/src/client/components/visibility-chooser.vue
+++ b/src/client/components/visibility-chooser.vue
@@ -1,58 +1,52 @@
 <template>
-<XModal :source="source" ref="popup" @closed="closed">
-	<div class="gqyayizv">
-		<button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public">
-			<div><fa :icon="faGlobe"/></div>
-			<div>
-				<span>{{ $t('_visibility.public') }}</span>
-				<span>{{ $t('_visibility.publicDescription') }}</span>
-			</div>
-		</button>
-		<button class="_button" @click="choose('home')" :class="{ active: v == 'home' }" data-index="2" key="home">
-			<div><fa :icon="faHome"/></div>
-			<div>
-				<span>{{ $t('_visibility.home') }}</span>
-				<span>{{ $t('_visibility.homeDescription') }}</span>
-			</div>
-		</button>
-		<button class="_button" @click="choose('followers')" :class="{ active: v == 'followers' }" data-index="3" key="followers">
-			<div><fa :icon="faUnlock"/></div>
-			<div>
-				<span>{{ $t('_visibility.followers') }}</span>
-				<span>{{ $t('_visibility.followersDescription') }}</span>
-			</div>
-		</button>
-		<button :disabled="localOnly" class="_button" @click="choose('specified')" :class="{ active: v == 'specified' }" data-index="4" key="specified">
-			<div><fa :icon="faEnvelope"/></div>
-			<div>
-				<span>{{ $t('_visibility.specified') }}</span>
-				<span>{{ $t('_visibility.specifiedDescription') }}</span>
-			</div>
-		</button>
-		<div class="divider"></div>
-		<button class="_button localOnly" @click="localOnly = !localOnly" :class="{ active: localOnly }" data-index="5" key="localOnly">
-			<div><fa :icon="faBiohazard"/></div>
-			<div>
-				<span>{{ $t('_visibility.localOnly') }}</span>
-				<span>{{ $t('_visibility.localOnlyDescription') }}</span>
-			</div>
-			<div><fa :icon="localOnly ? faToggleOn : faToggleOff"/></div>
-		</button>
-	</div>
-</XModal>
+<div class="gqyayizv">
+	<button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public">
+		<div><fa :icon="faGlobe"/></div>
+		<div>
+			<span>{{ $t('_visibility.public') }}</span>
+			<span>{{ $t('_visibility.publicDescription') }}</span>
+		</div>
+	</button>
+	<button class="_button" @click="choose('home')" :class="{ active: v == 'home' }" data-index="2" key="home">
+		<div><fa :icon="faHome"/></div>
+		<div>
+			<span>{{ $t('_visibility.home') }}</span>
+			<span>{{ $t('_visibility.homeDescription') }}</span>
+		</div>
+	</button>
+	<button class="_button" @click="choose('followers')" :class="{ active: v == 'followers' }" data-index="3" key="followers">
+		<div><fa :icon="faUnlock"/></div>
+		<div>
+			<span>{{ $t('_visibility.followers') }}</span>
+			<span>{{ $t('_visibility.followersDescription') }}</span>
+		</div>
+	</button>
+	<button :disabled="localOnly" class="_button" @click="choose('specified')" :class="{ active: v == 'specified' }" data-index="4" key="specified">
+		<div><fa :icon="faEnvelope"/></div>
+		<div>
+			<span>{{ $t('_visibility.specified') }}</span>
+			<span>{{ $t('_visibility.specifiedDescription') }}</span>
+		</div>
+	</button>
+	<div class="divider"></div>
+	<button class="_button localOnly" @click="localOnly = !localOnly" :class="{ active: localOnly }" data-index="5" key="localOnly">
+		<div><fa :icon="faBiohazard"/></div>
+		<div>
+			<span>{{ $t('_visibility.localOnly') }}</span>
+			<span>{{ $t('_visibility.localOnlyDescription') }}</span>
+		</div>
+		<div><fa :icon="localOnly ? faToggleOn : faToggleOff"/></div>
+	</button>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faGlobe, faUnlock, faHome, faBiohazard, faToggleOn, faToggleOff } from '@fortawesome/free-solid-svg-icons';
 import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
-import XModal from './modal.vue';
-import * as os from '@/os';
 
 export default defineComponent({
-	components: {
-		XModal
-	},
+	emits: ['done'],
 	props: {
 		source: {
 			required: true
@@ -78,15 +72,8 @@ export default defineComponent({
 			if (this.$store.state.settings.rememberNoteVisibility) {
 				this.$store.commit('deviceUser/setVisibility', visibility);
 			}
-			this.$emit('chosen', { visibility, localOnly: this.localOnly });
-			this.destroyDom();
+			this.$emit('done', { visibility, localOnly: this.localOnly });
 		},
-		closed() {
-			this.$emit('closed');
-			// localOnly フラグの更新の為に chosen イベントも呼ぶ
-			this.choose(this.v);
-			this.destroyDom();
-		}
 	}
 });
 </script>
diff --git a/src/client/directives/user-preview.ts b/src/client/directives/user-preview.ts
index 8b098761c1..1e514e5277 100644
--- a/src/client/directives/user-preview.ts
+++ b/src/client/directives/user-preview.ts
@@ -2,48 +2,46 @@ import { Directive } from 'vue';
 import MkUserPreview from '@/components/user-preview.vue';
 
 export default {
+	// modal側でcontentのmouseoverイベントなどを発行してもらう必要がありそう
+	/*
 	mounted(el: HTMLElement, binding, vn) {
 		// TODO: 新たにプロパティを作るのをやめMapを使う
 		// ただメモリ的には↓の方が省メモリかもしれないので検討中
 		const self = (el as any)._userPreviewDirective_ = {} as any;
 
 		self.user = binding.value;
-		self.tag = null;
+		self.close = null;
 		self.showTimer = null;
 		self.hideTimer = null;
 		self.checkTimer = null;
 
 		self.close = () => {
-			if (self.tag) {
+			if (self.close) {
 				clearInterval(self.checkTimer);
-				self.tag.close();
-				self.tag = null;
+				self.close.close();
+				self.close = null;
 			}
 		};
 
 		const show = () => {
 			if (!document.body.contains(el)) return;
-			if (self.tag) return;
+			if (self.close) return;
 
-			self.tag = new MkUserPreview({
-				parent: vn.context,
-				propsData: {
-					user: self.user,
-					source: el
-				}
-			}).$mount();
+			self.close = os.popup(MkUserPreview, {
+				user: self.user,
+			}, null, {
+				source: el
+			});
 
-			self.tag.$on('mouseover', () => {
+			self.close.$on('mouseover', () => {
 				clearTimeout(self.hideTimer);
 			});
 
-			self.tag.$on('mouseleave', () => {
+			self.close.$on('mouseleave', () => {
 				clearTimeout(self.showTimer);
 				self.hideTimer = setTimeout(self.close, 500);
 			});
 
-			document.body.appendChild(self.tag.$el);
-
 			self.checkTimer = setInterval(() => {
 				if (!document.body.contains(el)) {
 					clearTimeout(self.showTimer);
@@ -74,5 +72,5 @@ export default {
 	unmounted(el, binding, vn) {
 		const self = el._userPreviewDirective_;
 		clearInterval(self.checkTimer);
-	}
+	}*/
 } as Directive;