kibi/f0ckm
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

adding different layouts for testing

Browse Source
This commit is contained in:
Kibi Kelburton
2026-05-17 14:02:35 +02:00
parent 832f97970e
commit dbb8861aed
18 changed files with 238 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/s/js/f0ckm.js
View File

@@ -40,6 +40,24 @@ window.cancelAnimFrame = (function () {
if (ua.includes('Chrome')) htmlEl.classList.add('is-chrome');
if (ua.includes('Safari') && !ua.includes('Chrome')) htmlEl.classList.add('is-safari');
// Reload on back-forward cache restore so layout classes are always fresh from the server
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
window.location.reload();
}
});
// Mirrors the server-side fallback logic in index.mjs:
// use the user's own feed_layout if they explicitly chose one (> 0),
// otherwise fall back to the site-wide default set via the admin dashboard.
window.getEffectiveFeedLayout = () => {
const s = window.f0ckSession;
if (!s) return 0;
const userLayout = (s.feed_layout !== undefined && s.feed_layout !== null) ? parseInt(s.feed_layout, 10) : 0;
const siteDefault = (s.default_feed_layout !== undefined && s.default_feed_layout !== null) ? parseInt(s.default_feed_layout, 10) : 0;
return (userLayout > 0) ? userLayout : siteDefault;
};
window.updateVisitIndicators = () => {
try {
// View indicators and counters have been permanently removed as requested.
@@ -1739,6 +1757,12 @@ window.cancelAnimFrame = (function () {
// Ensure loading state is reset just in case
if (restoredPosts._infiniteState) restoredPosts._infiniteState.loading = false;
}
// Re-apply layout class on the restored node — the cached node may have
// an outdated class if the user changed layout since it was cached.
if (restoredPosts) {
restoredPosts.className = restoredPosts.className.replace(/\blayout-\d\b/g, '').trim() + ' layout-' + window.getEffectiveFeedLayout();
}
}
// Restore Scroll Position
@@ -1806,7 +1830,8 @@ window.cancelAnimFrame = (function () {
// 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 layoutClass = 'layout-' + window.getEffectiveFeedLayout();
indexWrapper.innerHTML = `<div class="index-container"><div class="posts grid-transition ${layoutClass}"></div></div>`;
main.innerHTML = '';
main.appendChild(indexWrapper);
@@ -2305,6 +2330,8 @@ window.cancelAnimFrame = (function () {
if (replace) {
// Atomic replacement to prevent "jumping"
posts.innerHTML = data.html;
// Re-apply layout class (innerHTML wipe discards it; use effective layout = user pref or site default)
posts.className = posts.className.replace(/\blayout-\d\b/g, '').trim() + ' layout-' + window.getEffectiveFeedLayout();
window.updateVisitIndicators();
window.initLazyLoading();

21
public/s/js/settings.js
View File

@@ -551,11 +551,13 @@
});
}
// New Dual Column Layout Toggle
const layoutToggle = document.getElementById('use_new_layout_toggle');
if (layoutToggle) {
layoutToggle.addEventListener('change', async () => {
const use_new_layout = layoutToggle.checked;
// Feed Layout Select
const feedLayoutSelect = document.getElementById('feed_layout_select');
if (feedLayoutSelect) {
feedLayoutSelect.addEventListener('change', async () => {
const feed_layout = parseInt(feedLayoutSelect.value, 10);
const prev = feedLayoutSelect.dataset.prev ?? feedLayoutSelect.value;
feedLayoutSelect.dataset.prev = feedLayoutSelect.value;
try {
const res = await fetch('/api/v2/settings/layout', {
method: 'PUT',
@@ -563,23 +565,24 @@
'Content-Type': 'application/json',
'X-CSRF-Token': window.f0ckSession?.csrf_token
},
body: JSON.stringify({ use_new_layout })
body: JSON.stringify({ feed_layout })
});
const data = await res.json();
if (data.success) {
window.location.reload();
} else {
alert(data.msg || 'Error saving preference');
layoutToggle.checked = !use_new_layout; // Revert
feedLayoutSelect.value = prev; // Revert
}
} catch (err) {
console.error(err);
alert('Failed to save Layout preference');
layoutToggle.checked = !use_new_layout; // Revert
alert('Failed to save layout preference');
feedLayoutSelect.value = prev; // Revert
}
});
}
// Disable Autoplay Toggle
const autoplayToggle = document.getElementById('disable_autoplay_toggle');
if (autoplayToggle) {