Like button improvements (closes #416)

Azuriom · Feb 14, 2024 · ef9755f · ef9755f
1 parent db5efa7
commit ef9755f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/public/assets/js/script.js b/public/assets/js/script.js
@@ -45,6 +45,8 @@ document.querySelectorAll('[data-like-url]').forEach(function (el) {
         likeLoading = true;
 
         const likeSpinner = el.querySelector('.load-spinner');
+        const likeIcon = el.querySelector('[data-liked=true]');
+        const unlikeIcon = el.querySelector('[data-liked=false]');
 
         if (likeSpinner) {
             likeSpinner.classList.remove('d-none');
@@ -54,10 +56,20 @@ document.querySelectorAll('[data-like-url]').forEach(function (el) {
             url: el.dataset['likeUrl'],
             method: el.classList.contains('active') ? 'delete' : 'post'
         }).then(function (json) {
-            el.classList.remove('active');
-
             if (json.data.liked === true) {
                 el.classList.add('active');
+
+                if (likeIcon && unlikeIcon) {
+                    likeIcon.classList.add('d-none');
+                    unlikeIcon.classList.remove('d-none');
+                }
+            } else {
+                el.classList.remove('active');
+
+                if (likeIcon && unlikeIcon) {
+                    likeIcon.classList.remove('d-none');
+                    unlikeIcon.classList.add('d-none');
+                }
             }
 
             const likesCount = el.querySelector('.likes-count');

diff --git a/resources/views/posts/show.blade.php b/resources/views/posts/show.blade.php
@@ -33,7 +33,8 @@
 
             <div class="d-md-flex justify-content-between align-items-center">
                 <button type="button" class="btn btn-primary @if($post->isLiked()) active @endif mb-3" @guest disabled @endguest data-like-url="{{ route('posts.like', $post) }}">
-                    <i class="bi bi-heart"></i>
+                    <i class="bi bi-heart @if($post->isLiked()) d-none @endif" data-liked="true"></i>
+                    <i class="bi bi-heart-fill @if(! $post->isLiked()) d-none @endif" data-liked="false"></i>
                     @lang('messages.likes', ['count' => '<span class="likes-count">'.$post->likes->count().'</span>'])
                     <span class="d-none spinner-border spinner-border-sm load-spinner" role="status"></span>
                 </button>