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); + ?>