From b55185f23623a03a8191eed11015fc4c422b85eb Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 18 Feb 2017 17:27:57 +0900 Subject: [PATCH] :v: --- src/web/app/desktop/mixins.ls | 2 +- src/web/app/desktop/scripts/user-preview.js | 70 +++++++++++++++++++ src/web/app/desktop/scripts/user-preview.ls | 74 --------------------- 3 files changed, 71 insertions(+), 75 deletions(-) create mode 100644 src/web/app/desktop/scripts/user-preview.js delete mode 100644 src/web/app/desktop/scripts/user-preview.ls diff --git a/src/web/app/desktop/mixins.ls b/src/web/app/desktop/mixins.ls index e32cb1ac4c..f8431ec482 100644 --- a/src/web/app/desktop/mixins.ls +++ b/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' diff --git a/src/web/app/desktop/scripts/user-preview.js b/src/web/app/desktop/scripts/user-preview.js new file mode 100644 index 0000000000..8816eb41b3 --- /dev/null +++ b/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; + } + } +} diff --git a/src/web/app/desktop/scripts/user-preview.ls b/src/web/app/desktop/scripts/user-preview.ls deleted file mode 100644 index 0c5a67aedb..0000000000 --- a/src/web/app/desktop/scripts/user-preview.ls +++ /dev/null @@ -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