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 = "
" + whoLikedArray.join(', ') + " liked this
"; + } else { + whoLikedPostDiv.innerHTML = ""; } - whoLikedPostDiv.innerHTML = "
" + whoLikedArray.join(', ') + " liked this
"; - console.warn(`Like removed for forum thread '${threadId}' of post '${postId}' for user ${userId}`); } }) 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 586145ef4e..60feb6fc79 100644 --- a/core/components/com_forum/site/views/threads/tmpl/_comment.php +++ b/core/components/com_forum/site/views/threads/tmpl/_comment.php @@ -90,21 +90,23 @@
-
- 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("
"); - - 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; + 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})`; + + 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 = "
" + whoLikedArray.join(', ') + " liked this
"; + } else { + whoLikedPostDiv.innerHTML = ""; + } console.warn(`Like removed for forum thread '${threadId}' of post '${postId}' for user ${userId}`); } @@ -41,18 +69,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(', ') + " liked this
"; console.log(`Like recorded for forum thread '${threadId}' of post '${postId}' for user ${userId}`); } @@ -61,17 +96,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/plugins/groups/forum/views/threads/tmpl/_comment.php b/core/plugins/groups/forum/views/threads/tmpl/_comment.php index 4150829a90..a3e33f1d09 100644 --- a/core/plugins/groups/forum/views/threads/tmpl/_comment.php +++ b/core/plugins/groups/forum/views/threads/tmpl/_comment.php @@ -8,24 +8,24 @@ defined('_HZEXEC_') or die(); $this->css('like.css') - ->js('like.js'); + ->js('like.js'); - $likeArray = $this->like; - $countLike = count($likeArray); - $currentUserId = User::get('id'); + $likeArray = $this->like; + $countLike = count($likeArray); + $currentUserId = User::get('id'); - $userLikesComment = false; - $userNameLikesArray = ""; - foreach ( $likeArray as $likeObj ) { - if ( $currentUserId == $likeObj->userId ) { - $userLikesComment = true; - } + $userLikesComment = false; + $userNameLikesArray = ""; + foreach ( $likeArray as $likeObj ) { + if ( $currentUserId == $likeObj->userId ) { + $userLikesComment = true; + } - $userNameLikesArray .= "/" . ($likeObj->userName); - } - $userNameLikesArray = substr($userNameLikesArray,1); + $userNameLikesArray .= "/" . ($likeObj->userName) . "#" . ($likeObj->userId); + } + $userNameLikesArray = substr($userNameLikesArray,1); - $this->comment->set('section', $this->filters['section']); + $this->comment->set('section', $this->filters['section']); $this->comment->set('category', $this->category->get('alias')); $this->config->set('access-edit-post', false); @@ -79,25 +79,43 @@
- - " 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"; ?> - - ",$nameArray); - ?> + +
+ + 0) ? "Like (" . $countLike . ")" : "Like"; ?> - +
-
+ +
+ 0) { ?> +
+ $userName"; + } + echo join(", ", $links) . " liked this"; + ?> +
+ +
+ +
comment->attachments()->whereEquals('state', Components\Forum\Models\Attachment::STATE_PUBLISHED)->rows() as $attachment) @@ -187,7 +205,7 @@ thread->get('closed') && $this->config->get('threading') == 'tree' && $this->depth < $this->config->get('threading_depth', 3)) { ?>
-
+
comment->get('anonymous') ? $name : Lang::txt('JANONYMOUS'))); ?> @@ -212,10 +230,11 @@
-
@@ -254,8 +273,8 @@ ->set('option', $this->option) ->set('group', $this->group) ->set('comments', $this->comment->get('replies')) - ->set('thread', $this->thread) - ->set('likes', $this->likes) + ->set('thread', $this->thread) + ->set('likes', $this->likes) ->set('parent', $this->comment->get('id')) ->set('config', $this->config) ->set('depth', $this->depth)