投稿のURLプレビューポップアップを改良 (#6226)

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

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

* Use maxTouchPoints to detect touch device

* fix
This commit is contained in:
tamaina 2020-04-14 00:00:52 +09:00 committed by GitHub
parent 916512fd47
commit 96eab7e12b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 1 deletions

View File

@ -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);

View File

@ -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;
}

View File

@ -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);

View File

@ -0,0 +1,3 @@
export function isDeviceTouch(): boolean {
return 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0;
}