This commit is contained in:
syuilo 2020-09-21 14:42:16 +09:00
parent 2839c1df0d
commit e427f2160a
7 changed files with 116 additions and 85 deletions

View File

@ -1,8 +1,8 @@
<template>
<span class="eiwwqkts" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
<span class="eiwwqkts" :class="{ cat }" :title="acct(user)" v-if="disableLink" @click="onClick">
<img class="inner" :src="url"/>
</span>
<router-link class="eiwwqkts" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
<router-link class="eiwwqkts" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else>
<img class="inner" :src="url"/>
</router-link>
</template>
@ -10,11 +10,11 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import { UserPreview } from '@/scripts/user-preview';
import { acct, userPage } from '../filters/user';
import * as os from '@/os';
export default defineComponent({
emits: ['click'],
props: {
user: {
type: Object,
@ -33,6 +33,7 @@ export default defineComponent({
default: false
}
},
emits: ['click'],
computed: {
cat(): boolean {
return this.user.isCat;
@ -50,6 +51,10 @@ export default defineComponent({
},
mounted() {
this.$el.style.color = this.getBlurhashAvgColor(this.user.avatarBlurhash);
if (!this.disablePreview) {
new UserPreview(this.$el, this.user.id);
}
},
methods: {
getBlurhashAvgColor(s) {

View File

@ -1,5 +1,5 @@
<template>
<router-link class="ldlomzub" :class="{ isMe }" :to="url" v-user-preview="canonical" v-if="url.startsWith('/')">
<router-link class="ldlomzub" :class="{ isMe }" :to="url" v-if="url.startsWith('/')">
<span class="me" v-if="isMe">{{ $t('you') }}</span>
<span class="main">
<span class="username">@{{ username }}</span>
@ -18,6 +18,7 @@
import { defineComponent } from 'vue';
import { toUnicode } from 'punycode';
import { host as localHost } from '@/config';
import { UserPreview } from '@/scripts/user-preview';
import { wellKnownServices } from '../../well-known-services';
import * as os from '@/os';
@ -55,6 +56,9 @@ export default defineComponent({
);
}
},
mounted() {
new UserPreview(this.$el, this.canonical);
},
methods: {
toUnicode
}

View File

@ -1,6 +1,6 @@
<template>
<header class="kkwtjztg">
<router-link class="name" :to="userPage(note.user)" v-user-preview="note.user.id">
<router-link class="name" :to="userPage(note.user)" ref="name">
<mk-user-name :user="note.user"/>
</router-link>
<span class="is-bot" v-if="note.user.isBot">bot</span>
@ -26,6 +26,7 @@
import { defineComponent } from 'vue';
import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons';
import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
import { UserPreview } from '@/scripts/user-preview';
import notePage from '../filters/note';
import { userPage } from '../filters/user';
import * as os from '@/os';
@ -44,6 +45,10 @@ export default defineComponent({
};
},
mounted() {
new UserPreview(this.$refs.name.$el, this.note.user.id);
},
methods: {
notePage,
userPage

View File

@ -1,6 +1,6 @@
<template>
<transition name="popup" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
<div v-if="show" class="fxxzrfni _panel _shadow" ref="content" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
<transition name="popup" appear @after-leave="$emit('closed')">
<div v-if="show && showing" class="fxxzrfni _panel _shadow" ref="content" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
<div class="banner" :style="u.bannerUrl ? `background-image: url(${u.bannerUrl})` : ''"></div>
<mk-avatar class="avatar" :user="u" :disable-preview="true"/>
<div class="title">
@ -39,6 +39,10 @@ export default defineComponent({
},
props: {
showing: {
type: Boolean,
required: true
},
user: {
type: [Object, String],
required: true
@ -48,6 +52,8 @@ export default defineComponent({
}
},
emits: ['closed', 'mouseover', 'mouseleave'],
data() {
return {
u: null,

View File

@ -1,13 +1,10 @@
import { App } from 'vue';
import userPreview from './user-preview';
import size from './size';
import particle from './particle';
import tooltip from './tooltip';
export default function(app: App) {
app.directive('userPreview', userPreview);
app.directive('user-preview', userPreview);
app.directive('size', size);
app.directive('particle', particle);
app.directive('tooltip', tooltip);

View File

@ -1,75 +0,0 @@
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.close = null;
self.showTimer = null;
self.hideTimer = null;
self.checkTimer = null;
self.close = () => {
if (self.close) {
clearInterval(self.checkTimer);
self.close.close();
self.close = null;
}
};
const show = () => {
if (!document.body.contains(el)) return;
if (self.close) return;
self.close = os.popup(MkUserPreview, {
user: self.user,
source: el
});
self.close.$on('mouseover', () => {
clearTimeout(self.hideTimer);
});
self.close.$on('mouseleave', () => {
clearTimeout(self.showTimer);
self.hideTimer = setTimeout(self.close, 500);
});
self.checkTimer = setInterval(() => {
if (!document.body.contains(el)) {
clearTimeout(self.showTimer);
clearTimeout(self.hideTimer);
self.close();
}
}, 1000);
};
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);
});
el.addEventListener('click', () => {
clearTimeout(self.showTimer);
self.close();
});
},
unmounted(el, binding, vn) {
const self = el._userPreviewDirective_;
clearInterval(self.checkTimer);
}*/
} as Directive;

View File

@ -0,0 +1,89 @@
import autobind from 'autobind-decorator';
import { popup } from '@/os';
export class UserPreview {
private el;
private user;
private showTimer;
private hideTimer;
private checkTimer;
private promise;
constructor(el, user) {
this.el = el;
this.user = user;
this.attach();
}
@autobind
private async show() {
if (!document.body.contains(this.el)) return;
if (this.promise) return;
this.promise = popup(await import('@/components/user-preview.vue'), {
user: this.user,
source: this.el
}, {
mouseover: () => {
clearTimeout(this.hideTimer);
},
mouseleave: () => {
clearTimeout(this.showTimer);
this.hideTimer = setTimeout(this.close, 500);
},
});
this.checkTimer = setInterval(() => {
if (!document.body.contains(this.el)) {
clearTimeout(this.showTimer);
clearTimeout(this.hideTimer);
this.close();
}
}, 1000);
}
@autobind
private close() {
if (this.promise) {
clearInterval(this.checkTimer);
this.promise.cancel();
this.promise = null;
}
}
@autobind
private onMouseover() {
clearTimeout(this.showTimer);
clearTimeout(this.hideTimer);
this.showTimer = setTimeout(this.show, 500);
}
@autobind
private onMouseleave() {
clearTimeout(this.showTimer);
clearTimeout(this.hideTimer);
this.hideTimer = setTimeout(this.close, 500);
}
@autobind
private onClick() {
clearTimeout(this.showTimer);
this.close();
}
@autobind
public attach() {
this.el.addEventListener('mouseover', this.onMouseover);
this.el.addEventListener('mouseleave', this.onMouseleave);
this.el.addEventListener('click', this.onClick);
}
@autobind
public detach() {
this.el.removeEventListener('mouseover', this.onMouseover);
this.el.removeEventListener('mouseleave', this.onMouseleave);
this.el.removeEventListener('click', this.onClick);
clearInterval(this.checkTimer);
}
}