diff --git a/core/components/com_forum/site/assets/css/like.css b/core/components/com_forum/site/assets/css/like.css
index 10592a9ead..e0c9c520d0 100644
--- a/core/components/com_forum/site/assets/css/like.css
+++ b/core/components/com_forum/site/assets/css/like.css
@@ -1,29 +1,36 @@
/* Should put this in the comments.less file */
.comment-body a.like {
- float: right;
color: gray;
- margin-bottom: 10px;
+ margin-right: 5px;
+ font-size:20px;
}
.comment-body a.userLiked {
color: red;
}
-.elementToHover {
- display: inline-block;
- position: relative;
+.comment-body .likesStat {
+ font-size: 14px;
+ vertical-align:middle;
+ margin-top: 5px;
+}
+
+.elementInline {
+ display: inline-flex;
+ float: right;
+ vertical-align:middle;
+}
+
+.whoLikedPost {
+ height: 0;
+ overflow: hidden;
+ transition: height 0.8s ease;
}
-.elementToPopup {
- display: none;
- position: absolute;
- top: 30px;
- left: -80px;
- background-color: #555;
- color: #fff;
+.names {
padding: 10px;
+ background-color: #eeeeee;
border-radius: 5px;
- z-index: 1;
- width: 151px;
text-align: right;
+ font-size: 12px;
}
\ No newline at end of file
diff --git a/core/components/com_forum/site/assets/js/like.js b/core/components/com_forum/site/assets/js/like.js
index 9ac2b24417..fb56d94947 100644
--- a/core/components/com_forum/site/assets/js/like.js
+++ b/core/components/com_forum/site/assets/js/like.js
@@ -1,21 +1,39 @@
window.addEventListener('DOMContentLoaded', (domEvent) => {
// Find all the "like" button
- const likeButton = document.querySelectorAll('.comment-body .like')
- if (likeButton.length) {
- for(let i = 0; i < likeButton.length;i++) {
- likeButton[i].onclick = (e) => {
+ const commentSections = document.querySelectorAll('.comment-body')
+ if (commentSections.length) {
+ for(let i = 0; i < commentSections.length;i++) {
+ let likeButton = commentSections[i].querySelector('.like');
+ let likeStatsLink = commentSections[i].querySelector('.likesStat');
+ let whoLikedPostDiv = commentSections[i].querySelector('.whoLikedPost');
+
+ console.log(whoLikedPostDiv.scrollHeight);
+
+ likeStatsLink.onclick = (e) => {
+ this.__toggle = !this.__toggle;
+ console.log(this.__toggle)
+ if(this.__toggle) {
+ whoLikedPostDiv.style.height = `${whoLikedPostDiv.scrollHeight}px`;
+ } else {
+ whoLikedPostDiv.style.height = 0;
+ }
+ }
+
+ likeButton.onclick = (e) => {
e.preventDefault();
- let hasHeart = likeButton[i].classList.contains("userLiked");
+ let hasHeart = likeButton.classList.contains("userLiked");
- const threadId = likeButton[i].dataset.thread;
- const postId = likeButton[i].dataset.post;
- const userId = likeButton[i].dataset.user;
- const userName = likeButton[i].dataset.userName;
- const likesList = likeButton[i].dataset.likesList;
- const likeCount = likeButton[i].dataset.count;
+ const threadId = likeButton.dataset.thread;
+ const postId = likeButton.dataset.post;
+ const userId = likeButton.dataset.user;
+ const userName = likeButton.dataset.userName;
+ const nameAndId = `${userName}#${userId}`;
- // console.log(threadId, postId, userId, likeCount, userName, likesList);
+ const likesList = likeButton.dataset.likesList;
+ const likeCount = likeButton.dataset.count;
+
+ console.log(threadId, postId, userId, likeCount, userName, likesList);
const likesListArray = likesList.split("/");
@@ -23,18 +41,25 @@ window.addEventListener('DOMContentLoaded', (domEvent) => {
removeLike(threadId, postId, userId).then((res) => {
if (res.ok) {
const newLikeCount = Number(likeCount) - 1;
- const newLikesString = likesListArray.filter(e => e !== userName).join('/');
+ const newLikesString = likesListArray.filter(e => e !== nameAndId).join('/');
+
+ likeButton.dataset.count = `${newLikeCount}`;
+ likeButton.classList.remove("userLiked");
+ likeButton.dataset.likesList = newLikesString;
+ likeStatsLink.innerHTML = (newLikeCount === 0) ? 'Like' : `Like (${newLikeCount})`;
+
+ let whoLikedArray = [];
+ const newLikesArray = newLikesString.split("/");
+ for (let i = 0; i < newLikesArray.length; i++) {
+ const nameArray = newLikesArray[i].split('#')
+ const userName = nameArray[0];
+ const userId = nameArray[1];
+ const userProfileUrl = `/members/${userId}/profile`;
- // Create ELEMENT
- const element = document.createElement('span');
- element.classList.add("elementToPopup");
- element.innerHTML = newLikesString.split("/").join("
");
+ whoLikedArray.push(`${userName}`);
+ }
- likeButton[i].dataset.count = `${newLikeCount}`;
- likeButton[i].innerHTML = (newLikeCount === 0) ? 'Like' : `Like (${newLikeCount})`;
- likeButton[i].appendChild(element);
- likeButton[i].classList.remove("userLiked");
- likeButton[i].dataset.likesList = newLikesString;
+ whoLikedPostDiv.innerHTML = "