This commit is contained in:
2026-08-22 20:02:28 +02:00
parent 1eef246bc1
commit 2a6e0f44f3
9 changed files with 989 additions and 98 deletions

View File

@@ -692,18 +692,18 @@ window.cancelAnimFrame = (function () {
else if (window.activeMode === 4) activeRatings = ['nsfl'];
else if (window.activeMode === 2) activeRatings = ['untagged'];
}
const selector = document.getElementById('rating-selector');
if (!selector) return;
selector.querySelectorAll('.rating-toggle-btn').forEach(btn => {
const r = btn.dataset.rating;
if (!r) return; // ALL button handled separately
btn.classList.toggle('active', activeRatings.includes(r));
const containers = document.querySelectorAll('#rating-selector, .rating-group');
containers.forEach(container => {
container.querySelectorAll('.rating-toggle-btn').forEach(btn => {
const r = btn.dataset.rating;
if (!r) return; // ALL button handled separately
btn.classList.toggle('active', activeRatings.includes(r));
});
container.querySelectorAll('.rating-toggle-all').forEach(allBtn => {
allBtn.classList.toggle('active', (getRatingsCookie().length === 0 && window.activeMode === 3) || activeRatings.length === 0);
});
});
// ALL button: active when ratings cookie is empty/absent (server mode is the authority)
const allBtn = document.getElementById('rating-btn-all');
if (allBtn) {
allBtn.classList.toggle('active', (getRatingsCookie().length === 0 && window.activeMode === 3) || activeRatings.length === 0);
}
if (window.updateFilterBadge) window.updateFilterBadge();
};
// Wire up rating toggle buttons
@@ -2280,8 +2280,10 @@ window.cancelAnimFrame = (function () {
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initRuffle, { once: true });
document.addEventListener('DOMContentLoaded', () => { if (window.initMainpageFilterBar) window.initMainpageFilterBar(); });
} else {
initRuffle();
if (window.initMainpageFilterBar) window.initMainpageFilterBar();
}
document.addEventListener('f0ck:contentLoaded', initRuffle);
@@ -2313,6 +2315,186 @@ window.cancelAnimFrame = (function () {
new ResizeObserver(window.syncNavbarHeight).observe(_navEl);
}
// ── Global Filter Bar Event Delegation ──────────────────────────────────
document.addEventListener('click', (e) => {
// 1. Layout button click (grid, masonry, stream)
const layoutBtn = e.target.closest('.layout-btn');
if (layoutBtn) {
e.preventDefault();
const layout = layoutBtn.dataset.layout;
const container = layoutBtn.closest('.filter-modal-container, #mainpage-filter-bar, .modal-filter-group') || document;
container.querySelectorAll('.layout-btn').forEach(b => b.classList.toggle('active', b === layoutBtn));
const postsContainer = document.getElementById('posts-container');
if (postsContainer) {
postsContainer.className = `posts layout-${layout} grid-transition show`;
postsContainer.id = 'posts-container';
postsContainer.dataset.layout = layout;
}
document.cookie = `layout=${layout}; path=/; max-age=31536000`;
const u = new URL(window.location.href);
if (!layout || layout === 'grid') u.searchParams.delete('layout');
else u.searchParams.set('layout', layout);
const fromModal = !!layoutBtn.closest('#excluded-tags-overlay');
if (fromModal) window._keepFilterModal = true;
if (window.gridCacheMap) window.gridCacheMap.clear();
if (typeof loadPageAjax === 'function') {
const p = loadPageAjax(u.pathname + u.search, true, { bypassCache: true });
if (fromModal) Promise.resolve(p).finally(() => { window._keepFilterModal = false; });
} else {
window.location.href = u.pathname + u.search;
}
return;
}
// 2. Sort button click
const sortBtn = e.target.closest('.sort-btn');
if (sortBtn) {
e.preventDefault();
const sort = sortBtn.dataset.sort;
const container = sortBtn.closest('.filter-modal-container, #mainpage-filter-bar, .modal-filter-group') || document;
container.querySelectorAll('.sort-btn').forEach(b => b.classList.toggle('active', b === sortBtn));
const timeframeSec = document.getElementById('filter-timeframe-section');
if (timeframeSec) {
timeframeSec.classList.toggle('visible', ['popular', 'top', 'xd', 'comments'].includes(sort));
}
document.cookie = `sort=${sort}; path=/; max-age=31536000`;
const u = new URL(window.location.href);
if (!sort || sort === 'newest') u.searchParams.delete('sort');
else u.searchParams.set('sort', sort);
const fromModal = !!sortBtn.closest('#excluded-tags-overlay');
if (fromModal) window._keepFilterModal = true;
if (window.gridCacheMap) window.gridCacheMap.clear();
if (typeof loadPageAjax === 'function') {
const p = loadPageAjax(u.pathname + u.search, true, { bypassCache: true });
if (fromModal) Promise.resolve(p).finally(() => { window._keepFilterModal = false; });
} else {
window.location.href = u.pathname + u.search;
}
return;
}
// 3. Timeframe button click
const tfBtn = e.target.closest('.timeframe-btn');
if (tfBtn) {
e.preventDefault();
const timeframe = tfBtn.dataset.timeframe;
const container = tfBtn.closest('.filter-modal-container, #mainpage-filter-bar, .modal-filter-group') || document;
container.querySelectorAll('.timeframe-btn').forEach(b => b.classList.toggle('active', b === tfBtn));
document.cookie = `timeframe=${timeframe}; path=/; max-age=31536000`;
const u = new URL(window.location.href);
if (!timeframe || timeframe === 'all') u.searchParams.delete('timeframe');
else u.searchParams.set('timeframe', timeframe);
const fromModal = !!tfBtn.closest('#excluded-tags-overlay');
if (fromModal) window._keepFilterModal = true;
if (window.gridCacheMap) window.gridCacheMap.clear();
if (typeof loadPageAjax === 'function') {
const p = loadPageAjax(u.pathname + u.search, true, { bypassCache: true });
if (fromModal) Promise.resolve(p).finally(() => { window._keepFilterModal = false; });
} else {
window.location.href = u.pathname + u.search;
}
return;
}
// 4. MIME / Media type pill click (image, video, audio, flash)
const mimePill = e.target.closest('.mime-pill');
if (mimePill) {
e.preventDefault();
mimePill.classList.toggle('active');
const container = mimePill.closest('.filter-modal-container, #mainpage-filter-bar, .mime-group') || document;
const activeMimes = [];
container.querySelectorAll('.mime-pill.active').forEach(p => {
if (p.dataset.mime) activeMimes.push(p.dataset.mime);
});
const mimeVal = activeMimes.join(',');
document.cookie = `mime=${encodeURIComponent(mimeVal)}; path=/; max-age=31536000`;
const u = new URL(window.location.href);
if (activeMimes.length > 0) u.searchParams.set('mime', mimeVal);
else u.searchParams.delete('mime');
const fromModal = !!mimePill.closest('#excluded-tags-overlay');
if (fromModal) window._keepFilterModal = true;
if (window.gridCacheMap) window.gridCacheMap.clear();
if (typeof loadPageAjax === 'function') {
const p = loadPageAjax(u.pathname + u.search, true, { bypassCache: true });
if (fromModal) Promise.resolve(p).finally(() => { window._keepFilterModal = false; });
} else {
window.location.href = u.pathname + u.search;
}
return;
}
// 5. Generic attribute toggle pill click (OC, Discussed)
const togglePill = e.target.closest('.filter-toggle-pill[data-toggle]');
if (togglePill) {
e.preventDefault();
togglePill.classList.toggle('active');
const paramName = togglePill.dataset.toggle;
const val = togglePill.classList.contains('active') ? '1' : null;
const u = new URL(window.location.href);
if (val) u.searchParams.set(paramName, val);
else u.searchParams.delete(paramName);
const fromModal = !!togglePill.closest('#excluded-tags-overlay');
if (fromModal) window._keepFilterModal = true;
if (window.gridCacheMap) window.gridCacheMap.clear();
if (typeof loadPageAjax === 'function') {
const p = loadPageAjax(u.pathname + u.search, true, { bypassCache: true });
if (fromModal) Promise.resolve(p).finally(() => { window._keepFilterModal = false; });
} else {
window.location.href = u.pathname + u.search;
}
return;
}
// 6. Reset button click
const resetBtn = e.target.closest('#filter-reset-btn');
if (resetBtn) {
e.preventDefault();
document.cookie = 'ratings=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
document.cookie = 'mime=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
document.cookie = 'layout=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
document.cookie = 'sort=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
document.cookie = 'timeframe=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
document.cookie = 'mode=3; path=/; max-age=31536000';
window.activeMode = 3;
if (window.syncRatingButtonUI) window.syncRatingButtonUI();
if (window.updateFilterBadge) window.updateFilterBadge();
const u = new URL(window.location.href);
['layout', 'sort', 'timeframe', 'oc', 'has_comments', 'pinned', 'ratings', 'mime', 'mode'].forEach(p => u.searchParams.delete(p));
const fromModal = !!resetBtn.closest('#excluded-tags-overlay');
if (fromModal) window._keepFilterModal = true;
if (window.gridCacheMap) window.gridCacheMap.clear();
if (typeof loadPageAjax === 'function') {
const p = loadPageAjax(u.pathname + u.search, true, { bypassCache: true });
if (fromModal) Promise.resolve(p).finally(() => { window._keepFilterModal = false; });
} else {
window.location.href = u.pathname + u.search;
}
return;
}
});
// Sidebar state init — apply persisted hidden/visible state on load
window.initSidebarRightToggle = () => {
// One-time migration: clear the old mobile-default-hidden value so existing
@@ -2590,13 +2772,21 @@ window.cancelAnimFrame = (function () {
canvas.classList.add('fader-out');
}
// Rescue existing pagination container before wiping main, so it never disappears from the DOM
// Rescue existing pagination container before wiping main, so it never disappears
const existingPagContainer = main.querySelector('.pagination-container-fluid');
// Clear entire main content and create fresh grid structure (with sidebar for index)
const indexWrapper = document.createElement('div');
indexWrapper.className = 'index-layout-wrapper';
indexWrapper.innerHTML = '<div class="index-container"><div class="posts grid-transition"></div></div>';
const indexContainer = document.createElement('div');
indexContainer.className = 'index-container';
const currentLayout = urlObj.searchParams.get('layout') || (document.cookie.match(/layout=([^;]+)/)?.[1]) || 'grid';
const postsElem = document.createElement('div');
postsElem.className = `posts layout-${currentLayout} grid-transition`;
postsElem.id = 'posts-container';
postsElem.dataset.layout = currentLayout;
indexContainer.appendChild(postsElem);
indexWrapper.appendChild(indexContainer);
main.innerHTML = '';
main.appendChild(indexWrapper);
@@ -2667,14 +2857,20 @@ window.cancelAnimFrame = (function () {
if (isFav) ajaxUrl += `&fav=true`;
if (mime) ajaxUrl += `&mime=${encodeURIComponent(mime)}`;
urlObj.searchParams.forEach((val, key) => {
if (!ajaxUrl.includes(`${key}=`)) {
ajaxUrl += `&${key}=${encodeURIComponent(val)}`;
}
});
// Preserve tagger filter from URL query string
const taggerMatch = urlObj.searchParams.get('tagger');
if (taggerMatch) ajaxUrl += `&tagger=${encodeURIComponent(taggerMatch)}`;
if (taggerMatch && !ajaxUrl.includes('tagger=')) ajaxUrl += `&tagger=${encodeURIComponent(taggerMatch)}`;
const isRandom = document.cookie.includes('random_mode=1') || url.includes('random=1') || window.location.search.includes('random=1');
if (isRandom) ajaxUrl += `&random=1`;
if (isRandom && !ajaxUrl.includes('random=')) ajaxUrl += `&random=1`;
const isStrict = window.f0ckSession?.strict_mode || (localStorage.getItem('search_strict') === 'true');
if (isStrict || url.includes('strict=1') || window.location.search.includes('strict=1')) {
if ((isStrict || url.includes('strict=1') || window.location.search.includes('strict=1')) && !ajaxUrl.includes('strict=')) {
ajaxUrl += (ajaxUrl.includes('?') ? '&' : '?') + 'strict=1';
}
@@ -3096,6 +3292,11 @@ window.cancelAnimFrame = (function () {
if (data.success) {
if (replace) {
const currentLayout = urlObj.searchParams.get('layout') || (document.cookie.match(/layout=([^;]+)/)?.[1]) || 'grid';
posts.id = 'posts-container';
posts.className = `posts layout-${currentLayout} grid-transition show`;
posts.dataset.layout = currentLayout;
// Atomic replacement to prevent "jumping"
posts.innerHTML = data.html;
window.updateVisitIndicators();
@@ -3115,7 +3316,7 @@ window.cancelAnimFrame = (function () {
posts.classList.add('show');
});
// Update header (h2) for tags/users
// Update header (h2) for tags/users/mainpage
const container = document.querySelector('.index-container');
if (container && data.titleHtml !== undefined) {
const oldH2 = container.querySelector('h2');
@@ -5615,8 +5816,6 @@ window.cancelAnimFrame = (function () {
}
};
const initExcludedTagsModal = () => {
if (window.f0ckSession && !window.f0ckSession.logged_in) return;
const overlay = document.getElementById('excluded-tags-overlay');
if (!overlay) return;
@@ -5625,7 +5824,6 @@ window.cancelAnimFrame = (function () {
const list = document.getElementById('nav_excluded_tags_list');
const suggestions = document.getElementById('nav_exclude_suggestions');
const filterBtn = document.getElementById('nav-filter-btn');
const toggleModal = (show) => {
if (show) {
@@ -5635,11 +5833,11 @@ window.cancelAnimFrame = (function () {
document.body.style.overflow = 'hidden';
renderTags();
if (window.syncRatingButtonUI) window.syncRatingButtonUI();
if (window.innerWidth > 768) input.focus();
if (input && window.innerWidth > 768) input.focus();
} else {
overlay.classList.remove('visible');
document.body.style.overflow = '';
suggestions.style.display = 'none';
if (suggestions) suggestions.style.display = 'none';
setTimeout(() => {
overlay.style.display = 'none';
}, 200);
@@ -5647,6 +5845,11 @@ window.cancelAnimFrame = (function () {
};
const renderTags = async () => {
if (!list) return;
if (window.f0ckSession && !window.f0ckSession.logged_in) {
list.innerHTML = '';
return;
}
try {
const res = await fetch('/api/v2/settings/excluded_tags');
const data = await res.json();
@@ -5680,22 +5883,17 @@ window.cancelAnimFrame = (function () {
}
};
if (filterBtn) {
filterBtn.addEventListener('click', (e) => {
e.preventDefault();
toggleModal(true);
});
}
// Delegated handler: [data-action="open-filter-modal"] links (e.g. error page hint)
// Delegated handler: open modal on nav-filter-btn or [data-action="open-filter-modal"]
document.addEventListener('click', (e) => {
const trigger = e.target.closest('[data-action="open-filter-modal"]');
const trigger = e.target.closest('#nav-filter-btn, [data-action="open-filter-modal"]');
if (!trigger) return;
e.preventDefault();
toggleModal(true);
});
close.addEventListener('click', () => toggleModal(false));
const doneBtn = document.getElementById('filter-modal-done-btn');
if (doneBtn) doneBtn.addEventListener('click', () => toggleModal(false));
overlay.addEventListener('click', (e) => {
if (e.target === overlay) toggleModal(false);
});