wip

15 files changed, 115 insertions, 26 deletions

diff --git a/src/web/app/common/views/components/index.ts b/src/web/app/common/views/components/index.ts
index 4526217567..10d09ce65c 100644
--- a/src/web/app/common/views/components/index.ts
+++ b/src/web/app/common/views/components/index.ts
@@ -10,6 +10,7 @@ import reactionsViewer from './reactions-viewer.vue';
 import time from './time.vue';
 import images from './images.vue';
 import uploader from './uploader.vue';
+import specialMessage from './special-message.vue';
 
 Vue.component('mk-signin', signin);
 Vue.component('mk-signup', signup);
@@ -21,3 +22,4 @@ Vue.component('mk-reactions-viewer', reactionsViewer);
 Vue.component('mk-time', time);
 Vue.component('mk-images', images);
 Vue.component('mk-uploader', uploader);
+Vue.component('mk-special-message', specialMessage);
diff --git a/src/web/app/common/views/components/special-message.vue b/src/web/app/common/views/components/special-message.vue
index 900afe1783..2fd4d6515e 100644
--- a/src/web/app/common/views/components/special-message.vue
+++ b/src/web/app/common/views/components/special-message.vue
@@ -15,10 +15,10 @@ export default Vue.extend({
 	},
 	computed: {
 		d(): number {
-			return now.getDate();
+			return this.now.getDate();
 		},
 		m(): number {
-			return now.getMonth() + 1;
+			return this.now.getMonth() + 1;
 		}
 	}
 });
diff --git a/src/web/app/common/views/components/widgets/profile.vue b/src/web/app/common/views/components/widgets/profile.vue
index 70902c7cf5..d64ffad931 100644
--- a/src/web/app/common/views/components/widgets/profile.vue
+++ b/src/web/app/common/views/components/widgets/profile.vue
@@ -13,7 +13,7 @@
 		@click="wapi_setAvatar"
 		alt="avatar"
 		title="クリックでアバター編集"
-		:v-user-preview={ I.id }
+		v-user-preview={ I.id }
 	/>
 	<a class="name" href={ '/' + I.username }>{ I.name }</a>
 	<p class="username">@{ I.username }</p>
