-
+
@@ -44,6 +44,9 @@
diff --git a/script.js b/script.js
index 4e3fbcf..ea88e77 100644
--- a/script.js
+++ b/script.js
@@ -225,11 +225,15 @@ function shuffleArray(arr) {
return arr;
}
+const POSTS_PER_PAGE = 24;
+let visibleCount = POSTS_PER_PAGE;
+
function renderCards() {
const grid = document.getElementById('postGrid');
if (!grid) return;
shuffleArray(APP.posts);
+ visibleCount = POSTS_PER_PAGE;
grid.innerHTML = APP.posts.map(p => {
const liked = APP.userLikes.includes(p.id);
const likeCount = APP.likes[p.id] || 0;
@@ -269,6 +273,7 @@ let currentSubFilter = 'all';
function setFilter(category, btn) {
currentFilter = category;
currentSubFilter = 'all';
+ visibleCount = POSTS_PER_PAGE;
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
renderSubFilters();
@@ -277,6 +282,7 @@ function setFilter(category, btn) {
function setSubFilter(sub, btn) {
currentSubFilter = sub;
+ visibleCount = POSTS_PER_PAGE;
document.querySelectorAll('.sub-filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
filterPosts();
@@ -297,7 +303,8 @@ function renderSubFilters() {
function filterPosts() {
const query = (document.getElementById('search')?.value || '').toLowerCase();
const cards = document.querySelectorAll('.recipe-card');
- let visible = 0;
+ let matched = 0;
+ let shown = 0;
cards.forEach(card => {
const matchesCat = currentFilter === 'all' || card.dataset.category === currentFilter;
const postSubs = (card.dataset.subcategory || '').split(',').filter(Boolean);
@@ -309,12 +316,24 @@ function filterPosts() {
const matchesSearch = !query || title.includes(query) || desc.includes(query) || subLbl.includes(query) || author.includes(query);
const postId = card.querySelector('[data-like-id]')?.dataset.likeId || '';
const matchesLikes = !APP.showOnlyLiked || APP.userLikes.includes(postId);
- const show = matchesCat && matchesSub && matchesSearch && matchesLikes;
- card.style.display = show ? '' : 'none';
- if (show) visible++;
+ const matchesFilter = matchesCat && matchesSub && matchesSearch && matchesLikes;
+ if (matchesFilter) {
+ matched++;
+ card.style.display = matched <= visibleCount ? '' : 'none';
+ if (matched <= visibleCount) shown++;
+ } else {
+ card.style.display = 'none';
+ }
});
const noRes = document.getElementById('noResults');
- if (noRes) noRes.style.display = visible === 0 ? 'block' : 'none';
+ if (noRes) noRes.style.display = matched === 0 ? 'block' : 'none';
+ const wrap = document.getElementById('loadMoreWrap');
+ if (wrap) wrap.style.display = matched > shown ? '' : 'none';
+}
+
+function loadMore() {
+ visibleCount += POSTS_PER_PAGE;
+ filterPosts();
}
// ===========================
@@ -930,6 +949,7 @@ async function init() {
renderCategoryFilters();
renderSubFilters();
renderCards();
+ filterPosts();
// Open post from URL hash (e.g. #resepti/pinaattiletut)
const hash = window.location.hash;