From 1539c1f043140a6b5d3a71881c9fadeefc9df986 Mon Sep 17 00:00:00 2001
From: Efremov Alexey <lexich121@gmail.com>
Date: Mon, 9 Jul 2018 17:32:14 +0300
Subject: [PATCH] add user-info in iframe (#131)

closes #98
---
 .../_default/avatar-icon_default.scss}        |  2 +-
 .../components/avatar-icon/avatar-icon.jsx    | 12 ++++
 .../avatar-icon.scss}                         |  2 +-
 .../avatar-icon.svg}                          |  0
 web/app/components/avatar-icon/index.js       |  4 ++
 .../comment/__avatar/comment__avatar.jsx      | 12 ----
 web/app/components/comment/comment.jsx        | 14 ++---
 web/app/components/comment/index.js           |  3 -
 web/app/components/root/root.scss             |  4 ++
 .../user-info/__avatar/user-info__avatar.scss |  6 ++
 .../user-info/__close/user-info__close.scss   |  3 +
 .../user-info/__id/user-info__id.scss         |  1 +
 .../user-info/__title/user-info__title.scss   |  1 +
 web/app/components/user-info/index.js         |  1 +
 web/app/components/user-info/user-info.jsx    |  6 +-
 web/app/components/user-info/user-info.scss   | 15 ++++-
 web/app/embed.js                              | 58 +++++++++++++++++++
 web/app/remark.js                             | 40 ++++++++++++-
 18 files changed, 154 insertions(+), 30 deletions(-)
 rename web/app/components/{comment/__avatar/_default/comment__avatar_default.scss => avatar-icon/_default/avatar-icon_default.scss} (53%)
 create mode 100644 web/app/components/avatar-icon/avatar-icon.jsx
 rename web/app/components/{comment/__avatar/comment__avatar.scss => avatar-icon/avatar-icon.scss} (86%)
 rename web/app/components/{comment/__avatar/comment__avatar.svg => avatar-icon/avatar-icon.svg} (100%)
 create mode 100644 web/app/components/avatar-icon/index.js
 delete mode 100644 web/app/components/comment/__avatar/comment__avatar.jsx
 create mode 100644 web/app/components/user-info/__avatar/user-info__avatar.scss

