Skip to content

Commit

Permalink
likes changed in groups
Browse files Browse the repository at this point in the history
  • Loading branch information
@jessewoo
jessewoo committed Sep 25, 2024
1 parent 17ab68c commit adae70e
Show file tree
Hide file tree
Showing 5 changed files with 183 additions and 121 deletions.
26 changes: 15 additions & 11 deletions core/components/com_forum/site/assets/js/like.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,19 +45,23 @@ window.addEventListener('DOMContentLoaded', (domEvent) => {
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`;

whoLikedArray.push(`<a href=${userProfileUrl} target='_blank'>${userName}</a>`);
if (newLikeCount > 0) {
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(', ') + " liked this</div>";
} else {
whoLikedPostDiv.innerHTML = "";
}

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

console.warn(`Like removed for forum thread '${threadId}' of post '${postId}' for user ${userId}`);
}
})
Expand Down
30 changes: 16 additions & 14 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 @@ -90,21 +90,23 @@
<div class="clear"></div>

<div class="whoLikedPost">
<div class="names">
<?php
$nameArray = preg_split("#/#", $userNameLikesArray);
$links = array();
foreach ($nameArray as $nameString) {
$nameArray = explode("#", $nameString);
$userName = $nameArray[0];
$userId = $nameArray[1];
$userProfileUrl = "/members/$userId/profile";
<?php if (strlen($userNameLikesArray) > 0) { ?>
<div class="names">
<?php
$nameArray = preg_split("#/#", $userNameLikesArray);
$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) . " liked this";
?>
</div>
$links[] = "<a href=$userProfileUrl target='_blank'>$userName</a>";
}
echo join(", ", $links) . " liked this";
?>
</div>
<?php } ?>
</div>

</div>
Expand Down
41 changes: 27 additions & 14 deletions core/plugins/groups/forum/assets/css/like.css
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,42 @@
/* 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;
}

.comment-body .likesStat:hover {
cursor: pointer;
color: black;
text-decoration: underline;
}

.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;
}
114 changes: 69 additions & 45 deletions core/plugins/groups/forum/assets/js/like.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,66 @@
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) => {
// Find all the "like" / stat button
const commentSections = document.querySelectorAll('.comment-content')
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');

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

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 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('/');

// 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;
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})`;

if (newLikeCount > 0) {
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(', ') + " liked this</div>";
} else {
whoLikedPostDiv.innerHTML = "";
}

console.warn(`Like removed for forum thread '${threadId}' of post '${postId}' for user ${userId}`);
}
Expand All @@ -41,18 +69,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(', ') + " liked this</div>";

console.log(`Like recorded for forum thread '${threadId}' of post '${postId}' for user ${userId}`);
}
Expand All @@ -61,17 +96,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
Loading

0 comments on commit adae70e

Please sign in to comment.