QoL for images
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user