diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index c0b7a4b..0bcc118 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -5062,6 +5062,33 @@ body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before { object-fit: contain; } +/* Floating overlay button to trigger modal when inline expand is active */ +.image-modal-btn { + display: none; + position: absolute; + top: 0; + right: 0; + width: 32px; + height: 32px; + align-items: center; + justify-content: center; + border: none; + background: none; + color: rgba(255, 255, 255, 0.7); + font-size: 22px; + cursor: pointer; + z-index: 10; + opacity: 1; + pointer-events: auto; + transition: color 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), 0 0 1px rgba(0, 0, 0, 0.5); + padding: 0; +} + +html.image-expand-active .image-modal-btn { + display: inline-flex; +} + /* Inline image expansion */ .embed-responsive.is-expanded::before { display: none !important; diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js index 2ac2d0b..59297c8 100644 --- a/public/s/js/f0ckm.js +++ b/public/s/js/f0ckm.js @@ -59,6 +59,7 @@ window.cancelAnimFrame = (function () { if (localStorage.getItem('blurSfw') === 'true') htmlEl.classList.add('blur-sfw-active'); if (localStorage.getItem('blurUntagged') === 'true') htmlEl.classList.add('blur-untagged-active'); if (localStorage.getItem('blurDetail') !== 'false') htmlEl.classList.add('blur-detail-active'); + if (localStorage.getItem('imageExpandOnClick') !== 'false') htmlEl.classList.add('image-expand-active'); window.updateVisitIndicators = () => { try { @@ -8867,6 +8868,18 @@ document.addEventListener('DOMContentLoaded', () => { // Global intercept for image item clicks document.addEventListener('click', (e) => { + const modalBtn = e.target.closest('.image-modal-btn'); + if (modalBtn) { + e.preventDefault(); + e.stopPropagation(); + const wrapper = modalBtn.closest('.embed-responsive'); + const img = wrapper ? wrapper.querySelector('img#f0ck-image') : null; + if (img) { + openImageModal(img.src); + } + return; + } + const elfe = e.target.closest('#elfe'); if (elfe) { e.preventDefault(); diff --git a/public/s/js/settings.js b/public/s/js/settings.js index a26c5c7..4d73c6a 100644 --- a/public/s/js/settings.js +++ b/public/s/js/settings.js @@ -747,6 +747,11 @@ imageExpandToggle.checked = localStorage.getItem('imageExpandOnClick') !== 'false'; imageExpandToggle.addEventListener('change', () => { localStorage.setItem('imageExpandOnClick', imageExpandToggle.checked); + if (imageExpandToggle.checked) { + document.documentElement.classList.add('image-expand-active'); + } else { + document.documentElement.classList.remove('image-expand-active'); + } }); } diff --git a/views/snippets/item-media.html b/views/snippets/item-media.html index 7e4db12..cd49164 100644 --- a/views/snippets/item-media.html +++ b/views/snippets/item-media.html @@ -16,6 +16,7 @@
+ @elseif(item.mime === 'application/x-shockwave-flash' && enable_swf)