From 4a11f0c85075f18ad2c9584717cf9ac7a0aad0ae Mon Sep 17 00:00:00 2001
From: Bangara Raju Kottedi <bangararaju.kottedi@gmail.com>
Date: Wed, 6 Sep 2023 18:44:23 +0530
Subject: [PATCH] Likes and Views as a Single component: Improved ui

---
 _includes/likes-views.html | 44 ++++++++++++++++++++++++++++++++++++++
 _includes/likes.html       | 23 ++++----------------
 _includes/views.html       | 14 +++---------
 _layouts/post.html         |  5 ++---
 4 files changed, 53 insertions(+), 33 deletions(-)
 create mode 100644 _includes/likes-views.html

diff --git a/_includes/likes-views.html b/_includes/likes-views.html
new file mode 100644
index 0000000..a87b243
--- /dev/null
+++ b/_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>
\ No newline at end of file
diff --git a/_includes/likes.html b/_includes/likes.html
index d62bf67..29fce07 100644
--- a/_includes/likes.html
+++ b/_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> -->
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/_includes/views.html b/_includes/views.html
index 1dd75b6..b8cb6e7 100644
--- a/_includes/views.html
+++ b/_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> -->
\ No newline at end of file
diff --git a/_layouts/post.html b/_layouts/post.html
index fed7154..752f30a 100644
--- a/_layouts/post.html
+++ b/_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>