Add refresh button
This commit is contained in:
Jay Trees
parent
716eb99254
commit
0216b09f30
3 changed files with 145 additions and 113 deletions
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
'<div class="image">' +
|
||||
'<img src="' + info.image + '" loading="lazy">' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Header
|
||||
*/
|
||||
var elementContentHeader = elementContent.children('.header');
|
||||
var elementContentHeaderTitle = elementContentHeader.children('a');
|
||||
|
||||
/** Favicon */
|
||||
if (info.favicon) {
|
||||
elementContentHeader.prepend(
|
||||
'<img src="' + info.favicon + '" loading="lazy">'
|
||||
);
|
||||
}
|
||||
|
||||
/** Title */
|
||||
if (info.title) {
|
||||
elementContentHeaderTitle.text(info.title);
|
||||
}
|
||||
|
||||
/**
|
||||
* Meta
|
||||
*/
|
||||
var elementContentMeta = elementContent.children('.meta');
|
||||
|
||||
if (info.keywords.length) {
|
||||
if (!elementContentMeta.length) {
|
||||
elementContent.append(
|
||||
'<div class="meta">' + info.keywords.join(', ') + '</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Description
|
||||
*/
|
||||
var elementContentDescription = elementContent.children('.description');
|
||||
|
||||
if (info.description) {
|
||||
if (!elementContentDescription.length) {
|
||||
elementContent.append(
|
||||
'<div class="description">' + info.description + '</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Details
|
||||
*/
|
||||
if (info.publishedTime || info.providerName) {
|
||||
if (!elementDetails.length) {
|
||||
elementButtons.before().append(
|
||||
'<div class="extra content details"></div>'
|
||||
);
|
||||
|
||||
if (info.publishedTime) {
|
||||
elementContent.children('.extra.content.details').append(
|
||||
'<span class="right floated">' + info.publishedTime + '</span>'
|
||||
);
|
||||
}
|
||||
|
||||
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(
|
||||
'<div class="image">' +
|
||||
'<img src="' + info.image + '" loading="lazy">' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Header
|
||||
*/
|
||||
var elementContentHeader = elementContent.children('.header');
|
||||
var elementContentHeaderTitle = elementContentHeader.children('a');
|
||||
|
||||
/** Favicon */
|
||||
if (info.favicon) {
|
||||
elementContentHeader.prepend(
|
||||
'<img src="' + info.favicon + '" loading="lazy">'
|
||||
);
|
||||
}
|
||||
|
||||
/** Title */
|
||||
if (info.title) {
|
||||
elementContentHeaderTitle.text(info.title);
|
||||
}
|
||||
|
||||
/**
|
||||
* Meta
|
||||
*/
|
||||
var elementContentMeta = elementContent.children('.meta');
|
||||
|
||||
if (info.keywords.length) {
|
||||
if (!elementContentMeta.length) {
|
||||
elementContent.append(
|
||||
'<div class="meta">' + info.keywords.join(', ') + '</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Description
|
||||
*/
|
||||
var elementContentDescription = elementContent.children('.description');
|
||||
|
||||
if (info.description) {
|
||||
if (!elementContentDescription.length) {
|
||||
elementContent.append(
|
||||
'<div class="description">' + info.description + '</div>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Details
|
||||
*/
|
||||
if (info.publishedTime || info.providerName) {
|
||||
if (!elementDetails.length) {
|
||||
elementButtons.before().append(
|
||||
'<div class="extra content details"></div>'
|
||||
);
|
||||
|
||||
if (info.publishedTime) {
|
||||
elementContent.children('.extra.content.details').append(
|
||||
'<span class="right floated">' + info.publishedTime + '</span>'
|
||||
);
|
||||
}
|
||||
|
||||
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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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 } ?>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue