75 lines
1.4 KiB
Text
75 lines
1.4 KiB
Text
|
# 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
|