[Pkg-javascript-commits] [node-ifvisible.js] 01/01: Import Upstream version 1.0.6
Daniel Ring
techwolf-guest at moszumanska.debian.org
Sat Dec 23 11:05:26 UTC 2017
This is an automated email from the git hooks/post-receive script.
techwolf-guest pushed a commit to annotated tag upstream/1.0.6
in repository node-ifvisible.js.
commit 585c90baccbec37296cc33980b33262a6883836e
Author: Daniel Ring <dring at wolfishly.me>
Date: Fri Dec 22 23:00:45 2017 -0800
Import Upstream version 1.0.6
---
.gitignore | 15 +
.jshintrc | 13 +
Gruntfile.js | 54 ++
LICENSE.md | 21 +
README.md | 122 ++++
bower.json | 6 +
docs/docco.css | 506 +++++++++++++
docs/ifvisible.html | 1253 +++++++++++++++++++++++++++++++++
docs/public/fonts/aller-bold.eot | Bin 0 -> 29804 bytes
docs/public/fonts/aller-bold.ttf | Bin 0 -> 66836 bytes
docs/public/fonts/aller-bold.woff | Bin 0 -> 33244 bytes
docs/public/fonts/aller-light.eot | Bin 0 -> 29509 bytes
docs/public/fonts/aller-light.ttf | Bin 0 -> 68620 bytes
docs/public/fonts/aller-light.woff | Bin 0 -> 33124 bytes
docs/public/fonts/fleurons.eot | Bin 0 -> 35557 bytes
docs/public/fonts/fleurons.ttf | Bin 0 -> 64772 bytes
docs/public/fonts/fleurons.woff | Bin 0 -> 36284 bytes
docs/public/fonts/novecento-bold.eot | Bin 0 -> 18190 bytes
docs/public/fonts/novecento-bold.ttf | Bin 0 -> 48136 bytes
docs/public/fonts/novecento-bold.woff | Bin 0 -> 20576 bytes
docs/public/fonts/roboto-black.eot | Bin 0 -> 20702 bytes
docs/public/fonts/roboto-black.ttf | Bin 0 -> 44828 bytes
docs/public/fonts/roboto-black.woff | Bin 0 -> 24536 bytes
docs/public/images/gray.png | Bin 0 -> 56906 bytes
docs/public/stylesheets/normalize.css | 375 ++++++++++
ifvisible.d.ts | 157 +++++
package.json | 48 ++
src/ifvisible.coffee | 452 ++++++++++++
src/ifvisible.js | 315 +++++++++
src/ifvisible.js.map | 10 +
src/ifvisible.min.js | 1 +
tests/index.html | 93 +++
32 files changed, 3441 insertions(+)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c957bac
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,15 @@
+# SublimeText project files
+*.sublime-workspace
+*.sublime-project
+
+node_modules
+
+# Vim
+.*.s[a-w][a-z]
+*.un~
+Session.vim
+.netrwhist
+*~
+*.log
+
+.sublime-*
diff --git a/.jshintrc b/.jshintrc
new file mode 100644
index 0000000..6c3f5d1
--- /dev/null
+++ b/.jshintrc
@@ -0,0 +1,13 @@
+{
+ "boss": true,
+ "undef": false,
+ "white": false,
+ "eqeqeq": false,
+ "browser": true,
+ "devel": true,
+ "bitwise": false,
+ "quotmark": false,
+ "camelcase": false,
+ "strict": false,
+ "trailing": true
+}
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..35907c5
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,54 @@
+module.exports = function(grunt) {
+
+ grunt.initConfig({
+ pkg: grunt.file.readJSON('package.json'),
+
+ watch: {
+ coffee: {
+ files: ['src/*.coffee'],
+ tasks: ['coffee:compile'],
+ options: {
+ spawn: false,
+ interrupt: true
+ }
+ }
+ },
+
+ coffee: {
+ compile: {
+ options: {
+ sourceMap: true
+ },
+ files: {
+ 'src/ifvisible.js': 'src/ifvisible.coffee'
+ }
+ }
+ },
+
+ uglify: {
+ build: {
+ files: {
+ 'src/ifvisible.min.js': ['src/ifvisible.js']
+ }
+ }
+ },
+
+ docco: {
+ build: {
+ src: ['src/ifvisible.coffee'],
+ options: {
+ output: 'docs/'
+ }
+ }
+ }
+ });
+
+ grunt.loadNpmTasks('grunt-contrib-coffee');
+ grunt.loadNpmTasks('grunt-contrib-uglify');
+ grunt.loadNpmTasks('grunt-contrib-watch');
+ grunt.loadNpmTasks('grunt-docco');
+
+ grunt.registerTask('default', function (spec) {
+ grunt.task.run(['coffee:compile', 'uglify:build', 'docco:build']);
+ });
+};
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..97e6532
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) [2013] [Serkan Yersen]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9fb6175
--- /dev/null
+++ b/README.md
@@ -0,0 +1,122 @@
+ifvisible.js
+------------
+
+Crossbrowser & lightweight way to check if user is looking at the page or interacting with it.
+
+#### Check out the [Demo](http://serkanyersen.github.com/ifvisible.js/demo.html) or read below for code example or Check [Annotated Source](http://serkanyersen.github.com/ifvisible.js/docs/ifvisible.html)
+
+
+## Installation
+From npm
+```
+npm install ifvisible.js --save
+```
+
+From Bower
+```
+bower install ifvisible.js
+```
+
+For Meteor
+```
+mrt add ifvisible
+```
+> meteor package is provided by [@frozeman](https://github.com/frozeman/meteor-ifvisible.js) via [Atmosphere](https://atmosphere.meteor.com/package/ifvisible)
+
+## Examples
+
+```javascript
+
+// If page is visible right now
+if( ifvisible.now() ){
+ // Display pop-up
+ openPopUp();
+}
+
+// You can also check the page status
+// using `now` method
+if( !ifvisible.now('hidden') ){
+ // Display pop-up if page is not hidden
+ openPopUp();
+}
+
+// Possible statuses are:
+// idle: when user has no interaction
+// hidden: page is not visible
+// active: page is visible and user is active
+
+```
+
+Handle tab switch or browser minimize states
+
+```javascript
+
+ifvisible.on("blur", function(){
+ // example code here..
+ animations.pause();
+});
+
+ifvisible.on("focus", function(){
+ // resume all animations
+ animations.resume();
+});
+
+```
+
+ifvisible.js can handle activity states too, such as being IDLE or ACTIVE on the page
+
+```javascript
+
+ifvisible.on("idle", function(){
+ // Stop auto updating the live data
+ stream.pause();
+});
+
+ifvisible.on("wakeup", function(){
+ // go back updating data
+ stream.resume();
+});
+
+```
+
+Default idle duration is 60 seconds but you can change it with `setIdleDuration` method
+
+```javascript
+
+ifvisible.setIdleDuration(120); // Page will become idle after 120 seconds
+
+```
+
+You can manually trigger status events by calling them directly or you can set events with their names by giving first argument as a callback
+
+```javascript
+
+ifvisible.idle(); // will put page in a idle status
+
+ifvisible.idle(function(){
+ // This code will work when page goes into idle status
+});
+
+// other methods are
+ifvisible.blur(); // will trigger idle event as well
+ifvisible.idle();
+
+ifvisible.focus(); // Will trigger wakeup event as well
+ifvisible.wakeup();
+```
+
+You can set your smart intervals with ifvisible.js, if user is IDLE or not seeing the page the interval will automatically stop itself
+
+```javascript
+
+// If page is visible run this function on every half seconds
+ifvisible.onEvery(0.5, function(){
+ // Do an animation on the logo only when page is visible
+ animateLogo();
+
+});
+
+```
+
+### License
+It's MIT, Go crazy.
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..3208d64
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,6 @@
+{
+ "name": "ifvisible.js",
+ "version": "1.0.4",
+ "main": "./src/ifvisible.js",
+ "ignore": []
+}
diff --git a/docs/docco.css b/docs/docco.css
new file mode 100644
index 0000000..a2899ac
--- /dev/null
+++ b/docs/docco.css
@@ -0,0 +1,506 @@
+/*--------------------- Typography ----------------------------*/
+
+ at font-face {
+ font-family: 'aller-light';
+ src: url('public/fonts/aller-light.eot');
+ src: url('public/fonts/aller-light.eot?#iefix') format('embedded-opentype'),
+ url('public/fonts/aller-light.woff') format('woff'),
+ url('public/fonts/aller-light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+ at font-face {
+ font-family: 'aller-bold';
+ src: url('public/fonts/aller-bold.eot');
+ src: url('public/fonts/aller-bold.eot?#iefix') format('embedded-opentype'),
+ url('public/fonts/aller-bold.woff') format('woff'),
+ url('public/fonts/aller-bold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+ at font-face {
+ font-family: 'novecento-bold';
+ src: url('public/fonts/novecento-bold.eot');
+ src: url('public/fonts/novecento-bold.eot?#iefix') format('embedded-opentype'),
+ url('public/fonts/novecento-bold.woff') format('woff'),
+ url('public/fonts/novecento-bold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+/*--------------------- Layout ----------------------------*/
+html { height: 100%; }
+body {
+ font-family: "aller-light";
+ font-size: 14px;
+ line-height: 18px;
+ color: #30404f;
+ margin: 0; padding: 0;
+ height:100%;
+}
+#container { min-height: 100%; }
+
+a {
+ color: #000;
+}
+
+b, strong {
+ font-weight: normal;
+ font-family: "aller-bold";
+}
+
+p {
+ margin: 15px 0 0px;
+}
+ .annotation ul, .annotation ol {
+ margin: 25px 0;
+ }
+ .annotation ul li, .annotation ol li {
+ font-size: 14px;
+ line-height: 18px;
+ margin: 10px 0;
+ }
+
+h1, h2, h3, h4, h5, h6 {
+ color: #112233;
+ line-height: 1em;
+ font-weight: normal;
+ font-family: "novecento-bold";
+ text-transform: uppercase;
+ margin: 30px 0 15px 0;
+}
+
+h1 {
+ margin-top: 40px;
+}
+
+hr {
+ border: 0;
+ background: 1px #ddd;
+ height: 1px;
+ margin: 20px 0;
+}
+
+pre, tt, code {
+ font-size: 12px; line-height: 16px;
+ font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
+ margin: 0; padding: 0;
+}
+ .annotation pre {
+ display: block;
+ margin: 0;
+ padding: 7px 10px;
+ background: #fcfcfc;
+ -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
+ -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
+ box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
+ overflow-x: auto;
+ }
+ .annotation pre code {
+ border: 0;
+ padding: 0;
+ background: transparent;
+ }
+
+
+blockquote {
+ border-left: 5px solid #ccc;
+ margin: 0;
+ padding: 1px 0 1px 1em;
+}
+ .sections blockquote p {
+ font-family: Menlo, Consolas, Monaco, monospace;
+ font-size: 12px; line-height: 16px;
+ color: #999;
+ margin: 10px 0 0;
+ white-space: pre-wrap;
+ }
+
+ul.sections {
+ list-style: none;
+ padding:0 0 5px 0;;
+ margin:0;
+}
+
+/*
+ Force border-box so that % widths fit the parent
+ container without overlap because of margin/padding.
+
+ More Info : http://www.quirksmode.org/css/box.html
+*/
+ul.sections > li > div {
+ -moz-box-sizing: border-box; /* firefox */
+ -ms-box-sizing: border-box; /* ie */
+ -webkit-box-sizing: border-box; /* webkit */
+ -khtml-box-sizing: border-box; /* konqueror */
+ box-sizing: border-box; /* css3 */
+}
+
+
+/*---------------------- Jump Page -----------------------------*/
+#jump_to, #jump_page {
+ margin: 0;
+ background: white;
+ -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
+ -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
+ font: 16px Arial;
+ cursor: pointer;
+ text-align: right;
+ list-style: none;
+}
+
+#jump_to a {
+ text-decoration: none;
+}
+
+#jump_to a.large {
+ display: none;
+}
+#jump_to a.small {
+ font-size: 22px;
+ font-weight: bold;
+ color: #676767;
+}
+
+#jump_to, #jump_wrapper {
+ position: fixed;
+ right: 0; top: 0;
+ padding: 10px 15px;
+ margin:0;
+}
+
+#jump_wrapper {
+ display: none;
+ padding:0;
+}
+
+#jump_to:hover #jump_wrapper {
+ display: block;
+}
+
+#jump_page {
+ padding: 5px 0 3px;
+ margin: 0 0 25px 25px;
+}
+
+#jump_page .source {
+ display: block;
+ padding: 15px;
+ text-decoration: none;
+ border-top: 1px solid #eee;
+}
+
+#jump_page .source:hover {
+ background: #f5f5ff;
+}
+
+#jump_page .source:first-child {
+}
+
+/*---------------------- Low resolutions (> 320px) ---------------------*/
+ at media only screen and (min-width: 320px) {
+ .pilwrap { display: none; }
+
+ ul.sections > li > div {
+ display: block;
+ padding:5px 10px 0 10px;
+ }
+
+ ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
+ padding-left: 30px;
+ }
+
+ ul.sections > li > div.content {
+ overflow-x:auto;
+ -webkit-box-shadow: inset 0 0 5px #e5e5ee;
+ box-shadow: inset 0 0 5px #e5e5ee;
+ border: 1px solid #dedede;
+ margin:5px 10px 5px 10px;
+ padding-bottom: 5px;
+ }
+
+ ul.sections > li > div.annotation pre {
+ margin: 7px 0 7px;
+ padding-left: 15px;
+ }
+
+ ul.sections > li > div.annotation p tt, .annotation code {
+ background: #f8f8ff;
+ border: 1px solid #dedede;
+ font-size: 12px;
+ padding: 0 0.2em;
+ }
+}
+
+/*---------------------- (> 481px) ---------------------*/
+ at media only screen and (min-width: 481px) {
+ #container {
+ position: relative;
+ }
+ body {
+ background-color: #F5F5FF;
+ font-size: 15px;
+ line-height: 21px;
+ }
+ pre, tt, code {
+ line-height: 18px;
+ }
+ p, ul, ol {
+ margin: 0 0 15px;
+ }
+
+
+ #jump_to {
+ padding: 5px 10px;
+ }
+ #jump_wrapper {
+ padding: 0;
+ }
+ #jump_to, #jump_page {
+ font: 10px Arial;
+ text-transform: uppercase;
+ }
+ #jump_page .source {
+ padding: 5px 10px;
+ }
+ #jump_to a.large {
+ display: inline-block;
+ }
+ #jump_to a.small {
+ display: none;
+ }
+
+
+
+ #background {
+ position: absolute;
+ top: 0; bottom: 0;
+ width: 350px;
+ background: #fff;
+ border-right: 1px solid #e5e5ee;
+ z-index: -1;
+ }
+
+ ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
+ padding-left: 40px;
+ }
+
+ ul.sections > li {
+ white-space: nowrap;
+ }
+
+ ul.sections > li > div {
+ display: inline-block;
+ }
+
+ ul.sections > li > div.annotation {
+ max-width: 350px;
+ min-width: 350px;
+ min-height: 5px;
+ padding: 13px;
+ overflow-x: hidden;
+ white-space: normal;
+ vertical-align: top;
+ text-align: left;
+ }
+ ul.sections > li > div.annotation pre {
+ margin: 15px 0 15px;
+ padding-left: 15px;
+ }
+
+ ul.sections > li > div.content {
+ padding: 13px;
+ vertical-align: top;
+ border: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+
+ .pilwrap {
+ position: relative;
+ display: inline;
+ }
+
+ .pilcrow {
+ font: 12px Arial;
+ text-decoration: none;
+ color: #454545;
+ position: absolute;
+ top: 3px; left: -20px;
+ padding: 1px 2px;
+ opacity: 0;
+ -webkit-transition: opacity 0.2s linear;
+ }
+ .for-h1 .pilcrow {
+ top: 47px;
+ }
+ .for-h2 .pilcrow, .for-h3 .pilcrow, .for-h4 .pilcrow {
+ top: 35px;
+ }
+
+ ul.sections > li > div.annotation:hover .pilcrow {
+ opacity: 1;
+ }
+}
+
+/*---------------------- (> 1025px) ---------------------*/
+ at media only screen and (min-width: 1025px) {
+
+ body {
+ font-size: 16px;
+ line-height: 24px;
+ }
+
+ #background {
+ width: 525px;
+ }
+ ul.sections > li > div.annotation {
+ max-width: 525px;
+ min-width: 525px;
+ padding: 10px 25px 1px 50px;
+ }
+ ul.sections > li > div.content {
+ padding: 9px 15px 16px 25px;
+ }
+}
+
+/*---------------------- Syntax Highlighting -----------------------------*/
+
+td.linenos { background-color: #f0f0f0; padding-right: 10px; }
+span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
+/*
+
+github.com style (c) Vasily Polovnyov <vast at whiteants.net>
+
+*/
+
+pre code {
+ display: block; padding: 0.5em;
+ color: #000;
+ background: #f8f8ff
+}
+
+pre .hljs-comment,
+pre .hljs-template_comment,
+pre .hljs-diff .hljs-header,
+pre .hljs-javadoc {
+ color: #408080;
+ font-style: italic
+}
+
+pre .hljs-keyword,
+pre .hljs-assignment,
+pre .hljs-literal,
+pre .hljs-css .hljs-rule .hljs-keyword,
+pre .hljs-winutils,
+pre .hljs-javascript .hljs-title,
+pre .hljs-lisp .hljs-title,
+pre .hljs-subst {
+ color: #954121;
+ /*font-weight: bold*/
+}
+
+pre .hljs-number,
+pre .hljs-hexcolor {
+ color: #40a070
+}
+
+pre .hljs-string,
+pre .hljs-tag .hljs-value,
+pre .hljs-phpdoc,
+pre .hljs-tex .hljs-formula {
+ color: #219161;
+}
+
+pre .hljs-title,
+pre .hljs-id {
+ color: #19469D;
+}
+pre .hljs-params {
+ color: #00F;
+}
+
+pre .hljs-javascript .hljs-title,
+pre .hljs-lisp .hljs-title,
+pre .hljs-subst {
+ font-weight: normal
+}
+
+pre .hljs-class .hljs-title,
+pre .hljs-haskell .hljs-label,
+pre .hljs-tex .hljs-command {
+ color: #458;
+ font-weight: bold
+}
+
+pre .hljs-tag,
+pre .hljs-tag .hljs-title,
+pre .hljs-rules .hljs-property,
+pre .hljs-django .hljs-tag .hljs-keyword {
+ color: #000080;
+ font-weight: normal
+}
+
+pre .hljs-attribute,
+pre .hljs-variable,
+pre .hljs-instancevar,
+pre .hljs-lisp .hljs-body {
+ color: #008080
+}
+
+pre .hljs-regexp {
+ color: #B68
+}
+
+pre .hljs-class {
+ color: #458;
+ font-weight: bold
+}
+
+pre .hljs-symbol,
+pre .hljs-ruby .hljs-symbol .hljs-string,
+pre .hljs-ruby .hljs-symbol .hljs-keyword,
+pre .hljs-ruby .hljs-symbol .hljs-keymethods,
+pre .hljs-lisp .hljs-keyword,
+pre .hljs-tex .hljs-special,
+pre .hljs-input_number {
+ color: #990073
+}
+
+pre .hljs-builtin,
+pre .hljs-constructor,
+pre .hljs-built_in,
+pre .hljs-lisp .hljs-title {
+ color: #0086b3
+}
+
+pre .hljs-preprocessor,
+pre .hljs-pi,
+pre .hljs-doctype,
+pre .hljs-shebang,
+pre .hljs-cdata {
+ color: #999;
+ font-weight: bold
+}
+
+pre .hljs-deletion {
+ background: #fdd
+}
+
+pre .hljs-addition {
+ background: #dfd
+}
+
+pre .hljs-diff .hljs-change {
+ background: #0086b3
+}
+
+pre .hljs-chunk {
+ color: #aaa
+}
+
+pre .hljs-tex .hljs-formula {
+ opacity: 0.5;
+}
diff --git a/docs/ifvisible.html b/docs/ifvisible.html
new file mode 100644
index 0000000..159b609
--- /dev/null
+++ b/docs/ifvisible.html
@@ -0,0 +1,1253 @@
+<!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><span class="hljs-property">@type</span> {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><span class="hljs-property">@type</span> {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><span class="hljs-property">@type</span> {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><span class="hljs-property">@type</span> {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><span class="hljs-property">@type</span> {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><span class="hljs-property">@type</span> {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><span class="hljs-property">@return</span> {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><span class="hljs-property">@type</span> {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><span class="hljs-property">@type</span> {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><span class="hljs-property">@param</span> {Object} obj Object to add custom events
+<span class="hljs-property">@param</span> {string} event name <span class="hljs-keyword">of</span> the custom event
+<span class="hljs-property">@param</span> {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><span class="hljs-property">@param</span> {Object} obj Object to trigger the event
+<span class="hljs-property">@param</span> {string} event name <span class="hljs-keyword">of</span> the event to trigger
+<span class="hljs-property">@param</span> {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><span class="hljs-property">@param</span> {Object} obj Object to add custom events
+<span class="hljs-property">@param</span> {string} event name <span class="hljs-keyword">of</span> the custom event
+<span class="hljs-property">@param</span> {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> <span class="hljs-attribute">add</span>: addCustomEvent
+ <span class="hljs-attribute">remove</span>: removeCustomEvent
+ <span class="hljs-attribute">fire</span>: 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><span class="hljs-property">@param</span> {DomElement} el Dom Element to attach the event
+<span class="hljs-property">@param</span> {string} ev name <span class="hljs-keyword">of</span> the event with <span class="hljs-literal">on</span> prefix
+<span class="hljs-property">@param</span> {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><span class="hljs-property">@param</span> {DomElement} element Dom Element to trigger
+ events <span class="hljs-literal">on</span>
+<span class="hljs-property">@param</span> {string} event event name to trigger
+<span class="hljs-property">@return</span> {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><span class="hljs-property">@return</span> {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-literal">false</span>
+<span class="hljs-function"> <span class="hljs-title">wakeUp</span> = -></span>
+ clearTimeout timer
+ 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 = 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><span class="hljs-property">@type</span> {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><span class="hljs-property">@param</span> {Number} seconds a number <span class="hljs-keyword">in</span> seconds such <span class="hljs-attribute">as</span>: <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> <span class="hljs-attribute">setIdleDuration</span>: <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> <span class="hljs-attribute">getIdleDuration</span>: <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><span class="hljs-property">@return</span> {Object} An object contining information about idle status
+</code></pre><p>Informations is as following</p>
+<pre><code><span class="hljs-attribute">isIdle</span>: [current idle status <span class="hljs-literal">true</span>/<span class="hljs-literal">false</span>]
+<span class="hljs-attribute">idleFor</span>: [how long the user was idle
+ <span class="hljs-keyword">in</span> milliseconds]
+<span class="hljs-attribute">timeLeft</span>: [How long does it take to become
+ idle <span class="hljs-keyword">in</span> milliseconds]
+<span class="hljs-attribute">timeLeftPer</span>: [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> <span class="hljs-attribute">getIdleInfo</span>: <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><span class="hljs-property">@note</span>: User may <span class="hljs-keyword">not</span> be looking at it directly
+</code></pre>
+ </div>
+
+ <div class="content"><div class='highlight'><pre> <span class="hljs-attribute">focus</span>: <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>
+ <span class="hljs-property">@on</span>(<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>, { <span class="hljs-attribute">status</span>: 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><span class="hljs-property">@note</span>: <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> <span class="hljs-attribute">blur</span>: <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>
+ <span class="hljs-property">@on</span>(<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>, { <span class="hljs-attribute">status</span>: 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> <span class="hljs-attribute">idle</span>: <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>
+ <span class="hljs-property">@on</span>(<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>, { <span class="hljs-attribute">status</span>: 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> <span class="hljs-attribute">wakeup</span>: <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>
+ <span class="hljs-property">@on</span>(<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>, { <span class="hljs-attribute">status</span>: 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><span class="hljs-property">@param</span> {string} name Event name such as focus,
+ idle, blur, wakeup
+<span class="hljs-property">@param</span> {Function} callback callback function to call
+ <span class="hljs-keyword">when</span> event <span class="hljs-keyword">is</span> fired
+<span class="hljs-property">@return</span> {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> <span class="hljs-attribute">on</span>: <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><span class="hljs-property">@param</span> {string} name Event name such as focus,
+ idle, blur, wakeup
+<span class="hljs-property">@param</span> {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
+<span class="hljs-property">@return</span> {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> <span class="hljs-attribute">off</span>: <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><span class="hljs-property">@param</span> {float} seconds seconds to run interval
+<span class="hljs-property">@param</span> {Function} callback callback function to run
+</code></pre>
+ </div>
+
+ <div class="content"><div class='highlight'><pre> <span class="hljs-attribute">onEvery</span>: <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> <span class="hljs-attribute">stop</span>: <span class="hljs-function">-></span>
+ clearInterval t
+
+ <span class="hljs-attribute">pause</span>: <span class="hljs-function">-></span>
+ paused = <span class="hljs-literal">true</span>
+
+ <span class="hljs-attribute">resume</span>: <span class="hljs-function">-></span>
+ paused = <span class="hljs-literal">false</span>
+
+ <span class="hljs-attribute">code</span>: t
+ <span class="hljs-attribute">callback</span>: 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><span class="hljs-property">@return</span> {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> <span class="hljs-attribute">now</span>: <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 <span class="hljs-keyword">is</span> (check <span class="hljs-keyword">or</span> <span class="hljs-string">"active"</span>)
+
+ <span class="hljs-keyword">return</span> ifvisible
+)</pre></div></div>
+
+ </li>
+
+ </ul>
+ </div>
+</body>
+</html>
diff --git a/docs/public/fonts/aller-bold.eot b/docs/public/fonts/aller-bold.eot
new file mode 100644
index 0000000..1b32532
Binary files /dev/null and b/docs/public/fonts/aller-bold.eot differ
diff --git a/docs/public/fonts/aller-bold.ttf b/docs/public/fonts/aller-bold.ttf
new file mode 100644
index 0000000..dc4cc9c
Binary files /dev/null and b/docs/public/fonts/aller-bold.ttf differ
diff --git a/docs/public/fonts/aller-bold.woff b/docs/public/fonts/aller-bold.woff
new file mode 100644
index 0000000..fa16fd0
Binary files /dev/null and b/docs/public/fonts/aller-bold.woff differ
diff --git a/docs/public/fonts/aller-light.eot b/docs/public/fonts/aller-light.eot
new file mode 100644
index 0000000..40bd654
Binary files /dev/null and b/docs/public/fonts/aller-light.eot differ
diff --git a/docs/public/fonts/aller-light.ttf b/docs/public/fonts/aller-light.ttf
new file mode 100644
index 0000000..c2c7290
Binary files /dev/null and b/docs/public/fonts/aller-light.ttf differ
diff --git a/docs/public/fonts/aller-light.woff b/docs/public/fonts/aller-light.woff
new file mode 100644
index 0000000..81a09d1
Binary files /dev/null and b/docs/public/fonts/aller-light.woff differ
diff --git a/docs/public/fonts/fleurons.eot b/docs/public/fonts/fleurons.eot
new file mode 100755
index 0000000..26189bb
Binary files /dev/null and b/docs/public/fonts/fleurons.eot differ
diff --git a/docs/public/fonts/fleurons.ttf b/docs/public/fonts/fleurons.ttf
new file mode 100755
index 0000000..7b1b017
Binary files /dev/null and b/docs/public/fonts/fleurons.ttf differ
diff --git a/docs/public/fonts/fleurons.woff b/docs/public/fonts/fleurons.woff
new file mode 100755
index 0000000..10b7e1a
Binary files /dev/null and b/docs/public/fonts/fleurons.woff differ
diff --git a/docs/public/fonts/novecento-bold.eot b/docs/public/fonts/novecento-bold.eot
new file mode 100644
index 0000000..98a9a7f
Binary files /dev/null and b/docs/public/fonts/novecento-bold.eot differ
diff --git a/docs/public/fonts/novecento-bold.ttf b/docs/public/fonts/novecento-bold.ttf
new file mode 100644
index 0000000..2af39b0
Binary files /dev/null and b/docs/public/fonts/novecento-bold.ttf differ
diff --git a/docs/public/fonts/novecento-bold.woff b/docs/public/fonts/novecento-bold.woff
new file mode 100644
index 0000000..de558b5
Binary files /dev/null and b/docs/public/fonts/novecento-bold.woff differ
diff --git a/docs/public/fonts/roboto-black.eot b/docs/public/fonts/roboto-black.eot
new file mode 100755
index 0000000..571ed49
Binary files /dev/null and b/docs/public/fonts/roboto-black.eot differ
diff --git a/docs/public/fonts/roboto-black.ttf b/docs/public/fonts/roboto-black.ttf
new file mode 100755
index 0000000..e0300b3
Binary files /dev/null and b/docs/public/fonts/roboto-black.ttf differ
diff --git a/docs/public/fonts/roboto-black.woff b/docs/public/fonts/roboto-black.woff
new file mode 100755
index 0000000..642e5b6
Binary files /dev/null and b/docs/public/fonts/roboto-black.woff differ
diff --git a/docs/public/images/gray.png b/docs/public/images/gray.png
new file mode 100644
index 0000000..6eb6669
Binary files /dev/null and b/docs/public/images/gray.png differ
diff --git a/docs/public/stylesheets/normalize.css b/docs/public/stylesheets/normalize.css
new file mode 100644
index 0000000..73abb76
--- /dev/null
+++ b/docs/public/stylesheets/normalize.css
@@ -0,0 +1,375 @@
+/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+ HTML5 display definitions
+ ========================================================================== */
+
+/*
+ * Corrects `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+ display: block;
+}
+
+/*
+ * Corrects `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+ display: inline-block;
+}
+
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/*
+ * Addresses styling for `hidden` attribute not present in IE 8/9.
+ */
+
+[hidden] {
+ display: none;
+}
+
+/* ==========================================================================
+ Base
+ ========================================================================== */
+
+/*
+ * 1. Sets default font family to sans-serif.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ * user zoom.
+ */
+
+html {
+ font-family: sans-serif; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+ -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * Removes default margin.
+ */
+
+body {
+ margin: 0;
+}
+
+/* ==========================================================================
+ Links
+ ========================================================================== */
+
+/*
+ * Addresses `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+ outline: thin dotted;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+/* ==========================================================================
+ Typography
+ ========================================================================== */
+
+/*
+ * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
+ * Safari 5, and Chrome.
+ */
+
+h1 {
+ font-size: 2em;
+}
+
+/*
+ * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+ font-weight: bold;
+}
+
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE 8/9.
+ */
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+
+/*
+ * Corrects font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, serif;
+ font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+
+pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+/*
+ * Sets consistent quote types.
+ */
+
+q {
+ quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/*
+ * Addresses inconsistent and variable font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+/* ==========================================================================
+ Embedded content
+ ========================================================================== */
+
+/*
+ * Removes border when inside `a` element in IE 8/9.
+ */
+
+img {
+ border: 0;
+}
+
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* ==========================================================================
+ Figures
+ ========================================================================== */
+
+/*
+ * Addresses margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+ margin: 0;
+}
+
+/* ==========================================================================
+ Forms
+ ========================================================================== */
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+ border: 0; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/*
+ * 1. Corrects font family not being inherited in all browsers.
+ * 2. Corrects font size not being inherited in all browsers.
+ * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
+ */
+
+button,
+input,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 2 */
+ margin: 0; /* 3 */
+}
+
+/*
+ * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+ line-height: normal;
+}
+
+/*
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ * `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+}
+
+/*
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+input[disabled] {
+ cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to `content-box` in IE 8/9.
+ * 2. Removes excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ * (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box; /* 2 */
+ box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE 8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+
+textarea {
+ overflow: auto; /* 1 */
+ vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+ Tables
+ ========================================================================== */
+
+/*
+ * Remove most spacing between table cells.
+ */
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
\ No newline at end of file
diff --git a/ifvisible.d.ts b/ifvisible.d.ts
new file mode 100644
index 0000000..67f9329
--- /dev/null
+++ b/ifvisible.d.ts
@@ -0,0 +1,157 @@
+declare module "ifvisible" {
+ module iVisible {
+ interface onEveryReturn {
+ /**
+ * Callback function you passed to onEvery
+ */
+ callback: () => void;
+ /**
+ * Timer Id of setInterval
+ */
+ code: number;
+
+ /**
+ * Stop the interval, you cannot resume
+ */
+ stop(): boolean;
+
+ /**
+ * Pauses the interval, it's resumable
+ */
+ pause(): boolean;
+
+ /**
+ * Resumes paused interval
+ */
+ resume(): boolean;
+ }
+
+ interface IdleInfo {
+ /**
+ * if page idle now?
+ */
+ isIdle: boolean,
+
+ /**
+ * How long was the page idle in milliseconds
+ */
+ idleFor: number,
+
+ /**
+ * How much time left to become idle in milliseconds
+ */
+ timeLeft: number,
+
+ /**
+ * How much time left to become idle represented as percentage
+ */
+ timeLeftPer: string
+ }
+
+ export interface IfVisible {
+ /**
+ * Registers a callback function to blur event
+ * @param callback function to run when event fires
+ */
+ blur(callback: () => void): iVisible.IfVisible;
+
+ /**
+ * Triggers the blur event
+ */
+ blur(): iVisible.IfVisible;
+
+ /**
+ * Registers a callback function to focus event
+ * @param callback function to run when event fires
+ */
+ focus(callback: () => void): iVisible.IfVisible;
+
+ /**
+ * Triggers the focus event
+ */
+ focus(): iVisible.IfVisible;
+
+ /**
+ * Registers a callback function to idle event
+ * @param callback function to run when event fires
+ */
+ idle(callback: () => void): iVisible.IfVisible;
+
+ /**
+ * Triggers the idle event
+ */
+ idle(): iVisible.IfVisible;
+
+ /**
+ * Registers a callback function to wakeup event
+ * @param callback function to run when event fires
+ */
+ wakeup(callback: () => void): iVisible.IfVisible;
+
+ /**
+ * Triggers the wakeup event
+ */
+ wakeup(): iVisible.IfVisible;
+
+ /**
+ * Register any event
+ * @param name Name of the event
+ * @param callback Function to run when event fires
+ */
+ on(name: string, callback: (status?: string) => void): number;
+
+ /**
+ * Unregister given event of name
+ * @param name name of the event
+ * @param handler function to remove from registered events
+ */
+ off(name: string, handler: Function): void;
+
+ /**
+ * Unregister all event of given name
+ * @param name Name to unregister all events of
+ */
+ off(name: string): void;
+
+ /**
+ * Returns the current duration time in milliseconds
+ */
+ getIdleDuration(): number;
+
+ /**
+ * Returns detailed information about current idle status
+ */
+ getIdleInfo(): IdleInfo;
+
+ /**
+ * Given the event, it check if page is in that state for example
+ * ifvisible.now('idle') return boolean to state if you are idle or not
+ */
+ now(check: string): boolean;
+
+ /**
+ * Tells if page is visible or not at the moment
+ */
+ now(): boolean;
+
+ /**
+ * Utility to run a given function at every given seconds intervals.
+ * This method is smart and it will stop executing when the page is not active
+ * @param seconds duration to wait between each interval in seconds
+ * @param callback callback function run on every iteration
+ */
+ onEvery(seconds: number, callback: () => void): onEveryReturn;
+
+ /**
+ * Let's you change duration that page becomes idle dynamically
+ * @param seconds new duration in seconds
+ */
+ setIdleDuration(seconds: number): number;
+ }
+ }
+
+ var iv : iVisible.IfVisible;
+
+ export = iv;
+
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d591a6c
--- /dev/null
+++ b/package.json
@@ -0,0 +1,48 @@
+{
+ "name": "ifvisible.js",
+ "version": "1.0.6",
+ "description": "Crossbrowser & lightweight way to check if user is looking at the page or interacting with it. (wrapper around HTML5 visibility api)",
+ "main": "src/ifvisible.js",
+ "directories": {
+ "doc": "docs",
+ "test": "tests"
+ },
+ "scripts": {
+ "test": "node tests/tests.js"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git://github.com/serkanyersen/ifvisible.js.git"
+ },
+ "typescript": {
+ "definition": "ifvisible.d.ts"
+ },
+ "keywords": [
+ "visibility",
+ "HTML5",
+ "cross",
+ "browser",
+ "api",
+ "UI",
+ "idle",
+ "status",
+ "mousemove",
+ "reading",
+ "mode",
+ "tab",
+ "change"
+ ],
+ "author": "Serkan Yersen <serkanyersen at gmail.com> (http://serkan.io/)",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/serkanyersen/ifvisible.js/issues"
+ },
+ "homepage": "https://github.com/serkanyersen/ifvisible.js",
+ "devDependencies": {
+ "grunt": "^0.4.5",
+ "grunt-contrib-coffee": "^0.13.0",
+ "grunt-contrib-uglify": "^0.9.1",
+ "grunt-contrib-watch": "^0.6.1",
+ "grunt-docco": "^0.3.3"
+ }
+}
diff --git a/src/ifvisible.coffee b/src/ifvisible.coffee
new file mode 100644
index 0000000..cd3e237
--- /dev/null
+++ b/src/ifvisible.coffee
@@ -0,0 +1,452 @@
+((root, factory) ->
+ if typeof define is 'function' and define.amd
+ # AMD. Register as an anonymous module.
+ define ->
+ factory()
+ else if typeof exports is 'object'
+ # Node. Does not work with strict CommonJS, but
+ # only CommonJS-like enviroments that support module.exports,
+ # like Node.
+ module.exports = factory()
+ else
+ # Browser globals.
+ root.ifvisible = factory()
+)(this, ->
+ # Export Object
+ # ```
+ # @type {Object}
+ # ```
+ ifvisible = {}
+
+ # document element
+ # ```
+ # @type {Document Object}
+ # ```
+ doc = document
+
+ # flag to prevent multiple initializations
+ # ```
+ # @type {Boolean}`
+ # ```
+ initialized = false
+
+ # Current status, may contain `active`, `idle`, `hidden`
+ # ```
+ # @type {String}`
+ # ```
+ status = "active"
+
+ # Time to wait when setting page to idle
+ # ```
+ # @type {Number} in miliseconds
+ # ```
+ idleTime = 60000
+
+ # To track how many time left to become IDLE I need to know
+ # when we started keeping the time
+ # ```
+ # @type {Number} in miliseconds
+ # ```
+ idleStartedTime = false
+
+ # ## Custome Event Handler
+
+ # Handle Custom Object events
+ # ```
+ # @return {Object} add and fire methods to handle custom events
+ # ```
+ customEvent = (->
+ # Create a synthetic GUID
+ S4 = ->
+ (((1+Math.random())*0x10000)|0).toString(16).substring(1)
+ guid = ->
+ (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4())
+
+ # Event listeners
+ # ```
+ # @type {Object}
+ # ```
+ listeners = {}
+
+ # Name of the custom GUID property
+ # ```
+ # @type {String}
+ # ```
+ cgid = '__ceGUID'
+
+ # Add a custom event to a given object
+ # ```
+ # @param {Object} obj Object to add custom events
+ # @param {string} event name of the custom event
+ # @param {Function} callback callback function to run when
+ # event is fired
+ # ```
+ addCustomEvent = (obj, event, callback)->
+ # Extent Objects with custom event GUID so that it will be hidden
+ obj[cgid] = `undefined` # it was using prototype before but diabled
+ # We were using GUID here but it's disabled to keep events object in scope
+ obj[cgid] = "ifvisible.object.event.identifier" unless obj[cgid]
+ # create a place for event
+ listeners[obj[cgid]] = {} unless listeners[obj[cgid]]
+ listeners[obj[cgid]][event] = [] unless listeners[obj[cgid]][event]
+ # add event
+ listeners[obj[cgid]][event].push(callback)
+
+ # Trigger the custom event on given object
+ # ```
+ # @param {Object} obj Object to trigger the event
+ # @param {string} event name of the event to trigger
+ # @param {object} memo a custom argument to send
+ # triggered event
+ # ```
+ fireCustomEvent = (obj, event, memo)->
+ if obj[cgid] and listeners[obj[cgid]] and listeners[obj[cgid]][event]
+ ev(memo or {}) for ev in listeners[obj[cgid]][event]
+
+ # Remove a custom event from a given object
+ # ```
+ # @param {Object} obj Object to add custom events
+ # @param {string} event name of the custom event
+ # @param {Function} callback Optional! When passed, removes only that
+ # callback, otherwise removes all callbacks
+ # ```
+ removeCustomEvent = (obj, event, callback)->
+ # if callback was sent, find and remove only given callback
+ if callback
+ if obj[cgid] and listeners[obj[cgid]] and listeners[obj[cgid]][event]
+ for cl, i in listeners[obj[cgid]][event]
+ if cl is callback
+ listeners[obj[cgid]][event].splice(i, 1)
+ return cl
+ else # otherwise remove all callbacks for given event
+ if obj[cgid] and listeners[obj[cgid]] and listeners[obj[cgid]][event]
+ delete listeners[obj[cgid]][event]
+
+ # export methods to use
+ add: addCustomEvent
+ remove: removeCustomEvent
+ fire: fireCustomEvent
+ )()
+
+ # ## Regular Event Handlers
+
+ # CrossBrowser event attachement
+ # ```
+ # @param {DomElement} el Dom Element to attach the event
+ # @param {string} ev name of the event with on prefix
+ # @param {Function} fn callback function to run when event
+ # is fired
+ # ```
+ addEvent = (->
+ setListener = false
+ # return an anonmous function with the correct version of set listener
+ (el, ev, fn)->
+ if not setListener
+ if el.addEventListener
+ setListener = (el, ev, fn) ->
+ el.addEventListener(ev, fn, false)
+ else if el.attachEvent
+ setListener = (el, ev, fn) ->
+ el.attachEvent('on' + ev, fn, false)
+ else
+ setListener = (el, ev, fn) ->
+ el['on' + ev] = fn
+ setListener(el, ev, fn)
+ )()
+
+ # Trigger any HTML events
+ # ```
+ # @param {DomElement} element Dom Element to trigger
+ # events on
+ # @param {string} event event name to trigger
+ # @return {boolean} if dispached or not
+ # ```
+ fireEvent = (element, event) ->
+ if doc.createEventObject
+ element.fireEvent('on'+event,evt)
+ else
+ evt = doc.createEvent('HTMLEvents')
+ evt.initEvent(event, true, true)
+ not element.dispatchEvent(evt)
+
+ # ## IE Detection
+
+ # Get the IE version
+ # ```
+ # @return {Number|Undefined} version number of IE or undefined
+ # ```
+ ie = (->
+ undef = undefined
+ v = 3
+ div = doc.createElement("div")
+ all = div.getElementsByTagName("i")
+
+ check = ->
+ return ((div.innerHTML = "<!--[if gt IE " + (++v) +
+ "]><i></i><![endif]-->"); all[0])
+
+ while check()
+ continue
+
+ (if v > 4 then v else undef)
+ )()
+
+ # ## Get HTML5 visibility api for current browser
+
+ # Set the name of the hidden property and the change event for visibility checks
+ hidden = false
+ visibilityChange = undefined
+ # Standarts
+ if typeof doc.hidden isnt "undefined"
+ hidden = "hidden"
+ visibilityChange = "visibilitychange"
+ # For Gecko browsers
+ else if typeof doc.mozHidden isnt "undefined"
+ hidden = "mozHidden"
+ visibilityChange = "mozvisibilitychange"
+ # For MSIE
+ else if typeof doc.msHidden isnt "undefined"
+ hidden = "msHidden"
+ visibilityChange = "msvisibilitychange"
+ # For Webkit browsers
+ else if typeof doc.webkitHidden isnt "undefined"
+ hidden = "webkitHidden"
+ visibilityChange = "webkitvisibilitychange"
+
+
+ # Track if the page is idle or not
+ trackIdleStatus = ->
+ timer = false
+ wakeUp = ->
+ clearTimeout timer
+ ifvisible.wakeup() if status isnt "active"
+ idleStartedTime = +(new Date())
+ timer = setTimeout(->
+ ifvisible.idle() if status is "active"
+ , idleTime)
+
+ # Call once so that it can set page to idle without doing anything
+ wakeUp()
+ addEvent doc, "mousemove", wakeUp
+ addEvent doc, "keyup", wakeUp
+ addEvent doc, "touchstart", wakeUp
+ addEvent window, "scroll", wakeUp
+ # If page got focus but noinput activity was recorded
+ ifvisible.focus wakeUp
+ ifvisible.wakeup wakeUp
+
+ # ## Initialize the module
+
+ # constructor
+ init = ->
+ return true if initialized
+
+ # If hidden is false the use the legacy methods
+ if hidden is false
+ blur = "blur"
+ blur = "focusout" if ie < 9
+ addEvent window, blur, ->
+ ifvisible.blur()
+
+ addEvent window, "focus", ->
+ ifvisible.focus()
+
+ else
+
+ # add HTML5 visibility events
+ addEvent doc, visibilityChange, ->
+ if doc[hidden]
+ ifvisible.blur()
+ else
+ ifvisible.focus()
+ , false
+ initialized = true
+
+ #Set method to be initialized
+ trackIdleStatus()
+
+ # ## Exports
+
+ # Methods to be exported
+ # ```
+ # @type {Object}
+ # ```
+ ifvisible =
+
+ # Change idle timeout value.
+ # ```
+ # @param {Number} seconds a number in seconds such as: 10 or 0.5
+ # ```
+ setIdleDuration: (seconds) ->
+ idleTime = seconds * 1000
+
+
+ # Get idle timeout value.
+ getIdleDuration: ->
+ idleTime
+
+
+ # Get information about user being idle.
+ # ```
+ # @return {Object} An object contining information about idle status
+ # ```
+ # Informations is as following
+ # ```
+ # isIdle: [current idle status true/false]
+ # idleFor: [how long the user was idle
+ # in milliseconds]
+ # timeLeft: [How long does it take to become
+ # idle in milliseconds]
+ # timeLeftPer: [How long does it take to become
+ # idle in percentage]
+ # ```
+ getIdleInfo: ->
+ now = +(new Date())
+ res = {}
+ if status is "idle"
+ res.isIdle = true
+ res.idleFor = now - idleStartedTime
+ res.timeLeft = 0
+ res.timeLeftPer = 100
+ else
+ res.isIdle = false
+ res.idleFor = now - idleStartedTime
+ res.timeLeft = (idleStartedTime + idleTime) - now
+ res.timeLeftPer = (100 - (res.timeLeft * 100 / idleTime)).toFixed(2)
+ res
+
+
+ # When User Opens the page,
+ # ```
+ # @note: User may not be looking at it directly
+ # ```
+ focus: (callback) ->
+
+ # if first argument is a callback then set an event
+ if typeof callback is "function"
+ @on("focus", callback)
+ else
+ # else trigger event
+ status = "active"
+ customEvent.fire this, "focus"
+ customEvent.fire this, "wakeup" # When focused page will woke up too.
+ customEvent.fire this, "statusChanged", { status: status }
+ @
+
+
+ # When User swicthes tabs or minimizes the window
+ # ```
+ # @note: this may trigger when iframes are selected
+ # ```
+ blur: (callback) ->
+
+ # if first argument is a callback then set an event
+ if typeof callback is "function"
+ @on("blur", callback)
+ else
+ # else trigger event
+ status = "hidden"
+ customEvent.fire this, "blur"
+ customEvent.fire this, "idle" # When blurred page is idle too
+ customEvent.fire this, "statusChanged", { status: status }
+ @
+
+
+ # When page is focused but user is doing nothing on the page
+ idle: (callback) ->
+
+ # if first argument is a callback then set an event
+ if typeof callback is "function"
+ @on("idle", callback)
+ else
+ # else trigger event
+ status = "idle"
+ customEvent.fire this, "idle"
+ customEvent.fire this, "statusChanged", { status: status }
+ @
+
+
+ # When user started to make interactions on the page such as:
+ # `mousemove`, `click`, `keypress`, `scroll`
+ # This will be called when page has focus too
+ wakeup: (callback) ->
+
+ # if first argument is a callback then set an event
+ if typeof callback is "function"
+ @on("wakeup", callback)
+ else
+ # else trigger event
+ status = "active"
+ customEvent.fire this, "wakeup"
+ customEvent.fire this, "statusChanged", { status: status }
+ @
+
+ # Set an event to ifvisible object
+ # ```
+ # @param {string} name Event name such as focus,
+ # idle, blur, wakeup
+ # @param {Function} callback callback function to call
+ # when event is fired
+ # @return {object} an object with a stop method
+ # to unbid this event
+ # ```
+ on: (name, callback) ->
+ init() # Auto init on first call
+ customEvent.add this, name, callback
+ @
+
+ # Remove an event from ifvisible object
+ # ```
+ # @param {string} name Event name such as focus,
+ # idle, blur, wakeup
+ # @param {Function} callback Optional, if passed, it will remove
+ # only the given callback, if empty will
+ # remove all
+ # @return {object} an object with a stop method
+ # to unbid this event
+ # ```
+ off: (name, callback) ->
+ init() # Auto init on first call
+ customEvent.remove this, name, callback
+ @
+
+ # if page is visible then run given code in given seconds of intervals
+ # ```
+ # @param {float} seconds seconds to run interval
+ # @param {Function} callback callback function to run
+ # ```
+ onEvery: (seconds, callback) ->
+ # Auto init on first call
+ init()
+
+ paused = false
+
+ t = setInterval(->
+ callback() if status is "active" && paused is false
+ , seconds * 1000) if callback
+
+ # return methods
+ stop: ->
+ clearInterval t
+
+ pause: ->
+ paused = true
+
+ resume: ->
+ paused = false
+
+ code: t
+ callback: callback
+
+
+ # `ifvisible.now()` return if the page is visible right now?
+ # ```
+ # @return {boolean} true if page is visible
+ # ```
+ now: (check)->
+ # Auto init on first call
+ init()
+ status is (check or "active")
+
+ return ifvisible
+)
diff --git a/src/ifvisible.js b/src/ifvisible.js
new file mode 100644
index 0000000..aa03adb
--- /dev/null
+++ b/src/ifvisible.js
@@ -0,0 +1,315 @@
+(function() {
+ (function(root, factory) {
+ if (typeof define === 'function' && define.amd) {
+ return define(function() {
+ return factory();
+ });
+ } else if (typeof exports === 'object') {
+ return module.exports = factory();
+ } else {
+ return root.ifvisible = factory();
+ }
+ })(this, function() {
+ var addEvent, customEvent, doc, fireEvent, hidden, idleStartedTime, idleTime, ie, ifvisible, init, initialized, status, trackIdleStatus, visibilityChange;
+ ifvisible = {};
+ doc = document;
+ initialized = false;
+ status = "active";
+ idleTime = 60000;
+ idleStartedTime = false;
+ customEvent = (function() {
+ var S4, addCustomEvent, cgid, fireCustomEvent, guid, listeners, removeCustomEvent;
+ S4 = function() {
+ return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+ };
+ guid = function() {
+ return S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4();
+ };
+ listeners = {};
+ cgid = '__ceGUID';
+ addCustomEvent = function(obj, event, callback) {
+ obj[cgid] = undefined;
+ if (!obj[cgid]) {
+ obj[cgid] = "ifvisible.object.event.identifier";
+ }
+ if (!listeners[obj[cgid]]) {
+ listeners[obj[cgid]] = {};
+ }
+ if (!listeners[obj[cgid]][event]) {
+ listeners[obj[cgid]][event] = [];
+ }
+ return listeners[obj[cgid]][event].push(callback);
+ };
+ fireCustomEvent = function(obj, event, memo) {
+ var ev, j, len, ref, results;
+ if (obj[cgid] && listeners[obj[cgid]] && listeners[obj[cgid]][event]) {
+ ref = listeners[obj[cgid]][event];
+ results = [];
+ for (j = 0, len = ref.length; j < len; j++) {
+ ev = ref[j];
+ results.push(ev(memo || {}));
+ }
+ return results;
+ }
+ };
+ removeCustomEvent = function(obj, event, callback) {
+ var cl, i, j, len, ref;
+ if (callback) {
+ if (obj[cgid] && listeners[obj[cgid]] && listeners[obj[cgid]][event]) {
+ ref = listeners[obj[cgid]][event];
+ for (i = j = 0, len = ref.length; j < len; i = ++j) {
+ cl = ref[i];
+ if (cl === callback) {
+ listeners[obj[cgid]][event].splice(i, 1);
+ return cl;
+ }
+ }
+ }
+ } else {
+ if (obj[cgid] && listeners[obj[cgid]] && listeners[obj[cgid]][event]) {
+ return delete listeners[obj[cgid]][event];
+ }
+ }
+ };
+ return {
+ add: addCustomEvent,
+ remove: removeCustomEvent,
+ fire: fireCustomEvent
+ };
+ })();
+ addEvent = (function() {
+ var setListener;
+ setListener = false;
+ return function(el, ev, fn) {
+ if (!setListener) {
+ if (el.addEventListener) {
+ setListener = function(el, ev, fn) {
+ return el.addEventListener(ev, fn, false);
+ };
+ } else if (el.attachEvent) {
+ setListener = function(el, ev, fn) {
+ return el.attachEvent('on' + ev, fn, false);
+ };
+ } else {
+ setListener = function(el, ev, fn) {
+ return el['on' + ev] = fn;
+ };
+ }
+ }
+ return setListener(el, ev, fn);
+ };
+ })();
+ fireEvent = function(element, event) {
+ var evt;
+ if (doc.createEventObject) {
+ return element.fireEvent('on' + event, evt);
+ } else {
+ evt = doc.createEvent('HTMLEvents');
+ evt.initEvent(event, true, true);
+ return !element.dispatchEvent(evt);
+ }
+ };
+ ie = (function() {
+ var all, check, div, undef, v;
+ undef = void 0;
+ v = 3;
+ div = doc.createElement("div");
+ all = div.getElementsByTagName("i");
+ check = function() {
+ return (div.innerHTML = "<!--[if gt IE " + (++v) + "]><i></i><![endif]-->", all[0]);
+ };
+ while (check()) {
+ continue;
+ }
+ if (v > 4) {
+ return v;
+ } else {
+ return undef;
+ }
+ })();
+ hidden = false;
+ visibilityChange = void 0;
+ if (typeof doc.hidden !== "undefined") {
+ hidden = "hidden";
+ visibilityChange = "visibilitychange";
+ } else if (typeof doc.mozHidden !== "undefined") {
+ hidden = "mozHidden";
+ visibilityChange = "mozvisibilitychange";
+ } else if (typeof doc.msHidden !== "undefined") {
+ hidden = "msHidden";
+ visibilityChange = "msvisibilitychange";
+ } else if (typeof doc.webkitHidden !== "undefined") {
+ hidden = "webkitHidden";
+ visibilityChange = "webkitvisibilitychange";
+ }
+ trackIdleStatus = function() {
+ var timer, wakeUp;
+ timer = false;
+ wakeUp = function() {
+ clearTimeout(timer);
+ if (status !== "active") {
+ ifvisible.wakeup();
+ }
+ idleStartedTime = +(new Date());
+ return timer = setTimeout(function() {
+ if (status === "active") {
+ return ifvisible.idle();
+ }
+ }, idleTime);
+ };
+ wakeUp();
+ addEvent(doc, "mousemove", wakeUp);
+ addEvent(doc, "keyup", wakeUp);
+ addEvent(doc, "touchstart", wakeUp);
+ addEvent(window, "scroll", wakeUp);
+ ifvisible.focus(wakeUp);
+ return ifvisible.wakeup(wakeUp);
+ };
+ init = function() {
+ var blur;
+ if (initialized) {
+ return true;
+ }
+ if (hidden === false) {
+ blur = "blur";
+ if (ie < 9) {
+ blur = "focusout";
+ }
+ addEvent(window, blur, function() {
+ return ifvisible.blur();
+ });
+ addEvent(window, "focus", function() {
+ return ifvisible.focus();
+ });
+ } else {
+ addEvent(doc, visibilityChange, function() {
+ if (doc[hidden]) {
+ return ifvisible.blur();
+ } else {
+ return ifvisible.focus();
+ }
+ }, false);
+ }
+ initialized = true;
+ return trackIdleStatus();
+ };
+ ifvisible = {
+ setIdleDuration: function(seconds) {
+ return idleTime = seconds * 1000;
+ },
+ getIdleDuration: function() {
+ return idleTime;
+ },
+ getIdleInfo: function() {
+ var now, res;
+ now = +(new Date());
+ res = {};
+ if (status === "idle") {
+ res.isIdle = true;
+ res.idleFor = now - idleStartedTime;
+ res.timeLeft = 0;
+ res.timeLeftPer = 100;
+ } else {
+ res.isIdle = false;
+ res.idleFor = now - idleStartedTime;
+ res.timeLeft = (idleStartedTime + idleTime) - now;
+ res.timeLeftPer = (100 - (res.timeLeft * 100 / idleTime)).toFixed(2);
+ }
+ return res;
+ },
+ focus: function(callback) {
+ if (typeof callback === "function") {
+ this.on("focus", callback);
+ } else {
+ status = "active";
+ customEvent.fire(this, "focus");
+ customEvent.fire(this, "wakeup");
+ customEvent.fire(this, "statusChanged", {
+ status: status
+ });
+ }
+ return this;
+ },
+ blur: function(callback) {
+ if (typeof callback === "function") {
+ this.on("blur", callback);
+ } else {
+ status = "hidden";
+ customEvent.fire(this, "blur");
+ customEvent.fire(this, "idle");
+ customEvent.fire(this, "statusChanged", {
+ status: status
+ });
+ }
+ return this;
+ },
+ idle: function(callback) {
+ if (typeof callback === "function") {
+ this.on("idle", callback);
+ } else {
+ status = "idle";
+ customEvent.fire(this, "idle");
+ customEvent.fire(this, "statusChanged", {
+ status: status
+ });
+ }
+ return this;
+ },
+ wakeup: function(callback) {
+ if (typeof callback === "function") {
+ this.on("wakeup", callback);
+ } else {
+ status = "active";
+ customEvent.fire(this, "wakeup");
+ customEvent.fire(this, "statusChanged", {
+ status: status
+ });
+ }
+ return this;
+ },
+ on: function(name, callback) {
+ init();
+ customEvent.add(this, name, callback);
+ return this;
+ },
+ off: function(name, callback) {
+ init();
+ customEvent.remove(this, name, callback);
+ return this;
+ },
+ onEvery: function(seconds, callback) {
+ var paused, t;
+ init();
+ paused = false;
+ if (callback) {
+ t = setInterval(function() {
+ if (status === "active" && paused === false) {
+ return callback();
+ }
+ }, seconds * 1000);
+ }
+ return {
+ stop: function() {
+ return clearInterval(t);
+ },
+ pause: function() {
+ return paused = true;
+ },
+ resume: function() {
+ return paused = false;
+ },
+ code: t,
+ callback: callback
+ };
+ },
+ now: function(check) {
+ init();
+ return status === (check || "active");
+ }
+ };
+ return ifvisible;
+ });
+
+}).call(this);
+
+//# sourceMappingURL=ifvisible.js.map
diff --git a/src/ifvisible.js.map b/src/ifvisible.js.map
new file mode 100644
index 0000000..c37e1b7
--- /dev/null
+++ b/src/ifvisible.js.map
@@ -0,0 +1,10 @@
+{
+ "version": 3,
+ "file": "ifvisible.js",
+ "sourceRoot": "",
+ "sources": [
+ "ifvisible.coffee"
+ ],
+ "names": [],
+ "mappings": "AAAA;EAAA,CAAC,SAAC,IAAD,EAAO,OAAP;IACC,IAAG,OAAO,MAAP,KAAiB,UAAjB,IAAgC,MAAM,CAAC,GAA1C;aAEE,MAAA,CAAO,SAAA;eACL,OAAA,CAAA;MADK,CAAP,EAFF;KAAA,MAIK,IAAG,OAAO,OAAP,KAAkB,QAArB;aAIH,MAAM,CAAC,OAAP,GAAiB,OAAA,CAAA,EAJd;KAAA,MAAA;aAOH,IAAI,CAAC,SAAL,GAAiB,OAAA,CAAA,EAPd;;EALN,CAAD,CAAA,CAaE,IAbF,EAaQ,SAAA;AAKN,QAAA;IAAA,SAAA,GAAY;IAMZ,GAAA,GAAM;IAMN,WAAA,GAAc;IAMd,MAAA,GAAS;IAMT,QAAA,GAAW;IAOX,eAAA,GAAkB;IAQlB,WAAA,GAAc,CAAC,SAAA;AAEb,UAAA;MAAA,EAAA,GAAK,SAAA;eACF,CAAC,CAAC,C [...]
+}
\ No newline at end of file
diff --git a/src/ifvisible.min.js b/src/ifvisible.min.js
new file mode 100644
index 0000000..e4f99d2
--- /dev/null
+++ b/src/ifvisible.min.js
@@ -0,0 +1 @@
+(function(){!function(a,b){return"function"==typeof define&&define.amd?define(function(){return b()}):"object"==typeof exports?module.exports=b():a.ifvisible=b()}(this,function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n;return i={},c=document,k=!1,l="active",g=6e4,f=!1,b=function(){var a,b,c,d,e,f,g;return a=function(){return(65536*(1+Math.random())|0).toString(16).substring(1)},e=function(){return a()+a()+"-"+a()+"-"+a()+"-"+a()+"-"+a()+a()+a()},f={},c="__ceGUID",b=function(a,b,d){return a[c]=vo [...]
\ No newline at end of file
diff --git a/tests/index.html b/tests/index.html
new file mode 100644
index 0000000..2fb6063
--- /dev/null
+++ b/tests/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE 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="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
+ <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-responsive.min.css" rel="stylesheet">
+ <title>ifvisible.js test page</title>
+ <script src="../src/ifvisible.js"></script>
+ <script type="text/javascript">
+ function d(el){
+ return document.getElementById(el);
+ }
+ ifvisible.setIdleDuration(30);
+
+ 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.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>ifvisible.js test page</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.
+ <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>
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/node-ifvisible.js.git
More information about the Pkg-javascript-commits
mailing list