' : '

'; div.innerHTML = img + '

' + '

'+esc(cat.name)+ ''+count+' Project'+(count === 1 ? '' : 's')+'' + '

'; return div; } function buildCard(p) { var div = document.createElement('div'); div.className = 'pf-card'; div.dataset.id = p.id; div.addEventListener('click', function() { window.location.href = '/portfolio/' + encodeURIComponent(p.id); }); var hideTags = currentCat === 'competitions'; var statusHtml = (!hideTags && p.status) ? '

'+p.status+'

' : ''; var badgesHtml = hideTags ? '' : '

' + (p.special ? 'Special' : '') + (p.green ? 'Green' : '') + (p.epc ? 'EPC' : '') + '

'; div.innerHTML = '

' + ' '+p.title+'

' + (p.video ? '

' : '') + '

' + '

' + badgesHtml + statusHtml + '

' + '

'+p.title+'

' + '

'+pinIcon()+' '+p.location+'

' + '

'; return div; } var grid = document.getElementById('pfGrid'); var loadWrap = document.getElementById('loadMoreWrap'); var loadBtn = document.getElementById('loadMoreBtn'); var ioReveal = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { var card = entry.target; if (entry.isIntersecting) { card.classList.add('visible'); var vid = card.querySelector('.pf-card-vid'); if (vid && vid.src) { vid.play().then(function() { vid.classList.add('playing'); }).catch(function(){}); } } else { var vid = card.querySelector('.pf-card-vid'); if (vid) { vid.pause(); vid.classList.remove('playing'); } } }); }, { threshold: 0.1, rootMargin: '200px 0px 200px 0px' }); function clearGrid() { grid.querySelectorAll('.pf-card, .pf-cat-card').forEach(function(c) { ioReveal.unobserve(c); }); grid.innerHTML = ''; } function renderCategories() { clearGrid(); grid.className = 'pf-grid pf-cat-grid'; loadWrap.style.display = 'none'; if (!CATEGORIES.length) { grid.innerHTML = '

No categories yet

Add categories with images in the admin.

'; return; } var row = null; CATEGORIES.forEach(function(cat, i) { if (i % 2 === 0) { row = document.createElement('div'); row.className = 'pf-cat-row'; grid.appendChild(row); } var card = buildCatCard(cat); row.appendChild(card); ioReveal.observe(card); }); } function renderProjects() { clearGrid(); grid.className = currentCat === 'competitions' ? 'pf-grid pf-grid-2col' : 'pf-grid'; var filtered = ALL_PROJECTS.filter(function(p) { return p.category.indexOf(currentCat) !== -1; }); var slice = filtered.slice(0, displayCount); if (!slice.length) { grid.innerHTML = '

No projects found

There are no projects in this category yet.

'; loadWrap.style.display = 'none'; return; } slice.forEach(function(p, i) { var card = buildCard(p); card.style.transitionDelay = Math.min(i % pageSize, 7) * 0.055 + 's'; grid.appendChild(card); ioReveal.observe(card); }); loadWrap.style.display = (filtered.length > displayCount) ? 'block' : 'none'; } function render() { if (showCats) { renderCategories(); } else { renderProjects(); } } loadBtn.addEventListener('click', function() { displayCount += pageSize; render(); }); // When returning via the browser Back button, the page can be restored from the // bfcache with the click-triggered "leaving" state still applied (the grid keeps // pointer-events:none and cards stay faded), leaving the category picker frozen. // The main script doesn't re-run on a bfcache restore, so clear that state here. window.addEventListener('pageshow', function(e) { if (!grid) return; grid.classList.remove('pf-leaving'); var active = grid.querySelector('.pf-cat-active'); if (active) active.classList.remove('pf-cat-active'); }); render(); })();