joe/everytab
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated mobile to show title above

Browse source
This commit is contained in:
Joe Lothan 2026-05-26 02:02:21 -04:00
parent 5d80e38249
commit 02437a677c
2 changed files with 56 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

37
frontend/site.js
View file

@ -17,6 +17,8 @@ const loadingEl = document.getElementById("loading");
// Detect browser and OS, set classes on body for tab styling
function detectBrowser() {
const ua = navigator.userAgent;
// Mobile defaults to chrome styling
if (/iPhone|iPad|Android/.test(ua)) return "chrome";
if (ua.includes("Firefox")) return "firefox";
if (ua.includes("Edg/")) return "edge";
if (ua.includes("Safari") && !ua.includes("Chrome") && !ua.includes("CriOS")) return "safari";
@ -155,7 +157,9 @@ function startRowAnimation(row) {
let pos = stagger * halfWidth;
let lastTime = null;
row._rafId = true;
function tick(now) {
if (row._paused) { lastTime = null; requestAnimationFrame(tick); return; }
if (lastTime === null) { lastTime = now; requestAnimationFrame(tick); return; }
pos += ((now - lastTime) / 1000) * pxPerSec;
lastTime = now;
@ -260,6 +264,7 @@ window.addEventListener("scroll", async () => {
// Inline iframe viewer
let activeViewer = null;
let activeTab = null;
let activeRow = null;
function openInlineViewer(tabEl, entry, url) {
// Close existing viewer
@ -272,10 +277,25 @@ function openInlineViewer(tabEl, entry, url) {
// Find the row this tab belongs to
const row = tabEl.closest(".tab-row");
// Pause the marquee on the selected tab's row
row.classList.add("paused");
if (row._rafId) {
// Firefox rAF: store paused state
row._paused = true;
} else {
// CSS animation: getAnimations() to pause
row.getAnimations().forEach(a => a.pause());
}
// Build the viewer
const viewer = document.createElement("div");
viewer.className = "iframe-viewer";
// Title bar
const titlebar = document.createElement("div");
titlebar.className = "iframe-titlebar";
titlebar.textContent = entry.title || entry.url;
// Toolbar (address bar area)
const toolbar = document.createElement("div");
toolbar.className = "iframe-toolbar";
@ -306,12 +326,6 @@ function openInlineViewer(tabEl, entry, url) {
toolbar.appendChild(urlbar);
// Mobile: title shown above the URL bar (hidden on desktop via CSS)
const mobileTitle = document.createElement("span");
mobileTitle.className = "url-title-mobile";
mobileTitle.textContent = entry.title || "";
toolbar.appendChild(mobileTitle);
const close = document.createElement("button");
close.className = "iframe-close";
close.textContent = "✕";
@ -322,12 +336,14 @@ function openInlineViewer(tabEl, entry, url) {
iframe.sandbox = "allow-scripts allow-same-origin allow-forms";
iframe.src = url;
viewer.appendChild(titlebar);
viewer.appendChild(toolbar);
viewer.appendChild(iframe);
// Insert after the row
row.after(viewer);
activeViewer = viewer;
activeRow = row;
// Scroll so the viewer is visible
viewer.scrollIntoView({ behavior: "smooth", block: "start" });
@ -338,6 +354,15 @@ function closeInlineViewer() {
activeViewer.remove();
activeViewer = null;
}
if (activeRow) {
activeRow.classList.remove("paused");
if (activeRow._paused) {
activeRow._paused = false;
} else {
activeRow.getAnimations().forEach(a => a.play());
}
activeRow = null;
}
if (activeTab) {
activeTab.classList.remove("tab-active");
activeTab = null;