43 lines
1.7 KiB
JavaScript
43 lines
1.7 KiB
JavaScript
// Home: show as many posts as fit the viewport height
|
|
(function () {
|
|
if (!document.body.classList.contains('is-home')) return;
|
|
const list = document.getElementById('home-post-items');
|
|
if (!list) return;
|
|
const items = Array.from(list.querySelectorAll('.home-post-item'));
|
|
const header = document.querySelector('.site-header');
|
|
const footer = document.querySelector('.site-footer');
|
|
function availableHeight() {
|
|
const vh = window.innerHeight;
|
|
const headerH = header ? header.getBoundingClientRect().height : 0;
|
|
const footerH = footer ? footer.getBoundingClientRect().height : 0;
|
|
const mainPadding = 48; // approx padding in main
|
|
return Math.max(0, vh - headerH - footerH - mainPadding);
|
|
}
|
|
function relayout() {
|
|
items.forEach(el => el.classList.add('hidden'));
|
|
let shown = 0;
|
|
let used = 0;
|
|
const gap = (() => {
|
|
const ul = list;
|
|
const styles = window.getComputedStyle(ul);
|
|
const rowGap = parseFloat(styles.rowGap || styles.gap || '0');
|
|
return isNaN(rowGap) ? 0 : rowGap;
|
|
})();
|
|
for (const el of items) {
|
|
el.classList.remove('hidden');
|
|
const h = el.getBoundingClientRect().height;
|
|
if (used + h + (shown > 0 ? gap : 0) > availableHeight()) {
|
|
el.classList.add('hidden');
|
|
break;
|
|
}
|
|
used += h + (shown > 0 ? gap : 0);
|
|
shown++;
|
|
}
|
|
}
|
|
const ro = new ResizeObserver(relayout);
|
|
ro.observe(document.documentElement);
|
|
header && ro.observe(header);
|
|
footer && ro.observe(footer);
|
|
window.addEventListener('load', relayout);
|
|
window.addEventListener('orientationchange', relayout);
|
|
})(); |