diff --git a/src/assets/css/default.css b/src/assets/css/default.css index a8e43680..716a18a0 100644 --- a/src/assets/css/default.css +++ b/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 */ diff --git a/src/assets/js/wishlist-view.js b/src/assets/js/wishlist-view.js index dbe8c917..51c02b07 100644 --- a/src/assets/js/wishlist-view.js +++ b/src/assets/js/wishlist-view.js @@ -58,120 +58,11 @@ $(function() { */ var timerInterval = 1200; var timerCache = setTimeout( - function generateCache() { + function generateCacheCards() { var cards = $('.ui.card[data-cache="false"]'); cards.each(function(index, card) { - card = $(card); - - var href = card.find('.content [href]').prop('href'); - var product_id = card.data('id'); - - card.addClass('loading'); - card.attr('data-cache', true); - - fetch('/src/api/cache.php?product_id=' + product_id + '&url=' + href, { - method: 'GET' - }) - .then(response => response.json()) - .then(response => { - if (response.success) { - var info = response.data; - - /** - * Elements - */ - var elementImage = card.children('.image'); - var elementContent = card.children('.content').first(); - var elementDetails = card.children('.extra.content.details'); - var elementButtons = card.children('.extra.content.buttons'); - - /** - * Image - */ - if (info.image) { - if (!elementImage.length) { - card.prepend( - '
' + - '' + - '
' - ); - } - } - - /** - * Header - */ - var elementContentHeader = elementContent.children('.header'); - var elementContentHeaderTitle = elementContentHeader.children('a'); - - /** Favicon */ - if (info.favicon) { - elementContentHeader.prepend( - '' - ); - } - - /** Title */ - if (info.title) { - elementContentHeaderTitle.text(info.title); - } - - /** - * Meta - */ - var elementContentMeta = elementContent.children('.meta'); - - if (info.keywords.length) { - if (!elementContentMeta.length) { - elementContent.append( - '
' + info.keywords.join(', ') + '
' - ); - } - } - - /** - * Description - */ - var elementContentDescription = elementContent.children('.description'); - - if (info.description) { - if (!elementContentDescription.length) { - elementContent.append( - '
' + info.description + '
' - ); - } - } - - /** - * Details - */ - if (info.publishedTime || info.providerName) { - if (!elementDetails.length) { - elementButtons.before().append( - '
' - ); - - if (info.publishedTime) { - elementContent.children('.extra.content.details').append( - '' + info.publishedTime + '' - ); - } - - if (info.providerName) { - elementContent.children('.extra.content.details').append( - info.providerName - ); - } - } - } - - /** - * Finish - */ - card.removeClass('loading'); - } - }); + generateCacheCard(card); if (index >= 0) { return false; @@ -179,13 +70,137 @@ $(function() { }); if (cards.length > 0) { - setTimeout(generateCache, timerInterval); + setTimeout(generateCacheCards, timerInterval); } }, 0 ); }); + function generateCacheCard(card) { + card = $(card); + + var href = card.find('.content [href]').prop('href'); + var product_id = card.data('id'); + + card.addClass('loading'); + card.attr('data-cache', true); + + fetch('/src/api/cache.php?product_id=' + product_id + '&url=' + href, { + method: 'GET' + }) + .then(response => response.json()) + .then(response => { + if (response.success) { + var info = response.data; + + /** + * Elements + */ + var elementImage = card.children('.image'); + var elementContent = card.children('.content').first(); + var elementDetails = card.children('.extra.content.details'); + var elementButtons = card.children('.extra.content.buttons'); + + /** + * Image + */ + if (info.image) { + if (!elementImage.length) { + card.prepend( + '
' + + '' + + '
' + ); + } + } + + /** + * Header + */ + var elementContentHeader = elementContent.children('.header'); + var elementContentHeaderTitle = elementContentHeader.children('a'); + + /** Favicon */ + if (info.favicon) { + elementContentHeader.prepend( + '' + ); + } + + /** Title */ + if (info.title) { + elementContentHeaderTitle.text(info.title); + } + + /** + * Meta + */ + var elementContentMeta = elementContent.children('.meta'); + + if (info.keywords.length) { + if (!elementContentMeta.length) { + elementContent.append( + '
' + info.keywords.join(', ') + '
' + ); + } + } + + /** + * Description + */ + var elementContentDescription = elementContent.children('.description'); + + if (info.description) { + if (!elementContentDescription.length) { + elementContent.append( + '
' + info.description + '
' + ); + } + } + + /** + * Details + */ + if (info.publishedTime || info.providerName) { + if (!elementDetails.length) { + elementButtons.before().append( + '
' + ); + + if (info.publishedTime) { + elementContent.children('.extra.content.details').append( + '' + info.publishedTime + '' + ); + } + + if (info.providerName) { + elementContent.children('.extra.content.details').append( + info.providerName + ); + } + } + } + + /** + * Finish + */ + card.removeClass('loading'); + } + }); + } + + /** + * Refresh + */ + $(document).on('click', '.ui.button.refresh', function(event) { + var card = $(event.currentTarget).closest('.ui.card'); + + console.log(card); + + generateCacheCard(card); + }); + /** * Delete Wishlist */ diff --git a/src/classes/wishlist.php b/src/classes/wishlist.php index 0e674bd5..18b40f86 100644 --- a/src/classes/wishlist.php +++ b/src/classes/wishlist.php @@ -90,6 +90,10 @@ class Wishlist image) { ?>
+ +