123 lines
4.1 KiB
JavaScript
123 lines
4.1 KiB
JavaScript
let cachedImageData = [];
|
|
let isLoading = false;
|
|
const targetHeight = 200;
|
|
const spacing = 5;
|
|
const preloadThreshold = 800;
|
|
|
|
|
|
function appendRows(imageBatch) {
|
|
const $container = $('#mediasContainer');
|
|
const containerWidth = $container.width();
|
|
let row = [];
|
|
let rowWidth = 0;
|
|
$.each(imageBatch, function (_, imgData) {
|
|
const scaledWidth = targetHeight * imgData.ratio;
|
|
row.push(imgData);
|
|
rowWidth += scaledWidth + spacing;
|
|
if (rowWidth >= containerWidth || imgData === imageBatch[imageBatch.length - 1]) {
|
|
if (row.length === 1 && imgData === imageBatch[imageBatch.length - 1]) {
|
|
row.pop();
|
|
mediasQueryParams.offset -= 1;
|
|
return false;
|
|
}
|
|
const totalRatio = row.reduce((sum, img) => sum + img.ratio, 0);
|
|
const adjustedHeight = (containerWidth - spacing * (row.length - 1)) / totalRatio;
|
|
const $rowDiv = $('<div>').addClass('mediasRow');
|
|
$.each(row, function (_, imgData) {
|
|
const $img = $('<img>')
|
|
.addClass('border-primary')
|
|
.attr('src', `/storage/medias/thumb_${imgData.filename}`)
|
|
.attr('alt', `${imgData.hashtag} / 😻 ${imgData.like}`)
|
|
.attr('title', `${imgData.hashtag} / 😻 ${imgData.like}`)
|
|
.css({height: adjustedHeight + 'px',
|
|
width: adjustedHeight * imgData.ratio + 'px',
|
|
display: 'inline-block',
|
|
cursor: 'pointer'});
|
|
const $link = $('<a>')
|
|
.attr('href', `/media/${imgData.filename}`)
|
|
.append($img);
|
|
$rowDiv.append($link);
|
|
});
|
|
$container.append($rowDiv);
|
|
row = [];
|
|
rowWidth = 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
function relayoutAll() {
|
|
const $container = $('#mediasContainer');
|
|
const containerWidth = $container.width();
|
|
$container.empty();
|
|
let row = [];
|
|
let rowWidth = 0;
|
|
$.each(cachedImageData, function (_, imgData) {
|
|
const scaledWidth = targetHeight * imgData.ratio;
|
|
row.push(imgData);
|
|
rowWidth += scaledWidth + spacing;
|
|
if (rowWidth >= containerWidth || imgData === cachedImageData[cachedImageData.length - 1]) {
|
|
if (row.length === 1 && imgData === cachedImageData[cachedImageData.length - 1]) {
|
|
row.pop();
|
|
mediasQueryParams.offset -= 1;
|
|
return false;
|
|
}
|
|
const totalRatio = row.reduce((sum, img) => sum + img.ratio, 0);
|
|
const adjustedHeight = (containerWidth - spacing * (row.length - 1)) / totalRatio;
|
|
const $rowDiv = $('<div>').addClass('mediasRow');
|
|
$.each(row, function (_, imgData) {
|
|
const $img = $('<img>')
|
|
.addClass('border-primary')
|
|
.attr('src', `/storage/medias/thumb_${imgData.filename}`)
|
|
.attr('alt', `${imgData.hashtag} / 😻 ${imgData.like}`)
|
|
.attr('title', `${imgData.hashtag} / 😻 ${imgData.like}`)
|
|
.css({ height: adjustedHeight + 'px',
|
|
width: adjustedHeight * imgData.ratio + 'px',
|
|
display: 'inline-block',
|
|
cursor: 'pointer' });
|
|
const $link = $('<a>')
|
|
.attr('href', `/media/${imgData.filename}`)
|
|
.append($img);
|
|
$rowDiv.append($link);
|
|
});
|
|
$container.append($rowDiv);
|
|
row = [];
|
|
rowWidth = 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
let resizeTimeout;
|
|
$(window).on('resize', function () {
|
|
clearTimeout(resizeTimeout);
|
|
resizeTimeout = setTimeout(relayoutAll, 150);
|
|
});
|
|
|
|
$(window).on('scroll', function () {
|
|
const scrollBottom = $(document).height() - $(window).scrollTop() - $(window).height();
|
|
if (!isLoading && scrollBottom < preloadThreshold) {
|
|
loadImages(
|
|
).then(imageBatch => {
|
|
appendRows(imageBatch);
|
|
});
|
|
}
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
loadImages(
|
|
).then(imageBatch => {
|
|
appendRows(imageBatch);
|
|
});
|
|
$('#popularityButton').on('click', function () {
|
|
popularityButtonClicked($(this));
|
|
});
|
|
$('#filterButton').on('click', function () {
|
|
filterButtonClicked($(this));
|
|
});
|
|
if (mediasQueryParams.order_by !== 'uid,desc') {
|
|
toggleButtonClass($('#popularityButton'));
|
|
}
|
|
if (mediasQueryParams.hasOwnProperty('filter')) {
|
|
toggleButtonClass($('#filterButton'));
|
|
}
|
|
});
|