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

gfds

Browse Source
This commit is contained in:
kibi
2026-09-29 20:03:40 +02:00
parent ed42b1595c
commit b94b260f20
3 changed files with 329 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/s/js/f0ckm.js
+214 -1
View File
@@ -11459,7 +11459,10 @@ window.cancelAnimFrame = (function () {
window.syncNavbarHeight = () => {
const nav = document.querySelector('.navbar');
if (nav) document.documentElement.style.setProperty('--navbar-h', nav.offsetHeight + 'px');
// Exact (fractional) height, not offsetHeight: Onara makes the navbar position:fixed and holds the
// page in place with margin-top: var(--navbar-h). A rounded value (78 vs 78.19px) shifted the whole
// page by that fraction on every open/close.
if (nav) document.documentElement.style.setProperty('--navbar-h', nav.getBoundingClientRect().height + 'px');
};
window.syncNavbarHeight();
window.addEventListener('resize', window.syncNavbarHeight);
@@ -25193,3 +25196,213 @@ window.BulkSelection = (() => {
// Keep it unlocked while it's being used
document.addEventListener('input', (e) => { if (e.target === active) armTimer(); }, true);
})();
// ── Magnetic thumbnail hover ──────────────────────────────────────────────────
// One ring per grid glides from thumbnail to thumbnail (slight spring overshoot) instead of each thumb
// switching its own box-shadow on and off, and the hovered thumbnail leans a few px toward the cursor.
// Only transform/translate animate (compositor only, no layout). Mouse/trackpad devices only.
(() => {
if (!window.matchMedia || !window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const THUMB_SEL = 'div.posts > a.thumb:not(.notif-item)';
const PULL = 3; // max px a thumbnail leans toward the cursor
let current = null;
let rafId = 0;
let lastEvent = null;
const magnetFor = (posts) => {
let m = posts.querySelector(':scope > .thumb-magnet');
if (!m) {
if (getComputedStyle(posts).position === 'static') posts.style.position = 'relative';
m = document.createElement('div');
m.className = 'thumb-magnet';
m.setAttribute('aria-hidden', 'true');
posts.appendChild(m);
posts.classList.add('has-thumb-magnet');
}
return m;
};
const place = (m, thumb, px = 0, py = 0, instant = false) => {
if (instant) m.classList.add('no-glide');
m.style.width = thumb.offsetWidth + 'px';
m.style.height = thumb.offsetHeight + 'px';
m.style.transform = 'translate3d(' + (thumb.offsetLeft + px) + 'px,' + (thumb.offsetTop + py) + 'px,0)';
if (instant) { void m.offsetWidth; m.classList.remove('no-glide'); }
};
const release = (thumb) => {
if (!thumb) return;
thumb.style.removeProperty('--pull-x');
thumb.style.removeProperty('--pull-y');
thumb.classList.remove('magnet-target');
};
const hoverTo = (thumb) => {
if (!thumb || thumb === current) return;
const m = magnetFor(thumb.parentElement);
const wasHidden = !m.classList.contains('is-on');
release(current);
current = thumb;
thumb.classList.add('magnet-target');
// Coming in from outside the grid: appear on the thumb, glide only between thumbnails
place(m, thumb, 0, 0, wasHidden);
m.classList.add('is-on');
};
document.addEventListener('mouseover', (e) => {
if (drag && drag.moved) return; // the ring stays on the thumbnail being dragged
hoverTo(e.target.closest && e.target.closest(THUMB_SEL));
}, { passive: true });
document.addEventListener('mouseout', (e) => {
if (!current || (drag && drag.moved)) return;
const to = e.relatedTarget;
if (to && to.closest && to.closest(THUMB_SEL)) return; // moving to another thumb: mouseover handles it
if (to && current.contains(to)) return;
const posts = current.parentElement;
const m = posts && posts.querySelector(':scope > .thumb-magnet');
// Still inside the grid (a gap between thumbs): keep the ring where it is, just drop the lean
if (to && posts && posts.contains(to)) { release(current); current.classList.add('magnet-target'); if (m) place(m, current); return; }
release(current);
if (m) m.classList.remove('is-on');
current = null;
}, { passive: true });
// Heavy rubber-band drag: a grabbed thumbnail follows the mouse with rising resistance (never more
// than DRAG_MAX px) and springs back on release. A real drag doesn't open the item.
const DRAG_MAX = 28; // px the thumb can be pulled at most
const DRAG_SOFT = 90; // px of mouse travel for most of that pull: bigger = heavier
let drag = null;
const resist = (d) => DRAG_MAX * Math.tanh(d / DRAG_SOFT);
document.addEventListener('mousedown', (e) => {
if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
const thumb = e.target.closest && e.target.closest(THUMB_SEL);
if (!thumb) return;
drag = { thumb, x0: e.clientX, y0: e.clientY, moved: false };
}, { passive: true });
// Native "drag this link" would take the gesture over
document.addEventListener('dragstart', (e) => {
if (e.target && e.target.closest && e.target.closest(THUMB_SEL)) e.preventDefault();
});
window.addEventListener('mousemove', (e) => {
if (!drag) return;
const dx = e.clientX - drag.x0;
const dy = e.clientY - drag.y0;
if (!drag.moved) {
if (Math.hypot(dx, dy) < 4) return;
drag.moved = true;
drag.thumb.classList.add('thumb-dragging');
document.documentElement.classList.add('thumb-drag-active');
}
const px = +resist(dx).toFixed(2);
const py = +resist(dy).toFixed(2);
drag.thumb.style.setProperty('--pull-x', px + 'px');
drag.thumb.style.setProperty('--pull-y', py + 'px');
const m = drag.thumb.parentElement && drag.thumb.parentElement.querySelector(':scope > .thumb-magnet');
if (m && drag.thumb === current) { m.classList.add('is-dragging'); place(m, drag.thumb, px, py); }
}, { passive: true });
window.addEventListener('mouseup', (e) => {
if (!drag) return;
const d = drag;
drag = null;
if (!d.moved) return;
d.thumb.classList.remove('thumb-dragging');
document.documentElement.classList.remove('thumb-drag-active');
const m = d.thumb.parentElement && d.thumb.parentElement.querySelector(':scope > .thumb-magnet');
// Spring back (the thumb's translate transition does the glide, slower and bouncier than the lean)
d.thumb.classList.add('thumb-returning');
clearTimeout(d.thumb._returnTimer);
d.thumb._returnTimer = setTimeout(() => d.thumb.classList.remove('thumb-returning'), 550);
d.thumb.style.setProperty('--pull-x', '0px');
d.thumb.style.setProperty('--pull-y', '0px');
if (m) {
m.classList.remove('is-dragging');
// Ring springs back on exactly the thumb's curve, so they stay together
m.classList.add('is-returning');
if (d.thumb === current) place(m, d.thumb);
clearTimeout(m._returnTimer);
m._returnTimer = setTimeout(() => m.classList.remove('is-returning'), 550);
}
// It was a drag, not a click: swallow the click that follows this mouseup
const swallow = (ev) => {
if (ev.target && ev.target.closest && ev.target.closest(THUMB_SEL) === d.thumb) {
ev.preventDefault();
ev.stopImmediatePropagation();
}
};
window.addEventListener('click', swallow, { capture: true, once: true });
setTimeout(() => window.removeEventListener('click', swallow, { capture: true }), 0);
// Released over another thumbnail (or outside the grid): hand the ring over now
const under = document.elementFromPoint(e.clientX, e.clientY);
const underThumb = under && under.closest && under.closest(THUMB_SEL);
if (underThumb && underThumb !== d.thumb) {
setTimeout(() => hoverTo(underThumb), 0);
} else if (!underThumb && d.thumb === current) {
if (m) m.classList.remove('is-on');
release(d.thumb);
current = null;
}
});
document.addEventListener('mousemove', (e) => {
if (!current || drag) return;
lastEvent = e;
if (rafId) return;
rafId = requestAnimationFrame(() => {
rafId = 0;
const t = current;
const ev = lastEvent;
if (!t || !ev || !t.isConnected) return;
const r = t.getBoundingClientRect();
const nx = ((ev.clientX - r.left) / r.width - 0.5) * 2; // -1 .. 1
const ny = ((ev.clientY - r.top) / r.height - 0.5) * 2;
if (Math.abs(nx) > 1.05 || Math.abs(ny) > 1.05) return;
const px = +(nx * PULL).toFixed(2);
const py = +(ny * PULL).toFixed(2);
t.style.setProperty('--pull-x', px + 'px');
t.style.setProperty('--pull-y', py + 'px');
const m = t.parentElement && t.parentElement.querySelector(':scope > .thumb-magnet');
if (m) place(m, t, px, py);
});
}, { passive: true });
// Keyboard (Tab, then arrow keys, which call .focus() on the thumbs): the ring glides to the focused
// thumbnail the same way it follows the mouse
document.addEventListener('focusin', (e) => {
const thumb = e.target && e.target.closest && e.target.closest(THUMB_SEL);
if (!thumb || thumb === current) return;
let kbd = true;
try { kbd = thumb.matches(':focus-visible'); } catch (_) {}
if (!kbd) return; // mouse click focus: mouseover already placed it
const m = magnetFor(thumb.parentElement);
const wasHidden = !m.classList.contains('is-on');
release(current);
current = thumb;
thumb.classList.add('magnet-target');
place(m, thumb, 0, 0, wasHidden);
m.classList.add('is-on');
});
document.addEventListener('focusout', (e) => {
const from = e.target && e.target.closest && e.target.closest(THUMB_SEL);
if (!from || from !== current) return;
const to = e.relatedTarget;
if (to && to.closest && to.closest(THUMB_SEL)) return; // focusin on the next thumb moves it
if (from.matches(':hover')) return; // mouse is still on it: keep the ring
const m = from.parentElement && from.parentElement.querySelector(':scope > .thumb-magnet');
if (m) m.classList.remove('is-on');
release(from);
current = null;
});
// Grid re-rendered / scrolled away under a resting cursor: forget the old thumb
window.addEventListener('scroll', () => {
if (current && !current.isConnected) current = null;
}, { passive: true, capture: true });
})();