auto open and size about page

This commit is contained in:
Joe Lothan 2026-05-27 22:17:37 -04:00
parent bc06e79c6c
commit a60597157d
3 changed files with 30 additions and 22 deletions

View file

@ -124,8 +124,8 @@ function createRow(entries, rowIndex) {
row.className = "tab-row";
const pxPerSec = 15 + (rng() * 10); // 15-25 px/sec, consistent across screen sizes
const goLeft = rng() > 0.5;
const stagger = rng();
const goLeft = rowIndex === 0 ? true : rng() > 0.5;
const stagger = rowIndex === 0 ? 0 : rng();
// Store config — animation starts after DOM insertion (needs measured width)
row._animConfig = { pxPerSec, goLeft, stagger };
@ -221,8 +221,7 @@ async function loadMore() {
iframe_ok: true,
_isAbout: true,
};
const pos = Math.floor(rng() * Math.min(entries.length, tabsPerRow()));
entries.splice(pos, 0, aboutEntry);
entries.splice(0, 0, aboutEntry);
}
renderEntries(entries);
loadingEl.style.display = "none";
@ -232,8 +231,6 @@ async function loadMore() {
const aboutTab = container.querySelector(".tab-about");
if (aboutTab) {
aboutTab.click();
// Use smaller viewer for initial about page
if (activeViewer) activeViewer.classList.add("iframe-viewer-small");
}
}
}
@ -301,17 +298,18 @@ function openInlineViewer(tabEl, entry, url) {
// Build the viewer
const viewer = document.createElement("div");
viewer.className = "iframe-viewer";
const isAbout = entry._isAbout;
// Title bar
// Title bar (hidden on desktop, shown on mobile)
const titlebar = document.createElement("div");
titlebar.className = "iframe-titlebar";
titlebar.textContent = entry.title || entry.url;
viewer.appendChild(titlebar);
// Toolbar (address bar area)
const toolbar = document.createElement("div");
toolbar.className = "iframe-toolbar";
// URL bar pill
const urlbar = document.createElement("div");
urlbar.className = "iframe-urlbar";
@ -343,12 +341,27 @@ function openInlineViewer(tabEl, entry, url) {
close.addEventListener("click", closeInlineViewer);
toolbar.appendChild(close);
viewer.appendChild(toolbar);
const iframe = document.createElement("iframe");
iframe.sandbox = "allow-scripts allow-same-origin allow-forms";
iframe.src = url;
viewer.appendChild(titlebar);
viewer.appendChild(toolbar);
// About page: auto-size iframe to content height (same-origin)
if (isAbout) {
iframe.addEventListener("load", () => {
try {
const body = iframe.contentDocument.body;
const lastEl = body.lastElementChild;
const contentHeight = lastEl.offsetTop + lastEl.offsetHeight +
parseInt(getComputedStyle(body).marginTop) +
parseInt(getComputedStyle(body).marginBottom);
const chromeHeight = viewer.offsetHeight - iframe.clientHeight;
viewer.style.height = (contentHeight + chromeHeight) + "px";
} catch (e) {}
});
}
viewer.appendChild(iframe);
// Insert after the row
@ -356,8 +369,8 @@ function openInlineViewer(tabEl, entry, url) {
activeViewer = viewer;
activeRow = row;
// Scroll so the viewer is visible
viewer.scrollIntoView({ behavior: "smooth", block: "start" });
// Scroll so the tab row + viewer are visible
row.scrollIntoView({ behavior: "smooth", block: "start" });
}
function closeInlineViewer() {