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;
|
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 */
|
/** Content */
|
||||||
.ui.card > .content > .header + .description,
|
.ui.card > .content > .header + .description,
|
||||||
.ui.card > .content > .meta + .description,
|
.ui.card > .content > .meta + .description,
|
||||||
|
|
@ -57,7 +71,6 @@
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Label
|
* Label
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -58,120 +58,11 @@ $(function() {
|
||||||
*/
|
*/
|
||||||
var timerInterval = 1200;
|
var timerInterval = 1200;
|
||||||
var timerCache = setTimeout(
|
var timerCache = setTimeout(
|
||||||
function generateCache() {
|
function generateCacheCards() {
|
||||||
var cards = $('.ui.card[data-cache="false"]');
|
var cards = $('.ui.card[data-cache="false"]');
|
||||||
|
|
||||||
cards.each(function(index, card) {
|
cards.each(function(index, card) {
|
||||||
card = $(card);
|
generateCacheCard(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');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (index >= 0) {
|
if (index >= 0) {
|
||||||
return false;
|
return false;
|
||||||
|
|
@ -179,13 +70,137 @@ $(function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (cards.length > 0) {
|
if (cards.length > 0) {
|
||||||
setTimeout(generateCache, timerInterval);
|
setTimeout(generateCacheCards, timerInterval);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
0
|
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
|
* Delete Wishlist
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -90,6 +90,10 @@ class Wishlist
|
||||||
<?php if ($info->image) { ?>
|
<?php if ($info->image) { ?>
|
||||||
<div class="image">
|
<div class="image">
|
||||||
<img src="<?= $info->image ?>" loading="lazy"/>
|
<img src="<?= $info->image ?>" loading="lazy"/>
|
||||||
|
|
||||||
|
<button class="ui icon button refresh">
|
||||||
|
<i class="refresh icon"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue