Skip to content

Instantly share code, notes, and snippets.

@samuelcolvin

samuelcolvin/active.html

Last active January 1, 2025 16:43
Show Gist options
  • Save samuelcolvin/444e959724407de6190932add851c473 to your computer and use it in GitHub Desktop.
Save samuelcolvin/444e959724407de6190932add851c473 to your computer and use it in GitHub Desktop.
Download ZIP
checking if a page is active.
Raw
active.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Am I active</title>
</head>
<body>
<input name="testing"/>
<div class="context" style="margin-bottom: 100px">
<h2>Testing for activity detection</h2>
<h3>Header Level 3</h3>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<input name="testing"/>
<h3>Header Level 3</h3>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<input name="testing"/>
<h3>Header Level 3</h3>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<input name="testing"/>
</div>
<div id="visible" style="position: fixed; bottom: 40px; left: 0; background: indianred; width: 100%; padding: 10px">
loading...
</div>
<div id="status" style="position: fixed; bottom: 0; left: 0; background: lawngreen; width: 100%; height: 20px; padding: 10px">
loading...
</div>
<script>
const events = new Set();
const listeners = ['mouseover', 'scroll', 'keydown', 'touchstart', 'touchmove'].map(event => {
const fn = () => events.add(event);
window.addEventListener(event, fn);
return [event, fn];
});
let lastVisChange = Date.now();
const visChanges = []
let lastVisState = 'visible';
document.addEventListener('visibilitychange', () => {
const now = Date.now();
const diff = ((now - lastVisChange) / 1000).toFixed(0);
visChanges.push(`${lastVisState} for ${diff}s`);
lastVisChange = now;
lastVisState = document.visibilityState;
});
const status = document.getElementById('status');
status.textContent = 'active, waiting for events...';
const pageLoad = Date.now();
let lastActive = Date.now();
const intervalId = setInterval(() => {
if (events.size > 0) {
lastActive = Date.now();
status.textContent = `active: ${Array.from(events).join(', ')}`
events.clear();
} else {
const now = Date.now();
const diff = ((now - lastActive) / 1000).toFixed(0);
if (diff > 30) {
const timeOnPage = ((now - pageLoad) / 1000).toFixed(0);
status.textContent = `page inactive for ${diff}s, was active for ${timeOnPage}s`;
clearInterval(intervalId);
listeners.forEach(([event, fn]) => window.removeEventListener(event, fn));
} else {
status.textContent = `inactive for ${diff}s`;
}
}
status.textContent += ` ${visChanges.join(', ')}`;
}, 1000);
</script>
<script>
const visible = document.getElementById('visible');
let lastVisible = Date.now();
const visIntervalId = setInterval(() => {
if (document.visibilityState === 'visible') {
lastVisible = Date.now();
visible.textContent = 'visible';
} else {
const diff = ((Date.now() - lastVisible) / 1000).toFixed(0);
if (diff > 5) {
const timeOnPage = ((lastVisible - pageLoad) / 1000).toFixed(0);
visible.textContent = `page hidden for ${diff}s, was visible for ${timeOnPage}s`;
clearInterval(visIntervalId);
}
}
}, 1000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment