From fcd3dcd3f65577cf9323ff1dbe8d6139958be3f8 Mon Sep 17 00:00:00 2001 From: tamaina Date: Mon, 6 Apr 2020 21:42:16 +0900 Subject: [PATCH 1/3] =?UTF-8?q?URL=E3=83=97=E3=83=AC=E3=83=93=E3=83=A5?= =?UTF-8?q?=E3=83=BC=E3=83=9D=E3=83=83=E3=83=97=E3=82=A2=E3=83=83=E3=83=97?= =?UTF-8?q?=E3=82=92=E6=94=B9=E8=89=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - タッチデバイスでは表示しないように - 幅をレスポンシブに --- src/client/components/link.vue | 2 ++ src/client/components/url-preview-popup.vue | 3 ++- src/client/components/url.vue | 2 ++ 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/client/components/link.vue b/src/client/components/link.vue index 11de68852022..7f7c6e40351f 100644 --- a/src/client/components/link.vue +++ b/src/client/components/link.vue @@ -61,11 +61,13 @@ export default Vue.extend({ } }, onMouseover() { + if ('ontouchstart' in window) return; clearTimeout(this.showTimer); clearTimeout(this.hideTimer); this.showTimer = setTimeout(this.showPreview, 500); }, onMouseleave() { + if ('ontouchstart' in window) 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 938566e9e20f..acd9b1aa9ae1 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 409bb128f6d8..da4e4e8f5456 100644 --- a/src/client/components/url.vue +++ b/src/client/components/url.vue @@ -92,11 +92,13 @@ export default Vue.extend({ } }, onMouseover() { + if ('ontouchstart' in window) return; clearTimeout(this.showTimer); clearTimeout(this.hideTimer); this.showTimer = setTimeout(this.showPreview, 500); }, onMouseleave() { + if ('ontouchstart' in window) return; clearTimeout(this.showTimer); clearTimeout(this.hideTimer); this.hideTimer = setTimeout(this.closePreview, 500); From aa534a94f26d3e42ac16f01dbb866988d71407f2 Mon Sep 17 00:00:00 2001 From: tamaina Date: Sat, 11 Apr 2020 19:55:50 +0900 Subject: [PATCH 2/3] Use maxTouchPoints to detect touch device --- src/client/components/link.vue | 5 +++-- src/client/components/url.vue | 5 +++-- src/client/scripts/is-device-touch.ts | 3 +++ 3 files changed, 9 insertions(+), 4 deletions(-) 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 7f7c6e40351f..b9a737c5d652 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,13 +62,13 @@ export default Vue.extend({ } }, onMouseover() { - if ('ontouchstart' in window) return; + if (isDeviceTouch()) return; clearTimeout(this.showTimer); clearTimeout(this.hideTimer); this.showTimer = setTimeout(this.showPreview, 500); }, onMouseleave() { - if ('ontouchstart' in window) return; + if (isDeviceTouch()) return; clearTimeout(this.showTimer); clearTimeout(this.hideTimer); this.hideTimer = setTimeout(this.closePreview, 500); diff --git a/src/client/components/url.vue b/src/client/components/url.vue index da4e4e8f5456..a2ce7deed18e 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,13 +93,13 @@ export default Vue.extend({ } }, onMouseover() { - if ('ontouchstart' in window) return; + if (isDeviceTouch()) return; clearTimeout(this.showTimer); clearTimeout(this.hideTimer); this.showTimer = setTimeout(this.showPreview, 500); }, onMouseleave() { - if ('ontouchstart' in window) return; + 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 000000000000..9f439ae4fdc3 --- /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; +} From e5369115aa4f25a267d91d4ba7dcdd5840d450cd Mon Sep 17 00:00:00 2001 From: tamaina Date: Sat, 11 Apr 2020 19:56:43 +0900 Subject: [PATCH 3/3] fix --- src/client/components/link.vue | 2 +- src/client/components/url.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/components/link.vue b/src/client/components/link.vue index b9a737c5d652..4c709375d3e9 100644 --- a/src/client/components/link.vue +++ b/src/client/components/link.vue @@ -14,7 +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' +import { isDeviceTouch } from '../scripts/is-device-touch'; export default Vue.extend({ props: { diff --git a/src/client/components/url.vue b/src/client/components/url.vue index a2ce7deed18e..4dd23a50ed70 100644 --- a/src/client/components/url.vue +++ b/src/client/components/url.vue @@ -24,7 +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' +import { isDeviceTouch } from '../scripts/is-device-touch'; export default Vue.extend({ props: {