diff --git a/web/app/components/comment/__avatar/_default/comment__avatar_default.scss b/web/app/components/avatar-icon/_default/avatar-icon_default.scss
similarity index 53%
rename from web/app/components/comment/__avatar/_default/comment__avatar_default.scss
rename to web/app/components/avatar-icon/_default/avatar-icon_default.scss
index 13fb036f..a781240e 100644
--- a/web/app/components/comment/__avatar/_default/comment__avatar_default.scss
+++ b/web/app/components/avatar-icon/_default/avatar-icon_default.scss
@@ -1,3 +1,3 @@
-.comment__avatar_default {
+.avatar-icon_default {
   border: 1px solid #9cdddb;
 }
diff --git a/web/app/components/avatar-icon/avatar-icon.jsx b/web/app/components/avatar-icon/avatar-icon.jsx
new file mode 100644
index 00000000..604332b6
--- /dev/null
+++ b/web/app/components/avatar-icon/avatar-icon.jsx
@@ -0,0 +1,12 @@
+/** @jsx h */
+import { h } from 'preact';
+
+export default function AvatarIcon({ picture, className }) {
+  return (
+    <img
+      className={b('avatar-icon', { mix: className }, { default: !picture })}
+      src={picture || require('./avatar-icon.svg')}
+      alt=""
+    />
+  );
+}
diff --git a/web/app/components/comment/__avatar/comment__avatar.scss b/web/app/components/avatar-icon/avatar-icon.scss
similarity index 86%
rename from web/app/components/comment/__avatar/comment__avatar.scss
rename to web/app/components/avatar-icon/avatar-icon.scss
index 2084bc5c..ddd3894d 100644
--- a/web/app/components/comment/__avatar/comment__avatar.scss
+++ b/web/app/components/avatar-icon/avatar-icon.scss
@@ -1,4 +1,4 @@
-.comment__avatar {
+.avatar-icon {
   display: inline-block;
   width: 24px;
   height: 24px;
diff --git a/web/app/components/comment/__avatar/comment__avatar.svg b/web/app/components/avatar-icon/avatar-icon.svg
similarity index 100%
rename from web/app/components/comment/__avatar/comment__avatar.svg
rename to web/app/components/avatar-icon/avatar-icon.svg
diff --git a/web/app/components/avatar-icon/index.js b/web/app/components/avatar-icon/index.js
new file mode 100644
index 00000000..61f7a78d
--- /dev/null
+++ b/web/app/components/avatar-icon/index.js
@@ -0,0 +1,4 @@
+export { default } from './avatar-icon';
+
+require('./avatar-icon.scss');
+require('./_default/avatar-icon_default.scss');
diff --git a/web/app/components/comment/__avatar/comment__avatar.jsx b/web/app/components/comment/__avatar/comment__avatar.jsx
deleted file mode 100644
index 3fc892be..00000000
--- a/web/app/components/comment/__avatar/comment__avatar.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/** @jsx h */
-import { h } from 'preact';
-
-export default function Avatar({ picture }) {
-  return (
-    <img
-      className={b('comment__avatar', {}, { default: !picture })}
-      src={picture || require('./comment__avatar.svg')}
-      alt=""
-    />
-  );
-}
diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx
index 72d7b4da..53c52c7d 100644
--- a/web/app/components/comment/comment.jsx
+++ b/web/app/components/comment/comment.jsx
@@ -8,8 +8,8 @@ import { url } from 'common/settings';
 import store from 'common/store';
 
 import Input from 'components/input';
-import UserInfo from 'components/user-info';
-import Avatar from './__avatar/comment__avatar';
+
+import Avatar from 'components/avatar-icon';
 
 export default class Comment extends Component {
   constructor(props) {
@@ -19,7 +19,6 @@ export default class Comment extends Component {
       isReplying: false,
       isEditing: false,
       isUserVerified: false,
-      isUserInfoShown: false,
       editTimeLeft: null,
     };
 
@@ -134,7 +133,11 @@ export default class Comment extends Component {
   }
 
   toggleUserInfoVisibility() {
-    this.setState({ isUserInfoShown: !this.state.isUserInfoShown });
+    if (window.parent) {
+      const { user } = this.props.data;
+      const data = JSON.stringify({ isUserInfoShown: true, user });
+      window.parent.postMessage(data, '*');
+    }
   }
 
   togglePin(isPinned) {
@@ -315,7 +318,6 @@ export default class Comment extends Component {
       isEditing,
       isUserVerified,
       editTimeLeft,
-      isUserInfoShown,
     }
   ) {
     const { data, mods = {} } = props;
@@ -558,8 +560,6 @@ export default class Comment extends Component {
           </div>
         </div>
 
-        {isUserInfoShown && <UserInfo mix="comment__user-info" user={o.user} onClose={this.toggleUserInfoVisibility} />}
-
         {isReplying &&
           mods.view !== 'user' && (
             <Input mix="comment__input" onSubmit={this.onReply} onCancel={this.toggleReplying} pid={o.id} />
diff --git a/web/app/components/comment/index.js b/web/app/components/comment/index.js
index dcb2e024..d7a0256e 100644
--- a/web/app/components/comment/index.js
+++ b/web/app/components/comment/index.js
@@ -8,9 +8,6 @@ require('./__action/comment__action.scss');
 require('./__action/_type/_collapse/comment__action_type_collapse.scss');
 require('./__action/_type/_edit/comment__action_type_edit.scss');
 
-require('./__avatar/comment__avatar.scss');
-require('./__avatar/_default/comment__avatar_default.scss');
-
 require('./__body/comment__body.scss');
 require('./__control/comment__control.scss');
 require('./__control/_select/comment__control_select.scss');
diff --git a/web/app/components/root/root.scss b/web/app/components/root/root.scss
index 960774f1..635b3e68 100644
--- a/web/app/components/root/root.scss
+++ b/web/app/components/root/root.scss
@@ -5,4 +5,8 @@
   ::selection {
     background: #c6efef;
   }
+
+  &_user-info {
+    position: static;
+  }
 }
diff --git a/web/app/components/user-info/__avatar/user-info__avatar.scss b/web/app/components/user-info/__avatar/user-info__avatar.scss
new file mode 100644
index 00000000..1cb6cf29
--- /dev/null
+++ b/web/app/components/user-info/__avatar/user-info__avatar.scss
@@ -0,0 +1,6 @@
+.user-info__avatar {
+  position: absolute;
+  top: 17px;
+  height: 30px;
+  width: 30px;
+}
diff --git a/web/app/components/user-info/__close/user-info__close.scss b/web/app/components/user-info/__close/user-info__close.scss
index 161d270e..fab6f6e4 100644
--- a/web/app/components/user-info/__close/user-info__close.scss
+++ b/web/app/components/user-info/__close/user-info__close.scss
@@ -1,4 +1,7 @@
 .user-info__close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
   font-size: 14px;
   line-height: 18px;
   cursor: pointer;
diff --git a/web/app/components/user-info/__id/user-info__id.scss b/web/app/components/user-info/__id/user-info__id.scss
index a8911a86..eb32b752 100644
--- a/web/app/components/user-info/__id/user-info__id.scss
+++ b/web/app/components/user-info/__id/user-info__id.scss
@@ -4,4 +4,5 @@
   font-weight: 400;
   line-height: 18px;
   color: #888;
+  padding-left: 40px;
 }
diff --git a/web/app/components/user-info/__title/user-info__title.scss b/web/app/components/user-info/__title/user-info__title.scss
index aa6123f2..24fa5666 100644
--- a/web/app/components/user-info/__title/user-info__title.scss
+++ b/web/app/components/user-info/__title/user-info__title.scss
@@ -3,4 +3,5 @@
   font-size: 18px;
   font-weight: 700;
   line-height: 20px;
+  padding-left: 40px;
 }
diff --git a/web/app/components/user-info/index.js b/web/app/components/user-info/index.js
index 7b131806..6f9f4544 100644
--- a/web/app/components/user-info/index.js
+++ b/web/app/components/user-info/index.js
@@ -6,3 +6,4 @@ require('./__close/user-info__close.scss');
 require('./__id/user-info__id.scss');
 require('./__preloader/user-info__preloader.scss');
 require('./__title/user-info__title.scss');
+require('./__avatar/user-info__avatar.scss');
diff --git a/web/app/components/user-info/user-info.jsx b/web/app/components/user-info/user-info.jsx
index 7b46a08f..2959ecf1 100644
--- a/web/app/components/user-info/user-info.jsx
+++ b/web/app/components/user-info/user-info.jsx
@@ -5,6 +5,7 @@ import api from 'common/api';
 import { getHandleClickProps } from 'common/accessibility';
 
 import LastCommentsList from './last-comments-list';
+import Avatar from 'components/avatar-icon';
 
 class UserInfo extends Component {
   constructor(props) {
@@ -29,19 +30,20 @@ class UserInfo extends Component {
 
   render(props, { comments, isLoading }) {
     const {
-      user: { name, id },
+      user: { name, id, isDefaultPicture, picture },
       onClose,
     } = props;
 
     return (
       <div className={b('user-info', props)}>
+        <Avatar className="user-info__avatar" picture={isDefaultPicture ? null : picture} />
         <p className="user-info__title">Last comments by {name}</p>
         <p className="user-info__id">{id}</p>
 
         <LastCommentsList isLoading={isLoading} comments={comments} />
 
         <span {...getHandleClickProps(onClose)} className="user-info__close">
-          Close
+          Close &#10006;
         </span>
       </div>
     );
diff --git a/web/app/components/user-info/user-info.scss b/web/app/components/user-info/user-info.scss
index a176a70e..fdebe7e2 100644
--- a/web/app/components/user-info/user-info.scss
+++ b/web/app/components/user-info/user-info.scss
@@ -1,7 +1,16 @@
 .user-info {
-  padding: 10px 20px;
-  overflow: hidden;
-  background: #fafafa;
   border: 1px solid #efefef;
   border-radius: 2px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  background: white;
+  padding: 10px;
+  box-sizing: border-box;
+
+  overflow: inherit;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
diff --git a/web/app/embed.js b/web/app/embed.js
index dfb418e2..21c96d04 100644
--- a/web/app/embed.js
+++ b/web/app/embed.js
@@ -56,6 +56,56 @@ function init() {
 
   setTimeout(postHashToIframe, 1000);
 
+  const userInfo = {
+    node: null,
+    back: null,
+    init(user) {
+      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%`;
+      }
+      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.onclick = () => this.close();
+      }
+      const queryUserInfo =
+        query +
+        '&page=user-info&' +
+        `&id=${user.id}&name=${user.name}&picture=${user.picture || ''}&isDefaultPicture=${user.isDefaultPicture || 0}`;
+      this.node.innerHTML = `
+      <iframe
+        src="${process.env.NODE_ENV === 'production' ? `${BASE_URL}/web` : ''}/iframe.html?${queryUserInfo}"
+        width="100%"
+        height="100%"
+        frameborder="0"
+        allowtransparency="true"
+        scrolling="no"
+        tabindex="0"
+        title="Remark42"
+        verticalscrolling="no"
+        horizontalscrolling="no"
+      />
+      `;
+      document.body.appendChild(this.back);
+      document.body.appendChild(this.node);
+      setTimeout(() => {
+        this.back.style.opacity = 1;
+        this.node.style.transform = '';
+      }, 400);
+    },
+    close() {
+      if (this.node) {
+        this.node.style.transform = 'translate(400px, 0)';
+        this.node.remove();
+      }
+      if (this.back) {
+        this.back.style.opacity = 0;
+        this.back.remove();
+      }
+    },
+  };
+
   function receiveMessages(event) {
     try {
       const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
@@ -66,6 +116,14 @@ function init() {
       if (data.scrollTo) {
         window.scrollTo(window.pageXOffset, data.scrollTo + iframe.getBoundingClientRect().top + window.pageYOffset);
       }
+
+      if (data.hasOwnProperty('isUserInfoShown')) {
+        if (data.isUserInfoShown) {
+          userInfo.init(data.user || {});
+        } else {
+          userInfo.close();
+        }
+      }
     } catch (e) {}
   }
 
diff --git a/web/app/remark.js b/web/app/remark.js
index 04703c98..6d73668f 100644
--- a/web/app/remark.js
+++ b/web/app/remark.js
@@ -4,6 +4,9 @@ import loadPolyfills from 'common/polyfills';
 
 import { h, render } from 'preact';
 import Root from './components/root';
+import UserInfo from 'components/user-info';
+import store from 'common/store';
+
 // eslint-disable-next-line no-unused-vars
 import ListComments from './components/list-comments'; // TODO: temp solution for extracting styles
 
@@ -25,5 +28,40 @@ function init() {
     return;
   }
 
-  render(<Root />, node.parentElement, node);
+  const params = window.location.search
+    .replace(/^\?/, '')
+    .split('&')
+    .reduce((memo, value) => {
+      const vals = value.split('=');
+      if (vals.length === 2) {
+        memo[vals[0]] = vals[1];
+      }
+      return memo;
+    }, {});
+
+  if (params.page === 'user-info') {
+    const user = {
+      id: params.id,
+      name: params.name || '',
+      isDefaultPicture: params.isDefaultPicture,
+      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} />
+        </div>
+      </div>,
+      node.parentElement,
+      node
+    );
+  } else {
+    render(<Root />, node.parentElement, node);
+  }
 }