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

87 lines
2.5 KiB
TypeScript
Raw Normal View History

2021-12-24 04:34:24 +01:00
import { Ref, ref, watch, onUnmounted } from 'vue';
2021-12-05 12:01:52 +01:00
export function useTooltip(
elRef: Ref<HTMLElement | { $el: HTMLElement } | null | undefined>,
onShow: (showing: Ref<boolean>) => void,
2022-06-30 16:51:18 +02:00
delay = 300,
2021-12-05 12:01:52 +01:00
): void {
let isHovering = false;
2021-12-05 12:01:52 +01:00
// iOS(Androidも)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、それを無視するためのフラグ
// 無視しないと、画面に触れてないのにツールチップが出たりし、ユーザビリティが損なわれる
// TODO: 一度でもタップすると二度とマウスでツールチップ出せなくなるのをどうにかする 定期的にfalseに戻すとか...
let shouldIgnoreMouseover = false;
let timeoutId: number;
let changeShowingState: (() => void) | null;
const open = () => {
close();
if (!isHovering) return;
2021-12-23 09:05:26 +01:00
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);
changeShowingState = () => {
showing.value = false;
};
};
const close = () => {
if (changeShowingState != null) {
changeShowingState();
changeShowingState = null;
}
};
const onMouseover = () => {
if (isHovering) return;
2021-12-05 12:01:52 +01:00
if (shouldIgnoreMouseover) return;
isHovering = true;
2022-06-30 16:51:18 +02:00
timeoutId = window.setTimeout(open, delay);
};
const onMouseleave = () => {
if (!isHovering) return;
isHovering = false;
window.clearTimeout(timeoutId);
close();
};
2021-12-05 12:01:52 +01:00
const onTouchstart = () => {
shouldIgnoreMouseover = true;
if (isHovering) return;
isHovering = true;
2022-06-30 16:51:18 +02:00
timeoutId = window.setTimeout(open, delay);
2021-12-05 12:01:52 +01:00
};
const onTouchend = () => {
if (!isHovering) return;
isHovering = false;
window.clearTimeout(timeoutId);
close();
};
2021-12-05 12:01:52 +01:00
const stop = watch(elRef, () => {
if (elRef.value) {
stop();
const el = elRef.value instanceof Element ? elRef.value : elRef.value.$el;
el.addEventListener('mouseover', onMouseover, { passive: true });
el.addEventListener('mouseleave', onMouseleave, { passive: true });
el.addEventListener('touchstart', onTouchstart, { passive: true });
el.addEventListener('touchend', onTouchend, { passive: true });
2021-12-24 04:34:24 +01:00
el.addEventListener('click', close, { passive: true });
2021-12-05 12:01:52 +01:00
}
}, {
immediate: true,
flush: 'post',
});
2021-12-24 04:34:24 +01:00
onUnmounted(() => {
close();
});
}