[Pkg-javascript-commits] [node-ifvisible.js] 01/03: Import Upstream version 1.0.6

Daniel Ring techwolf-guest at moszumanska.debian.org
Sat Dec 23 10:59:23 UTC 2017


This is an automated email from the git hooks/post-receive script.

techwolf-guest pushed a commit to branch master
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