wip

src/client/scripts/user-preview.ts

@@ -0,0 +1,89 @@
+import autobind from 'autobind-decorator';
+import { popup } from '@/os';
+
+export class UserPreview {
+	private el;
+	private user;
+	private showTimer;
+	private hideTimer;
+	private checkTimer;
+	private promise;
+
+	constructor(el, user) {
+		this.el = el;
+		this.user = user;
+
+		this.attach();
+	}
+
+	@autobind
+	private async show() {
+		if (!document.body.contains(this.el)) return;
+		if (this.promise) return;
+
+		this.promise = popup(await import('@/components/user-preview.vue'), {
+			user: this.user,
+			source: this.el
+		}, {
+			mouseover: () => {
+				clearTimeout(this.hideTimer);
+			},
+			mouseleave: () => {
+				clearTimeout(this.showTimer);
+				this.hideTimer = setTimeout(this.close, 500);
+			},
+		});
+
+		this.checkTimer = setInterval(() => {
+			if (!document.body.contains(this.el)) {
+				clearTimeout(this.showTimer);
+				clearTimeout(this.hideTimer);
+				this.close();
+			}
+		}, 1000);
+	}
+
+	@autobind
+	private close() {
+		if (this.promise) {
+			clearInterval(this.checkTimer);
+			this.promise.cancel();
+			this.promise = null;
+		}
+	}
+
+	@autobind
+	private onMouseover() {
+		clearTimeout(this.showTimer);
+		clearTimeout(this.hideTimer);
+		this.showTimer = setTimeout(this.show, 500);
+	}
+
+	@autobind
+	private onMouseleave() {
+		clearTimeout(this.showTimer);
+		clearTimeout(this.hideTimer);
+		this.hideTimer = setTimeout(this.close, 500);
+	}
+
+	@autobind
+	private onClick() {
+		clearTimeout(this.showTimer);
+		this.close();
+	}
+
+	@autobind
+	public attach() {
+		this.el.addEventListener('mouseover', this.onMouseover);
+		this.el.addEventListener('mouseleave', this.onMouseleave);
+		this.el.addEventListener('click', this.onClick);
+	}
+
+	@autobind
+	public detach() {
+		this.el.removeEventListener('mouseover', this.onMouseover);
+		this.el.removeEventListener('mouseleave', this.onMouseleave);
+		this.el.removeEventListener('click', this.onClick);
+		clearInterval(this.checkTimer);
+	}
+}