119 lines
3.5 KiB
JavaScript
119 lines
3.5 KiB
JavaScript
const LCG_M = Math.pow(2, 32);
|
|
const LCG_A = 0xd9f5;
|
|
const LCG_C = 69;
|
|
|
|
function lcg(seed) {
|
|
let value = seed % LCG_M;
|
|
|
|
return (n) => {
|
|
value = (LCG_A * value + LCG_C) % LCG_M;
|
|
return Math.floor(n * value / LCG_M);
|
|
};
|
|
}
|
|
|
|
function seedableShuffledCopy(list, seed) {
|
|
const gen = lcg(seed);
|
|
const l = [...list];
|
|
|
|
for (let i = 0; i < l.length - 1; ++i) {
|
|
j = i + gen(l.length - i);
|
|
const tmp = l[i];
|
|
l[i] = l[j];
|
|
l[j] = tmp;
|
|
}
|
|
return l;
|
|
}
|
|
|
|
function newSeed() {
|
|
return Math.floor(Math.random() * LCG_M);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const shuffleButton = document.getElementById('shuffle');
|
|
const sortButton = document.getElementById('sort');
|
|
const listContainer = document.getElementById('card-listing');
|
|
let ordering = localStorage.getItem('indexOrdering') || 'dateDesc';
|
|
|
|
let orderedWorks;
|
|
|
|
function scrollHandler() {
|
|
while (orderedWorks.length > 0 && listContainer.clientHeight - window.scrollY < 5000) {
|
|
const work = orderedWorks.shift();
|
|
|
|
const card = document.createElement('div');
|
|
card.className = 'card';
|
|
|
|
const link = document.createElement('a');
|
|
link.href = `${ROOT}/works/${work.id}/${INDEX}`;
|
|
card.appendChild(link);
|
|
|
|
const thumb = document.createElement('img');
|
|
thumb.src = `${ROOT}/${work.thumbnail_path}`;
|
|
link.appendChild(thumb);
|
|
|
|
const creators = document.createElement('div');
|
|
creators.className = 'card-creators';
|
|
let creatorsInfo = `[${work.circle || ''}`;
|
|
if (work.authors.length > 0) {
|
|
let authorList = work.authors[0];
|
|
for (let i = 1; i < work.authors.length; ++i) {
|
|
authorList += `, ${work.authors[i]}`;
|
|
}
|
|
creatorsInfo += (work.circle ? ` (${authorList})` : `${authorList}`);
|
|
}
|
|
creatorsInfo += ']';
|
|
creators.textContent = creatorsInfo;
|
|
link.appendChild(creators);
|
|
|
|
const title = document.createElement('div');
|
|
title.className = 'card-title';
|
|
title.textContent = work.title;
|
|
link.appendChild(title);
|
|
|
|
listContainer.appendChild(card);
|
|
}
|
|
}
|
|
|
|
function applyOrdering() {
|
|
listContainer.replaceChildren();
|
|
scrollHandler();
|
|
}
|
|
|
|
switch (ordering) {
|
|
case 'shuffle':
|
|
let seed = parseInt(localStorage.getItem('shuffleSeed')) || newSeed();
|
|
orderedWorks = seedableShuffledCopy(WORKS, seed);
|
|
break;
|
|
case 'dateAsc':
|
|
orderedWorks = WORKS.toReversed();
|
|
break;
|
|
default:
|
|
orderedWorks = [...WORKS];
|
|
break;
|
|
}
|
|
applyOrdering();
|
|
|
|
window.addEventListener('scroll', scrollHandler);
|
|
|
|
document.getElementById('shuffle').onclick = () => {
|
|
let seed = newSeed();
|
|
localStorage.setItem('shuffleSeed', seed);
|
|
ordering = 'shuffle';
|
|
localStorage.setItem('indexOrdering', ordering);
|
|
|
|
orderedWorks = seedableShuffledCopy(WORKS, seed);
|
|
applyOrdering();
|
|
};
|
|
document.getElementById('sort').onclick = () => {
|
|
if (ordering === 'dateDesc') {
|
|
ordering = 'dateAsc';
|
|
orderedWorks = WORKS.toReversed();
|
|
} else {
|
|
ordering = 'dateDesc';
|
|
orderedWorks = [...WORKS];
|
|
}
|
|
localStorage.setItem('indexOrdering', ordering);
|
|
applyOrdering();
|
|
};
|
|
});
|