From aff19de2eac061a2bf13035b3f65cfa29ae1d3ff Mon Sep 17 00:00:00 2001
From: mrilyew <99399973+mrilyew@users.noreply.github.com>
Date: Fri, 22 Nov 2024 21:27:21 +0300
Subject: [PATCH] feat(wall): add likes tooltip

resolves #1094 resolves #998 resolves #31
---
 VKAPI/Handlers/Likes.php                      |  2 +-
 Web/Presenters/templates/Photos/Photo.xml     |  2 +-
 Web/Presenters/templates/Videos/View.xml      |  2 +-
 .../templates/components/comment.xml          |  2 +-
 .../components/post/microblogpost.xml         |  2 +-
 .../templates/components/post/oldpost.xml     |  2 +-
 Web/static/css/main.css                       | 70 +++++++++++++++++++
 Web/static/js/al_wall.js                      | 48 +++++++++++++
 locales/en.strings                            |  6 ++
 locales/ru.strings                            |  6 ++
 10 files changed, 136 insertions(+), 6 deletions(-)

diff --git a/VKAPI/Handlers/Likes.php b/VKAPI/Handlers/Likes.php
index 8b478a3b..f9262fa1 100644
--- a/VKAPI/Handlers/Likes.php
+++ b/VKAPI/Handlers/Likes.php
@@ -198,7 +198,7 @@ final class Likes extends VKAPIRequestHandler
             if(!$extended)
                 $res->items[] = $liker->getId();
             else
-                $res->items[] = $liker->toVkApiStruct();
+                $res->items[] = $liker->toVkApiStruct(NULL, 'photo_50');
         }
 
         return $res;
diff --git a/Web/Presenters/templates/Photos/Photo.xml b/Web/Presenters/templates/Photos/Photo.xml
index 9bbd67c6..8bc76174 100644
--- a/Web/Presenters/templates/Photos/Photo.xml
+++ b/Web/Presenters/templates/Photos/Photo.xml
@@ -36,7 +36,7 @@
                         {var $liked = $photo->hasLikeFrom($thisUser)}
                         {var $likesCount = $photo->getLikesCount()}
                         <div class='like_wrap tidy'>
-                            <a href="/photo{$photo->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}">
+                            <a href="/photo{$photo->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}" data-id="{$photo->getPrettyId()}" data-type='photo'>
                                 <div class="heart" id="{if $liked}liked{/if}"></div>
                                 <span class="likeCnt">{if $likesCount > 0}{$likesCount}{/if}</span>
                             </a>
diff --git a/Web/Presenters/templates/Videos/View.xml b/Web/Presenters/templates/Videos/View.xml
index 3b7f7b97..46d76559 100644
--- a/Web/Presenters/templates/Videos/View.xml
+++ b/Web/Presenters/templates/Videos/View.xml
@@ -38,7 +38,7 @@
                         {var $liked = $video->hasLikeFrom($thisUser)}
                         {var $likesCount = $video->getLikesCount()}
                         <div class='like_wrap tidy'>
-                            <a href="/video{$video->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}">
+                            <a href="/video{$video->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}" data-id="{$video->getPrettyId()}" data-type='video'>
                                 <div class="heart" id="{if $liked}liked{/if}"></div>
                                 <span class="likeCnt">{if $likesCount > 0}{$likesCount}{/if}</span>
                             </a>
diff --git a/Web/Presenters/templates/components/comment.xml b/Web/Presenters/templates/components/comment.xml
index ea39fe34..ab465023 100644
--- a/Web/Presenters/templates/components/comment.xml
+++ b/Web/Presenters/templates/components/comment.xml
@@ -60,7 +60,7 @@
                                 <a href="javascript:reportComment()">{_report}</a>
                             {/if}
                             <div style="float: right; font-size: .7rem;">
