limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-22 09:57:29 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Don't show tooltips when touch input is used

Browse source
This commit is contained in:
Aylam 2023-11-04 17:23:03 +02:00
parent 1d8217e9a0
commit 7d85de4d5c
1 changed files with 0 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/client/src/scripts/use-tooltip.ts
View file

@ -7,11 +7,6 @@ export function useTooltip(
): void { ): void {
let isHovering = false; let isHovering = false;
// iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、それを無視するためのフラグ
// 無視しないと、画面に触れてないのにツールチップが出たりし、ユーザビリティが損なわれる
// TODO: 一度でもタップすると二度とマウスでツールチップ出せなくなるのをどうにかする 定期的にfalseに戻すとか...？
let shouldIgnoreMouseover = false;
let timeoutId: number; let timeoutId: number;
let changeShowingState: (() => void) | null; let changeShowingState: (() => void) | null;
@ -39,7 +34,6 @@ export function useTooltip(
const onMouseover = () => { const onMouseover = () => {
if (isHovering) return; if (isHovering) return;
if (shouldIgnoreMouseover) return;
isHovering = true; isHovering = true;
timeoutId = window.setTimeout(open, delay); timeoutId = window.setTimeout(open, delay);
}; };
@ -51,20 +45,6 @@ export function useTooltip(
close(); close();
}; };
const onTouchstart = () => {
shouldIgnoreMouseover = true;
if (isHovering) return;
isHovering = true;
timeoutId = window.setTimeout(open, delay);
};
const onTouchend = () => {
if (!isHovering) return;
isHovering = false;
window.clearTimeout(timeoutId);
close();
};
const stop = watch( const stop = watch(
elRef, elRef,
() => { () => {
@ -74,8 +54,6 @@ export function useTooltip(
elRef.value instanceof Element ? elRef.value : elRef.value.$el; elRef.value instanceof Element ? elRef.value : elRef.value.$el;
el.addEventListener("mouseover", onMouseover, { passive: true }); el.addEventListener("mouseover", onMouseover, { passive: true });
el.addEventListener("mouseleave", onMouseleave, { passive: true }); el.addEventListener("mouseleave", onMouseleave, { passive: true });
el.addEventListener("touchstart", onTouchstart, { passive: true });
el.addEventListener("touchend", onTouchend, { passive: true });
el.addEventListener("click", close, { passive: true }); el.addEventListener("click", close, { passive: true });
} }
}, },