Add: user-info in iframe Issue #98

Signed-off-by: Efremov Alexey <lexich121@gmail.com>
2018-07-06 01:30:37 +04:00
parent 841934f44b
commit bae2b8dcaa
16 changed files with 234 additions and 18 deletions
@@ -4,6 +4,7 @@ const NODE_ID = 'remark42';
 const COUNTER_NODE_CLASSNAME = 'remark42__counter';
 const COMMENT_NODE_CLASSNAME_PREFIX = 'remark42__comment-';
 const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
+const USER_INFO_NODE_CLASSNAME = 'remark42__user-info';
 const DEFAULT_LAST_COMMENTS_MAX = 15;
 const DEFAULT_MAX_COMMENT_SIZE = 1000;
 const MAX_SHOWN_ROOT_COMMENTS = 10;
@@ -32,4 +33,5 @@ module.exports = {
  DEFAULT_SORT,
  LS_COLLAPSE_KEY,
  LS_SORT_KEY,
-};
+  USER_INFO_NODE_CLASSNAME,
+};
@@ -6,7 +6,6 @@ import { url } from 'common/settings';
 import store from 'common/store';

 import Input from 'components/input';
-import UserInfo from 'components/user-info';

 export default class Comment extends Component {
  constructor(props) {
@@ -16,7 +15,6 @@ export default class Comment extends Component {
      isReplying: false,
      isEditing: false,
      isUserVerified: false,
-      isUserInfoShown: false,
      editTimeLeft: null,
    };

@@ -128,7 +126,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, '*');
+    }
  }

  onPinClick() {
@@ -311,8 +313,7 @@ export default class Comment extends Component {
    isReplying,
    isEditing,
    isUserVerified,
-    editTimeLeft,
-    isUserInfoShown,
+    editTimeLeft
  }) {
    const { data, mods = {} } = props;
    const isAdmin = !guest && store.get('user').admin;
@@ -583,12 +584,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
@@ -0,0 +1,3 @@
+.user-info__avatar_default {
+  border: 1px solid #9cdddb;
+}
@@ -0,0 +1,10 @@
+.user-info__avatar {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  margin-right: 8px;
+  vertical-align: middle;
+  border-radius: 4px;
+  position: absolute;
+  top: 20px;
+}
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <style>
+    .st6{fill:#8ED0CF}
+  </style>
+  <g>
+    <path d="M4.6 20.5s0 .1 0 0c.9 0 .9-.7 1.9-.7.9 0 .9.8 1.9.8.9 0 .9-.8 1.9-.8s.9.8 1.9.8c.9 0 .9-.8 1.9-.8.9 0 .9.8 1.9.8.9 0 .9-.8 1.9-.8.9 0 .9.8 1.8.8l-.7-3.5c-.2-1.3-.3-2.7-.3-4V9.5c0-3.6-2.9-6.9-6.5-7-3.8-.1-6.9 2.9-6.9 6.7v3.9c0 1.3-.1 2.7-.3 4l-.4 3.4z" fill="#f5f4f4"/>
+    <path d="M8 17.1c.1-1.3.2-2.7.2-4V9.2c0-3.6 1.6-6.5 3.7-6.7-3.6.1-6.5 3-6.5 6.7v3.9c0 1.3-.1 2.7-.3 4l-.5 3.5c.9 0 .9-.8 1.9-.8.7 0 .9.4 1.3.6l.2-3.3z" opacity=".5" fill="#fff"/>
+    <g>
+      <path class="st6" d="M19.3 17c-.2-1.3-.3-2.6-.3-3.9V9.4c0-3.8-2.9-7-6.6-7.3-1.9-.1-3.8.6-5.2 1.9-1.4 1.4-2.3 3.2-2.3 5.2v3.9c0 1.3-.1 2.6-.3 3.9l-.5 3.5c0 .1 0 .2.1.3.1.1.2.2.3.2.6 0 .9-.3 1.2-.5.2-.2.4-.3.7-.3.3 0 .5.1.7.3.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3s.5.1.7.3c.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3s.5.1.7.3c.3.2.6.5 1.2.5s.9-.3 1.2-.5c.2-.2.4-.3.7-.3.3 0 .5.1.7.3.3.2.6.5 1.2.5.1 0 .2 0 .3-.1.1-.1.1-.2.1-.3l-.8-3.6zm-.5 2.9c-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.3-.2-.6-.5-1.2-.5s-.9.3-1.2.5c.2 0 .1.1 0 .1l.4-2.9c.2-1.3.3-2.7.3-4V9.2c0-1.8.7-3.4 2-4.6 1.3-1.2 2.9-1.8 4.7-1.7 3.3.2 5.9 3.1 5.9 6.5V13c0 1.3.1 2.7.3 4l.4 3c-.1 0-.2-.1-.2-.1z"/>
+      <path class="st6" d="M9.7 7.6c-.6 0-.8.8-.8 1.6s.2 1.6.8 1.6.8-.8.8-1.6-.3-1.6-.8-1.6z"/>
+      <path class="st6" d="M14.4 7.6c-.6 0-.8.8-.8 1.6s.2 1.6.8 1.6.8-.8.8-1.6-.3-1.6-.8-1.6z"/>
+    </g>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="4.1669" y1="14.7127" x2="21.3949" y2="6.6792" gradientTransform="matrix(1 0 0 -1 0 24)">
+      <stop offset="0" stop-color="#fff" stop-opacity=".2"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </linearGradient>
+  </g>
+</svg>
@@ -1,4 +1,7 @@
 .user-info__close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
@@ -4,4 +4,5 @@
  font-weight: 400;
  line-height: 18px;
  color: #888;
+  padding-left: 40px;
 }
@@ -3,4 +3,5 @@
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
+  padding-left: 40px;
 }
