This commit is contained in:
syuilo 2017-02-18 17:27:57 +09:00
parent 54eb188b0e
commit b55185f236
3 changed files with 71 additions and 75 deletions

View file

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

View file

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

View file

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