mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-22 15:14:16 +02:00
Code Releases Activity

refactor(frontend): カスタムディレクティブの型付け (#16659)

Browse Source 
* refactor(frontend): カスタムディレクティブの型付け

* fix
This commit is contained in:
かっこかり
2025-10-19 11:36:00 +09:00
committed by GitHub
parent 44930342a8
commit d98bf012b5
13 changed files with 158 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/frontend/src/directives/tooltip.ts
View File

@@ -14,13 +14,30 @@ import { popup, alert } from '@/os.js';
const start = isTouchUsing ? 'touchstart' : 'mouseenter';
const end = isTouchUsing ? 'touchend' : 'mouseleave';
export default {
mounted(el: HTMLElement, binding, vn) {
type TooltipDirectiveState = {
text: string;
_close: null | (() => void);
showTimer: number | null;
hideTimer: number | null;
checkTimer: number | null;
show: () => void;
close: () => void;
};
interface TooltipDirectiveElement extends HTMLElement {
_tooltipDirective_?: TooltipDirectiveState;
}
type TooltipDirectiveModifiers = 'left' | 'right' | 'top' | 'bottom' | 'mfm' | 'noDelay';
type TooltipDirectiveArg = 'dialog';
export const tooltipDirective = {
mounted(el, binding) {
const delay = binding.modifiers.noDelay ? 0 : 100;
const self = (el as any)._tooltipDirective_ = {} as any;
const self = el._tooltipDirective_ = {} as TooltipDirectiveState;
self.text = binding.value as string;
self.text = binding.value;
self._close = null;
self.showTimer = null;
self.hideTimer = null;
@@ -28,7 +45,7 @@ export default {
self.close = () => {
if (self._close) {
window.clearInterval(self.checkTimer);
if (self.checkTimer) window.clearInterval(self.checkTimer);
self._close();
self._close = null;
}
@@ -72,8 +89,8 @@ export default {
});
el.addEventListener(start, (ev) => {
window.clearTimeout(self.showTimer);
window.clearTimeout(self.hideTimer);
if (self.showTimer) window.clearTimeout(self.showTimer);
if (self.hideTimer) window.clearTimeout(self.hideTimer);
if (delay === 0) {
self.show();
} else {
@@ -82,8 +99,8 @@ export default {
}, { passive: true });
el.addEventListener(end, () => {
window.clearTimeout(self.showTimer);
window.clearTimeout(self.hideTimer);
if (self.showTimer) window.clearTimeout(self.showTimer);
if (self.hideTimer) window.clearTimeout(self.hideTimer);
if (delay === 0) {
self.close();
} else {
@@ -92,18 +109,23 @@ export default {
}, { passive: true });
el.addEventListener('click', () => {
window.clearTimeout(self.showTimer);
if (self.showTimer) window.clearTimeout(self.showTimer);
self.close();
});
},
updated(el, binding) {
const self = el._tooltipDirective_;
if (self == null) return;
self.text = binding.value as string;
},
unmounted(el, binding, vn) {
unmounted(el) {
const self = el._tooltipDirective_;
window.clearInterval(self.checkTimer);
if (self == null) return;
if (self.showTimer) window.clearTimeout(self.showTimer);
if (self.hideTimer) window.clearTimeout(self.hideTimer);
if (self.checkTimer) window.clearTimeout(self.checkTimer);
self.close();
},
} as Directive;
} as Directive<TooltipDirectiveElement, string, TooltipDirectiveModifiers, TooltipDirectiveArg>;