Skip to content

Commit

Permalink
modifications on placement of heart
Browse files Browse the repository at this point in the history
  • Loading branch information
@jessewoo
jessewoo committed Sep 25, 2024
1 parent b63bc98 commit 7e6af8a
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 74 deletions.
35 changes: 21 additions & 14 deletions core/components/com_forum/site/assets/css/like.css
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,36 @@
/* 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;
}

.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;
}
107 changes: 64 additions & 43 deletions core/components/com_forum/site/assets/js/like.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,65 @@
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) => {
const commentSections = document.querySelectorAll('.comment-body')
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');

console.log(whoLikedPostDiv.scrollHeight);

likeStatsLink.onclick = (e) => {
this.__toggle = !this.__toggle;
console.log(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[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 threadId = likeButton.dataset.thread;
const postId = likeButton.dataset.post;
const userId = likeButton.dataset.user;
const userName = likeButton.dataset.userName;
const nameAndId = `${userName}#${userId}`;

// console.log(threadId, postId, userId, likeCount, userName, likesList);
const likesList = likeButton.dataset.likesList;
const likeCount = likeButton.dataset.count;

console.log(threadId, postId, userId, likeCount, userName, likesList);

const likesListArray = likesList.split("/");

if (hasHeart) {
removeLike(threadId, postId, userId).then((res) => {
if (res.ok) {
const newLikeCount = Number(likeCount) - 1;
const newLikesString = likesListArray.filter(e => e !== userName).join('/');
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})`;

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`;

// Create ELEMENT
const element = document.createElement('span');
element.classList.add("elementToPopup");
element.innerHTML = newLikesString.split("/").join("<br>");
whoLikedArray.push(`<a href=${userProfileUrl} target='_blank'>${userName}</a>`);
}

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;
whoLikedPostDiv.innerHTML = "<div class='names'>" + whoLikedArray.join(', ') + "</div>";

console.warn(`Like removed for forum thread '${threadId}' of post '${postId}' for user ${userId}`);
}
Expand All @@ -43,18 +68,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("<br>");
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(`<a href=${userProfileUrl} target='_blank'>${userName}</a>`);
}

whoLikedPostDiv.innerHTML = "<div class='names'>" + whoLikedArray.join(', ') + "</div>";

console.log(`Like recorded for forum thread '${threadId}' of post '${postId}' for user ${userId}`);
}
Expand All @@ -63,17 +95,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';
};
}
}
});
Expand Down
49 changes: 32 additions & 17 deletions core/components/com_forum/site/views/threads/tmpl/_comment.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
$userLikesComment = true;
}

$userNameLikesArray .= "/" . ($likeObj->userName);
$userNameLikesArray .= "/" . ($likeObj->userName) . "#" . ($likeObj->userId);
}
$userNameLikesArray = substr($userNameLikesArray,1);

Expand Down Expand Up @@ -73,24 +73,40 @@
<div class="comment-body">
<?php echo $comment; ?>

<!-- Like Button -->
<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'); ?>"
data-user-name="<?php echo User::get('name'); ?>"
data-likes-list="<?php echo $userNameLikesArray; ?>"
data-count="<?php echo $countLike; ?>"
>
<?php echo ($countLike>0) ? "Like (" . $countLike . ")" : "Like"; ?>
<span class="elementToPopup">
<!-- Heart and "Like" link Button -->
<div class="elementInline likeContainer">
<a class="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'); ?>"
data-user-name="<?php echo User::get('name'); ?>"
data-likes-list="<?php echo $userNameLikesArray; ?>"
data-count="<?php echo $countLike; ?>"
></a>
<span class="likesStat">
<?php echo ($countLike>0) ? "Like (" . $countLike . ")" : "Like"; ?>
</span>
</div>
<div class="clear"></div>

<div class="whoLikedPost">
<div class="names">
<?php
$nameArray = preg_split("#/#", $userNameLikesArray);
echo join("<br>",$nameArray);
$links = array();
foreach ($nameArray as $nameString) {
$nameArray = explode("#", $nameString);
$userName = $nameArray[0];
$userId = $nameArray[1];
$userProfileUrl = "/members/$userId/profile";

$links[] = "<a href=$userProfileUrl target='_blank'>$userName</a>";
}
echo join(", ", $links);
?>
</span>
</a>
<div class="clear"></div>
</div>
</div>

</div>

<div class="comment-attachments">
Expand Down Expand Up @@ -257,7 +273,6 @@
->set('controller', $this->controller)
->set('comments', $this->comment->get('replies'))
->set('thread', $this->thread)
->set('likes', $this->likes)
->set('parent', $this->comment->get('id'))
->set('config', $this->config)
->set('depth', $this->depth)
Expand Down

0 comments on commit 7e6af8a

Please sign in to comment.