ifvisible
Version:
Crossbrowser & lightweight way to check if user is looking at the page or interacting with it. (wrapper around HTML5 visibility api)
1,243 lines (852 loc) • 50.3 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>ifvisible.coffee</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul class="sections">
<li id="title">
<div class="annotation">
<h1>ifvisible.coffee</h1>
</div>
</li>
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">¶</a>
</div>
</div>
<div class="content"><div class='highlight'><pre>(<span class="hljs-function"><span class="hljs-params">(root, factory)</span> -></span>
<span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> define <span class="hljs-keyword">is</span> <span class="hljs-string">'function'</span> <span class="hljs-keyword">and</span> define.amd</pre></div></div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">¶</a>
</div>
<p>AMD. Register as an anonymous module.</p>
</div>
<div class="content"><div class='highlight'><pre> define ->
factory()
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> exports <span class="hljs-keyword">is</span> <span class="hljs-string">'object'</span></pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">¶</a>
</div>
<p>Node. Does not work with strict CommonJS, but
only CommonJS-like enviroments that support module.exports,
like Node.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-built_in">module</span>.exports = factory()
<span class="hljs-keyword">else</span></pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">¶</a>
</div>
<p>Browser globals.</p>
</div>
<div class="content"><div class='highlight'><pre> root.ifvisible = factory()
)(<span class="hljs-keyword">this</span>, <span class="hljs-function">-></span></pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">¶</a>
</div>
<p>Export Object</p>
<pre><code>@type {Object}
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> ifvisible = {}</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-6">¶</a>
</div>
<p>document element</p>
<pre><code>@type {Document Object}
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> doc = <span class="hljs-built_in">document</span></pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-7">¶</a>
</div>
<p>flag to prevent multiple initializations</p>
<pre><code>@type {Boolean}`<span class="javascript"></span>
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> initialized = <span class="hljs-literal">false</span></pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-8">¶</a>
</div>
<p>Current status, may contain <code>active</code>, <code>idle</code>, <code>hidden</code></p>
<pre><code>@type {String}`<span class="javascript"></span>
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> status = <span class="hljs-string">"active"</span></pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-9">¶</a>
</div>
<p>Time to wait when setting page to idle</p>
<pre><code>@type {Number} <span class="hljs-keyword">in</span> miliseconds
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> idleTime = <span class="hljs-number">60000</span></pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-10">¶</a>
</div>
<p>To track how many time left to become IDLE I need to know
when we started keeping the time</p>
<pre><code>@type {Number} <span class="hljs-keyword">in</span> miliseconds
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> idleStartedTime = <span class="hljs-literal">false</span></pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-11">¶</a>
</div>
<h2 id="custome-event-handler">Custome Event Handler</h2>
</div>
</li>
<li id="section-12">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-12">¶</a>
</div>
<p>Handle Custom Object events</p>
<pre><code>@return {Object} add <span class="hljs-keyword">and</span> fire methods to handle custom events
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> customEvent = (<span class="hljs-function">-></span></pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-13">¶</a>
</div>
<p>Create a synthetic GUID</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-function"> <span class="hljs-title">S4</span> = -></span>
(((<span class="hljs-number">1</span>+Math.random())*<span class="hljs-number">0x10000</span>)|<span class="hljs-number">0</span>).toString(<span class="hljs-number">16</span>).substring(<span class="hljs-number">1</span>)
<span class="hljs-function">
<span class="hljs-title">guid</span> = -></span>
(S4()+S4()+<span class="hljs-string">"-"</span>+S4()+<span class="hljs-string">"-"</span>+S4()+<span class="hljs-string">"-"</span>+S4()+<span class="hljs-string">"-"</span>+S4()+S4()+S4())</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-14">¶</a>
</div>
<p>Event listeners</p>
<pre><code>@type {Object}
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> listeners = {}</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-15">¶</a>
</div>
<p>Name of the custom GUID property</p>
<pre><code>@type {String}
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> cgid = <span class="hljs-string">'__ceGUID'</span></pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-16">¶</a>
</div>
<p>Add a custom event to a given object</p>
<pre><code>@param {Object} obj Object to add custom events
@param {string} event name <span class="hljs-keyword">of</span> the custom event
@param {Function} callback callback function to run <span class="hljs-keyword">when</span>
event <span class="hljs-keyword">is</span> fired
</code></pre>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-function"> <span class="hljs-title">addCustomEvent</span> = <span class="hljs-params">(obj, event, callback)</span>-></span></pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-17">¶</a>
</div>
<p>Extent Objects with custom event GUID so that it will be hidden</p>
</div>
<div class="content"><div class='highlight'><pre> obj[cgid] = `<span class="javascript"><span class="hljs-literal">undefined</span></span>` <span class="hljs-comment"># it was using prototype before but diabled</span></pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-18">¶</a>
</div>
<p>We were using GUID here but it’s disabled to keep events object in scope</p>
</div>
<div class="content"><div class='highlight'><pre> obj[cgid] = <span class="hljs-string">"ifvisible.object.event.identifier"</span> <span class="hljs-keyword">unless</span> obj[cgid]</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-19">¶</a>
</div>
<p>create a place for event</p>
</div>
<div class="content"><div class='highlight'><pre> listeners[obj[cgid]] = {} <span class="hljs-keyword">unless</span> listeners[obj[cgid]]
listeners[obj[cgid]][event] = [] <span class="hljs-keyword">unless</span> listeners[obj[cgid]][event]</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-20">¶</a>
</div>
<p>add event</p>
</div>
<div class="content"><div class='highlight'><pre> listeners[obj[cgid]][event].push(callback)</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-21">¶</a>
</div>
<p>Trigger the custom event on given object</p>
<pre><code>@param {Object} obj Object to trigger the event
@param {string} event name <span class="hljs-keyword">of</span> the event to trigger
@param {object} memo a custom argument to send
triggered event
</code></pre>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-function"> <span class="hljs-title">fireCustomEvent</span> = <span class="hljs-params">(obj, event, memo)</span>-></span>
<span class="hljs-keyword">if</span> obj[cgid] <span class="hljs-keyword">and</span> listeners[obj[cgid]] <span class="hljs-keyword">and</span> listeners[obj[cgid]][event]
ev(memo <span class="hljs-keyword">or</span> {}) <span class="hljs-keyword">for</span> ev <span class="hljs-keyword">in</span> listeners[obj[cgid]][event]</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-22">¶</a>
</div>
<p>Remove a custom event from a given object</p>
<pre><code>@param {Object} obj Object to add custom events
@param {string} event name <span class="hljs-keyword">of</span> the custom event
@param {Function} callback Optional! When passed, removes only that
callback, otherwise removes all callbacks
</code></pre>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-function"> <span class="hljs-title">removeCustomEvent</span> = <span class="hljs-params">(obj, event, callback)</span>-></span></pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-23">¶</a>
</div>
<p>if callback was sent, find and remove only given callback</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> callback
<span class="hljs-keyword">if</span> obj[cgid] <span class="hljs-keyword">and</span> listeners[obj[cgid]] <span class="hljs-keyword">and</span> listeners[obj[cgid]][event]
<span class="hljs-keyword">for</span> cl, i <span class="hljs-keyword">in</span> listeners[obj[cgid]][event]
<span class="hljs-keyword">if</span> cl <span class="hljs-keyword">is</span> callback
listeners[obj[cgid]][event].splice(i, <span class="hljs-number">1</span>)
<span class="hljs-keyword">return</span> cl
<span class="hljs-keyword">else</span> <span class="hljs-comment"># otherwise remove all callbacks for given event</span>
<span class="hljs-keyword">if</span> obj[cgid] <span class="hljs-keyword">and</span> listeners[obj[cgid]] <span class="hljs-keyword">and</span> listeners[obj[cgid]][event]
<span class="hljs-keyword">delete</span> listeners[obj[cgid]][event]</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-24">¶</a>
</div>
<p>export methods to use</p>
</div>
<div class="content"><div class='highlight'><pre> add: addCustomEvent
remove: removeCustomEvent
fire: fireCustomEvent
)()</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-25">¶</a>
</div>
<h2 id="regular-event-handlers">Regular Event Handlers</h2>
</div>
</li>
<li id="section-26">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-26">¶</a>
</div>
<p>CrossBrowser event attachement</p>
<pre><code>@param {DomElement} el Dom Element to attach the event
@param {string} ev name <span class="hljs-keyword">of</span> the event with <span class="hljs-literal">on</span> prefix
@param {Function} fn callback function to run <span class="hljs-keyword">when</span> event
<span class="hljs-keyword">is</span> fired
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> addEvent = (<span class="hljs-function">-></span>
setListener = <span class="hljs-literal">false</span></pre></div></div>
</li>
<li id="section-27">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-27">¶</a>
</div>
<p>return an anonmous function with the correct version of set listener</p>
</div>
<div class="content"><div class='highlight'><pre> (el, ev, fn)->
<span class="hljs-keyword">if</span> <span class="hljs-keyword">not</span> setListener
<span class="hljs-keyword">if</span> el.addEventListener
<span class="hljs-function">
<span class="hljs-title">setListener</span> = <span class="hljs-params">(el, ev, fn)</span> -></span>
el.addEventListener(ev, fn, <span class="hljs-literal">false</span>)
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> el.attachEvent
<span class="hljs-function">
<span class="hljs-title">setListener</span> = <span class="hljs-params">(el, ev, fn)</span> -></span>
el.attachEvent(<span class="hljs-string">'on'</span> + ev, fn, <span class="hljs-literal">false</span>)
<span class="hljs-keyword">else</span>
<span class="hljs-function">
<span class="hljs-title">setListener</span> = <span class="hljs-params">(el, ev, fn)</span> -></span>
el[<span class="hljs-string">'on'</span> + ev] = fn
setListener(el, ev, fn)
)()</pre></div></div>
</li>
<li id="section-28">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-28">¶</a>
</div>
<p>Trigger any HTML events</p>
<pre><code>@param {DomElement} element Dom Element to trigger
events <span class="hljs-literal">on</span>
@param {string} event event name to trigger
@return {boolean} <span class="hljs-keyword">if</span> dispached <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span>
</code></pre>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-function"> <span class="hljs-title">fireEvent</span> = <span class="hljs-params">(element, event)</span> -></span>
<span class="hljs-keyword">if</span> doc.createEventObject
element.fireEvent(<span class="hljs-string">'on'</span>+event,evt)
<span class="hljs-keyword">else</span>
evt = doc.createEvent(<span class="hljs-string">'HTMLEvents'</span>)
evt.initEvent(event, <span class="hljs-literal">true</span>, <span class="hljs-literal">true</span>)
<span class="hljs-keyword">not</span> element.dispatchEvent(evt)</pre></div></div>
</li>
<li id="section-29">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-29">¶</a>
</div>
<h2 id="ie-detection">IE Detection</h2>
</div>
</li>
<li id="section-30">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-30">¶</a>
</div>
<p>Get the IE version</p>
<pre><code>@return {Number|Undefined} version number <span class="hljs-keyword">of</span> IE <span class="hljs-keyword">or</span> <span class="hljs-literal">undefined</span>
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> ie = (<span class="hljs-function">-></span>
undef = <span class="hljs-literal">undefined</span>
v = <span class="hljs-number">3</span>
div = doc.createElement(<span class="hljs-string">"div"</span>)
all = div.getElementsByTagName(<span class="hljs-string">"i"</span>)
<span class="hljs-function">
<span class="hljs-title">check</span> = -></span>
<span class="hljs-keyword">return</span> ((div.innerHTML = <span class="hljs-string">"<!--[if gt IE "</span> + (++v) +
<span class="hljs-string">"]><i></i><![endif]-->"</span>); all[<span class="hljs-number">0</span>])
<span class="hljs-keyword">while</span> check()
<span class="hljs-keyword">continue</span>
(<span class="hljs-keyword">if</span> v > <span class="hljs-number">4</span> <span class="hljs-keyword">then</span> v <span class="hljs-keyword">else</span> undef)
)()</pre></div></div>
</li>
<li id="section-31">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-31">¶</a>
</div>
<h2 id="get-html5-visibility-api-for-current-browser">Get HTML5 visibility api for current browser</h2>
</div>
</li>
<li id="section-32">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-32">¶</a>
</div>
<p>Set the name of the hidden property and the change event for visibility checks</p>
</div>
<div class="content"><div class='highlight'><pre> hidden = <span class="hljs-literal">false</span>
visibilityChange = <span class="hljs-literal">undefined</span></pre></div></div>
</li>
<li id="section-33">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-33">¶</a>
</div>
<p>Standarts</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> doc.hidden <span class="hljs-keyword">isnt</span> <span class="hljs-string">"undefined"</span>
hidden = <span class="hljs-string">"hidden"</span>
visibilityChange = <span class="hljs-string">"visibilitychange"</span></pre></div></div>
</li>
<li id="section-34">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-34">¶</a>
</div>
<p>For Gecko browsers</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> doc.mozHidden <span class="hljs-keyword">isnt</span> <span class="hljs-string">"undefined"</span>
hidden = <span class="hljs-string">"mozHidden"</span>
visibilityChange = <span class="hljs-string">"mozvisibilitychange"</span></pre></div></div>
</li>
<li id="section-35">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-35">¶</a>
</div>
<p>For MSIE</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> doc.msHidden <span class="hljs-keyword">isnt</span> <span class="hljs-string">"undefined"</span>
hidden = <span class="hljs-string">"msHidden"</span>
visibilityChange = <span class="hljs-string">"msvisibilitychange"</span></pre></div></div>
</li>
<li id="section-36">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-36">¶</a>
</div>
<p>For Webkit browsers</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> doc.webkitHidden <span class="hljs-keyword">isnt</span> <span class="hljs-string">"undefined"</span>
hidden = <span class="hljs-string">"webkitHidden"</span>
visibilityChange = <span class="hljs-string">"webkitvisibilitychange"</span></pre></div></div>
</li>
<li id="section-37">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-37">¶</a>
</div>
<p>Track if the page is idle or not</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-function"> <span class="hljs-title">trackIdleStatus</span> = -></span>
timer = []
<span class="hljs-function">
<span class="hljs-title">wakeUp</span> = -></span>
timer.map(clearTimeout);
ifvisible.wakeup() <span class="hljs-keyword">if</span> status <span class="hljs-keyword">isnt</span> <span class="hljs-string">"active"</span>
idleStartedTime = +(<span class="hljs-keyword">new</span> Date())
timer.push setTimeout(<span class="hljs-function">-></span>
ifvisible.idle() <span class="hljs-keyword">if</span> status <span class="hljs-keyword">is</span> <span class="hljs-string">"active"</span>
, idleTime)</pre></div></div>
</li>
<li id="section-38">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-38">¶</a>
</div>
<p>Call once so that it can set page to idle without doing anything</p>
</div>
<div class="content"><div class='highlight'><pre> wakeUp()
addEvent doc, <span class="hljs-string">"mousemove"</span>, wakeUp
addEvent doc, <span class="hljs-string">"keyup"</span>, wakeUp
addEvent doc, <span class="hljs-string">"touchstart"</span>, wakeUp
addEvent <span class="hljs-built_in">window</span>, <span class="hljs-string">"scroll"</span>, wakeUp</pre></div></div>
</li>
<li id="section-39">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-39">¶</a>
</div>
<p>If page got focus but noinput activity was recorded</p>
</div>
<div class="content"><div class='highlight'><pre> ifvisible.focus wakeUp
ifvisible.wakeup wakeUp</pre></div></div>
</li>
<li id="section-40">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-40">¶</a>
</div>
<h2 id="initialize-the-module">Initialize the module</h2>
</div>
</li>
<li id="section-41">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-41">¶</a>
</div>
<p>constructor</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-function"> <span class="hljs-title">init</span> = -></span>
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span> <span class="hljs-keyword">if</span> initialized</pre></div></div>
</li>
<li id="section-42">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-42">¶</a>
</div>
<p>If hidden is false the use the legacy methods</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> hidden <span class="hljs-keyword">is</span> <span class="hljs-literal">false</span>
blur = <span class="hljs-string">"blur"</span>
blur = <span class="hljs-string">"focusout"</span> <span class="hljs-keyword">if</span> ie < <span class="hljs-number">9</span>
addEvent <span class="hljs-built_in">window</span>, blur, <span class="hljs-function">-></span>
ifvisible.blur()
addEvent <span class="hljs-built_in">window</span>, <span class="hljs-string">"focus"</span>, <span class="hljs-function">-></span>
ifvisible.focus()
<span class="hljs-keyword">else</span></pre></div></div>
</li>
<li id="section-43">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-43">¶</a>
</div>
<p>add HTML5 visibility events</p>
</div>
<div class="content"><div class='highlight'><pre> addEvent doc, visibilityChange, <span class="hljs-function">-></span>
<span class="hljs-keyword">if</span> doc[hidden]
ifvisible.blur()
<span class="hljs-keyword">else</span>
ifvisible.focus()
, <span class="hljs-literal">false</span>
initialized = <span class="hljs-literal">true</span></pre></div></div>
</li>
<li id="section-44">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-44">¶</a>
</div>
<p>Set method to be initialized</p>
</div>
<div class="content"><div class='highlight'><pre> trackIdleStatus()</pre></div></div>
</li>
<li id="section-45">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-45">¶</a>
</div>
<h2 id="exports">Exports</h2>
</div>
</li>
<li id="section-46">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-46">¶</a>
</div>
<p>Methods to be exported</p>
<pre><code>@type {Object}
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> ifvisible =</pre></div></div>
</li>
<li id="section-47">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-47">¶</a>
</div>
<p>Change idle timeout value.</p>
<pre><code>@param {Number} seconds a number <span class="hljs-keyword">in</span> seconds such as: <span class="hljs-number">10</span> <span class="hljs-keyword">or</span> <span class="hljs-number">0.5</span>
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> setIdleDuration: <span class="hljs-function"><span class="hljs-params">(seconds)</span> -></span>
idleTime = seconds * <span class="hljs-number">1000</span></pre></div></div>
</li>
<li id="section-48">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-48">¶</a>
</div>
<p>Get idle timeout value.</p>
</div>
<div class="content"><div class='highlight'><pre> getIdleDuration: <span class="hljs-function">-></span>
idleTime</pre></div></div>
</li>
<li id="section-49">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-49">¶</a>
</div>
<p>Get information about user being idle.</p>
<pre><code>@return {Object} An object contining information about idle status
</code></pre><p>Informations is as following</p>
<pre><code>isIdle: [current idle status <span class="hljs-literal">true</span>/<span class="hljs-literal">false</span>]
idleFor: [how long the user was idle
<span class="hljs-keyword">in</span> milliseconds]
timeLeft: [How long does it take to become
idle <span class="hljs-keyword">in</span> milliseconds]
timeLeftPer: [How long does it take to become
idle <span class="hljs-keyword">in</span> percentage]
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> getIdleInfo: <span class="hljs-function">-></span>
now = +(<span class="hljs-keyword">new</span> Date())
res = {}
<span class="hljs-keyword">if</span> status <span class="hljs-keyword">is</span> <span class="hljs-string">"idle"</span>
res.isIdle = <span class="hljs-literal">true</span>
res.idleFor = now - idleStartedTime
res.timeLeft = <span class="hljs-number">0</span>
res.timeLeftPer = <span class="hljs-number">100</span>
<span class="hljs-keyword">else</span>
res.isIdle = <span class="hljs-literal">false</span>
res.idleFor = now - idleStartedTime
res.timeLeft = (idleStartedTime + idleTime) - now
res.timeLeftPer = (<span class="hljs-number">100</span> - (res.timeLeft * <span class="hljs-number">100</span> / idleTime)).toFixed(<span class="hljs-number">2</span>)
res</pre></div></div>
</li>
<li id="section-50">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-50">¶</a>
</div>
<p>When User Opens the page,</p>
<pre><code>@note: User may <span class="hljs-keyword">not</span> be looking at it directly
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> focus: <span class="hljs-function"><span class="hljs-params">(callback)</span> -></span></pre></div></div>
</li>
<li id="section-51">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-51">¶</a>
</div>
<p>if first argument is a callback then set an event</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> callback <span class="hljs-keyword">is</span> <span class="hljs-string">"function"</span>
@on(<span class="hljs-string">"focus"</span>, callback)
<span class="hljs-keyword">else</span></pre></div></div>
</li>
<li id="section-52">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-52">¶</a>
</div>
<p>else trigger event</p>
</div>
<div class="content"><div class='highlight'><pre> status = <span class="hljs-string">"active"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"focus"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"wakeup"</span> <span class="hljs-comment"># When focused page will woke up too.</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"statusChanged"</span>, { status: status }
@</pre></div></div>
</li>
<li id="section-53">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-53">¶</a>
</div>
<p>When User swicthes tabs or minimizes the window</p>
<pre><code>@note: <span class="hljs-keyword">this</span> may trigger <span class="hljs-keyword">when</span> iframes are selected
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> blur: <span class="hljs-function"><span class="hljs-params">(callback)</span> -></span></pre></div></div>
</li>
<li id="section-54">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-54">¶</a>
</div>
<p>if first argument is a callback then set an event</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> callback <span class="hljs-keyword">is</span> <span class="hljs-string">"function"</span>
@on(<span class="hljs-string">"blur"</span>, callback)
<span class="hljs-keyword">else</span></pre></div></div>
</li>
<li id="section-55">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-55">¶</a>
</div>
<p>else trigger event</p>
</div>
<div class="content"><div class='highlight'><pre> status = <span class="hljs-string">"hidden"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"blur"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"idle"</span> <span class="hljs-comment"># When blurred page is idle too</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"statusChanged"</span>, { status: status }
@</pre></div></div>
</li>
<li id="section-56">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-56">¶</a>
</div>
<p>When page is focused but user is doing nothing on the page</p>
</div>
<div class="content"><div class='highlight'><pre> idle: <span class="hljs-function"><span class="hljs-params">(callback)</span> -></span></pre></div></div>
</li>
<li id="section-57">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-57">¶</a>
</div>
<p>if first argument is a callback then set an event</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> callback <span class="hljs-keyword">is</span> <span class="hljs-string">"function"</span>
@on(<span class="hljs-string">"idle"</span>, callback)
<span class="hljs-keyword">else</span></pre></div></div>
</li>
<li id="section-58">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-58">¶</a>
</div>
<p>else trigger event</p>
</div>
<div class="content"><div class='highlight'><pre> status = <span class="hljs-string">"idle"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"idle"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"statusChanged"</span>, { status: status }
@</pre></div></div>
</li>
<li id="section-59">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-59">¶</a>
</div>
<p>When user started to make interactions on the page such as:
<code>mousemove</code>, <code>click</code>, <code>keypress</code>, <code>scroll</code>
This will be called when page has focus too</p>
</div>
<div class="content"><div class='highlight'><pre> wakeup: <span class="hljs-function"><span class="hljs-params">(callback)</span> -></span></pre></div></div>
</li>
<li id="section-60">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-60">¶</a>
</div>
<p>if first argument is a callback then set an event</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> <span class="hljs-keyword">typeof</span> callback <span class="hljs-keyword">is</span> <span class="hljs-string">"function"</span>
@on(<span class="hljs-string">"wakeup"</span>, callback)
<span class="hljs-keyword">else</span></pre></div></div>
</li>
<li id="section-61">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-61">¶</a>
</div>
<p>else trigger event</p>
</div>
<div class="content"><div class='highlight'><pre> status = <span class="hljs-string">"active"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"wakeup"</span>
customEvent.fire <span class="hljs-keyword">this</span>, <span class="hljs-string">"statusChanged"</span>, { status: status }
@</pre></div></div>
</li>
<li id="section-62">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-62">¶</a>
</div>
<p>Set an event to ifvisible object</p>
<pre><code>@param {string} name Event name such as focus,
idle, blur, wakeup
@param {Function} callback callback function to call
<span class="hljs-keyword">when</span> event <span class="hljs-keyword">is</span> fired
@return {object} an object with a stop method
to unbid <span class="hljs-keyword">this</span> event
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> on: <span class="hljs-function"><span class="hljs-params">(name, callback)</span> -></span>
init() <span class="hljs-comment"># Auto init on first call</span>
customEvent.add <span class="hljs-keyword">this</span>, name, callback
@</pre></div></div>
</li>
<li id="section-63">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-63">¶</a>
</div>
<p>Remove an event from ifvisible object</p>
<pre><code>@param {string} name Event name such as focus,
idle, blur, wakeup
@param {Function} callback Optional, <span class="hljs-keyword">if</span> passed, it will remove
only the given callback, <span class="hljs-keyword">if</span> empty will
remove all
@return {object} an object with a stop method
to unbid <span class="hljs-keyword">this</span> event
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> off: <span class="hljs-function"><span class="hljs-params">(name, callback)</span> -></span>
init() <span class="hljs-comment"># Auto init on first call</span>
customEvent.remove <span class="hljs-keyword">this</span>, name, callback
@</pre></div></div>
</li>
<li id="section-64">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-64">¶</a>
</div>
<p>if page is visible then run given code in given seconds of intervals</p>
<pre><code>@param {float} seconds seconds to run interval
@param {Function} callback callback function to run
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> onEvery: <span class="hljs-function"><span class="hljs-params">(seconds, callback)</span> -></span></pre></div></div>
</li>
<li id="section-65">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-65">¶</a>
</div>
<p>Auto init on first call</p>
</div>
<div class="content"><div class='highlight'><pre> init()
paused = <span class="hljs-literal">false</span>
t = setInterval(<span class="hljs-function">-></span>
callback() <span class="hljs-keyword">if</span> status <span class="hljs-keyword">is</span> <span class="hljs-string">"active"</span> && paused <span class="hljs-keyword">is</span> <span class="hljs-literal">false</span>
, seconds * <span class="hljs-number">1000</span>) <span class="hljs-keyword">if</span> callback</pre></div></div>
</li>
<li id="section-66">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-66">¶</a>
</div>
<p>return methods</p>
</div>
<div class="content"><div class='highlight'><pre> stop: <span class="hljs-function">-></span>
clearInterval t
pause: <span class="hljs-function">-></span>
paused = <span class="hljs-literal">true</span>
resume: <span class="hljs-function">-></span>
paused = <span class="hljs-literal">false</span>
code: t
callback: callback</pre></div></div>
</li>
<li id="section-67">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-67">¶</a>
</div>
<p><code>ifvisible.now()</code> return if the page is visible right now?</p>
<pre><code>@return {boolean} <span class="hljs-literal">true</span> <span class="hljs-keyword">if</span> page <span class="hljs-keyword">is</span> visible
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> now: <span class="hljs-function"><span class="hljs-params">(check)</span>-></span></pre></div></div>
</li>
<li id="section-68">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-68">¶</a>
</div>
<p>Auto init on first call</p>
</div>
<div class="content"><div class='highlight'><pre> init()
status <s