add view: preview modifier for comment block

web/app/components/comment/_view/_preview/comment_view_preview.scss

@@ -0,0 +1,18 @@
+.comment_view_preview {
+  .comment__username {
+    color: #0aa;
+  };
+
+  .comment__info {
+    display: inline;
+
+    &::after {
+      content: ' ';
+      color: #777;
+    }
+  }
+
+  .comment__text {
+    display: inline;
+  }
+}

web/app/components/comment/comment.jsx

@@ -161,6 +161,7 @@ export default class Comment extends Component {
     const timeStr = `${time.toLocaleDateString([], { month: 'short', day: 'numeric' })}, ${time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
     const o = {
       ...data,
+      text: mods.view === 'preview' ? getTextSnippet(data.text) : data.text,
       time: timeStr,
       score: {
         value: Math.abs(score),
@@ -182,7 +183,11 @@ export default class Comment extends Component {
     return (
       <div className={b('comment', props, defaultMods)}>
         <div className="comment__body">
-          <img src={o.user.picture} alt="" className="comment__avatar"/>
+          {
+            mods.view !== 'preview' && (
+              <img src={o.user.picture} alt="" className="comment__avatar"/>
+            )
+          }
 
           <div className="comment__content">
             <div className="comment__info">
@@ -208,7 +213,11 @@ export default class Comment extends Component {
                 )
               }
 
-              <span className="comment__time">{o.time}</span>
+              {
+                mods.view !== 'preview' && (
+                  <span className="comment__time">{o.time}</span>
+                )
+              }
 
               {
                 !mods.disabled && !isGuest && (
@@ -266,3 +275,15 @@ export default class Comment extends Component {
     );
   }
 }
+
+function getTextSnippet(html) {
+  const LENGTH = 100;
+  const tmp = document.createElement('div');
+  tmp.innerHTML = html;
+
+  const result = tmp.innerText || '';
+  const snippet = result.substr(0, LENGTH);
+
+  console.log(snippet)
+  return (snippet.length === LENGTH && result.length !== LENGTH) ? `${snippet}...` : snippet;
+}

web/app/components/comment/index.js

@@ -27,3 +27,4 @@ require('./_pinned/comment_pinned.scss');
 require('./_useless/comment_useless.scss');
 
 require('./_view/_admin/comment_view_admin.scss');
+require('./_view/_preview/comment_view_preview.scss');