Wall: Last comments on the post

Web/Models/Entities/Postable.php

@@ -73,10 +73,10 @@ abstract class Postable extends Attachable
     {
         return (new Comments)->getCommentsCountByTarget($this);
     }
-	
+
-	function getLastComments()
+    function getLastComments(int $count): \Traversable
     {
-        return (new Comments)->getLastCommentsByTarget($this);
+        return (new Comments)->getLastCommentsByTarget($this, $count);
     }
     
     function getLikesCount(): int

Web/Models/Repositories/Comments.php

@@ -37,6 +37,19 @@ class Comments
         foreach($comments as $comment)
             yield $this->toComment($comment);
     }
+
+    function getLastCommentsByTarget(Postable $target, ?int $count = NULL): \Traversable
+    {
+        $comments = $this->comments->where([
+            "model"   => get_class($target),
+            "target"  => $target->getId(),
+            "deleted" => false,
+        ])->page(1, $count ?? OPENVK_DEFAULT_PER_PAGE)->order("created DESC");
+        
+        $comments = array_reverse(iterator_to_array($comments));
+        foreach($comments as $comment)
+            yield $this->toComment($comment);
+    }
     
     function getCommentsCountByTarget(Postable $target): int
     {

Web/Presenters/templates/Wall/Wall.xml

@@ -24,7 +24,7 @@
                 {foreach $posts as $post}
                     <a name="postGarter={$post->getId()}"></a>
                     
-                    {include "../components/post.xml", post => $post}
+                    {include "../components/post.xml", post => $post, commentSection => true}
                 {/foreach}
                 {include "../components/paginator.xml", conf => $paginatorConf}
             {else}

Web/Presenters/templates/components/comment.xml

@@ -1,20 +1,19 @@
 {var author = $comment->getOwner()}
 
 <a name="cid={$comment->getId()}"></a>
-<table border="0" style="font-size: 11px;" class="post" id="_comment{$comment->getId()}" data-comment-id="{$comment->getId()}" data-owner-id="{$author->getId()}">
+<table border="0" style="font-size: 11px;" class="post comment" id="_comment{$comment->getId()}" data-comment-id="{$comment->getId()}" data-owner-id="{$author->getId()}">
     <tbody>
         <tr>
-            <td width="54" valign="top">
+            <td width="30" valign="top">
                 <img
                     src="{$author->getAvatarURL()}"
-                    width="50" />
+                    width="30" />
             </td>
             <td width="345" valign="top">
                 <div class="post-author">
                     <a href="{$author->getURL()}"><b>
                         {$author->getCanonicalName()}
-                    </b></a> {$author->isFemale() ? tr("post_writes_f") : tr("post_writes_m")}<br/>
+                    </b></a><br/>
-                    <a href="#_comment{$comment->getId()}" class="date">{$comment->getPublicationTime()}</a>
                 </div>
                 <div class="post-content" id="{$comment->getId()}">
                     <div class="text" id="text{$comment->getId()}">
@@ -27,16 +26,15 @@
                         </div>
                     </div>
                     <div n:if="isset($thisUser) &&! ($compact ?? false)" class="post-menu">
+                        <a href="#_comment{$comment->getId()}" class="date">{$comment->getPublicationTime()}</a>&nbsp;|
                         {var canDelete = $comment->getOwner()->getId() == $thisUser->getId()}
                         {var canDelete = $canDelete || $comment->getTarget()->getOwner()->getId() == $thisUser->getId()}
                         {if $canDelete}
-                            <a href="/comment{$comment->getId()}/delete">{_"delete"}</a>&nbsp;|&nbsp;
+                            <a href="/comment{$comment->getId()}/delete">{_"delete"}</a>&nbsp;|
                         {/if}
-                        
                         <a class="comment-reply">Ответить</a>
-                        
                         <div style="float: right; font-size: .7rem;">
-                            <a href="/comment{$comment->getId()}/like?hash={rawurlencode($csrfToken)}">
+                            <a class="post-like-button" href="/comment{$comment->getId()}/like?hash={rawurlencode($csrfToken)}">
                                 <div class="heart" style="{if $comment->hasLikeFrom($thisUser)}opacity: 1;{else}opacity: 0.4;{/if}"></div>
                                 <span class="likeCnt">{$comment->getLikesCount()}</span>
                             </a>

Web/Presenters/templates/components/post.xml

@@ -6,7 +6,7 @@
 {/if}
 
 {if $microblogEnabled}
-    {include "post/microblogpost.xml", post => $post, diff => $diff}
+    {include "post/microblogpost.xml", post => $post, diff => $diff, commentSection => $commentSection}
 {else}
     {include "post/oldpost.xml", post => $post, diff => $diff}
 {/if}

Web/Presenters/templates/components/post/microblogpost.xml

@@ -1,4 +1,8 @@
 {var author = $post->getOwner()}
+{var comments = $post->getLastComments(3)}
+{var commentsCount = $post->getCommentsCount()}
+
+{var commentTextAreaId = $post === null ? rand(1,300) : $post->getId()}
 
 <table border="0" style="font-size: 11px;" n:class="post, !$compact ? post-divider, $post->isExplicit() ? post-nsfw">
     <tbody>
@@ -72,18 +76,11 @@
                         &nbsp;
                         
                         {if !($forceNoCommentsLink ?? false)}
-                            <a href="/wall{$post->getPrettyId()}#comments">
+                            <a n:if="$commentsCount == 0" href="javascript:expand_comment_textarea({$commentTextAreaId})">
-                                {if $post->getCommentsCount() > 0}
+                                {_"comment"}
-                                    {_"comments"} (<b>{$post->getCommentsCount()}</b>)
-                                {else}
-                                    {_"comments"}
-                                {/if}
                             </a>
                         {/if}
                         
-                        
-                        
-
                         <div class="like_wrap">
                             <a class="post-share-button" href="javascript:repostPost('{$post->getPrettyId()}', '{rawurlencode($csrfToken)}')">
                                 <div class="repost-icon" style="opacity: 0.4;"></div>
@@ -101,8 +98,17 @@
                         </div>
                     {/if}
                 </div>
-                <div n:if="isset($thisUser) &&! ($compact ?? false)" class="post-menu-s">
+                <div n:if="$commentSection == true && $compact == false" class="post-menu-s">
-                    <!-- kosfurler -->
+                    {if $commentsCount > 3}
+                        <a href="/wall{$post->getPrettyId()}" class="expand_button">Посмотреть остальные комментарии</a>
+                    {/if}
+                    {foreach $comments as $comment}
+                        {include "../comment.xml", comment => $comment, $compact => true}
+                    {/foreach}
+                    <div n:ifset="$thisUser" id="commentTextArea{$commentTextAreaId}" n:attr="style => ($commentsCount == 0 ? 'display: none;')" class="commentsTextFieldWrap">
+                        {var commentsURL = "/al_comments.pl/create/posts/" . $post->getId()}
+                        {include "../textArea.xml", route => $commentsURL, postOpts => false, graffiti => (bool) ovkGetQuirk("comments.allow-graffiti"), post => $post}
+                    </div>
                 </div>
             </td>
         </tr>

Web/Presenters/templates/components/textArea.xml

@@ -1,10 +1,12 @@
-<div id="write" style="padding: 5px 0;" onfocusin="expand_wall_textarea();">
+{var textAreaId = $post === null ? rand(1,300) : $post->getId()}
+
+<div id="write" style="padding: 5px 0;" onfocusin="expand_wall_textarea({$textAreaId});">
     <form action="{$route}" method="post" enctype="multipart/form-data" style="margin:0;">
-        <textarea id="wall-post-input" placeholder="{_write}" name="text" style="width: 100%;resize: none;" class="small-textarea"></textarea>
+        <textarea id="wall-post-input{$textAreaId}" placeholder="{_write}" name="text" style="width: 100%;resize: none;" class="small-textarea"></textarea>
         <div>
             <!-- padding to fix <br/> bug -->
         </div>
-        <div id="post-buttons" style="display: none;">
+        <div id="post-buttons{$textAreaId}" style="display: none;">
             <div class="post-upload">
                 Вложение: <span>(unknown)</span>
             </div>

Web/Presenters/templates/components/wall.xml

@@ -16,7 +16,7 @@
                 {foreach $posts as $post}
                     <a name="postGarter={$post->getId()}"></a>
                     
-                    {include "../components/post.xml", post => $post}
+                    {include "../components/post.xml", post => $post, commentSection => true}
                 {/foreach}
                 {include "../components/paginator.xml", conf => $paginatorConf}
             {else}

Web/static/css/microblog.css

@@ -36,6 +36,11 @@
     color: grey;
 }
 
