Likes and Views as a Single component: Improved ui

_includes/likes-views.html

@@ -0,0 +1,44 @@
+<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");
+
+    postLikesAndViews.style.display = "none";
+
+    ajax(serviceUrl + "/GetPostLikesAndViews?siteId=" + siteId + "&postId=" + postId)
+        .then(function (result) {
+            if (result != "N/A") {
+                var response = JSON.parse(result);
+                views.innerText = response.postViews;
+                likes.innerText = response.postLikes;
+                postLikesAndViews.style.display = "inline";
+            }
+        });
+</script>

_includes/likes.html

@@ -1,5 +1,3 @@
-<!-- <link rel="stylesheet" href="{{ '/assets/css/heart.css' | relative_url }}"> -->
-
 <style>
     .heart-icon {
         margin-bottom: -41px;
@@ -26,21 +24,14 @@
 
 <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;
+    const likesOnLoad = "true";
 
     function onLoadAndClick() {
-        likesLoader.style.display = "inline-flex";
-        likesCount.style.display = "none";
         heartIcon.style.pointerEvents = 'none';
     }
 
@@ -53,19 +44,15 @@
                     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;
 
+    if(likesOnLoad == "{{include.onload}}"){
     apiCall(apiUrl);
+    }
 
     heartIcon.addEventListener("click", () => {
         if (!heartIcon.classList.contains("liked")) {
@@ -76,6 +63,4 @@
 
         apiCall(apiUrl, "click");
     });
-</script>
-
-<!-- <script src="{{ '/assets/js/likes.js' | relative_url }}"></script> -->
+</script>

_includes/views.html

@@ -1,27 +1,19 @@
 <i class="fa fa-eye fa-fw" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.views}}"
   data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
-{% include loader.html id="views-loader" style="margin-right: 12px" %}
 <em id="views-count" style="margin-right: 12px">
 </em>
 
 <script>
+  const viewsOnLoad = "true";
+if(viewsOnLoad == "{{include.onload}}"){
   const viewsCount = document.getElementById("views-count");
   const viewsLoader = document.getElementById("views-loader");
 
-  viewsCount.style.display = "none";
-  viewsLoader.style.display = "inline-block";
-
   ajax(serviceUrl + "/GetPostViews?siteId=" + siteId + "&postId=" + postId)
     .then(function (result) {
       viewsCount.innerText = result;
-      viewsLoader.style.display = "none";
-      viewsCount.style.display = "inline-block";
     })
     .catch(function () {
-      viewsLoader.style.display = "none";
-      viewsCount.style.display = "inline-block";
     });
+}
 </script>
-
-<!-- <script src="{{ '/assets/js/views.js' | relative_url }}">
-</script> -->

_layouts/post.html

@@ -33,9 +33,8 @@ tail_includes:
     </div>
 
     <!-- post counter -->
-    <div>
-      {% include views.html tooltip=true lang=lang %}
-      {% include likes.html tooltip=true lang=lang %}
+    <div id="likes-views">
+      {% include likes-views.html tooltip=true lang=lang %}
     </div>
   </div>