diff --git a/src/web/app/desktop/script.ts b/src/web/app/desktop/script.ts
index d6ad0202df..1377965ea8 100644
--- a/src/web/app/desktop/script.ts
+++ b/src/web/app/desktop/script.ts
@@ -21,6 +21,9 @@ init(async (launch) => {
 	 */
 	fuckAdBlock();
 
+	// Register directives
+	require('./views/directives');
+
 	// Register components
 	require('./views/components');
 
diff --git a/src/web/app/desktop/views/components/index.ts b/src/web/app/desktop/views/components/index.ts
index 6b58215be5..7a7438214e 100644
--- a/src/web/app/desktop/views/components/index.ts
+++ b/src/web/app/desktop/views/components/index.ts
@@ -25,6 +25,7 @@ import imagesImageDialog from './images-image-dialog.vue';
 import notifications from './notifications.vue';
 import postForm from './post-form.vue';
 import repostForm from './repost-form.vue';
+import followButton from './follow-button.vue';
 
 Vue.component('mk-ui', ui);
 Vue.component('mk-ui-header', uiHeader);
@@ -51,3 +52,4 @@ Vue.component('mk-images-image-dialog', imagesImageDialog);
 Vue.component('mk-notifications', notifications);
 Vue.component('mk-post-form', postForm);
 Vue.component('mk-repost-form', repostForm);
+Vue.component('mk-follow-button', followButton);
diff --git a/src/web/app/desktop/views/components/notifications.vue b/src/web/app/desktop/views/components/notifications.vue
index 5826fc210d..d211a933fd 100644
--- a/src/web/app/desktop/views/components/notifications.vue
+++ b/src/web/app/desktop/views/components/notifications.vue
@@ -5,13 +5,13 @@
 			<div class="notification" :class="notification.type" :key="notification.id">
 				<mk-time :time="notification.created_at"/>
 				<template v-if="notification.type == 'reaction'">
-					<a class="avatar-anchor" :href="`/${notification.user.username}`" :v-user-preview="notification.user.id">
+					<a class="avatar-anchor" :href="`/${notification.user.username}`" v-user-preview="notification.user.id">
 						<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</a>
 					<div class="text">
 						<p>
 							<mk-reaction-icon reaction={ notification.reaction }/>
-							<a :href="`/${notification.user.username}`" :v-user-preview="notification.user.id">{{ notification.user.name }}</a>
+							<a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a>
 						</p>
 						<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">
 							%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
@@ -19,12 +19,12 @@
 					</div>
 				</template>
 				<template v-if="notification.type == 'repost'">
-					<a class="avatar-anchor" :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id">
+					<a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
 						<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</a>
 					<div class="text">
 						<p>%fa:retweet%
-							<a :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
+							<a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
 						</p>
 						<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">
 							%fa:quote-left%{{ getPostSummary(notification.post.repost) }}%fa:quote-right%
@@ -32,54 +32,54 @@
 					</div>
 				</template>
 				<template v-if="notification.type == 'quote'">
-					<a class="avatar-anchor" :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id">
+					<a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
 						<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</a>
 					<div class="text">
 						<p>%fa:quote-left%
-							<a :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
+							<a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
 						</p>
 						<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
 					</div>
 				</template>
 				<template v-if="notification.type == 'follow'">
-					<a class="avatar-anchor" :href="`/${notification.user.username}`" :v-user-preview="notification.user.id">
+					<a class="avatar-anchor" :href="`/${notification.user.username}`" v-user-preview="notification.user.id">
 						<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</a>
 					<div class="text">
 						<p>%fa:user-plus%
-							<a :href="`/${notification.user.username}`" :v-user-preview="notification.user.id">{{ notification.user.name }}</a>
+							<a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a>
 						</p>
 					</div>
 				</template>
 				<template v-if="notification.type == 'reply'">
-					<a class="avatar-anchor" :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id">
+					<a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
 						<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</a>
 					<div class="text">
 						<p>%fa:reply%
-							<a :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
+							<a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
 						</p>
 						<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
 					</div>
 				</template>
 				<template v-if="notification.type == 'mention'">
-					<a class="avatar-anchor" :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id">
+					<a class="avatar-anchor" :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">
 						<img class="avatar" :src="`${notification.post.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</a>
 					<div class="text">
 						<p>%fa:at%
-							<a :href="`/${notification.post.user.username}`" :v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
+							<a :href="`/${notification.post.user.username}`" v-user-preview="notification.post.user_id">{{ notification.post.user.name }}</a>
 						</p>
 						<a class="post-preview" :href="`/${notification.post.user.username}/${notification.post.id}`">{{ getPostSummary(notification.post) }}</a>
 					</div>
 				</template>
 				<template v-if="notification.type == 'poll_vote'">
-					<a class="avatar-anchor" :href="`/${notification.user.username}`" :v-user-preview="notification.user.id">
+					<a class="avatar-anchor" :href="`/${notification.user.username}`" v-user-preview="notification.user.id">
 						<img class="avatar" :src="`${notification.user.avatar_url}?thumbnail&size=48`" alt="avatar"/>
 					</a>
 					<div class="text">
-						<p>%fa:chart-pie%<a :href="`/${notification.user.username}`" :v-user-preview="notification.user.id">{{ notification.user.name }}</a></p>
+						<p>%fa:chart-pie%<a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a></p>
 						<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">
 							%fa:quote-left%{{ getPostSummary(notification.post) }}%fa:quote-right%
 						</a>
diff --git a/src/web/app/desktop/views/components/post-preview.vue b/src/web/app/desktop/views/components/post-preview.vue
index fc297dccc8..f22b28153a 100644
--- a/src/web/app/desktop/views/components/post-preview.vue
+++ b/src/web/app/desktop/views/components/post-preview.vue
@@ -1,11 +1,11 @@
 <template>
 <div class="mk-post-preview" :title="title">
 	<a class="avatar-anchor" :href="`/${post.user.username}`">
-		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" :v-user-preview="post.user_id"/>
+		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
 	</a>
 	<div class="main">
 		<header>
-			<a class="name" :href="`/${post.user.username}`" :v-user-preview="post.user_id">{{ post.user.name }}</a>
+			<a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a>
 			<span class="username">@{ post.user.username }</span>
 			<a class="time" :href="`/${post.user.username}/${post.id}`">
 			<mk-time :time="post.created_at"/></a>
diff --git a/src/web/app/desktop/views/components/posts-post-sub.vue b/src/web/app/desktop/views/components/posts-post-sub.vue
index 89aeb04829..cccc24653e 100644
--- a/src/web/app/desktop/views/components/posts-post-sub.vue
+++ b/src/web/app/desktop/views/components/posts-post-sub.vue
@@ -1,11 +1,11 @@
 <template>
 <div class="mk-posts-post-sub" :title="title">
 	<a class="avatar-anchor" :href="`/${post.user.username}`">
-		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" :v-user-preview="post.user_id"/>
+		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="post.user_id"/>
 	</a>
 	<div class="main">
 		<header>
-			<a class="name" :href="`/${post.user.username}`" :v-user-preview="post.user_id">{{ post.user.name }}</a>
+			<a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a>
 			<span class="username">@{{ post.user.username }}</span>
 			<a class="created-at" :href="`/${post.user.username}/${post.id}`">
 				<mk-time :time="post.created_at"/>
diff --git a/src/web/app/desktop/views/components/posts-post.vue b/src/web/app/desktop/views/components/posts-post.vue
index 77a1e882c8..2a4c39a97b 100644
--- a/src/web/app/desktop/views/components/posts-post.vue
+++ b/src/web/app/desktop/views/components/posts-post.vue
@@ -5,20 +5,20 @@
 	</div>
 	<div class="repost" v-if="isRepost">
 		<p>
-			<a class="avatar-anchor" :href="`/${post.user.username}`" :v-user-preview="post.user_id">
+			<a class="avatar-anchor" :href="`/${post.user.username}`" v-user-preview="post.user_id">
 				<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=32`" alt="avatar"/>
 			</a>
-			%fa:retweet%{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}}<a class="name" :href="`/${post.user.username}`" :v-user-preview="post.user_id">{{ post.user.name }}</a>{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}}
+			%fa:retweet%{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr(0, '%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('{'))}}<a class="name" :href="`/${post.user.username}`" v-user-preview="post.user_id">{{ post.user.name }}</a>{{'%i18n:desktop.tags.mk-timeline-post.reposted-by%'.substr('%i18n:desktop.tags.mk-timeline-post.reposted-by%'.indexOf('}') + 1)}}
 		</p>
 		<mk-time :time="post.created_at"/>
 	</div>
 	<article>
 		<a class="avatar-anchor" :href="`/${p.user.username}`">
-			<img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=64`" alt="avatar" :v-user-preview="p.user.id"/>
+			<img class="avatar" :src="`${p.user.avatar_url}?thumbnail&size=64`" alt="avatar" v-user-preview="p.user.id"/>
 		</a>
 		<div class="main">
 			<header>
-				<a class="name" :href="`/${p.user.username}`" :v-user-preview="p.user.id">{{ p.user.name }}</a>
+				<a class="name" :href="`/${p.user.username}`" v-user-preview="p.user.id">{{ p.user.name }}</a>
 				<span class="is-bot" v-if="p.user.is_bot">bot</span>
 				<span class="username">@{{ p.user.username }}</span>
 				<div class="info">
diff --git a/src/web/app/desktop/views/components/user-preview.vue b/src/web/app/desktop/views/components/user-preview.vue
index fb6ae2553b..71b17503b3 100644
--- a/src/web/app/desktop/views/components/user-preview.vue
+++ b/src/web/app/desktop/views/components/user-preview.vue
@@ -45,7 +45,9 @@ export default Vue.extend({
 	mounted() {
 		if (typeof this.user == 'object') {
 			this.u = this.user;
-			this.open();
+			this.$nextTick(() => {
+				this.open();
+			});
 		} else {
 			this.$root.$data.os.api('users/show', {
 				user_id: this.user[0] == '@' ? undefined : this.user,
diff --git a/src/web/app/desktop/views/directives/index.ts b/src/web/app/desktop/views/directives/index.ts
new file mode 100644
index 0000000000..324e07596d
--- /dev/null
+++ b/src/web/app/desktop/views/directives/index.ts
@@ -0,0 +1,6 @@
+import Vue from 'vue';
+
+import userPreview from './user-preview';
+
+Vue.directive('userPreview', userPreview);
+Vue.directive('user-preview', userPreview);
diff --git a/src/web/app/desktop/views/directives/user-preview.ts b/src/web/app/desktop/views/directives/user-preview.ts
new file mode 100644
index 0000000000..7d69936675
--- /dev/null
+++ b/src/web/app/desktop/views/directives/user-preview.ts
@@ -0,0 +1,63 @@
+import MkUserPreview from '../components/user-preview.vue';
+
+export default {
+	bind(el, binding, vn) {
+		const self = vn.context._userPreviewDirective_ = {} as any;
+
+		self.user = binding.value;
+
+		let tag = null;
+		self.showTimer = null;
+		self.hideTimer = null;
+
+		self.close = () => {
+			if (tag) {
+				tag.close();
+				tag = null;
+			}
+		};
+
+		const show = () => {
+			if (tag) return;
+			tag = new MkUserPreview({
+				parent: vn.context,
+				propsData: {
+					user: self.user
+				}
+			}).$mount();
+			const preview = tag.$el;
+			const rect = el.getBoundingClientRect();
+			const x = rect.left + el.offsetWidth + window.pageXOffset;
+			const y = rect.top + window.pageYOffset;
+			preview.style.top = y + 'px';
+			preview.style.left = x + 'px';
+			preview.addEventListener('mouseover', () => {
+				clearTimeout(self.hideTimer);
+			});
+			preview.addEventListener('mouseleave', () => {
+				clearTimeout(self.showTimer);
+				self.hideTimer = setTimeout(self.close, 500);
+			});
+			document.body.appendChild(preview);
+		};
+
+		el.addEventListener('mouseover', () => {
+			clearTimeout(self.showTimer);
+			clearTimeout(self.hideTimer);
+			self.showTimer = setTimeout(show, 500);
+		});
+
+		el.addEventListener('mouseleave', () => {
+			clearTimeout(self.showTimer);
+			clearTimeout(self.hideTimer);
+			self.hideTimer = setTimeout(self.close, 500);
+		});
+	},
+	unbind(el, binding, vn) {
+		const self = vn.context._userPreviewDirective_;
+		console.log('unbound:', self.user);
+		clearTimeout(self.showTimer);
+		clearTimeout(self.hideTimer);
+		self.close();
+	}
+};
diff --git a/src/web/app/mobile/script.ts b/src/web/app/mobile/script.ts
index f7129c5539..f2d617f3a2 100644
--- a/src/web/app/mobile/script.ts
+++ b/src/web/app/mobile/script.ts
@@ -12,6 +12,9 @@ import init from '../init';
  * init
  */
 init((launch) => {
+	// Register directives
+	require('./views/directives');
+
 	// http://qiita.com/junya/items/3ff380878f26ca447f85
 	document.body.setAttribute('ontouchstart', '');
 
diff --git a/src/web/app/mobile/views/directives/index.ts b/src/web/app/mobile/views/directives/index.ts
new file mode 100644
index 0000000000..324e07596d
--- /dev/null
+++ b/src/web/app/mobile/views/directives/index.ts
@@ -0,0 +1,6 @@
+import Vue from 'vue';
+
+import userPreview from './user-preview';
+
+Vue.directive('userPreview', userPreview);
+Vue.directive('user-preview', userPreview);
diff --git a/src/web/app/mobile/views/directives/user-preview.ts b/src/web/app/mobile/views/directives/user-preview.ts
new file mode 100644
index 0000000000..1a54abc20d
--- /dev/null
+++ b/src/web/app/mobile/views/directives/user-preview.ts
@@ -0,0 +1,2 @@
+// nope
+export default {};