From 4cca80e3c14dba105421af9c741f1815928a0e3f Mon Sep 17 00:00:00 2001 From: Efremov Alexey Date: Fri, 13 Jul 2018 10:46:22 +0300 Subject: [PATCH] restyle close button, add close animation (#152) closes #98 --- .../user-info/__close/user-info__close.scss | 13 -- web/app/components/user-info/index.js | 2 - web/app/components/user-info/user-info.jsx | 7 -- web/app/embed.js | 114 ++++++++++++++++-- web/app/remark.js | 11 +- 5 files changed, 107 insertions(+), 40 deletions(-) delete mode 100644 web/app/components/user-info/__close/user-info__close.scss diff --git a/web/app/components/user-info/__close/user-info__close.scss b/web/app/components/user-info/__close/user-info__close.scss deleted file mode 100644 index fab6f6e4..00000000 --- a/web/app/components/user-info/__close/user-info__close.scss +++ /dev/null @@ -1,13 +0,0 @@ -.user-info__close { - position: absolute; - top: 10px; - right: 10px; - font-size: 14px; - line-height: 18px; - cursor: pointer; - color: #888; - - &:hover { - text-decoration: underline; - } -} diff --git a/web/app/components/user-info/index.js b/web/app/components/user-info/index.js index 6f9f4544..ee5e4016 100644 --- a/web/app/components/user-info/index.js +++ b/web/app/components/user-info/index.js @@ -1,8 +1,6 @@ export { default } from './user-info'; require('./user-info.scss'); - -require('./__close/user-info__close.scss'); require('./__id/user-info__id.scss'); require('./__preloader/user-info__preloader.scss'); require('./__title/user-info__title.scss'); diff --git a/web/app/components/user-info/user-info.jsx b/web/app/components/user-info/user-info.jsx index 2959ecf1..0ddfbd6e 100644 --- a/web/app/components/user-info/user-info.jsx +++ b/web/app/components/user-info/user-info.jsx @@ -2,8 +2,6 @@ import { h, Component } from 'preact'; import api from 'common/api'; -import { getHandleClickProps } from 'common/accessibility'; - import LastCommentsList from './last-comments-list'; import Avatar from 'components/avatar-icon'; @@ -31,7 +29,6 @@ class UserInfo extends Component { render(props, { comments, isLoading }) { const { user: { name, id, isDefaultPicture, picture }, - onClose, } = props; return ( @@ -41,10 +38,6 @@ class UserInfo extends Component {

{id}

- - - Close ✖ - ); } diff --git a/web/app/embed.js b/web/app/embed.js index 22c2c3b7..17a7eae3 100644 --- a/web/app/embed.js +++ b/web/app/embed.js @@ -56,19 +56,84 @@ function init() { setTimeout(postHashToIframe, 1000); + const remarkRootId = 'remark-km423lmfdslkm34'; const userInfo = { node: null, back: null, + closeEl: null, + style: null, init(user) { + this.animationStop(); + if (!this.style) { + this.style = document.createElement('style'); + this.style.setAttribute('rel', 'stylesheet'); + this.style.setAttribute('type', 'text/css'); + this.style.innerHTML = ` + #${remarkRootId}-node { + position: fixed; + top: 0; + right: 0; + bottom: 0; + width: 400px; + transition: transform 0.4s ease-out; + max-width: 100%; + transform: translate(400px, 0); + } + #${remarkRootId}-node[data-animation] { + transform: translate(0, 0); + } + #${remarkRootId}-back { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.7); + opacity: 0; + transition: opacity 0.4s ease-out; + } + #${remarkRootId}-back[data-animation] { + opacity: 1; + } + #${remarkRootId}-close { + top: 0px; + right: 400px; + width: 30px; + height: 30px; + position: absolute; + text-align: center; + font-size: 25px; + cursor: pointer; + color: white; + border-color: transparent; + border-width: 0; + padding: 0; + background-color: transparent; + } + @media all and (max-width: 430px) { + #${remarkRootId}-close { + right: 0px; + font-size: 20px; + color: black; + } + } + `; + } if (!this.node) { this.node = document.createElement('div'); - this.node.style = `position: fixed; top: 0; right: 0; bottom: 0;width: 400px; transform: translate(400px, 0); transition: transform 0.4s ease-out; max-width: 100%`; + this.node.id = remarkRootId + '-node'; } if (!this.back) { this.back = document.createElement('div'); - this.back.style = `position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7);opacity: 0;transition: opacity 0.4s ease-out;`; + this.back.id = remarkRootId + '-back'; this.back.onclick = () => this.close(); } + if (!this.closeEl) { + this.closeEl = document.createElement('button'); + this.closeEl.id = remarkRootId + '-close'; + this.closeEl.innerHTML = '✖'; + this.closeEl.onclick = () => this.close(); + } const queryUserInfo = query + '&page=user-info&' + @@ -85,25 +150,54 @@ function init() { title="Remark42" verticalscrolling="no" horizontalscrolling="no" - /> - `; + />`; + this.node.appendChild(this.closeEl); + document.body.appendChild(this.style); document.body.appendChild(this.back); document.body.appendChild(this.node); setTimeout(() => { - this.back.style.opacity = 1; - this.node.style.transform = ''; + this.back.setAttribute('data-animation', ''); + this.node.setAttribute('data-animation', ''); + this.closeEl.focus(); }, 400); }, close() { if (this.node) { - this.node.style.transform = 'translate(400px, 0)'; - this.node.remove(); + this.onAnimationClose(); + this.node.removeAttribute('data-animation'); } if (this.back) { - this.back.style.opacity = 0; - this.back.remove(); + this.back.removeAttribute('data-animation'); } }, + delay: null, + events: ['', 'webkit', 'moz', 'MS', 'o'].map(prefix => (prefix ? `${prefix}TransitionEnd` : 'transitionend')), + onAnimationClose() { + const el = this.node; + if (!this.node) { + return; + } + this.delay = setTimeout(this.animationStop, 1000); + this.events.forEach(event => el.addEventListener(event, this.animationStop, false)); + }, + animationStop() { + const t = userInfo; + if (!t.node) { + return; + } + if (t.delay) { + clearTimeout(t.delay); + t.delay = null; + } + t.events.forEach(event => t.node.removeEventListener(event, t.animationStop, false)); + return t.remove(); + }, + remove() { + const t = userInfo; + t.node && t.node.remove(); + t.back && t.back.remove(); + t.style && t.style.remove(); + }, }; function receiveMessages(event) { diff --git a/web/app/remark.js b/web/app/remark.js index d97aed58..a402e81e 100644 --- a/web/app/remark.js +++ b/web/app/remark.js @@ -51,20 +51,15 @@ function init() { if (params.page === 'user-info') { const user = { id: params.id, - name: params.name || '', - isDefaultPicture: params.isDefaultPicture, + name: decodeURIComponent(params.name) || '', + isDefaultPicture: params.isDefaultPicture != 0, picture: params.picture, }; store.set('user', user); - const onClose = () => { - if (window.parent) { - window.parent.postMessage(JSON.stringify({ isUserInfoShown: false }), '*'); - } - }; render(
- +
, node.parentElement,