81 lines
2.5 KiB
HTML
81 lines
2.5 KiB
HTML
<!-- <link rel="stylesheet" href="{{ '/assets/css/heart.css' | relative_url }}"> -->
|
|
|
|
<style>
|
|
.heart-icon {
|
|
margin-bottom: -41px;
|
|
margin-right: -39.5px;
|
|
display: inline-flex;
|
|
width: 46px;
|
|
height: 46px;
|
|
transform: translate(-50%, -50%);
|
|
background: url("{{ '/assets/img/custom/heart.png' | relative_url }}") no-repeat;
|
|
background-position: 0 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.heart-icon.liked {
|
|
animation: like-anim 0.7s steps(28) forwards;
|
|
}
|
|
|
|
@keyframes like-anim {
|
|
to {
|
|
background-position: right;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<i class="heart-icon" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.likes}}"
|
|
data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
|
|
{% include loader.html id="likes-loader" %}
|
|
<em id="likes-count"></em>
|
|
|
|
<script>
|
|
const heartIcon = document.querySelector(".heart-icon");
|
|
const likesCount = document.getElementById("likes-count");
|
|
const likesLoader = document.getElementById("likes-loader");
|
|
|
|
likesLoader.style.display = "none"
|
|
|
|
let likesAmount = likesCount.innerHTML;
|
|
|
|
function onLoadAndClick() {
|
|
likesLoader.style.display = "inline-flex"
|
|
likesCount.style.display = "none";
|
|
heartIcon.style.pointerEvents = 'none';
|
|
}
|
|
|
|
function apiCall(url, event) {
|
|
onLoadAndClick();
|
|
ajax(url)
|
|
.then(function (result) {
|
|
console.log(result);
|
|
if (event === "click") {
|
|
heartIcon.classList.toggle("liked");
|
|
}
|
|
likesCount.innerHTML = result;
|
|
likesLoader.style.display = "none"
|
|
likesCount.style.display = "inline-flex";
|
|
heartIcon.style.pointerEvents = 'auto';
|
|
})
|
|
.catch(function () {
|
|
likesLoader.style.display = "none";
|
|
likesCount.style.display = "inline-flex";
|
|
});
|
|
}
|
|
|
|
var apiUrl = serviceUrl + "/GetPostLikes?siteId=" + siteId + "&postId=" + postId;
|
|
|
|
apiCall(apiUrl);
|
|
|
|
heartIcon.addEventListener("click", () => {
|
|
if (!heartIcon.classList.contains("liked")) {
|
|
apiUrl = serviceUrl + "/LikePost?siteId=" + siteId + "&postId=" + postId;
|
|
} else {
|
|
apiUrl = serviceUrl + "/DislikePost?siteId=" + siteId + "&postId=" + postId;
|
|
}
|
|
|
|
apiCall(apiUrl, "click");
|
|
});
|
|
</script>
|
|
|
|
<!-- <script src="{{ '/assets/js/likes.js' | relative_url }}"></script> --> |