diff --git a/core/components/com_forum/site/assets/css/like.css b/core/components/com_forum/site/assets/css/like.css index 5008f25dfb..63621137ef 100644 --- a/core/components/com_forum/site/assets/css/like.css +++ b/core/components/com_forum/site/assets/css/like.css @@ -7,4 +7,20 @@ .comment-body a.userLiked { color: red; +} + +.elementToHover { + display: inline-block; + position: relative; +} + +.elementToPopup { + /*display: none;*/ + position: absolute; + top: 30px; + left: 7px; + background-color: #555; + color: #fff; + padding: 8px; + border-radius: 5px; } \ 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 d759585c85..1bf5df5137 100644 --- a/core/components/com_forum/site/assets/js/like.js +++ b/core/components/com_forum/site/assets/js/like.js @@ -3,8 +3,12 @@ console.log("like on site forum"); window.addEventListener('DOMContentLoaded', (domEvent) => { // Find all the "like" button const likeButton = document.querySelectorAll('.comment-body .like') + const likePopup = document.querySelectorAll('.comment-body .elementToPopup') if (likeButton.length) { for(let i = 0; i < likeButton.length;i++) { + console.log(likeButton); + console.log(likePopup); + likeButton[i].onclick = (e) => { e.preventDefault(); @@ -32,6 +36,8 @@ window.addEventListener('DOMContentLoaded', (domEvent) => { likeButton[i].classList.remove("userLiked"); likeButton[i].dataset.likesList = newLikesString; + likePopup[i].innerHTML = newLikesString; + console.warn(`Like removed for forum thread '${threadId}' of post '${postId}' for user ${userId}`); } }) @@ -46,6 +52,8 @@ window.addEventListener('DOMContentLoaded', (domEvent) => { likeButton[i].classList.add("userLiked"); likeButton[i].dataset.likesList = newLikesString; + likePopup[i].innerHTML = newLikesString; + console.log(`Like recorded for forum thread '${threadId}' of post '${postId}' for user ${userId}`); } }) @@ -54,6 +62,14 @@ window.addEventListener('DOMContentLoaded', (domEvent) => { return false; }; + likeButton[i].onmouseover = (e) => { + likePopup[i].style.display = 'block'; + }; + + likeButton[i].onmouseleave = (e) => { + likePopup[i].style.display = 'none'; + }; + // https://www.geeksforgeeks.org/how-to-open-a-popup-on-hover-using-javascript/ } } 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 19f0a750d8..9f7bf59a31 100644 --- a/core/components/com_forum/site/views/threads/tmpl/_comment.php +++ b/core/components/com_forum/site/views/threads/tmpl/_comment.php @@ -74,7 +74,7 @@ - " href="#" + " href="#" data-thread="thread->get('id'); ?>" data-post="comment->get('id'); ?>" data-user="" @@ -83,6 +83,9 @@ data-count="" > 0) ? "Like (" . $countLike . ")" : "Like"; ?> + + +
diff --git a/core/components/com_forum/site/views/threads/tmpl/_list.php b/core/components/com_forum/site/views/threads/tmpl/_list.php index 09e894bb6c..fe3e4a3807 100644 --- a/core/components/com_forum/site/views/threads/tmpl/_list.php +++ b/core/components/com_forum/site/views/threads/tmpl/_list.php @@ -18,11 +18,12 @@ } } +//print_r($hash_map); + ?>
    comments) -{ +if ($this->comments) { $cls = 'odd'; if (isset($this->cls)) { @@ -36,16 +37,16 @@ $this->depth++; - foreach ($this->comments as $comment) - { - $postId = $comment->get('id'); - $likesByPostId = $hash_map[$postId]; - + foreach ($this->comments as $comment) { + + $postId = $comment->get('id'); + $likesByPostId = isset($hash_map[$postId]) ? $hash_map[$postId] : []; + $this->view('_comment') ->set('option', $this->option) ->set('controller', $this->controller) ->set('comment', $comment) - ->set('like', $likesByPostId) + ->set('like', $likesByPostId) ->set('thread', $this->thread) ->set('config', $this->config) ->set('depth', $this->depth)