├── .gitignore
├── .npmignore
├── demo.js
├── index.html
├── package.json
├── LICENSE.md
├── README.md
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | bundle.js
2 | npm-debug.log
3 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | index.html
2 | demo.js
3 | bundle.js
4 |
--------------------------------------------------------------------------------
/demo.js:
--------------------------------------------------------------------------------
1 | var notice = document.getElementById('notice')
2 | var since = document.getElementById('since')
3 | var visibility = require('./')
4 | var lastvisit = Date.now()
5 |
6 | visibility()
7 | .on('show', function() {
8 | since.innerHTML = Math.round((Date.now() - lastvisit) * 10) / 10000
9 | notice.style.display = 'block'
10 | })
11 | .on('hide', function() {
12 | lastvisit = Date.now()
13 | })
14 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | visibility
6 |
7 |
8 |
15 |
16 |
17 | Page Visibility
18 |
19 | It's been 0
20 | seconds since you last checked this tab.
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "visibility",
3 | "description": "A little browserify-able shim/wrapper for the Page Visibility API",
4 | "version": "0.0.0",
5 | "main": "index.js",
6 | "browser": "index.js",
7 | "dependencies": {
8 | "inherits": "~2.0.1"
9 | },
10 | "devDependencies": {
11 | "browserify": "~2.33.1",
12 | "installify": "~0.1.1",
13 | "beefy": "~0.4.4"
14 | },
15 | "scripts": {
16 | "start": "beefy demo.js:bundle.js --live -- -t installify",
17 | "prepublish": "browserify demo.js -t installify > bundle.js"
18 | },
19 | "author": "Hugh Kennedy (http://github.com/hughsk)",
20 | "license": "MIT",
21 | "homepage": "http://hughsk.github.io/visibility",
22 | "repository": {
23 | "type": "git",
24 | "url": "git://github.com/hughsk/visibility"
25 | },
26 | "bugs": {
27 | "url": "https://github.com/hughsk/visibility/issues"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | ## The MIT License (MIT) ##
2 |
3 | Copyright (c) 2013 Hugh Kennedy
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # visibility [](http://github.com/hughsk/stability-badges) #
2 |
3 | A little [browserify](http://browserify.org)-able shim/wrapper for the
4 | [Page Visibility API](http://www.html5rocks.com/en/tutorials/pagevisibility/intro/).
5 |
6 | ## Usage ##
7 |
8 | [](https://nodei.co/npm/visibility)
9 |
10 | ### `watcher = require('visibility')()` ###
11 |
12 | Creates a new `EventEmitter` that fires specific events when the pages's
13 | visibility status has changed.
14 |
15 | ### `watcher.hidden()` ###
16 |
17 | Returns `true` if the browser window is not currently visible. If the browser does not support the Page Visibility API, this method will always return
18 | `false`.
19 |
20 | ### `watcher.visible()` ###
21 |
22 | Returns `true` if the browser window is currently visible. If the browser does not support the Page Visibility API, this method will always return `true`.
23 |
24 | ### `watcher.on('change', handler(visible))` ###
25 |
26 | Called whenever the page's visibility is toggled, passing `visible` as a
27 | boolean.
28 |
29 | ### `watcher.on('show', handler)` ###
30 |
31 | Called only when the page becomes visible again.
32 |
33 | ### `watcher.on('hide', handler)` ###
34 |
35 | Called only when the page is hidden.
36 |
37 | ## License ##
38 |
39 | MIT. See [LICENSE.md](http://github.com/hughsk/visibility/blob/master/LICENSE.md) for details.
40 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | var EventEmitter = require('events').EventEmitter
2 | var inherits = require('inherits')
3 |
4 | var shimvis = true
5 | var change = null
6 | var hidden = null
7 |
8 | module.exports = Visibility
9 |
10 | if (typeof document.hidden !== 'undefined') {
11 | hidden = 'hidden'
12 | change = 'visibilitychange'
13 | } else
14 | if (typeof document.mozHidden !== 'undefined') {
15 | hidden = 'mozHidden'
16 | change = 'mozvisibilitychange'
17 | } else
18 | if (typeof document.webkitHidden !== 'undefined') {
19 | hidden = 'webkitHidden'
20 | change = 'webkitvisibilitychange'
21 | } else
22 | if (typeof document.webkitHidden !== 'undefined') {
23 | hidden = 'webkitHidden'
24 | change = 'webkitvisibilitychange'
25 | }
26 |
27 | inherits(Visibility, EventEmitter)
28 | function Visibility() {
29 | if (!(this instanceof Visibility)) return new Visibility
30 | var self = this
31 |
32 | EventEmitter.call(this)
33 | this.supported = !!hidden
34 |
35 | if (this.supported) {
36 | document.addEventListener(change, function() {
37 | var visible = !document[hidden]
38 | self.emit('change', visible)
39 | self.emit(visible ? 'show' : 'hide')
40 | }, false)
41 | } else {
42 | document.addEventListener('focusout', function() {
43 | self.emit('change', false)
44 | self.emit('hide')
45 | shimvis = false
46 | }, false)
47 | document.addEventListener('focusin', function() {
48 | self.emit('change', true)
49 | self.emit('show')
50 | shimvis = true
51 | }, false)
52 | }
53 |
54 | window.addEventListener('unload', function() {
55 | self.emit('exit')
56 | }, false)
57 | }
58 |
59 | Visibility.prototype.hidden = function() {
60 | return this.supported ? !!document[hidden] : !shimvis
61 | }
62 | Visibility.prototype.visible = function() {
63 | return this.supported ? !document[hidden] : shimvis
64 | }
65 |
--------------------------------------------------------------------------------