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

gfdhfgd

Browse Source
This commit is contained in:
Kibi Kelburton
2026-06-04 20:55:41 +02:00
parent 4943a87e13
commit f36c10b428
3 changed files with 109 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
public/s/css/f0ckm.css
View File

@@ -15688,93 +15688,48 @@ body.scroller-active #gchat-reopen-bubble {
/* ============================================= /* =============================================
NOTIFICATION THUMBNAIL BLUR NOTIFICATION THUMBNAIL BLUR
Blur is driven by the current mode filter set JS swaps img src to /t/{id}_blur.webp and adds
on <html data-notif-filter="sfw|nsfw|nsfl|all">. .notif-thumb-blurred. CSS only handles the label
No extra settings required. overlay and hover/reveal transitions.
============================================= */ ============================================= */
/* SFW mode: blur NSFW and NSFL thumbnails */ /* Blurred thumb: position for overlay */
html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfw"] img, .notif-thumb.notif-thumb-blurred {
html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfl"] img { position: relative;
filter: blur(8px) !important;
transform: scale(1.08) !important;
transition: filter 0.2s ease, transform 0.2s ease !important;
} }
/* NSFW mode: blur NSFL thumbnails */ /* Overlay label */
html[data-notif-filter="nsfw"] .notif-thumb[data-mode="nsfl"] img { .notif-thumb.notif-thumb-blurred::after {
filter: blur(8px) !important; content: attr(data-mode);
transform: scale(1.08) !important; text-transform: uppercase;
transition: filter 0.2s ease, transform 0.2s ease !important; position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 10px;
letter-spacing: 1.5px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
background: rgba(10, 10, 12, 0.45);
color: #ffffff;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 2;
} }
/* NSFL mode: blur SFW and NSFW thumbnails */ /* NSFL label gets a red tint */
html[data-notif-filter="nsfl"] .notif-thumb[data-mode="sfw"] img, .notif-thumb.notif-thumb-blurred[data-mode="nsfl"]::after {
html[data-notif-filter="nsfl"] .notif-thumb[data-mode="nsfw"] img { color: #ff3b30;
filter: blur(8px) !important;
transform: scale(1.08) !important;
transition: filter 0.2s ease, transform 0.2s ease !important;
} }
/* Overlay label — SFW mode */ /* Hide overlay on hover (JS handles the actual src swap) */
html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfw"], .notif-thumb.notif-thumb-blurred:hover::after {
html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfl"], opacity: 0;
html[data-notif-filter="nsfw"] .notif-thumb[data-mode="nsfl"],
html[data-notif-filter="nsfl"] .notif-thumb[data-mode="sfw"],
html[data-notif-filter="nsfl"] .notif-thumb[data-mode="nsfw"] {
position: relative !important;
} }
html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfw"]::after, /* Revealed state: hide overlay */
html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfl"]::after, .notif-thumb.notif-thumb-blurred.revealed::after {
html[data-notif-filter="nsfw"] .notif-thumb[data-mode="nsfl"]::after, opacity: 0;
html[data-notif-filter="nsfl"] .notif-thumb[data-mode="sfw"]::after, pointer-events: none;
html[data-notif-filter="nsfl"] .notif-thumb[data-mode="nsfw"]::after {
content: attr(data-mode) !important;
text-transform: uppercase !important;
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 800 !important;
font-size: 10px !important;
letter-spacing: 1.5px !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
background: rgba(10, 10, 12, 0.55) !important;
color: #ffffff !important;
pointer-events: none !important;
opacity: 1 !important;
transition: opacity 0.2s ease !important;
z-index: 2 !important;
}
html[data-notif-filter="sfw"] .notif-thumb[data-mode="nsfl"]::after,
html[data-notif-filter="nsfw"] .notif-thumb[data-mode="nsfl"]::after { color: #ff3b30 !important; }
/* Reveal on hover — only when hovering directly on the thumb */
.notif-thumb[data-mode]:hover img {
filter: none !important;
transform: scale(1.1) !important;
}
.notif-thumb[data-mode]:hover::after {
opacity: 0 !important;
}
/* Revealed state (set by JS tap-to-reveal for mobile) */
.notif-thumb[data-mode].revealed img {
filter: none !important;
}
.notif-thumb[data-mode].revealed::after {
opacity: 0 !important;
pointer-events: none !important;
}
/* ALL mode: no blur on notification thumbnails */
html.mode-all .notif-thumb[data-mode] img {
filter: none !important;
transform: none !important;
}
html.mode-all .notif-thumb[data-mode]::after {
display: none !important;
} }

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

