✌️

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'
 

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;
+		}
+	}
+}

src/web/app/desktop/scripts/user-preview.ls

@@ -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