diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index 5cd27da..0ff5d33 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -5727,27 +5727,27 @@ body.layout-modern.sidebar-right-hidden .pagination-container-fluid { } .content.slide-next { - animation: contentSlideInRight 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; + animation: contentSlideInRight 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; } .content.slide-prev { - animation: contentSlideInLeft 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; + animation: contentSlideInLeft 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; } .content.slide-out-left { - animation: contentSlideOutLeft 0.38s cubic-bezier(0.3, 0, 0.8, 1) forwards !important; + animation: contentSlideOutLeft 0.22s cubic-bezier(0.3, 0, 0.8, 1) forwards !important; pointer-events: none; } .content.slide-out-right { - animation: contentSlideOutRight 0.38s cubic-bezier(0.3, 0, 0.8, 1) forwards !important; + animation: contentSlideOutRight 0.22s cubic-bezier(0.3, 0, 0.8, 1) forwards !important; pointer-events: none; } @keyframes contentSlideIn { 0% { opacity: 0; - transform: translateY(24px) scale(0.96); + transform: translateY(20px) scale(0.97); } 100% { opacity: 1; @@ -5757,37 +5757,45 @@ body.layout-modern.sidebar-right-hidden .pagination-container-fluid { @keyframes contentSlideInRight { 0% { - transform: translateX(120px) scale(0.95); + opacity: 0; + transform: translateX(70px) scale(0.97); } 100% { + opacity: 1; transform: translateX(0) scale(1); } } @keyframes contentSlideInLeft { 0% { - transform: translateX(-120px) scale(0.95); + opacity: 0; + transform: translateX(-70px) scale(0.97); } 100% { + opacity: 1; transform: translateX(0) scale(1); } } @keyframes contentSlideOutLeft { 0% { + opacity: 1; transform: translateX(0) scale(1); } 100% { - transform: translateX(-120px) scale(0.95); + opacity: 0; + transform: translateX(-70px) scale(0.97); } } @keyframes contentSlideOutRight { 0% { + opacity: 1; transform: translateX(0) scale(1); } 100% { - transform: translateX(120px) scale(0.95); + opacity: 0; + transform: translateX(70px) scale(0.97); } } @@ -18834,13 +18842,30 @@ body.onara-modal-open #sidebar-drag-zone { -webkit-overflow-scrolling: touch; overscroll-behavior: contain !important; box-sizing: border-box !important; - animation: onaraFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards; - transition: right 0.3s ease-in-out !important; + opacity: 0; + transform: scale(0.99); + transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), + transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), + right 0.3s ease-in-out !important; cursor: default; } -body.onara-modal-open .onara-modal-wrapper { +body.onara-modal-open .onara-modal-wrapper, +.onara-modal-wrapper.onara-fade-in { display: flex !important; + opacity: 1 !important; + transform: scale(1) !important; + pointer-events: auto !important; +} + +.onara-modal-wrapper.onara-fade-out { + display: flex !important; + opacity: 0 !important; + transform: scale(0.99) !important; + pointer-events: none !important; + transition: opacity 0.24s cubic-bezier(0.3, 0, 0.8, 1), + transform 0.24s cubic-bezier(0.3, 0, 0.8, 1), + right 0.3s ease-in-out !important; } /* Sidebar hidden: modal expands to right edge */ @@ -18876,6 +18901,17 @@ body.sidebar-right-hidden .onara-modal-wrapper { } } +@keyframes onaraFadeOut { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.99); + } +} + .onara-backdrop { position: absolute !important; top: 0 !important; diff --git a/public/s/css/v0ck.css b/public/s/css/v0ck.css index 9d72086..7415c74 100644 --- a/public/s/css/v0ck.css +++ b/public/s/css/v0ck.css @@ -114,7 +114,7 @@ } .v0ck_hidden { - display: none; + display: none !important; } .v0ck_player_controls svg { diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js index 2c5c5f5..6795b8a 100644 --- a/public/s/js/f0ckm.js +++ b/public/s/js/f0ckm.js @@ -1076,6 +1076,23 @@ window.cancelAnimFrame = (function () { return modal; }; + const openOnaraModal = () => { + const modal = getOrCreateOnaraModal(); + if (modal._closeTimeout) { + clearTimeout(modal._closeTimeout); + modal._closeTimeout = null; + } + modal._isClosing = false; + document.body.classList.add('onara-modal-open'); + modal.style.display = 'flex'; + modal.setAttribute('aria-hidden', 'false'); + modal.classList.remove('onara-fade-out'); + void modal.offsetWidth; // Force reflow so transition starts reliably + modal.classList.add('onara-fade-in'); + return modal; + }; + window.openOnaraModal = openOnaraModal; + const updateOnaraActiveItem = (itemid, url) => { if (!isOnaraActive()) return; // Clear onara-active from any and all elements to guarantee only 1 item is selected @@ -1145,7 +1162,9 @@ window.cancelAnimFrame = (function () { const closeOnaraModal = (options = {}) => { const modal = document.getElementById('onara-modal'); - if (!modal || modal.style.display === 'none') return; + if (!modal || modal.style.display === 'none' || modal._isClosing) return; + + modal._isClosing = true; // Close any auxiliary modals that may be open const infoModal = document.getElementById('info-modal'); @@ -1159,11 +1178,12 @@ window.cancelAnimFrame = (function () { if (typeof window.closeImageModal === 'function') window.closeImageModal(); document.body.classList.remove('modal-open'); - stopMedia(); - const mount = document.getElementById('onara-item-mount'); - if (mount) mount.innerHTML = ''; - modal.style.display = 'none'; - modal.setAttribute('aria-hidden', 'true'); + // Pause any playing media immediately + modal.querySelectorAll('video, audio').forEach(el => { try { el.pause(); } catch {} }); + + // Smooth fade out + modal.classList.remove('onara-fade-in'); + modal.classList.add('onara-fade-out'); document.body.classList.remove('onara-modal-open'); // Restore background canvas if needed @@ -1193,6 +1213,31 @@ window.cancelAnimFrame = (function () { activeThumb.focus({ preventScroll: true }); } catch {} } + + if (modal._closeTimeout) clearTimeout(modal._closeTimeout); + if (options.immediate) { + stopMedia(); + const mount = document.getElementById('onara-item-mount'); + if (mount) mount.innerHTML = ''; + modal.style.display = 'none'; + modal.setAttribute('aria-hidden', 'true'); + modal.classList.remove('onara-fade-out', 'onara-fade-in'); + modal._isClosing = false; + modal._closeTimeout = null; + return; + } + + modal._closeTimeout = setTimeout(() => { + if (!modal._isClosing) return; + stopMedia(); + const mount = document.getElementById('onara-item-mount'); + if (mount) mount.innerHTML = ''; + modal.style.display = 'none'; + modal.setAttribute('aria-hidden', 'true'); + modal.classList.remove('onara-fade-out'); + modal._isClosing = false; + modal._closeTimeout = null; + }, 240); }; window.closeOnaraModal = closeOnaraModal; window.isOnaraActive = isOnaraActive; @@ -1891,11 +1936,7 @@ window.cancelAnimFrame = (function () { if (!isOnaraActive()) return; promoteOnaraModals(); if (document.body.classList.contains('onara-modal-open')) { - const modal = document.getElementById('onara-modal'); - if (modal) { - modal.style.display = 'flex'; - modal.setAttribute('aria-hidden', 'false'); - } + const modal = openOnaraModal(); if (!window._onaraReturnUrl) { window._onaraReturnUrl = getOnaraBaseUrl(); window._onaraReturnTitle = window.f0ckDomain || 'f0ck'; @@ -3767,8 +3808,12 @@ window.cancelAnimFrame = (function () { const _m = document.getElementById('main'); if (_m) ['height', 'overflow'].forEach(p => _m.style.removeProperty(p)); // Stop all media - document.querySelectorAll('video:not(#gchat-messages video), audio:not(#gchat-messages audio)').forEach(el => { try { el.pause(); el.removeAttribute('src'); el.load(); } catch {} }); - document.querySelectorAll('ruffle-player').forEach(el => { try { el.remove(); } catch {} }); + if (options.direction) { + document.querySelectorAll('video:not(#gchat-messages video), audio:not(#gchat-messages audio)').forEach(el => { try { el.pause(); } catch {} }); + } else { + document.querySelectorAll('video:not(#gchat-messages video), audio:not(#gchat-messages audio)').forEach(el => { try { el.pause(); el.removeAttribute('src'); el.load(); } catch {} }); + document.querySelectorAll('ruffle-player').forEach(el => { try { el.remove(); } catch {} }); + } } // Dispatch pjax:start so navigation-aware listeners (e.g. metadata modal, image modal) can react @@ -3789,7 +3834,11 @@ window.cancelAnimFrame = (function () { // Reverted to native-only if (!options.keepMedia) { - stopMedia(); // Abort previous media immediately + if (!options.direction) { + stopMedia(); // Abort previous media immediately if not sliding out + } else { + document.querySelectorAll('video:not(#gchat-messages video), audio:not(#gchat-messages audio)').forEach(el => { try { el.pause(); } catch {} }); + } // Fade out background canvas for smooth transition const canvas = document.getElementById('bg'); @@ -3958,12 +4007,10 @@ window.cancelAnimFrame = (function () { let _container; if (useOnara) { - const onaraModal = getOrCreateOnaraModal(); + const onaraModal = openOnaraModal(); const onaraMount = document.getElementById('onara-item-mount'); - document.body.classList.add('onara-modal-open'); - onaraModal.style.display = 'flex'; - onaraModal.setAttribute('aria-hidden', 'false'); if (!options.keepMedia) { + stopMedia(); onaraMount.innerHTML = ''; } _container = onaraMount; @@ -3990,10 +4037,12 @@ window.cancelAnimFrame = (function () { main.className = 'item-view'; ensureLayoutClass(); if (window.syncNavbarHeight) window.syncNavbarHeight(); + stopMedia(); main.innerHTML = ''; _container = main; } } else if (_container && !options.keepMedia) { + stopMedia(); _container.innerHTML = ''; _container.removeAttribute('style'); if (main) main.className = 'item-view'; @@ -4142,12 +4191,10 @@ window.cancelAnimFrame = (function () { let container; if (useOnara) { - const onaraModal = getOrCreateOnaraModal(); + const onaraModal = openOnaraModal(); const onaraMount = document.getElementById('onara-item-mount'); - document.body.classList.add('onara-modal-open'); - onaraModal.style.display = 'flex'; - onaraModal.setAttribute('aria-hidden', 'false'); if (!options.keepMedia) { + stopMedia(); onaraMount.innerHTML = ''; } container = onaraMount; @@ -4188,11 +4235,13 @@ window.cancelAnimFrame = (function () { // Toggle button lives permanently in body via header.html — no creation needed // HTML goes directly into #main without outdated .container wrapper for New Layout + stopMedia(); main.innerHTML = ''; container = main; // HTML goes directly into #main } } else if (container && !options.keepMedia) { // Already in some kind of item view or compatible layout, just clear it + stopMedia(); container.innerHTML = ''; container.removeAttribute('style'); // Ensure no carry-over styles if (main) main.className = 'item-view';