Initial commit 🍀

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

@@ -0,0 +1,74 @@
+# 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