refactor(client): refactor

packages/client/src/components/global/url.vue

@@ -1,7 +1,5 @@
 <template>
-<component :is="self ? 'MkA' : 'a'" class="ieqqeuvs _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
+<component :is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
-	@mouseover="onMouseover"
-	@mouseleave="onMouseleave"
 	@contextmenu.stop="() => {}"
 >
 	<template v-if="!self">
@@ -20,11 +18,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { toUnicode as decodePunycode } from 'punycode/';
 import { url as local } from '@/config';
-import { isTouchUsing } from '@/scripts/touch';
 import * as os from '@/os';
+import { useTooltip } from '@/scripts/use-tooltip';
 
 export default defineComponent({
 	props: {
@@ -35,74 +33,36 @@ export default defineComponent({
 		rel: {
 			type: String,
 			required: false,
+			default: null,
 		}
 	},
-	data() {
+	setup(props) {
-		const self = this.url.startsWith(local);
+		const self = props.url.startsWith(local);
+		const url = new URL(props.url);
+		const el = ref();
+		
+		useTooltip(el, (showing) => {
+			os.popup(import('@/components/url-preview-popup.vue'), {
+				showing,
+				url: props.url,
+				source: el.value,
+			}, {}, 'closed');
+		});
+
 		return {
 			local,
-			schema: null as string | null,
+			schema: url.protocol,
-			hostname: null as string | null,
+			hostname: decodePunycode(url.hostname),
-			port: null as string | null,
+			port: url.port,
-			pathname: null as string | null,
+			pathname: decodeURIComponent(url.pathname),
-			query: null as string | null,
+			query: decodeURIComponent(url.search),
-			hash: null as string | null,
+			hash: decodeURIComponent(url.hash),
 			self: self,
 			attr: self ? 'to' : 'href',
 			target: self ? null : '_blank',
-			showTimer: null,
+			el,
-			hideTimer: null,
-			checkTimer: null,
-			close: null,
 		};
 	},
-	created() {
-		const url = new URL(this.url);
-		this.schema = url.protocol;
-		this.hostname = decodePunycode(url.hostname);
-		this.port = url.port;
-		this.pathname = decodeURIComponent(url.pathname);
-		this.query = decodeURIComponent(url.search);
-		this.hash = decodeURIComponent(url.hash);
-	},
-	methods: {
-		async showPreview() {
-			if (!document.body.contains(this.$el)) return;
-			if (this.close) return;
-
-			const { dispose } = await os.popup(import('@/components/url-preview-popup.vue'), {
-				url: this.url,
-				source: this.$el
-			});
-
-			this.close = () => {
-				dispose();
-			};
-
-			this.checkTimer = setInterval(() => {
-				if (!document.body.contains(this.$el)) this.closePreview();
-			}, 1000);
-		},
-		closePreview() {
-			if (this.close) {
-				clearInterval(this.checkTimer);
-				this.close();
-				this.close = null;
-			}
-		},
-		onMouseover() {
-			if (isTouchUsing) return;
-			clearTimeout(this.showTimer);
-			clearTimeout(this.hideTimer);
-			this.showTimer = setTimeout(this.showPreview, 500);
-		},
-		onMouseleave() {
-			if (isTouchUsing) return;
-			clearTimeout(this.showTimer);
-			clearTimeout(this.hideTimer);
-			this.hideTimer = setTimeout(this.closePreview, 500);
-		}
-	}
 });
 </script>
 

packages/client/src/pages/channels.vue

@@ -39,7 +39,7 @@ export default defineComponent({
 				actions: [{
 					icon: 'fas fa-plus',
 					text: this.$ts.create,
-					handler: this.create
+					handler: this.create,
 				}],
 				tabs: [{
 					active: this.tab === 'featured',

packages/client/src/scripts/use-tooltip.ts

@@ -18,6 +18,9 @@ export function useTooltip(
 	const open = () => {
 		close();
 		if (!isHovering) return;
+		if (elRef.value == null) return;
+		const el = elRef.value instanceof Element ? elRef.value : elRef.value.$el;
+		if (!document.body.contains(el)) return; // openしようとしたときに既に元要素がDOMから消えている場合があるため
 
 		const showing = ref(true);
 		onShow(showing);