Revert "Add: user-info in iframe Issue #98"

This reverts commit bae2b8dcaa.
2018-07-06 03:08:53 +04:00
parent 6c41ce263c
commit fea398483e
16 changed files with 18 additions and 234 deletions
@@ -4,7 +4,6 @@ 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;
@@ -33,5 +32,4 @@ module.exports = {
  DEFAULT_SORT,
  LS_COLLAPSE_KEY,
  LS_SORT_KEY,
-  USER_INFO_NODE_CLASSNAME,
-};
+};
@@ -6,6 +6,7 @@ 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) {
@@ -15,6 +16,7 @@ export default class Comment extends Component {
      isReplying: false,
      isEditing: false,
      isUserVerified: false,
+      isUserInfoShown: false,
      editTimeLeft: null,
    };

@@ -126,11 +128,7 @@ export default class Comment extends Component {
  }

  toggleUserInfoVisibility() {
-    if (window.parent) {
-      const { user } = this.props.data;
-      const data = JSON.stringify({ isUserInfoShown: true, user });
-      window.parent.postMessage(data, '*');
-    }
+    this.setState({ isUserInfoShown: !this.state.isUserInfoShown });
  }

  onPinClick() {
@@ -313,7 +311,8 @@ export default class Comment extends Component {
    isReplying,
    isEditing,
    isUserVerified,
-    editTimeLeft
+    editTimeLeft,
+    isUserInfoShown,
  }) {
    const { data, mods = {} } = props;
    const isAdmin = !guest && store.get('user').admin;
@@ -584,6 +583,12 @@ 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
@@ -1,3 +0,0 @@
-.user-info__avatar_default {
-  border: 1px solid #9cdddb;
-}
@@ -1,10 +0,0 @@
-.user-info__avatar {
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  margin-right: 8px;
-  vertical-align: middle;
-  border-radius: 4px;
-  position: absolute;
-  top: 20px;
-}
@@ -1,18 +0,0 @@
-<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,7 +1,4 @@
 .user-info__close {
-  position: absolute;
-  top: 10px;
-  right: 10px;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
@@ -4,5 +4,4 @@
  font-weight: 400;
  line-height: 18px;
  color: #888;
-  padding-left: 40px;
 }
@@ -3,5 +3,4 @@
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
-  padding-left: 40px;
 }
@@ -1,5 +0,0 @@
-.user-info_iframe.user-info_iframe {
-    overflow: inherit;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
@@ -6,6 +6,3 @@ 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,15 +24,10 @@ export default class UserInfo extends Component {
  }

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

    return (
-      <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=""
-        />
+      <div className={b('user-info', props)}>
        <p className="user-info__title">Last comments by {name}</p>
        <p className="user-info__id">{id}</p>

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

-        <span className="user-info__close" onClick={onClose}>&#10006;</span>
+        <div><span className="user-info__close" onClick={onClose}>Close</span></div>
      </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,54 +56,6 @@ 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;
@@ -114,14 +66,6 @@ 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) {}
  }

@@ -1,67 +0,0 @@
-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);
-  });
-}
@@ -1,41 +0,0 @@
-<!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,7 +46,6 @@ module.exports = {
    counter: './app/counter',
    'last-comments': './app/last-comments',
    remark: './app/remark',
-    'user-info': './app/user-info'
  },
  output: {
    path: publicFolder,
@@ -115,11 +114,6 @@ 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',