updated hover over of likes

hubzero · Aug 23, 2024 · 5b236c6 · 5b236c6
1 parent 8913f62
commit 5b236c6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/core/components/com_forum/site/assets/css/like.css b/core/components/com_forum/site/assets/css/like.css
@@ -15,12 +15,15 @@
 }
 
 .elementToPopup {
-    /*display: none;*/
+    display: none;
     position: absolute;
     top: 30px;
-    left: 7px;
+    left: -80px;
     background-color: #555;
     color: #fff;
-    padding: 8px;
+    padding: 10px;
     border-radius: 5px;
+    z-index: 1;
+    width: 150px;
+    text-align: right;
 }
diff --git a/core/components/com_forum/site/assets/js/like.js b/core/components/com_forum/site/assets/js/like.js
@@ -3,12 +3,8 @@ 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();
 
@@ -31,13 +27,17 @@ window.addEventListener('DOMContentLoaded', (domEvent) => {
                             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("<br>");
+
                             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;
 
-                            likePopup[i].innerHTML = newLikesString;
-
                             console.warn(`Like removed for forum thread '${threadId}' of post '${postId}' for user ${userId}`);
                         }
                     })
@@ -47,13 +47,17 @@ window.addEventListener('DOMContentLoaded', (domEvent) => {
                             const newLikeCount = Number(likeCount) + 1;
                             const newLikesString = [...likesListArray, userName].join('/');
 
+                            // Create ELEMENT
+                            const element = document.createElement('span');
+                            element.classList.add("elementToPopup");
+                            element.innerHTML = newLikesString.split("/").join("<br>");
+
                             likeButton[i].dataset.count = `${newLikeCount}`;
                             likeButton[i].innerHTML = `Like (${newLikeCount})`;
+                            likeButton[i].appendChild(element);
                             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}`);
                         }
                     })
@@ -62,15 +66,14 @@ window.addEventListener('DOMContentLoaded', (domEvent) => {
                 return false;
             };
 
+            // Hover over and mouse leave
             likeButton[i].onmouseover = (e) => {
-                likePopup[i].style.display = 'block';
+                likeButton[i].getElementsByClassName('elementToPopup')[0].style.display = 'block';
             };
 
             likeButton[i].onmouseleave = (e) => {
-                likePopup[i].style.display = 'none';
+                likeButton[i].getElementsByClassName('elementToPopup')[0].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
@@ -84,7 +84,10 @@
                 >
                     <?php echo ($countLike>0) ? "Like (" . $countLike . ")" : "Like"; ?>
                     <span class="elementToPopup">
-                        <?php echo $userNameLikesArray; ?>
+                        <?php
+                            $nameArray = preg_split("#/#", $userNameLikesArray);
+                            echo join("<br>",$nameArray);
+                        ?>
                     </span>
                 </a>
                 <div class="clear"></div>