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 = "
" + whoLikedArray.join(', ') + "
"; console.warn(`Like removed for forum thread '${threadId}' of post '${postId}' for user ${userId}`); } @@ -43,18 +68,25 @@ window.addEventListener('DOMContentLoaded', (domEvent) => { addLike(threadId, postId, userId).then((res) => { if (res.ok) { const newLikeCount = Number(likeCount) + 1; - const newLikesString = [...likesListArray, userName].join('/'); + const newLikesString = [...likesListArray, nameAndId].join('/'); - // Create ELEMENT - const element = document.createElement('span'); - element.classList.add("elementToPopup"); - element.innerHTML = newLikesString.split("/").join("
"); + likeButton.dataset.count = `${newLikeCount}`; + likeButton.classList.add("userLiked"); + likeButton.dataset.likesList = newLikesString; + likeStatsLink.innerHTML = `Like (${newLikeCount})`; - likeButton[i].dataset.count = `${newLikeCount}`; - likeButton[i].innerHTML = `Like (${newLikeCount})`; - likeButton[i].appendChild(element); - likeButton[i].classList.add("userLiked"); - likeButton[i].dataset.likesList = newLikesString; + 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 = "
" + whoLikedArray.join(', ') + "
"; console.log(`Like recorded for forum thread '${threadId}' of post '${postId}' for user ${userId}`); } @@ -63,17 +95,6 @@ window.addEventListener('DOMContentLoaded', (domEvent) => { return false; }; - - // Hover over and mouse leave - likeButton[i].onmouseover = (e) => { - if (likeButton[i].dataset.count > 0) { - likeButton[i].getElementsByClassName('elementToPopup')[0].style.display = 'block'; - } - }; - - likeButton[i].onmouseleave = (e) => { - likeButton[i].getElementsByClassName('elementToPopup')[0].style.display = 'none'; - }; } } }); diff --git a/core/components/com_forum/site/views/threads/tmpl/_comment.php b/core/components/com_forum/site/views/threads/tmpl/_comment.php index 17f54a09b6..7bc2d0f977 100644 --- a/core/components/com_forum/site/views/threads/tmpl/_comment.php +++ b/core/components/com_forum/site/views/threads/tmpl/_comment.php @@ -21,7 +21,7 @@ $userLikesComment = true; } - $userNameLikesArray .= "/" . ($likeObj->userName); + $userNameLikesArray .= "/" . ($likeObj->userName) . "#" . ($likeObj->userId); } $userNameLikesArray = substr($userNameLikesArray,1); @@ -73,24 +73,40 @@
- - " href="#" - data-thread="thread->get('id'); ?>" - data-post="comment->get('id'); ?>" - data-user="" - data-user-name="" - data-likes-list="" - data-count="" - > - 0) ? "Like (" . $countLike . ")" : "Like"; ?> - + +
+ + 0) ? "Like (" . $countLike . ")" : "Like"; ?> + +
+
+ +
+
",$nameArray); + $links = array(); + foreach ($nameArray as $nameString) { + $nameArray = explode("#", $nameString); + $userName = $nameArray[0]; + $userId = $nameArray[1]; + $userProfileUrl = "/members/$userId/profile"; + + $links[] = "$userName"; + } + echo join(", ", $links); ?> - - -
+
+
+
@@ -257,7 +273,6 @@ ->set('controller', $this->controller) ->set('comments', $this->comment->get('replies')) ->set('thread', $this->thread) - ->set('likes', $this->likes) ->set('parent', $this->comment->get('id')) ->set('config', $this->config) ->set('depth', $this->depth)