fix: hover now peeks the preview even while a file is locked; remove the scroll-triggered sticky thumbnail
the scroll-triggered mini-preview from the last commit solved the wrong problem — it never showed in practice (images are generally as tall or taller than the short project texts, so the gap it needed never opened), and wasnt what was actually wanted: the existing left-column preview pane should keep responding to hover even once a file is locked, only reverting to the locked file once the mouse leaves the list. lock now only gates the is-selected styling, the ● locked indicator, and the click-to-navigate semantics on the portfolio index — not what the pane displays.
This commit is contained in:
kgva CMS
+46
-79
@@ -1,57 +1,14 @@
|
||||
/* tui file browser — preview pane (image OR text panes), hover + freeze +
|
||||
/* tui file browser — preview pane (image OR text panes), hover + lock +
|
||||
keyboard. re-binds itself after pjax navigation (document listeners are added
|
||||
once; rows/preview are re-queried per page). */
|
||||
(function () {
|
||||
"use strict";
|
||||
var rows = [], img = null, texts = [], cap = null, cur = 0, frozen = false, container = null, player = null, pv = null;
|
||||
var layout = null, mainPreview = null, sticky = null, stickyImg = null;
|
||||
var rows = [], img = null, texts = [], cap = null, cur = 0, locked = -1, container = null, player = null, pv = null;
|
||||
|
||||
function hideTexts() { texts.forEach(function (t) { t.hidden = true; }); }
|
||||
function showText(k) { texts.forEach(function (t) { t.hidden = (t.getAttribute("data-text") !== k); }); }
|
||||
function hidePlayer() { if (player) { player.hidden = true; if (pv && !pv.paused) pv.pause(); } }
|
||||
function showPlayer() { if (player) player.hidden = false; }
|
||||
function setFrozen(v) { frozen = v; if (container) container.classList.toggle("is-frozen", v); syncSticky(); }
|
||||
|
||||
// small pinned copy of the locked image, shown to the left of the text
|
||||
// column once the real preview has scrolled out of view — mirrors the
|
||||
// LOCKED row only (like the main preview already does once frozen), never
|
||||
// the hover state, and only for as long as there's still text alongside it.
|
||||
function ensureSticky() {
|
||||
if (sticky) return;
|
||||
sticky = document.createElement("div");
|
||||
sticky.className = "proj-sticky";
|
||||
stickyImg = document.createElement("img");
|
||||
stickyImg.alt = "";
|
||||
sticky.appendChild(stickyImg);
|
||||
document.body.appendChild(sticky);
|
||||
}
|
||||
function syncSticky() {
|
||||
if (!sticky) return;
|
||||
var a = frozen ? rows[cur] : null;
|
||||
var src = a ? a.getAttribute("data-img") : null;
|
||||
if (src && layout && mainPreview) {
|
||||
if (stickyImg.getAttribute("src") !== src) stickyImg.src = src;
|
||||
updateStickyVisibility();
|
||||
} else {
|
||||
sticky.classList.remove("is-visible");
|
||||
}
|
||||
}
|
||||
function updateStickyVisibility() {
|
||||
if (!sticky || !stickyImg.getAttribute("src") || !layout || !mainPreview) return;
|
||||
if (!window.matchMedia("(min-width: 1100px)").matches) { sticky.classList.remove("is-visible"); return; }
|
||||
var pr = mainPreview.getBoundingClientRect();
|
||||
var lr = layout.getBoundingClientRect();
|
||||
var show = pr.bottom < 0 && lr.bottom > 0;
|
||||
sticky.classList.toggle("is-visible", show);
|
||||
}
|
||||
var stickyTick = false;
|
||||
function onScrollOrResize() {
|
||||
if (stickyTick) return;
|
||||
stickyTick = true;
|
||||
requestAnimationFrame(function () { stickyTick = false; updateStickyVisibility(); });
|
||||
}
|
||||
window.addEventListener("scroll", onScrollOrResize, { passive: true });
|
||||
window.addEventListener("resize", onScrollOrResize);
|
||||
|
||||
// tell the shell to "type" the matching command. navigable rows (those with an
|
||||
// href: ".." and the portfolio project folders) are directories → `cd`; the
|
||||
@@ -73,16 +30,15 @@
|
||||
if (img.complete) img.style.opacity = "1"; // already cached → no fade
|
||||
}
|
||||
|
||||
function select(i, silent, scroll) {
|
||||
// renders row i into the preview pane. this runs on hover AND on lock —
|
||||
// hovering always drives what the pane shows, lock only decides what it
|
||||
// falls back to once the mouse leaves the list again.
|
||||
function render(i, silent, scroll) {
|
||||
if (!rows.length) return;
|
||||
if (i < 0) i = 0;
|
||||
if (i >= rows.length) i = rows.length - 1;
|
||||
cur = i;
|
||||
for (var r = 0; r < rows.length; r++) rows[r].classList.remove("is-selected");
|
||||
var a = rows[i];
|
||||
a.classList.add("is-selected");
|
||||
// only scroll for keyboard nav — scrolling on hover nudges edge rows out from
|
||||
// under the cursor, so the top/bottom row "sometimes" can't be clicked.
|
||||
if (scroll && a.scrollIntoView) a.scrollIntoView({ block: "nearest" });
|
||||
|
||||
var src = a.getAttribute("data-img");
|
||||
@@ -100,9 +56,17 @@
|
||||
cap.textContent = (n ? n.textContent.trim() : a.getAttribute("data-name")) + (y ? " " + y.textContent.trim() : "");
|
||||
}
|
||||
|
||||
if (!silent) ghostCmd(a); // echo into the shell, except on the initial load
|
||||
if (!silent) ghostCmd(a);
|
||||
}
|
||||
|
||||
function lock(i) {
|
||||
locked = i;
|
||||
for (var r = 0; r < rows.length; r++) rows[r].classList.remove("is-selected");
|
||||
if (rows[i]) rows[i].classList.add("is-selected");
|
||||
if (container) container.classList.toggle("is-frozen", locked >= 0);
|
||||
}
|
||||
function unlock() { lock(-1); }
|
||||
|
||||
function bind() {
|
||||
var list = document.querySelector(".filebrowser .tui__ls");
|
||||
container = list ? list.closest(".filebrowser") : null;
|
||||
@@ -112,38 +76,48 @@
|
||||
player = document.querySelector(".tui__preview .player");
|
||||
pv = player ? player.querySelector("video") : null;
|
||||
cap = document.querySelector(".tui__status");
|
||||
cur = 0; frozen = false;
|
||||
|
||||
layout = document.querySelector(".proj-layout");
|
||||
mainPreview = document.querySelector(".filebrowser .tui__preview");
|
||||
ensureSticky();
|
||||
sticky.classList.remove("is-visible");
|
||||
if (!rows.length) { layout = null; return; }
|
||||
cur = 0; locked = -1;
|
||||
if (!rows.length) return;
|
||||
|
||||
rows.forEach(function (a, i) {
|
||||
// portfolio-index rows are real links (data-img + href together) — a
|
||||
// single click there used to jump straight into the project, which
|
||||
// meant hovering was the only way to preview a different one first.
|
||||
// now the first click just previews it (same as the old hover did);
|
||||
// only a second click on the already-previewed row, or the preview
|
||||
// image itself, actually navigates.
|
||||
// now the first click just locks it (no navigation); only a second
|
||||
// click on the already-locked row, or the preview image itself,
|
||||
// actually navigates.
|
||||
var isProjectLink = a.hasAttribute("href") && a.hasAttribute("data-img");
|
||||
a.addEventListener("mouseenter", function () { if (!frozen) select(i); });
|
||||
a.addEventListener("mouseenter", function () { render(i); });
|
||||
a.addEventListener("click", function (e) {
|
||||
if (isProjectLink) {
|
||||
if (frozen && cur === i) return; // already previewed — let the link through
|
||||
if (locked === i) return; // already locked — let the link through
|
||||
e.preventDefault();
|
||||
select(i);
|
||||
setFrozen(true);
|
||||
lock(i);
|
||||
render(i, true);
|
||||
return;
|
||||
}
|
||||
if (a.getAttribute("href")) return; // ".." navigates normally
|
||||
e.preventDefault();
|
||||
if (frozen && cur === i) { setFrozen(false); ghostClear(); }
|
||||
else { select(i); setFrozen(true); }
|
||||
if (locked === i) { unlock(); ghostClear(); }
|
||||
else { lock(i); render(i, true); }
|
||||
});
|
||||
});
|
||||
|
||||
// leaving the list reverts the preview back to whatever is locked (or
|
||||
// to the initial file, if nothing is) — hover only ever peeks
|
||||
if (list) {
|
||||
list.addEventListener("mouseleave", function () {
|
||||
render(locked >= 0 ? locked : 0, true);
|
||||
});
|
||||
}
|
||||
|
||||
var start = rows.findIndex(function (a) { return a.classList.contains("is-selected"); });
|
||||
start = start < 0 ? 0 : start;
|
||||
render(start, true); // initial preview: don't echo into the shell yet
|
||||
// portfolio/about listings start locked on their first file — games stay
|
||||
// unlocked, there's nothing else to browse there
|
||||
if (container && !container.classList.contains("game-embed")) lock(start);
|
||||
|
||||
if (img) {
|
||||
img.onclick = function () {
|
||||
var a = rows[cur];
|
||||
@@ -154,12 +128,6 @@
|
||||
};
|
||||
}
|
||||
|
||||
var start = rows.findIndex(function (a) { return a.classList.contains("is-selected"); });
|
||||
select(start < 0 ? 0 : start, true); // initial selection: don't echo into the shell yet
|
||||
// portfolio/about listings start pre-locked on their first file, same as a
|
||||
// manual click — games stay hover-driven, there's nothing else to browse there
|
||||
if (container && !container.classList.contains("game-embed")) setFrozen(true);
|
||||
|
||||
// warm the cache so switching between gallery images is instant
|
||||
var srcs = rows.map(function (a) { return a.getAttribute("data-img"); }).filter(Boolean);
|
||||
if (srcs.length) {
|
||||
@@ -170,20 +138,19 @@
|
||||
|
||||
// one-time document listeners (reference the current bound state)
|
||||
// clicking elsewhere IN THE WIDGET (the preview image, blank space in the
|
||||
// list) releases the lock; clicks out in the text/page don't — now that
|
||||
// listings start locked, a click to read or select a word shouldn't kill
|
||||
// the sticky preview underneath it.
|
||||
// list) releases the lock; clicks out in the text/page don't — a click to
|
||||
// read or select a word shouldn't unlock the currently selected file.
|
||||
document.addEventListener("click", function (e) {
|
||||
if (e.target.closest && e.target.closest(".tui__ls a")) return;
|
||||
if (!(e.target.closest && e.target.closest(".filebrowser"))) return;
|
||||
if (frozen) { setFrozen(false); ghostClear(); }
|
||||
if (locked >= 0) { unlock(); ghostClear(); }
|
||||
});
|
||||
document.addEventListener("keydown", function (e) {
|
||||
var t = e.target;
|
||||
if (t && (t.isContentEditable || /^(input|textarea|select)$/i.test(t.tagName))) return;
|
||||
if (!rows.length) return;
|
||||
if (e.key === "ArrowDown") { e.preventDefault(); select(cur + 1, false, true); }
|
||||
else if (e.key === "ArrowUp") { e.preventDefault(); select(cur - 1, false, true); }
|
||||
if (e.key === "ArrowDown") { e.preventDefault(); render(cur + 1, false, true); }
|
||||
else if (e.key === "ArrowUp") { e.preventDefault(); render(cur - 1, false, true); }
|
||||
else if (e.key === "Enter") {
|
||||
var href = rows[cur] && rows[cur].getAttribute("href");
|
||||
if (href) { if (window.pjax) window.pjax(href); else window.location.href = href; }
|
||||
|
||||
Reference in New Issue
Block a user