-                                <a class="post-like-button" href="/comment{$comment->getId()}/like?hash={rawurlencode($csrfToken)}">
+                                <a class="post-like-button" href="/comment{$comment->getId()}/like?hash={rawurlencode($csrfToken)}" data-likes='{$likesCount}' data-id="1_{$comment->getPrettyId()}" data-type='comment'>
                                     <div class="heart" style="{if $comment->hasLikeFrom($thisUser)}opacity: 1;{else}opacity: 0.4;{/if}"></div>
                                     <span class="likeCnt">{if $likesCount > 0}{$likesCount}{/if}</span>
                                 </a>
diff --git a/Web/Presenters/templates/components/post/microblogpost.xml b/Web/Presenters/templates/components/post/microblogpost.xml
index 9635f417..5d6389cd 100644
--- a/Web/Presenters/templates/components/post/microblogpost.xml
+++ b/Web/Presenters/templates/components/post/microblogpost.xml
@@ -131,7 +131,7 @@
 
                             {if !($forceNoLike ?? false)}
                                 {var $liked = $post->hasLikeFrom($thisUser)}
-                                <a href="/wall{$post->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}">
+                                <a href="/wall{$post->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}" data-id="{$post->getPrettyId()}" data-type='post'>
                                     <div class="heart" id="{if $liked}liked{/if}"></div>
                                     <span class="likeCnt">{if $likesCount > 0}{$likesCount}{/if}</span>
                                 </a>
diff --git a/Web/Presenters/templates/components/post/oldpost.xml b/Web/Presenters/templates/components/post/oldpost.xml
index 5b1a087a..36e56f73 100644
--- a/Web/Presenters/templates/components/post/oldpost.xml
+++ b/Web/Presenters/templates/components/post/oldpost.xml
@@ -157,7 +157,7 @@
                     <div n:if="!($forceNoLike ?? false)" class="like_wrap">
                         {ifset $thisUser}
                             {var $liked = $post->hasLikeFrom($thisUser)}
-                            <a href="/wall{$post->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}">
+                            <a href="/wall{$post->getPrettyId()}/like?hash={rawurlencode($csrfToken)}" class="post-like-button" data-liked="{(int) $liked}" data-likes="{$likesCount}" data-id="{$post->getPrettyId()}" data-type='post'>
                                 <div class="heart" id="{if $liked}liked{/if}"></div>
                                 <span class="likeCnt">{if $likesCount > 0}{$likesCount}{/if}</span>
                             </a>
diff --git a/Web/static/css/main.css b/Web/static/css/main.css
index 18455cba..c9a5cf7f 100644
--- a/Web/static/css/main.css
+++ b/Web/static/css/main.css
@@ -3783,3 +3783,73 @@ hr {
     height: 206px;
     overflow-x: hidden;
 }
+
+.like_tooltip_wrapper .like_tooltip_head {
+    background: linear-gradient(180deg, #595959, #515151);
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.18) inset;
+    border: solid 1px #575757;
+    padding: 4px 10px;
+    width: 200px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.like_tooltip_wrapper .like_tooltip_head span, .like_tooltip_wrapper .like_tooltip_head a {
+    font-size: 12px;
+    color: white;
+    height: 14px;
+}
+
+.like_tooltip_wrapper .like_tooltip_body {
+    background: white;
+    padding: 10px;
+    border: 1px solid #878787;
+    cursor: default;
+}
+
+.like_tooltip_wrapper .like_tooltip_body .like_tooltip_body_grid {
+    display: flex;
+    gap: 6px;
+}
+
+.like_tooltip_wrapper .like_tooltip_body img {
+    width: 25px;
+    height: 25px;
+}
+
+.like_tooltip_wrapper .like_tooltip_body a {
+    height: 25px;
+}
+
+.tippy-box[data-theme~="special"] {
+    margin: 0;
+    border: unset;
+    border-radius: 0px;
+    background-color: #fff;
+}
+
+.tippy-box[data-theme~="special"] .tippy-arrow {
+    z-index: 9;
+}
+
+.tippy-box[data-theme~="special"] .tippy-arrow::before {
+    border-top-color: white;
+}
+
+.tippy-box[data-theme~="special"][data-placement^=bottom] .tippy-arrow::before {
+    border-bottom-color: #525252;
+}
+
+.tippy-box[data-animation='up_down'] {
+    transition: all 50ms;
+}
+
+.tippy-box[data-animation='up_down'][data-state='hidden'] {
+    opacity: 0;
+    inset: auto auto 10px 0px;
+}
+
+.tippy-box[data-animation='up_down'][data-state='visible'] {
+    inset: auto auto 0px 0px;
+}
diff --git a/Web/static/js/al_wall.js b/Web/static/js/al_wall.js
index 6430e47c..5a6e40f3 100644
--- a/Web/static/js/al_wall.js
+++ b/Web/static/js/al_wall.js
@@ -581,6 +581,54 @@ tippy.delegate("body", {
     }
 });
 
