visibilityjs 0.5 → 0.6

Sign up to get free protection for your applications and to get access to all the features.
data/ChangeLog CHANGED
@@ -1,3 +1,7 @@
1
+ == 0.6 (Luna 1, Mechta)
2
+ * Methods onVisible and afterPrerendering return listener ID (by mcfedr).
3
+ * Fix documentation (by Erwann Mest).
4
+
1
5
  == 0.5 (SCORE, communication)
2
6
  * Split library to core and timers modules.
3
7
  * Allow to unbind change listener.
data/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # Visibility.js – a wrapper for the Page Visibility API
2
2
 
3
- Visibility.js allow you to determine whether your web page is visible to an
4
- user, is hidden in background tab or is prerendering. It allows you use the page
3
+ Visibility.js allows you to determine whether your web page is visible to a
4
+ user, is hidden in background tab or is prerendering. It allows you to use the page
5
5
  visibility state in JavaScript logic and improve browser performance by
6
6
  disabling unnecessary timers and AJAX requests, or improve user interface
7
7
  experience (for example, by stopping video playback or slideshow when user
@@ -22,10 +22,9 @@ assume that the page is visible all the time, and your logic will still work
22
22
  correctly, albeit less effective in some cases.
23
23
 
24
24
  Page Visibility API is natively supported by Google Chrome, Firefox and IE 10.
25
- You can add support for old Firefox (5–9 versions) by [MozVisibility] hack
26
- (include it before Visibility.js). For others browsers you can use
27
- `lib/visibility.fallback.js` with focus/blur hack (note that this hack have
28
- some issue, see falllback documentation).
25
+ For others browsers you can use `lib/visibility.fallback.js` with focus/blur
26
+ hack (note that this hack have issue, that document become to be hidden,
27
+ when browser just lose focus, but still visible for user).
29
28
 
30
29
  Sponsored by [Evil Martians].
31
30
 
@@ -217,19 +216,51 @@ Visibility.change(function (e, state) {
217
216
  });
218
217
  ```
219
218
 
219
+ Method `change` returns listener ID. You can use it to unbind listener by
220
+ `Visibility.unbind(id)`:
221
+
222
+ ```js
223
+ var listener = Visibility.change(function (e, state) {
224
+ if ( !Visibility.hidden() ) {
225
+ VideoPlayer.pause();
226
+ }
227
+ });
228
+
229
+ VideoPlayer.onFinish(function () {
230
+ Visibility.unbind(listener);
231
+ });
232
+ ```
233
+
234
+ Methods `onVisible` and `afterPrerendering` will also return listener ID,
235
+ if they wait visibility state changes. If they execute callback immediately,
236
+ they return `true` if Page Visibility API is supported and `false`
237
+ if they can’t detect visibility state.
238
+
239
+ ```js
240
+ var listener = Visibility.onVisible(function () {
241
+ notification.takeAttention();
242
+ });
243
+
244
+ notification.onOutOfDate(function () {
245
+ if ( typeof(listener) == 'number' ) {
246
+ Visibility.unbind(listener);
247
+ }
248
+ });
249
+ ```
250
+
220
251
  ## Installing
221
252
 
222
253
  ### Packages
223
254
 
224
- Visibility.js shipped with 4 files:
255
+ Visibility.js is shipped with 4 files:
225
256
 
226
257
  * `visibility.core` – core module.
227
258
  * `visibility.timers` – `every` and `stop` methods to set `setTimeout` depend
228
259
  on visibility state.
229
260
  * `visibility` – `visibility.core` and `visibility.timers` together.
230
261
  * `visibility.fallback` – fallback for browser without Page Visibility API.
231
- It use document `focus`/`blur` events, so it say, that document in hidden,
232
- when browser just lose focus.
262
+ It use document `focus`/`blur` events, so document become to be hidden,
263
+ when browser just lose focus, but still visible for user.
233
264
 
234
265
  ### Ruby on Rails
235
266
 
@@ -247,29 +278,35 @@ For Ruby on Rails you can use gem for Assets Pipeline.
247
278
  bundle install
248
279
  ```
249
280
 
250
- 3. Include Visibility.js to your `application.js.coffee`:
281
+ 3. Include Visibility.js in your `application.js.coffee`:
251
282
 
252
283
  ```coffee
253
284
  #= require visibility
254
285
  ```
255
286
 
256
- If you didn’t use `every` method, you can reduce library size, by including
287
+ If you willn’t use `every` method, you can reduce library size by including
257
288
  only core module:
258
289
 
259
290
  ```coffee
260
291
  #= require visibility.core
261
292
  ```
262
293
 
263
- ### Other
294
+ ### CDN
264
295
 
265
- If you don’t use any assets packaging manager (it’s very bad idea), you can use
266
- already minified version of the library.
267
- Take it from: <https://github.com/ai/visibility.js/downloads>.
296
+ If you don’t use any assets packaging manager use [CDNJS]. Add to your site:
268
297
 
269
- ## Alternatives
298
+ ```html
299
+ <script src="//cdnjs.cloudflare.com/ajax/libs/visibility.js/0.6/visibility.min.js"></script>
300
+ ```
270
301
 
271
- If you need smaller and simpler wrapper (for example, just to hide vendor
272
- prefixes), you can use [visibly.js](https://github.com/addyosmani/visibly.js).
302
+ [CDNJS]: http://cdnjs.com/
303
+
304
+ ### Other
305
+
306
+ If you need just a files, you can take already minified packages from
307
+ [github.com/ai/visibility.js/downloads].
308
+
309
+ [github.com/ai/visibility.js/downloads]: https://github.com/ai/visibility.js/downloads
273
310
 
274
311
  ## Contributing
275
312
 
@@ -291,6 +328,8 @@ prefixes), you can use [visibly.js](https://github.com/addyosmani/visibly.js).
291
328
  ./node_modules/.bin/cake test
292
329
  ```
293
330
 
294
- 4. Open tests in browser: <localhost:8000>.
331
+ 4. Open tests in browser: [localhost:8000].
295
332
  5. Also you can see real usage example in integration test
296
333
  `test/integration.html`.
334
+
335
+ [localhost:8000]: http://localhost:8000
@@ -33,7 +33,9 @@
33
33
  // call it now if page is visible now or Page Visibility API
34
34
  // doesn’t supported.
35
35
  //
36
- // Return true if callback if called now.
36
+ // Return false if API isn’t supported, true if page is already visible
37
+ // or listener ID (you can use it in `unbind` method) if page isn’t
38
+ // visible now.
37
39
  //
38
40
  // Visibility.onVisible(function () {
39
41
  // Notification.animateNotice("Hello");
@@ -41,7 +43,7 @@
41
43
  onVisible: function (callback) {
42
44
  if ( !this.isSupported() || !this.hidden() ) {
43
45
  callback();
44
- return true;
46
+ return this.isSupported();
45
47
  }
46
48
 
47
49
  var listener = this.change(function (e, state) {
@@ -50,6 +52,7 @@
50
52
  callback();
51
53
  }
52
54
  });
55
+ return listener;
53
56
  },
54
57
 
55
58
  // Call callback when visibility will be changed. First argument for
@@ -92,13 +95,17 @@
92
95
  // If Page Visibility API doesn’t supported, it will call `callback`
93
96
  // immediately.
94
97
  //
98
+ // Return false if API isn’t supported, true if page is already after
99
+ // prerendering or listener ID (you can use it in `unbind` method)
100
+ // if page is prerended now.
101
+ //
95
102
  // Visibility.afterPrerendering(function () {
96
103
  // Statistics.countVisitor();
97
104
  // });
98
105
  afterPrerendering: function (callback) {
99
106
  if ( !this.isSupported() || 'prerender' != this.state() ) {
100
107
  callback();
101
- return true;
108
+ return this.isSupported();
102
109
  }
103
110
 
104
111
  var listener = this.change(function (e, state) {
@@ -107,6 +114,7 @@
107
114
  callback();
108
115
  }
109
116
  });
117
+ return listener;
110
118
  },
111
119
 
112
120
  // Return true if page now isn’t visible to user.
@@ -33,7 +33,9 @@
33
33
  // call it now if page is visible now or Page Visibility API
34
34
  // doesn’t supported.
35
35
  //
36
- // Return true if callback if called now.
36
+ // Return false if API isn’t supported, true if page is already visible
37
+ // or listener ID (you can use it in `unbind` method) if page isn’t
38
+ // visible now.
37
39
  //
38
40
  // Visibility.onVisible(function () {
39
41
  // Notification.animateNotice("Hello");
@@ -41,7 +43,7 @@
41
43
  onVisible: function (callback) {
42
44
  if ( !this.isSupported() || !this.hidden() ) {
43
45
  callback();
44
- return true;
46
+ return this.isSupported();
45
47
  }
46
48
 
47
49
  var listener = this.change(function (e, state) {
@@ -50,6 +52,7 @@
50
52
  callback();
51
53
  }
52
54
  });
55
+ return listener;
53
56
  },
54
57
 
55
58
  // Call callback when visibility will be changed. First argument for
@@ -92,13 +95,17 @@
92
95
  // If Page Visibility API doesn’t supported, it will call `callback`
93
96
  // immediately.
94
97
  //
98
+ // Return false if API isn’t supported, true if page is already after
99
+ // prerendering or listener ID (you can use it in `unbind` method)
100
+ // if page is prerended now.
101
+ //
95
102
  // Visibility.afterPrerendering(function () {
96
103
  // Statistics.countVisitor();
97
104
  // });
98
105
  afterPrerendering: function (callback) {
99
106
  if ( !this.isSupported() || 'prerender' != this.state() ) {
100
107
  callback();
101
- return true;
108
+ return this.isSupported();
102
109
  }
103
110
 
104
111
  var listener = this.change(function (e, state) {
@@ -107,6 +114,7 @@
107
114
  callback();
108
115
  }
109
116
  });
117
+ return listener;
110
118
  },
111
119
 
112
120
  // Return true if page now isn’t visible to user.
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: visibilityjs
3
3
  version: !ruby/object:Gem::Version
4
- version: '0.5'
4
+ version: '0.6'
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2012-07-06 00:00:00.000000000 Z
12
+ date: 2012-09-26 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: sprockets