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

better gated firefox specific code

Browse source
This commit is contained in:
Joe Lothan 2026-05-25 17:18:28 -04:00
parent 8ceb31bcbb
commit cb8d23842c
3 changed files with 28 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/about.html
View file

@ -34,7 +34,7 @@
<p>Click on a tab to visit the site and scroll down for more tabs. Some sites do not allow embedding so clicking them will open a new tab (in your browser) instead.</p> <p>Click on a tab to visit the site and scroll down for more tabs. Some sites do not allow embedding so clicking them will open a new tab (in your browser) instead.</p>
<p>Note that, just like the web itself, some sites are broken, profane, fake news, pornographic, trying to harvest your data, serving malware, or an affront to humanity itself. But some of them are pretty cool too.</p> <p>Note that, like the web itself, some sites are broken, profane, fake news, pornographic, trying to harvest your data, serving malware, or an affront to humanity itself. But some of them are pretty cool too.</p>
<p>EveryTab just shows a random slice of the web, in all its messy and beautiful glory.</p> <p>EveryTab just shows a random slice of the web, in all its messy and beautiful glory.</p>

20
frontend/index.html
View file

@ -162,8 +162,24 @@
right: 4px; right: 4px;
} }
/* Marquee animation driven by Web Animations API in site.js /* Marquee animations (Chrome/Safari — Firefox uses JS in site.js) */
(pixel-precise endpoints for seamless looping) */ .tab-row.scroll-left {
animation: marquee-left var(--speed) linear infinite;
}
.tab-row.scroll-right {
animation: marquee-right var(--speed) linear infinite;
}
@keyframes marquee-left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes marquee-right {
0% { transform: translateX(-50%); }
100% { transform: translateX(0); }
}
/* Inline iframe viewer */ /* Inline iframe viewer */
.iframe-viewer { .iframe-viewer {

18
frontend/site.js
View file

@ -118,6 +118,11 @@ function createRow(entries, rowIndex) {
// Store config — animation starts after DOM insertion (needs measured width) // Store config — animation starts after DOM insertion (needs measured width)
row._animConfig = { pxPerSec, goLeft, stagger }; row._animConfig = { pxPerSec, goLeft, stagger };
// CSS animation classes for Chrome/Safari (Firefox uses rAF in startRowAnimation)
if (!isFirefox) {
row.classList.add(goLeft ? "scroll-left" : "scroll-right");
}
// Add tabs twice so the marquee loops seamlessly (translate -50% = one full set) // Add tabs twice so the marquee loops seamlessly (translate -50% = one full set)
for (let copy = 0; copy < 2; copy++) { for (let copy = 0; copy < 2; copy++) {
for (const entry of entries) { for (const entry of entries) {
@ -151,15 +156,10 @@ function startRowAnimation(row) {
requestAnimationFrame(tick); requestAnimationFrame(tick);
} else { } else {
// Chrome/Safari: Web Animations API on the compositor // Chrome/Safari: CSS @keyframes animation with calculated duration
const duration = halfWidth / pxPerSec * 1000; const duration = halfWidth / pxPerSec;
const from = goLeft ? "translateX(0px)" : `translateX(-${halfWidth}px)`; row.style.setProperty("--speed", `${duration}s`);
const to = goLeft ? `translateX(-${halfWidth}px)` : "translateX(0px)"; row.style.animationDelay = `${-stagger * duration}s`;
row.animate(
[{ transform: from }, { transform: to }],
{ duration, iterations: Infinity, easing: "linear", iterationStart: stagger }
);
} }
} }