hover over popup

hubzero · Aug 23, 2024 · 8913f62 · 8913f62
1 parent 4adcf7f
commit 8913f62
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 9 deletions.
diff --git 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;
 }
diff --git 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
@@ -74,7 +74,7 @@
 				<?php echo $comment; ?>
 
                 <!-- Like Button -->
-                <a class="icon-heart like <?php if ($userLikesComment) { echo "userLiked"; } ?>" href="#"
+                <a class="elementToHover icon-heart like <?php if ($userLikesComment) { echo "userLiked"; } ?>" href="#"
                    data-thread="<?php echo $this->thread->get('id'); ?>"
                    data-post="<?php echo $this->comment->get('id'); ?>"
                    data-user="<?php echo User::get('id'); ?>"
@@ -83,6 +83,9 @@
                    data-count="<?php echo $countLike; ?>"
                 >
                     <?php echo ($countLike>0) ? "Like (" . $countLike . ")" : "Like"; ?>
+                    <span class="elementToPopup">
+                        <?php echo $userNameLikesArray; ?>
+                    </span>
                 </a>
                 <div class="clear"></div>
 			</div>

diff --git 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);
+
 ?>
 <ol class="comments" id="t<?php echo $this->parent; ?>">
 <?php
-if ($this->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)