From 11a4535ca9d16915c48dca74c152e8ef093a0ecd Mon Sep 17 00:00:00 2001 From: Kibi Kelburton Date: Wed, 19 Aug 2026 23:01:06 +0200 Subject: [PATCH] hhpmc --- public/s/css/f0ckm.css | 14 ++++++--- public/s/js/comments.js | 55 ++++++++++++++++++++++++++++----- public/s/js/sidebar-activity.js | 7 ++++- public/s/js/user_comments.js | 2 +- src/inc/routes/comments.mjs | 4 +++ 5 files changed, 69 insertions(+), 13 deletions(-) diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index 0c16ec6..e863917 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -3110,6 +3110,7 @@ body.layout-legacy .scroll-to-bottom svg { isolation: isolate; padding-bottom: 25px; /* Room for absolute permalink */ + overflow: hidden; } .comment > * { @@ -3128,14 +3129,19 @@ body.layout-legacy .scroll-to-bottom svg { max-height: var(--comment-banner-max-height, 300px); background-image: var(--author-banner, none); background-position: var(--author-banner-position, center top); - background-size: var(--author-banner-size, cover); - background-repeat: var(--author-banner-repeat, repeat); + background-size: var(--author-banner-size, 100% auto); + background-repeat: var(--author-banner-repeat, no-repeat); opacity: var(--author-banner-opacity, 0.25); z-index: 0; border-radius: inherit; pointer-events: none; - -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%); - mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%); + -webkit-mask-image: var(--comment-banner-mask, linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)); + mask-image: var(--comment-banner-mask, linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)); +} + +.comment.tall-comment::before { + -webkit-mask-image: var(--comment-banner-mask, linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%)); + mask-image: var(--comment-banner-mask, linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%)); } .comment.deleted { diff --git a/public/s/js/comments.js b/public/s/js/comments.js index 126e2d4..ea2c7e6 100644 --- a/public/s/js/comments.js +++ b/public/s/js/comments.js @@ -472,8 +472,8 @@ class CommentSystem { if (el && data.banner_file && data.banner_file !== 'null') { el.style.setProperty('--author-banner', `url('/a/${data.banner_file}')`); el.style.setProperty('--author-banner-position', data.banner_position === 'center' ? 'center top' : (data.banner_position || 'center top')); - el.style.setProperty('--author-banner-size', data.banner_size || 'cover'); - el.style.setProperty('--author-banner-repeat', data.banner_repeat || 'repeat'); + el.style.setProperty('--author-banner-size', (data.banner_size && data.banner_size !== 'cover') ? data.banner_size : '100% auto'); + el.style.setProperty('--author-banner-repeat', 'no-repeat'); } if (data.body && data.body.endsWith('\u2026')) { console.log('[handleLiveComment] duplicate+truncated, ensuring button for', data.id); @@ -615,8 +615,8 @@ class CommentSystem { if (json.comment && json.comment.banner_file) { el.style.setProperty('--author-banner', `url('/a/${json.comment.banner_file}')`); el.style.setProperty('--author-banner-position', json.comment.banner_position === 'center' ? 'center top' : (json.comment.banner_position || 'center top')); - el.style.setProperty('--author-banner-size', json.comment.banner_size || 'cover'); - el.style.setProperty('--author-banner-repeat', json.comment.banner_repeat || 'repeat'); + el.style.setProperty('--author-banner-size', (json.comment.banner_size && json.comment.banner_size !== 'cover') ? json.comment.banner_size : '100% auto'); + el.style.setProperty('--author-banner-repeat', 'no-repeat'); } contentEl.dataset.raw = fullContent; @@ -1537,8 +1537,8 @@ class CommentSystem { if (incoming && incoming.banner_file && incoming.banner_file !== 'null') { el.style.setProperty('--author-banner', `url('/a/${incoming.banner_file}')`); el.style.setProperty('--author-banner-position', incoming.banner_position === 'center' ? 'center top' : (incoming.banner_position || 'center top')); - el.style.setProperty('--author-banner-size', incoming.banner_size || 'cover'); - el.style.setProperty('--author-banner-repeat', incoming.banner_repeat || 'repeat'); + el.style.setProperty('--author-banner-size', (incoming.banner_size && incoming.banner_size !== 'cover') ? incoming.banner_size : '100% auto'); + el.style.setProperty('--author-banner-repeat', 'no-repeat'); } } }); @@ -2210,7 +2210,7 @@ class CommentSystem { const bannerEnabled = window.f0ckCommentBannerEnabled !== false && window.f0ckSession?.comment_banner_enabled !== false; const bannerStyle = (bannerEnabled && comment.banner_file && comment.banner_file !== 'null') - ? `style="--author-banner: url('/a/${comment.banner_file}'); --author-banner-position: ${comment.banner_position === 'center' ? 'center top' : (comment.banner_position || 'center top')}; --author-banner-size: ${comment.banner_size || 'cover'}; --author-banner-repeat: ${comment.banner_repeat || 'repeat'};"` + ? `style="--author-banner: url('/a/${comment.banner_file}'); --author-banner-position: ${comment.banner_position === 'center' ? 'center top' : (comment.banner_position || 'center top')}; --author-banner-size: ${(comment.banner_size && comment.banner_size !== 'cover') ? comment.banner_size : '100% auto'}; --author-banner-repeat: no-repeat;"` : ''; return `
${comment.username ? `` : ''}${comment.username ? `` : ''}
${pinnedBadge}${comment.username ? `${this.escapeHtml(comment.display_name || comment.username)}` : 'System'}${contextMarker}${backlinkHtml}
${timeAgo}
${content}
${this.renderCommentAttachments(comment.files, comment.content)}${this.renderCommentPoll(comment.poll, comment.id, comment.username)}
${!isDeleted && currentUserId ? `` : ''}${adminButtons}${userDeleteButton}
#${comment.id}
${repliesHtml}`; @@ -4850,3 +4850,44 @@ document.addEventListener('f0ck:contentLoaded', () => { // If f0ck.js uses custom navigation without valid events, we might need MutationObserver or hook into `getContent` // Looking at f0ck.js, it seems to just replace innerHTML. + +(function initCommentHeightObserver() { + if (typeof window === 'undefined') return; + + if (window.ResizeObserver) { + const observer = new ResizeObserver(entries => { + for (const entry of entries) { + const height = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight; + if (height > 90) { + entry.target.classList.add('tall-comment'); + } else { + entry.target.classList.remove('tall-comment'); + } + } + }); + + const observeAll = (root = document) => { + root.querySelectorAll('.comment').forEach(el => observer.observe(el)); + }; + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => observeAll()); + } else { + observeAll(); + } + + if (window.MutationObserver) { + const mutObs = new MutationObserver(mutations => { + for (const m of mutations) { + m.addedNodes.forEach(node => { + if (node.nodeType === 1) { + if (node.classList && node.classList.contains('comment')) observer.observe(node); + if (node.querySelectorAll) node.querySelectorAll('.comment').forEach(el => observer.observe(el)); + } + }); + } + }); + mutObs.observe(document.body, { childList: true, subtree: true }); + } + } +})(); diff --git a/public/s/js/sidebar-activity.js b/public/s/js/sidebar-activity.js index a90f2e7..ef22b16 100644 --- a/public/s/js/sidebar-activity.js +++ b/public/s/js/sidebar-activity.js @@ -549,8 +549,13 @@ } + const bannerEnabled = window.f0ckCommentBannerEnabled !== false && window.f0ckSession?.comment_banner_enabled !== false; + const bannerStyle = (bannerEnabled && c.banner_file && c.banner_file !== 'null') + ? `style="--author-banner: url('/a/${c.banner_file}'); --author-banner-position: ${c.banner_position === 'center' ? 'center top' : (c.banner_position || 'center top')}; --author-banner-size: ${(c.banner_size && c.banner_size !== 'cover') ? c.banner_size : '100% auto'}; --author-banner-repeat: no-repeat;"` + : ''; + return ` -
+
diff --git a/public/s/js/user_comments.js b/public/s/js/user_comments.js index aba6802..b724819 100644 --- a/public/s/js/user_comments.js +++ b/public/s/js/user_comments.js @@ -416,7 +416,7 @@ if (!window.UserCommentSystem) { const content = this.renderCommentContent(c.content, itemKey); const bannerStyle = (c.banner_file && c.banner_file !== 'null') - ? `style="--author-banner: url('/a/${c.banner_file}'); --author-banner-position: ${c.banner_position === 'center' ? 'center top' : (c.banner_position || 'center top')}; --author-banner-size: ${c.banner_size || 'cover'}; --author-banner-repeat: ${c.banner_repeat || 'repeat'};"` + ? `style="--author-banner: url('/a/${c.banner_file}'); --author-banner-position: ${c.banner_position === 'center' ? 'center top' : (c.banner_position || 'center top')}; --author-banner-size: ${(c.banner_size && c.banner_size !== 'cover') ? c.banner_size : '100% auto'}; --author-banner-repeat: no-repeat;"` : ''; return `
${this.username}
${timeAgo}
${content}
${this.renderCommentAttachments(c.files, c.content)}${this.renderCommentPoll(c.poll, c.id)}
${window.f0ckSession && window.f0ckSession.logged_in ? `` : ''}
#${c.id}
`; diff --git a/src/inc/routes/comments.mjs b/src/inc/routes/comments.mjs index 2393c97..0b71f4a 100644 --- a/src/inc/routes/comments.mjs +++ b/src/inc/routes/comments.mjs @@ -1042,6 +1042,10 @@ export default (router, tpl) => { u.user as username, uo.avatar, uo.avatar_file, + uo.banner_file, + uo.banner_position, + uo.banner_size, + uo.banner_repeat, uo.username_color, uo.display_name FROM comments c