72 lines
2.4 KiB
HTML
72 lines
2.4 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>
|
|
|
|
{% include views.html tooltip=true onload=false lang=lang %}
|
|
{% include likes.html tooltip=true onload=false lang=lang %}
|
|
|
|
<script>
|
|
const views = document.getElementById("views-count");
|
|
const likes = document.getElementById("likes-count");
|
|
const postLikesAndViews = document.getElementById("likes-views");
|
|
var commentsCountFromResponse = 0;
|
|
|
|
postLikesAndViews.style.display = "none";
|
|
|
|
ajax(serviceUrl + "/GetPostLikesAndViews?blogUrl=" + siteId + "&postSlug=" + postId, "GET")
|
|
.then(function (result) {
|
|
if (result != "N/A") {
|
|
var response = JSON.parse(result);
|
|
setPostMetrics(response);
|
|
if(!response.postExists){
|
|
postDetails.likes = postDetails.views = postDetails.comments = 0;
|
|
if(Number(likes.innerText) !== NaN){
|
|
postDetails.likes = Number(likes.innerText);
|
|
}
|
|
if(Number(views.innerText) !== NaN){
|
|
postDetails.views = Number(views.innerText);
|
|
}
|
|
if(postDetails.modifiedDate === ""){
|
|
postDetails.modifiedDate = postDetails.createdDate;
|
|
}
|
|
|
|
ajax(serviceUrl + "/CreatePost", "POST", postDetails)
|
|
.then(function (result) {
|
|
if(result != "N/A"){
|
|
var response = JSON.parse(result);
|
|
setPostMetrics(response);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
function setPostMetrics(response){
|
|
if(response.postExists){
|
|
views.innerText = response.views;
|
|
likes.innerText = response.likes;
|
|
commentsCountFromResponse = response.comments;
|
|
postLikesAndViews.style.display = "inline";
|
|
}
|
|
}
|
|
</script> |