+.comment {
+    padding: 5px 0 0 0;
+    border-top: 1px #ddd solid;
+}
+
 .like_wrap {
     display: flex;
 }
@@ -56,6 +61,10 @@
     opacity: 0.4;
 }
 
+.likeCnt {
+    float: none;
+}
+
 #liked {
     opacity: 1 !important;
 }
@@ -104,3 +113,24 @@
 .post-author .pin:hover {
     opacity: 0.4;
 }
+
+.expand_button {
+    background-color: #eee;
+    width: 100%;
+    display: inline-block;;
+    height: 30px;
+    line-height: 28px;
+    text-align: center;
+}
+
+.expand_button:hover {
+    background-color: #e5e5e5;
+}
+
+.commentsTextFieldWrap {
+    padding: 0 7px;
+    background-color: #eee;
+    border: 1px solid #ccc;
+    border-left: 0;
+    border-right: 0;
+}

Web/static/js/openvk.cls.js

@@ -1,10 +1,15 @@
-function expand_wall_textarea() {
+function expand_wall_textarea(id) {
-    var el = document.getElementById('post-buttons');
+    var el = document.getElementById('post-buttons'+id);
-    var wi = document.getElementById('wall-post-input');
+    var wi = document.getElementById('wall-post-input'+id);
     el.style.display = "block";
     wi.className = "expanded-textarea";
+}
 
-
+function expand_comment_textarea(id) {
+    var el = document.getElementById('commentTextArea'+id);
+    var wi = document.getElementById('wall-post-input'+id);
+    el.style.display = "block";
+    wi.focus();
 }
 
 function edit_post(id, wid) {