Apps/TodayStream
2
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

Use generateGridCard() for showing news items, load images lazily

Browse Source
This commit is contained in:
Skylar Ittner 2019-02-09 17:42:20 -07:00
parent a59a830f5e
commit 24ebebb0dc
5 changed files with 23 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
pages/home.php
View File

@ -128,32 +128,9 @@ foreach ($newsitems as $item) {
break; break;
} }
$count++; $count++;
?> echo $item->generateGridCard(false);
<div class="col-12 col-sm-6 col-md-6 col-lg-4 px-1 m-0 grid__brick" data-groups='["<?php echo $item->getCategory()->toString(); ?>"]'> }
<div class="card mb-2"> ?>
<?php if (!empty($item->getImage())) { ?>
<a href="<?php echo $item->getURL(); ?>" target="_BLANK">
<?php
if (strpos($item->getImage(), "preview.redd.it") !== false) {
$imgurl = $item->getImage();
} else {
$imgurl = Thumbnail::getThumbnailCacheURL($item->getImage(), 500);
}
?>
<img src="<?php echo $imgurl; ?>" class="card-img-top newscard-img" alt="">
</a>
<?php } ?>
<div class="card-body">
<a class="text-dark" href="<?php echo $item->getURL(); ?>" target="_BLANK">
<h4 class="card-title">
<?php echo htmlentities($item->getHeadline()); ?>
</h4>
</a>
<p class="small"><?php echo $item->getSource(); ?></p>
</div>
</div>
</div>
<?php } ?>
<div class="col-1 sizer-element"></div> <div class="col-1 sizer-element"></div>

30
pages/news.php
View File

@ -30,31 +30,11 @@ $newsitems = News::getItems();
<div class="row" id="news-grid"> <div class="row" id="news-grid">
<?php foreach ($newsitems as $item) { ?> <?php
<div class="col-12 col-sm-6 col-md-6 col-lg-4 px-1 m-0 grid__brick" data-groups='["<?php echo $item->getCategory()->toString(); ?>"]'> foreach ($newsitems as $item) {
<div class="card mb-2"> echo $item->generateGridCard(true);
<?php if (!empty($item->getImage())) { ?> }
<a href="<?php echo $item->getURL(); ?>" target="_BLANK"> ?>
<img src="<?php
if (strpos($item->getImage(), "preview.redd.it") !== false) {
echo $item->getImage();
} else {
echo Thumbnail::getThumbnailCacheURL($item->getImage(), 500);
}
?>" class="card-img-top newscard-img" alt="">
</a>
<?php } ?>
<div class="card-body">
<a class="text-dark" href="<?php echo $item->getURL(); ?>" target="_BLANK">
<h4 class="card-title">
<?php echo htmlentities($item->getHeadline()); ?>
</h4>
</a>
<p class="small"><?php echo $item->getSource(); ?></p>
</div>
</div>
</div>
<?php } ?>
<div class="col-1 sizer-element"></div> <div class="col-1 sizer-element"></div>

10
static/js/news.js
View File

@ -4,9 +4,19 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. * file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/ */
function fetchVisibleGridImages() {
$(".grid__brick").each(function () {
if ($(this).css("opacity") == "1") {
$("img.newscard-img", this).attr("src", $("img.newscard-img", this).data("src"));
}
});
}
$("input[name=newscategory]").on("change", function () { $("input[name=newscategory]").on("change", function () {
window.shuffleInstance.filter($(this).val()); window.shuffleInstance.filter($(this).val());
$(this).button('toggle'); $(this).button('toggle');
setTimeout(fetchVisibleGridImages, 500);
}); });
window.shuffleInstance.filter("general"); window.shuffleInstance.filter("general");
setTimeout(fetchVisibleGridImages, 500);

13
static/js/newsgrid.js
View File

@ -13,13 +13,6 @@ setInterval(function () {
window.shuffleInstance.layout(); window.shuffleInstance.layout();
}, 500); }, 500);
$("img.newscard-img").on("error", function () { // Show the images using JavaScript, to make sure we don't see double
if ($(this).data("reloaded")) { // when JS is disabled
return; $("img.newscard-img.d-none").removeClass("d-none");
}
var img = $(this);
setTimeout(function () {
img.attr("src", $(this).attr("src"));
img.data("reloaded", true);
}, 500);
});