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,