From b55185f23623a03a8191eed11015fc4c422b85eb Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 18 Feb 2017 17:27:57 +0900
Subject: [PATCH] :v:

---
 src/web/app/desktop/mixins.ls               |  2 +-
 src/web/app/desktop/scripts/user-preview.js | 70 +++++++++++++++++++
 src/web/app/desktop/scripts/user-preview.ls | 74 ---------------------
 3 files changed, 71 insertions(+), 75 deletions(-)
 create mode 100644 src/web/app/desktop/scripts/user-preview.js
 delete mode 100644 src/web/app/desktop/scripts/user-preview.ls

diff --git a/src/web/app/desktop/mixins.ls b/src/web/app/desktop/mixins.ls
index e32cb1ac4..f8431ec48 100644
--- a/src/web/app/desktop/mixins.ls
+++ b/src/web/app/desktop/mixins.ls
@@ -4,7 +4,7 @@ module.exports = (me) ~>
 	if me?
 		(require './scripts/stream') me
 
-	require './scripts/user-preview.ls'
+	require './scripts/user-preview'
 
 	require './scripts/open-window.ls'
 
diff --git a/src/web/app/desktop/scripts/user-preview.js b/src/web/app/desktop/scripts/user-preview.js
new file mode 100644
index 000000000..8816eb41b
--- /dev/null
+++ b/src/web/app/desktop/scripts/user-preview.js
@@ -0,0 +1,70 @@
+const riot = require('riot');
+
+riot.mixin('user-preview', {
+	init: () => {
+		this.on('mount', () => {
+			scan.call(this);
+		});
+		this.on('updated', () => {
+			scan.call(this);
+		});
+		function scan(){
+			this.root.querySelectorAll('[data-user-preview]:not([data-user-preview-attached])')
+				.forEach(attach.bind(this));
+		}
+	}
+});
+
+function attach(el) {
+	el.setAttribute('data-user-preview-attached', true);
+
+	const user = el.getAttribute('data-user-preview');
+	let tag = null;
+	let showTimer = null;
+	let hideTimer = null;
+
+	el.addEventListener('mouseover', () => {
+		clearTimeout(showTimer);
+		clearTimeout(hideTimer);
+		showTimer = setTimeout(show, 500);
+	});
+
+	el.addEventListener('mouseleave', () => {
+		clearTimeout(showTimer);
+		clearTimeout(hideTimer);
+		hideTimer = setTimeout(close, 500);
+	});
+
+	this.on('unmount', () => {
+		clearTimeout(showTimer);
+		clearTimeout(hideTimer);
+		close();
+	});
+
+	const show = () => {
+		if (tag) return;
+		const preview = document.createElement('mk-user-preview');
+		const rect = el.getBoundingClientRect();
+		const x = rect.left + el.offsetWidth + window.pageXOffset;
+		const y = rect.top + window.pageYOffset;
+		preview.style.top = y + 'px';
+		preview.style.left = x + 'px';
+		preview.addEventListener('mouseover', () => {
+			clearTimeout(hideTimer);
+		});
+		preview.addEventListener('mouseleave', () => {
+			clearTimeout(showTimer);
+			hideTimer = setTimeout(close, 500);
+		});
+		tag = riot.mount(document.body.appendChild(preview), {
+			user: user
+		})[0];
+	}
+
+	const close = () => {
+		if (tag) {
+			tag.close();
+			tag = null;
+		}
+	}
+}
diff --git a/src/web/app/desktop/scripts/user-preview.ls b/src/web/app/desktop/scripts/user-preview.ls
deleted file mode 100644
index 0c5a67aed..000000000
--- a/src/web/app/desktop/scripts/user-preview.ls
+++ /dev/null
@@ -1,74 +0,0 @@
-# User Preview
-#================================
-
-riot = require \riot
-
-riot.mixin \user-preview do
-	init: ->
-		@on \mount ~>
-			scan.call @
-		@on \updated ~>
-			scan.call @
-
-		function scan
-			elems = @root.query-selector-all '[data-user-preview]:not([data-user-preview-attached])'
-			elems.for-each attach.bind @
-
-function attach el
-	el.set-attribute \data-user-preview-attached true
-	user = el.get-attribute \data-user-preview
-
-	tag = null
-
-	show-timer = null
-	hide-timer = null
-
-	el.add-event-listener \mouseover ~>
-		clear-timeout show-timer
-		clear-timeout hide-timer
-		show-timer := set-timeout ~>
-			show!
-		, 500ms
-
-	el.add-event-listener \mouseleave ~>
-		clear-timeout show-timer
-		clear-timeout hide-timer
-		hide-timer := set-timeout ~>
-			close!
-		, 500ms
-
-	@on \unmount ~>
-		clear-timeout show-timer
-		clear-timeout hide-timer
-		close!
-
-	function show
-		if tag?
-			return
-
-		preview = document.create-element \mk-user-preview
-
-		rect = el.get-bounding-client-rect!
-		x = rect.left + el.offset-width + window.page-x-offset
-		y = rect.top + window.page-y-offset
-
-		preview.style.top = y + \px
-		preview.style.left = x + \px
-
-		preview.add-event-listener \mouseover ~>
-			clear-timeout hide-timer
-
-		preview.add-event-listener \mouseleave ~>
-			clear-timeout show-timer
-			hide-timer := set-timeout ~>
-				close!
-			, 500ms
-
-		tag := riot.mount (document.body.append-child preview), do
-			user: user
-		.0
-
-	function close
-		if tag?
-			tag.close!
-			tag := null