Add refresh button

src/assets/css/default.css

@@ -39,6 +39,20 @@
     background-color: #fff;
 }
 
+/** Refresh */
+.ui.card > .image > button {
+    transition: 0.4s ease opacity;
+
+	position: absolute;
+    top: 1em;
+    right: 1em;
+
+    opacity: 0;
+}
+.ui.card:hover > .image > button {
+    opacity: 1;
+}
+
 /** Content */
 .ui.card > .content > .header + .description,
 .ui.card > .content > .meta + .description,
@@ -57,7 +71,6 @@
     vertical-align: text-bottom;
 }
 
-
 /**
  * Label
  */

src/assets/js/wishlist-view.js

@@ -58,10 +58,26 @@ $(function() {
          */
         var timerInterval = 1200;
         var timerCache    = setTimeout(
-            function generateCache() {
+            function generateCacheCards() {
                 var cards = $('.ui.card[data-cache="false"]');
 
                 cards.each(function(index, card) {
+                    generateCacheCard(card);
+
+                    if (index >= 0) {
+                        return false;
+                    }
+                });
+
+                if (cards.length > 0) {
+                    setTimeout(generateCacheCards, timerInterval);
+                }
+            },
+            0
+        );
+    });
+
+    function generateCacheCard(card) {
         card = $(card);
 
         var href       = card.find('.content [href]').prop('href');
@@ -172,18 +188,17 @@ $(function() {
                 card.removeClass('loading');
             }
         });
-
-                    if (index >= 0) {
-                        return false;
     }
-                });
 
-                if (cards.length > 0) {
-                    setTimeout(generateCache, timerInterval);
-                }
-            },
-            0
-        );
+    /**
+     * Refresh
+     */
+    $(document).on('click', '.ui.button.refresh', function(event) {
+        var card = $(event.currentTarget).closest('.ui.card');
+
+        console.log(card);
+
+        generateCacheCard(card);
     });
 
     /**

src/classes/wishlist.php

@@ -90,6 +90,10 @@ class Wishlist
                             <?php if ($info->image) { ?>
                                 <div class="image">
                                     <img src="<?= $info->image ?>" loading="lazy"/>
+
+                                    <button class="ui icon button refresh">
+                                        <i class="refresh icon"></i>
+                                    </button>
                                 </div>
                             <?php } ?>