65 lines
1.9 KiB
HTML
65 lines
1.9 KiB
HTML
<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" aria-hidden="true" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.likes}}"
|
|
data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
|
|
<em id="likes-count"></em>
|
|
|
|
<script>
|
|
const heartIcon = document.querySelector(".heart-icon");
|
|
const likesCount = document.getElementById("likes-count");
|
|
const likesOnLoad = "true";
|
|
|
|
function onLoadAndClick() {
|
|
heartIcon.style.pointerEvents = 'none';
|
|
}
|
|
|
|
function apiCall(url, event) {
|
|
onLoadAndClick();
|
|
ajax(url, "POST")
|
|
.then(function (result) {
|
|
if (event === "click") {
|
|
heartIcon.classList.toggle("liked");
|
|
}
|
|
likesCount.innerHTML = result;
|
|
heartIcon.style.pointerEvents = 'auto';
|
|
});
|
|
}
|
|
|
|
var apiUrl = serviceUrl + "/GetPostLikes?blogUrl=" + siteId + "&postSlug=" + postId;
|
|
|
|
if(likesOnLoad == "{{include.onload}}"){
|
|
apiCall(apiUrl);
|
|
}
|
|
|
|
heartIcon.addEventListener("click", () => {
|
|
if (!heartIcon.classList.contains("liked")) {
|
|
apiUrl = serviceUrl + "/LikePost?blogUrl=" + siteId + "&postSlug=" + postId;
|
|
} else {
|
|
apiUrl = serviceUrl + "/DislikePost?blogUrl=" + siteId + "&postSlug=" + postId;
|
|
}
|
|
|
|
apiCall(apiUrl, "click");
|
|
})
|
|
</script> |