34 lines
1.2 KiB
HTML
34 lines
1.2 KiB
HTML
<link rel="stylesheet" href="/assets/css/heart.css">
|
|
<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">125</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;
|
|
|
|
heartIcon.addEventListener("click", () => {
|
|
likesLoader.style.display = "inline-flex"
|
|
likesCount.style.display = "none";
|
|
heartIcon.style.pointerEvents = 'none';
|
|
setTimeout(function(){
|
|
heartIcon.classList.toggle("liked");
|
|
if (heartIcon.classList.contains("liked")) {
|
|
likesAmount++;
|
|
} else {
|
|
likesAmount--;
|
|
}
|
|
|
|
likesCount.innerHTML = likesAmount;
|
|
likesLoader.style.display = "none"
|
|
likesCount.style.display = "inline-flex";
|
|
heartIcon.style.pointerEvents = 'auto';
|
|
}, 1000);
|
|
});
|
|
</script> |