@rosskevin/ifvisible
Version:
Cross-browser, lightweight way to check if user is looking at the page or interacting with it. (wrapper around HTML5 visibility api)
112 lines (106 loc) • 3.88 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<meta name="HandheldFriendly" content="true" />
<link
href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css"
rel="stylesheet"
/>
<link
href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-responsive.min.css"
rel="stylesheet"
/>
<title>@rosskevin/ifvisible test page</title>
<script type="module">
import { ifvisible } from './index.js'
function d(el) {
return document.getElementById(el)
}
ifvisible.setIdleDuration(6)
ifvisible.on('statusChanged', function (e) {
d('result').innerHTML += e.status + '<br>'
})
ifvisible.idle(function () {
d('result2').innerHTML = '(-_-) Good bye. ZzzZZzz...'
document.body.style.opacity = 0.5
})
ifvisible.blur(function () {
d('result2').innerHTML = '(-_o) Where did you go?'
document.body.style.opacity = 0.5
})
ifvisible.wakeup(function () {
d('result2').innerHTML = '(O_o) Hey!, you woke me up.'
document.body.style.opacity = 1
})
ifvisible.onEvery(0.5, function () {
// Clock, as simple as it gets
var h = new Date().getHours()
var m = new Date().getMinutes()
var s = new Date().getSeconds()
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
// Update clock
d('result3').innerHTML = h + ':' + m + ':' + s
})
setInterval(function () {
var info = ifvisible.getIdleInfo()
// Give 3% margin to stabilaze user output
if (info.timeLeftPer < 3) {
info.timeLeftPer = 0
info.timeLeft = ifvisible.getIdleDuration()
}
;(d('seconds').innerHTML = parseInt(info.timeLeft / 1000)), 10
d('idlebar').style.width = info.timeLeftPer + '%'
}, 100)
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<h1>@rosskevin/ifvisible</h1>
</div>
<div class="row-fluid">
<div class="span6">
<p class="lead">
Idle duration is set to
<span id="idleTime" class="label label-warning">00 seconds</span>, so that you can see
the effect easily.
</p>
<ul>
<li>Try switching between tabs or minimizing the window. and look for the event log</li>
<li>Do nothing and wait for idle time to fill. Counter should stop.</li>
<li>While Idle, try moving the mouse or pressing any key. Page should wake up</li>
</ul>
<div class="well">
If you wait <span class="label label-warning" id="seconds">00</span> seconds I'll sleep.
<div class="progress">
<div class="bar" id="idlebar" style="width: 0%"></div>
</div>
<div id="result2">(^_^) Hey, there.</div>
</div>
<div class="well">
This simple clock <span id="result3" class="badge badge-info">0</span> is updated via
<code>onEvery</code> method. It should stop when page is not active (idle,hidden) and
should continue with current time when page is active.
</div>
</div>
<div class="span6">
<div id="result">
<p>Event log:</p>
</div>
</div>
</div>
<script type="text/javascript">
var dur = ifvisible.getIdleDuration() / 1000
d('seconds').innerHTML = dur
d('idleTime').innerHTML = dur + ' seconds'
</script>
</div>
</body>
</html>