From 96eab7e12bf843b638b27fff2bab186f84e92290 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 14 Apr 2020 00:00:52 +0900
Subject: [PATCH] =?UTF-8?q?=E6=8A=95=E7=A8=BF=E3=81=AEURL=E3=83=97?=
 =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC=E3=83=9D=E3=83=83=E3=83=97?=
 =?UTF-8?q?=E3=82=A2=E3=83=83=E3=83=97=E3=82=92=E6=94=B9=E8=89=AF=20(#6226?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* URLプレビューポップアップを改良

- タッチデバイスでは表示しないように
- 幅をレスポンシブに

* Use maxTouchPoints to detect touch device

* fix
---
 src/client/components/link.vue              | 3 +++
 src/client/components/url-preview-popup.vue | 3 ++-
 src/client/components/url.vue               | 3 +++
 src/client/scripts/is-device-touch.ts       | 3 +++
 4 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 src/client/scripts/is-device-touch.ts

diff --git a/src/client/components/link.vue b/src/client/components/link.vue
index 11de688520..4c709375d3 100644
--- a/src/client/components/link.vue
+++ b/src/client/components/link.vue
@@ -14,6 +14,7 @@ import Vue from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { url as local } from '../config';
 import MkUrlPreview from './url-preview-popup.vue';
+import { isDeviceTouch } from '../scripts/is-device-touch';
 
 export default Vue.extend({
 	props: {
@@ -61,11 +62,13 @@ export default Vue.extend({
 			}
 		},
 		onMouseover() {
+			if (isDeviceTouch()) return;
 			clearTimeout(this.showTimer);
 			clearTimeout(this.hideTimer);
 			this.showTimer = setTimeout(this.showPreview, 500);
 		},
 		onMouseleave() {
+			if (isDeviceTouch()) return;
 			clearTimeout(this.showTimer);
 			clearTimeout(this.hideTimer);
 			this.hideTimer = setTimeout(this.closePreview, 500);
diff --git a/src/client/components/url-preview-popup.vue b/src/client/components/url-preview-popup.vue
index 938566e9e2..acd9b1aa9a 100644
--- a/src/client/components/url-preview-popup.vue
+++ b/src/client/components/url-preview-popup.vue
@@ -36,7 +36,7 @@ export default Vue.extend({
 
 	mounted() {
 		const rect = this.source.getBoundingClientRect();
-		const x = ((rect.left + (this.source.offsetWidth / 2)) - (300 / 2)) + window.pageXOffset;
+		const x = Math.max((rect.left + (this.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset;
 		const y = rect.top + this.source.offsetHeight + window.pageYOffset;
 
 		this.top = y;
@@ -50,6 +50,7 @@ export default Vue.extend({
 	position: absolute;
 	z-index: 11000;
 	width: 500px;
+	max-width: calc(90vw - 12px);
 	overflow: hidden;
 	pointer-events: none;
 }
diff --git a/src/client/components/url.vue b/src/client/components/url.vue
index 409bb128f6..4dd23a50ed 100644
--- a/src/client/components/url.vue
+++ b/src/client/components/url.vue
@@ -24,6 +24,7 @@ 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';
 
 export default Vue.extend({
 	props: {
@@ -92,11 +93,13 @@ export default Vue.extend({
 			}
 		},
 		onMouseover() {
+			if (isDeviceTouch()) return;
 			clearTimeout(this.showTimer);
 			clearTimeout(this.hideTimer);
 			this.showTimer = setTimeout(this.showPreview, 500);
 		},
 		onMouseleave() {
+			if (isDeviceTouch()) return;
 			clearTimeout(this.showTimer);
 			clearTimeout(this.hideTimer);
 			this.hideTimer = setTimeout(this.closePreview, 500);
diff --git a/src/client/scripts/is-device-touch.ts b/src/client/scripts/is-device-touch.ts
new file mode 100644
index 0000000000..9f439ae4fd
--- /dev/null
+++ b/src/client/scripts/is-device-touch.ts
@@ -0,0 +1,3 @@
+export function isDeviceTouch(): boolean {
+	return 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0;
+}