@@ -0,0 +1,5 @@
+.user-info_iframe.user-info_iframe {
+    overflow: inherit;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
@@ -6,3 +6,6 @@ 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');
+require('./__avatar/_default/user-info__avatar_default.scss');
+require('./_iframe/user-info_iframe.scss');
@@ -24,10 +24,15 @@ export default class UserInfo extends Component {
  }

  render(props, { comments, isLoading }) {
-    const { user: { name, id }, onClose } = props;
+    const { user: { name, id, isDefaultPicture, picture }, onClose } = props;

    return (
-      <div className={b('user-info', props)}>
+      <div className={b('user-info', props, { iframe: true })}>
+        <img
+          className={b('user-info__avatar', {}, { default: !!isDefaultPicture })}
+          src={isDefaultPicture ? require('./__avatar/user-info__avatar.svg') : picture}
+          alt=""
+        />
        <p className="user-info__title">Last comments by {name}</p>
        <p className="user-info__id">{id}</p>

@@ -52,7 +57,7 @@ export default class UserInfo extends Component {
          )
        }

-        <div><span className="user-info__close" onClick={onClose}>Close</span></div>
+        <span className="user-info__close" onClick={onClose}>&#10006;</span>
      </div>
    );
  }
@@ -1,7 +1,7 @@
 .user-info {
-  padding: 10px 20px;
-  overflow: hidden;
-  background: #fafafa;
  border: 1px solid #efefef;
  border-radius: 2px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
 }
@@ -56,6 +56,54 @@ 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;`;
+      }
+      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 +
+        `&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` : ''}/user-info.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 +114,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) {}
  }

@@ -0,0 +1,67 @@
+import {
+  h,
+  render
+} from 'preact';
+
+import {
+  BASE_URL,
+  USER_INFO_NODE_CLASSNAME
+} from './common/constants';
+import store from 'common/store';
+import UserInfo from 'components/user-info';
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  init();
+}
+
+function init() {
+  const nodes = document.getElementsByClassName(USER_INFO_NODE_CLASSNAME);
+
+  if (!nodes) {
+    console.error('Remark42: Can\'t find last comments nodes.');
+    return;
+  }
+
+  try {
+    remark_config = remark_config || {};
+  } catch (e) {
+    console.error('Remark42: Config object is undefined.');
+    return;
+  }
+
+  if (!remark_config.site_id) {
+    console.error('Remark42: Site ID is undefined.');
+    return;
+  }
+
+  const styles = document.createElement('link');
+  styles.href = `${BASE_URL}/web/remark.css`;
+  styles.rel = 'stylesheet';
+  (document.head || document.body).appendChild(styles);
+  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;
+    }, {});
+  const user = {
+    id: params.id,
+    name: params.name || '',
+    isDefaultPicture: params.isDefaultPicture,
+    picture: params.picture
+  };
+
+  function onClose() {
+    if (window.parent) {
+      window.parent.postMessage(JSON.stringify({ isUserInfoShown: false }), '*');
+    }
+  }
+  store.set('user', user);
+  [].slice.call(nodes).forEach(node => {
+    render(<UserInfo user={user} onClose={onClose}/>, node);
+  });
+}
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>remark42 user info</title>
+
+  <style>
+    body {
+      padding: 0;
+      margin: 0;
+    }
+
+    .container {
+      max-width: 400px;
+    }
+  </style>
+</head>
+<body>
+  <div id='remark42' class="container">
+    <div class="remark42__user-info" data-max="50"></div>
+  </div>
+
+  <script>
+    var remark_config = {
+      site_id: 'radiot',
+    };
+
+    (function() {
+      var d = document, s = d.createElement('script');
+      var baseurl = '';
+      s.src = baseurl + '/user-info.js';
+      s.type = 'text/javascript';
+      (d.head || d.body).appendChild(s);
+    })();
+  </script>
+  <noscript>
+    Please enable JavaScript to view the comments powered by Remark.
+  </noscript>
+</body>
+</html>
@@ -46,6 +46,7 @@ module.exports = {
    counter: './app/counter',
    'last-comments': './app/last-comments',
    remark: './app/remark',
+    'user-info': './app/user-info'
  },
  output: {
    path: publicFolder,
@@ -114,6 +115,11 @@ module.exports = {
      filename: 'last-comments.html',
      inject: false,
    }),
+    new Html({
+      template: path.resolve(__dirname, 'user-info.ejs'),
+      filename: 'user-info.html',
+      inject: false
+    }),
    ...(env === 'production' ? [] : [new Html({
      template: path.resolve(__dirname, 'dev.ejs'),
      filename: 'dev.html',