From 2a54802efa9b487dff720fb964ce818b6d797c18 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 18 Feb 2018 22:16:36 +0900 Subject: [PATCH] wip --- src/web/app/desktop/views/directives/user-preview.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/web/app/desktop/views/directives/user-preview.ts b/src/web/app/desktop/views/directives/user-preview.ts index 322302bcf..6e800ee73 100644 --- a/src/web/app/desktop/views/directives/user-preview.ts +++ b/src/web/app/desktop/views/directives/user-preview.ts @@ -1,3 +1,7 @@ +/** + * マウスオーバーするとユーザーがプレビューされる要素を設定します + */ + import MkUserPreview from '../components/user-preview.vue'; export default { @@ -19,25 +23,31 @@ export default { const show = () => { if (tag) return; + tag = new MkUserPreview({ parent: vn.context, propsData: { user: self.user } }).$mount(); + const preview = tag.$el; 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(self.hideTimer); }); + preview.addEventListener('mouseleave', () => { clearTimeout(self.showTimer); self.hideTimer = setTimeout(self.close, 500); }); + document.body.appendChild(preview); }; @@ -53,6 +63,7 @@ export default { self.hideTimer = setTimeout(self.close, 500); }); }, + unbind(el, binding, vn) { const self = vn.context._userPreviewDirective_; clearTimeout(self.showTimer);