@@ -505,19 +505,64 @@ window.cancelAnimFrame = (function () {
} }
// Track active mode on <html> for notification thumbnail blur. // Track active mode on <html> for notification thumbnail blur.
// data-notif-filter is set to the current mode string so CSS can blur // data-notif-filter is set to the current mode string and also
// thumbnails whose rating doesn't match the active filter. // drives src-swapping to pre-blurred thumbnails (/t/{id}_blur.webp).
const _notifBlurShouldBlur = (itemMode, activeMode) => {
if (activeMode === 3) return false; // ALL mode: never blur
if (activeMode === 0) return itemMode === 'nsfw' || itemMode === 'nsfl'; // SFW filter
if (activeMode === 1) return itemMode === 'nsfl'; // NSFW filter
if (activeMode === 4) return itemMode === 'sfw' || itemMode === 'nsfw'; // NSFL filter
return false;
};
window.applyNotifThumbBlur = (container) => {
const root = container || document;
const mode = window.activeMode ?? 3;
root.querySelectorAll('.notif-thumb[data-mode]').forEach(thumb => {
const img = thumb.querySelector('img');
if (!img) return;
const itemMode = thumb.dataset.mode;
if (!itemMode || thumb.classList.contains('revealed')) return;
if (_notifBlurShouldBlur(itemMode, mode)) {
if (!img.dataset.origSrc) {
// Extract numeric item ID from any thumbnail path variant:
// /t/{id}.webp, /mod/pending/t/{id}.webp, /mod/deleted/t/{id}.webp
const idMatch = img.src.match(/\/t\/(\d+)\.webp/);
if (idMatch) {
// Always use the canonical /t/{id}.webp as the sharp src (hover target)
img.dataset.origSrc = `/t/${idMatch[1]}.webp`;
img.src = `/t/${idMatch[1]}_blur.webp`;
thumb.classList.add('notif-thumb-blurred');
}
}
} else {
// Restore original thumbnail
if (img.dataset.origSrc) {
img.src = img.dataset.origSrc;
delete img.dataset.origSrc;
thumb.classList.remove('notif-thumb-blurred');
}
}
});
};
const _updateNotifFilterClass = (mode) => { const _updateNotifFilterClass = (mode) => {
const modeNames = { 0: 'sfw', 1: 'nsfw', 2: 'untagged', 3: 'all', 4: 'nsfl' }; const modeNames = { 0: 'sfw', 1: 'nsfw', 2: 'untagged', 3: 'all', 4: 'nsfl' };
htmlEl.setAttribute('data-notif-filter', modeNames[mode] || 'all'); htmlEl.setAttribute('data-notif-filter', modeNames[mode] || 'all');
// Keep mode-all class in sync (used by existing CSS override)
if (mode === 3) htmlEl.classList.add('mode-all'); if (mode === 3) htmlEl.classList.add('mode-all');
else htmlEl.classList.remove('mode-all'); else htmlEl.classList.remove('mode-all');
// Re-apply blur src swaps whenever mode changes
window.applyNotifThumbBlur();
}; };
_updateNotifFilterClass(window.activeMode ?? 3); _updateNotifFilterClass(window.activeMode ?? 3);
document.addEventListener('f0ck:modeChanged', (e) => { document.addEventListener('f0ck:modeChanged', (e) => {
_updateNotifFilterClass(e.detail?.mode ?? 3); _updateNotifFilterClass(e.detail?.mode ?? 3);
}); });
// Apply to server-rendered /notifications page on load
document.addEventListener('DOMContentLoaded', () => window.applyNotifThumbBlur());
// ---- Multi-select Rating Toggles ---- // ---- Multi-select Rating Toggles ----
// Reads/writes a `ratings` cookie (e.g. "sfw|untagged") and syncs with server via /mode/3 (ALL). // Reads/writes a `ratings` cookie (e.g. "sfw|untagged") and syncs with server via /mode/3 (ALL).
@@ -6596,6 +6641,12 @@ class NotificationSystem {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
tappedThumb.classList.add('revealed'); tappedThumb.classList.add('revealed');
tappedThumb.classList.remove('notif-thumb-blurred');
const img = tappedThumb.querySelector('img');
if (img && img.dataset.origSrc) {
img.src = img.dataset.origSrc;
delete img.dataset.origSrc;
}
return; return;
} }
} }
@@ -6716,6 +6767,25 @@ class NotificationSystem {
} }
}); });
// Hover src-swap: show sharp thumbnail on hover, restore blur on mouseout
const _notifThumbHoverIn = (e) => {
const thumb = e.target.closest('.notif-thumb.notif-thumb-blurred');
if (!thumb || thumb.classList.contains('revealed')) return;
const img = thumb.querySelector('img');
if (img && img.dataset.origSrc) img.src = img.dataset.origSrc;
};
const _notifThumbHoverOut = (e) => {
const thumb = e.target.closest('.notif-thumb.notif-thumb-blurred');
if (!thumb || thumb.classList.contains('revealed')) return;
const img = thumb.querySelector('img');
if (img && img.dataset.origSrc) {
const idMatch = img.dataset.origSrc.match(/\/t\/(\d+)\.webp/);
if (idMatch) img.src = `/t/${idMatch[1]}_blur.webp`;
}
};
document.addEventListener('mouseover', _notifThumbHoverIn);
document.addEventListener('mouseout', _notifThumbHoverOut);
// Close on clicking 'View all' or 'Manage subscriptions' // Close on clicking 'View all' or 'Manage subscriptions'
this.dropdown.querySelectorAll('a').forEach(link => { this.dropdown.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => { link.addEventListener('click', () => {
@@ -6938,6 +7008,7 @@ class NotificationSystem {
return; return;
} }
this.list.innerHTML = Sanitizer.clean(items.map(n => this.renderItem(n)).join('')); this.list.innerHTML = Sanitizer.clean(items.map(n => this.renderItem(n)).join(''));
if (window.applyNotifThumbBlur) window.applyNotifThumbBlur(this.list);
} }
renderHistoryItem(n) { renderHistoryItem(n) {

1
views/notifications.html
View File

@@ -39,6 +39,7 @@
const data = await res.json(); const data = await res.json();
if (data.success) { if (data.success) {
container.innerHTML = data.html || '<div class="notif-empty">' + (window.f0ckI18n?.no_notifications || 'No new notifications') + '</div>'; container.innerHTML = data.html || '<div class="notif-empty">' + (window.f0ckI18n?.no_notifications || 'No new notifications') + '</div>';
if (window.applyNotifThumbBlur) window.applyNotifThumbBlur(container);
const footbar = document.getElementById('footbar'); const footbar = document.getElementById('footbar');
if (footbar) { if (footbar) {
footbar.style.display = data.hasMore ? '' : 'none'; footbar.style.display = data.hasMore ? '' : 'none';