Efremov Alexey
committed by
Aleksei Gurianov
Aleksei Gurianov
parent
905d41af7e
commit
4cca80e3c1
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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');
|
||||
|
||||
@@ -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 {
|
||||
<p className="user-info__id">{id}</p>
|
||||
|
||||
<LastCommentsList isLoading={isLoading} comments={comments} />
|
||||
|
||||
<span {...getHandleClickProps(onClose)} className="user-info__close">
|
||||
Close ✖
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+104
-10
@@ -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) {
|
||||
|
||||
+3
-8
@@ -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(
|
||||
<div id={NODE_ID}>
|
||||
<div className="root root_user-info">
|
||||
<UserInfo user={user} onClose={onClose} />
|
||||
<UserInfo user={user} />
|
||||
</div>
|
||||
</div>,
|
||||
node.parentElement,
|
||||
|
||||
Reference in New Issue
Block a user