diff --git a/core/components/com_forum/site/assets/js/like.js b/core/components/com_forum/site/assets/js/like.js
index 091c44cd29..1334a4d0d1 100644
--- a/core/components/com_forum/site/assets/js/like.js
+++ b/core/components/com_forum/site/assets/js/like.js
@@ -45,19 +45,23 @@ window.addEventListener('DOMContentLoaded', (domEvent) => {
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`;
-
- whoLikedArray.push(`${userName}`);
+ if (newLikeCount > 0) {
+ 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`;
+
+ whoLikedArray.push(`${userName}`);
+ }
+
+ whoLikedPostDiv.innerHTML = "
-
- 0) { ?>
+
+ $userName";
- }
- echo join(", ", $links) . " liked this";
- ?>
-
+ $links[] = "
$userName";
+ }
+ echo join(", ", $links) . " liked this";
+ ?>
+
+
diff --git a/core/plugins/groups/forum/assets/css/like.css b/core/plugins/groups/forum/assets/css/like.css
index 10592a9ead..67051a567b 100644
--- a/core/plugins/groups/forum/assets/css/like.css
+++ b/core/plugins/groups/forum/assets/css/like.css
@@ -1,29 +1,42 @@
/* 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;
+}
+
+.comment-body .likesStat:hover {
+ cursor: pointer;
+ color: black;
+ text-decoration: underline;
+}
+
+.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/plugins/groups/forum/assets/js/like.js b/core/plugins/groups/forum/assets/js/like.js
index 0ea5dbed53..1334a4d0d1 100644
--- a/core/plugins/groups/forum/assets/js/like.js
+++ b/core/plugins/groups/forum/assets/js/like.js
@@ -1,19 +1,36 @@
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) => {
+ // Find all the "like" / stat button
+ const commentSections = document.querySelectorAll('.comment-content')
+ 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');
+
+ likeStatsLink.onclick = (e) => {
+ this.__toggle = !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.dataset.thread;
+ const postId = likeButton.dataset.post;
+ const userId = likeButton.dataset.user;
+ const userName = likeButton.dataset.userName;
+ const nameAndId = `${userName}#${userId}`;
- 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 likesList = likeButton.dataset.likesList;
+ const likeCount = likeButton.dataset.count;
+
+ console.log(threadId, postId, userId, likeCount, userName, likesList);
const likesListArray = likesList.split("/");
@@ -21,18 +38,29 @@ 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('/');
-
- // Create ELEMENT
- const element = document.createElement('span');
- element.classList.add("elementToPopup");
- element.innerHTML = newLikesString.split("/").join("
+ 0) { ?>
+
+ $userName";
+ }
+ echo join(", ", $links) . " liked this";
+ ?>
+
+
+
+
+