+tippy.delegate('body', {
+    animation: 'up_down',
+    target: `.post-like-button[data-type]:not([data-likes="0"])`,
+    theme: "special vk",
+    content: "⌛",
+    allowHTML: true,
+    interactive: true,
+    interactiveDebounce: 500,
+
+    onCreate: async function(that) {
+        that._likesList = null;
+    },
+
+    onShow: async function(that) {
+        const id  = that.reference.dataset.id
+        const type = that.reference.dataset.type
+        let final_type = type
+        if(type == 'post') {
+            final_type = 'wall'
+        }
+
+        if(!that._likesList) {
+            that._likesList = await window.OVKAPI.call('likes.getList', {'extended': 1, 'count': 6, 'type': type, 'owner_id': id.split('_')[0], 'item_id': id.split('_')[1]})
+        }
+
+        const final_template = u(`
+            <div style='margin: -6px -10px;'>
+                <div class='like_tooltip_wrapper'>
+                    <a href="/${final_type}/${id}/likes" class='like_tooltip_head'>
+                        <span>${tr('liked_by_x_people', that._likesList.count)}</span>
+                    </a>
+
+                    <div class='like_tooltip_body'>
+                        <div class='like_tooltip_body_grid'></div>
+                    </div>
+                </div>
+            </div>
+        `)
+
+        that._likesList.items.forEach(item => {
+            final_template.find('.like_tooltip_body .like_tooltip_body_grid').append(`
+                <a href='/id${item.id}'><img src='${item.photo_50}' alt='.'></a>
+            `)
+        })
+        that.setContent(final_template.nodes[0].outerHTML)
+    }
+})
+
 async function showArticle(note_id) {
     u("body").addClass("dimmed");
     let note = await API.Notes.getNote(note_id);
diff --git a/locales/en.strings b/locales/en.strings
index 90873e09..527323da 100644
--- a/locales/en.strings
+++ b/locales/en.strings
@@ -275,6 +275,12 @@
 "likers_list" = "Likers list";
 "liked_verb" = "Liked by";
 
+"liked_by_x_people_one" = "Liked by $1 user";
+"liked_by_x_people_few" = "Liked by $1 users";
+"liked_by_x_people_many" = "Liked by $1 users";
+"liked_by_x_people_other" = "Liked by $1 users";
+"liked_by_x_people_zero" = "Nobody liked";
+
 /* Friends */
 
 "friends" = "Friends";
diff --git a/locales/ru.strings b/locales/ru.strings
index 45da0eb0..4385b6cd 100644
--- a/locales/ru.strings
+++ b/locales/ru.strings
@@ -254,6 +254,12 @@
 "likers_list" = "Список лайкнувших";
 "liked_verb" = "Понравилось";
 
+"liked_by_x_people_one" = "Понравилось $1 человеку";
+"liked_by_x_people_few" = "Понравилось $1 людям";
+"liked_by_x_people_many" = "Понравилось $1 людям";
+"liked_by_x_people_other" = "Понравилось $1 людям";
+"liked_by_x_people_zero" = "Никому не понравилось";
+
 /* Friends */
 
 "friends" = "Друзья";