visibilityjs 0.4.1 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/ChangeLog +6 -0
- data/README.md +32 -41
- data/vendor/assets/javascripts/visibility.js +171 -171
- metadata +4 -10
data/ChangeLog
CHANGED
@@ -1,3 +1,9 @@
|
|
1
|
+
== 0.4.2 (Sputnik 3, real)
|
2
|
+
* Reorder code to show first public and common methods.
|
3
|
+
* Use node.js Cake instead of Ruby’s Rake to build tasks.
|
4
|
+
* Move to Mocha, Chai and Sinon.JS for tests.
|
5
|
+
* Move autogenerated minified to GitHub downloads.
|
6
|
+
|
1
7
|
== 0.4.1 (Explorer 3, repeat)
|
2
8
|
* Fix documentation and gemspec.
|
3
9
|
|
data/README.md
CHANGED
@@ -219,37 +219,33 @@ Visibility.change(function (e, state) {
|
|
219
219
|
|
220
220
|
## Installing
|
221
221
|
|
222
|
-
### Rails
|
222
|
+
### Ruby on Rails
|
223
223
|
|
224
|
-
|
224
|
+
For Ruby on Rails you can use gem for Assets Pipeline.
|
225
225
|
|
226
|
-
|
227
|
-
gem 'visibilityjs'
|
228
|
-
```
|
226
|
+
1. Add `visibilityjs` gem to `Gemfile`:
|
229
227
|
|
230
|
-
|
228
|
+
```ruby
|
229
|
+
gem "visibilityjs"
|
230
|
+
```
|
231
231
|
|
232
|
-
|
233
|
-
#= require visibility
|
234
|
-
```
|
232
|
+
2. Install gems:
|
235
233
|
|
236
|
-
|
234
|
+
```sh
|
235
|
+
bundle install
|
236
|
+
```
|
237
237
|
|
238
|
-
|
239
|
-
`lib/visibility.js` to `public/javascripts/lib` in your project and add the
|
240
|
-
library to `config/assets.yml`:
|
238
|
+
3. Include Visibility.js to your `application.js.coffee`:
|
241
239
|
|
242
|
-
```
|
243
|
-
|
244
|
-
|
245
|
-
- public/javascripts/lib/visibility.js
|
246
|
-
```
|
240
|
+
```coffee
|
241
|
+
#= require visibility
|
242
|
+
```
|
247
243
|
|
248
244
|
### Other
|
249
245
|
|
250
|
-
If you don’t use
|
251
|
-
minified version of the library
|
252
|
-
|
246
|
+
If you don’t use any assets packaging manager (it’s very bad idea), you can use
|
247
|
+
already minified version of the library.
|
248
|
+
Take it from: <https://github.com/ai/visibility.js/downloads>.
|
253
249
|
|
254
250
|
## Alternatives
|
255
251
|
|
@@ -258,29 +254,24 @@ prefixes), you can use [visibly.js](https://github.com/addyosmani/visibly.js).
|
|
258
254
|
|
259
255
|
## Contributing
|
260
256
|
|
261
|
-
To run
|
262
|
-
installed. For example, in a Debian-based (e.g. Ubuntu) environment:
|
263
|
-
|
264
|
-
```
|
265
|
-
sudo apt-get install ruby rubygems
|
266
|
-
sudo gem install bundler
|
267
|
-
```
|
257
|
+
1. To run tests you need node.js and npm. For example, in Ubuntu run:
|
268
258
|
|
269
|
-
|
270
|
-
|
259
|
+
```sh
|
260
|
+
sudo apt-get install nodejs npm
|
261
|
+
```
|
271
262
|
|
272
|
-
|
273
|
-
bundle install --path=.bundle
|
274
|
-
```
|
263
|
+
2. Next install npm dependencies:
|
275
264
|
|
276
|
-
|
265
|
+
```sh
|
266
|
+
npm install
|
267
|
+
```
|
277
268
|
|
278
|
-
|
279
|
-
bundle exec rake server
|
280
|
-
```
|
269
|
+
3. Run test server:
|
281
270
|
|
282
|
-
|
271
|
+
```sh
|
272
|
+
./node_modules/.bin/cake test
|
273
|
+
```
|
283
274
|
|
284
|
-
|
285
|
-
|
286
|
-
|
275
|
+
4. Open tests in browser: <localhost:8000>.
|
276
|
+
5. Also you can see real usage example in integration test
|
277
|
+
`test/integration.html`.
|
@@ -29,6 +29,177 @@
|
|
29
29
|
// add high-level useful functions.
|
30
30
|
window.Visibility = {
|
31
31
|
|
32
|
+
// Call callback only when page become to visible for user or
|
33
|
+
// call it now if page is visible now or Page Visibility API
|
34
|
+
// doesn’t supported.
|
35
|
+
//
|
36
|
+
// Return true if callback if called now.
|
37
|
+
//
|
38
|
+
// Visibility.onVisible(function() {
|
39
|
+
// Notification.animateNotice("Hello");
|
40
|
+
// });
|
41
|
+
onVisible: function (callback) {
|
42
|
+
if ( !this.isSupported() || !this.hidden() ) {
|
43
|
+
callback();
|
44
|
+
return true;
|
45
|
+
}
|
46
|
+
this._onVisibleCallbacks.push(callback);
|
47
|
+
this._setListener();
|
48
|
+
},
|
49
|
+
|
50
|
+
// Run callback every `interval` milliseconds if page is visible and
|
51
|
+
// every `hiddenInterval` milliseconds if page is hidden.
|
52
|
+
//
|
53
|
+
// Visibility.every(60 * 1000, 5 * 60 * 1000, function() {
|
54
|
+
// checkNewMails();
|
55
|
+
// });
|
56
|
+
//
|
57
|
+
// You can skip `hiddenInterval` and callback will be called only if
|
58
|
+
// page is visible.
|
59
|
+
//
|
60
|
+
// Visibility.every(1000, function() {
|
61
|
+
// updateCountdown();
|
62
|
+
// });
|
63
|
+
//
|
64
|
+
// It is analog of `setInterval(callback, interval)` but use visibility
|
65
|
+
// state.
|
66
|
+
//
|
67
|
+
// It return timer ID, that you can use in `Visibility.stop(id)` to stop
|
68
|
+
// timer (`clearInterval` analog).
|
69
|
+
// Warning: timer ID is different from intervalID from `setInterval`,
|
70
|
+
// so don’t use it in `clearInterval`.
|
71
|
+
//
|
72
|
+
// On change state from hidden to visible timers will be execute.
|
73
|
+
//
|
74
|
+
// If you include jQuery Chrono plugin before Visibility.js, you could
|
75
|
+
// use Chrono’s syntax sugar in interval arguments:
|
76
|
+
//
|
77
|
+
// Visibility.every('second', function() {
|
78
|
+
// updateCountdown();
|
79
|
+
// });
|
80
|
+
// Visibility.every('1 minute', '5 minutes', function() {
|
81
|
+
// checkNewMails();
|
82
|
+
// });
|
83
|
+
every: function (interval, hiddenInterval, callback) {
|
84
|
+
if ( !defined(callback) ) {
|
85
|
+
callback = hiddenInterval;
|
86
|
+
hiddenInterval = null;
|
87
|
+
}
|
88
|
+
this._lastTimer += 1;
|
89
|
+
var number = this._lastTimer;
|
90
|
+
this._timers[number] = ({
|
91
|
+
interval: interval,
|
92
|
+
hiddenInterval: hiddenInterval,
|
93
|
+
callback: callback
|
94
|
+
});
|
95
|
+
this._runTimer(number, false);
|
96
|
+
if ( this.isSupported() ) {
|
97
|
+
this._setListener();
|
98
|
+
}
|
99
|
+
return number;
|
100
|
+
},
|
101
|
+
|
102
|
+
// Stop timer from `every` method by it ID (`every` method return it).
|
103
|
+
//
|
104
|
+
// slideshow = Visibility.every(5 * 1000, function() {
|
105
|
+
// changeSlide();
|
106
|
+
// });
|
107
|
+
// $('.stopSlideshow').click(function() {
|
108
|
+
// Visibility.stop(slideshow);
|
109
|
+
// });
|
110
|
+
stop: function(id) {
|
111
|
+
var timer = this._timers[id]
|
112
|
+
if ( !defined(timer) ) {
|
113
|
+
return false;
|
114
|
+
}
|
115
|
+
this._stopTimer(id);
|
116
|
+
delete this._timers[id];
|
117
|
+
return timer;
|
118
|
+
},
|
119
|
+
|
120
|
+
// Call callback when visibility will be changed. First argument for
|
121
|
+
// callback will be original event object, second will be visibility
|
122
|
+
// state name.
|
123
|
+
//
|
124
|
+
// If Page Visibility API doesn’t supported method will be return false
|
125
|
+
// and callback never will be called.
|
126
|
+
//
|
127
|
+
// Visibility.change(function(e, state) {
|
128
|
+
// Statistics.visibilityChange(state);
|
129
|
+
// });
|
130
|
+
//
|
131
|
+
// It is just proxy to `visibilitychange` event, but use vendor prefix.
|
132
|
+
change: function (callback) {
|
133
|
+
if ( !this.isSupported() ) {
|
134
|
+
return false;
|
135
|
+
}
|
136
|
+
this._changeCallbacks.push(callback);
|
137
|
+
this._setListener();
|
138
|
+
return true;
|
139
|
+
},
|
140
|
+
|
141
|
+
// Call `callback` in any state, expect “prerender”. If current state
|
142
|
+
// is “prerender” it will wait until state will be changed.
|
143
|
+
// If Page Visibility API doesn’t supported, it will call `callback`
|
144
|
+
// immediately.
|
145
|
+
//
|
146
|
+
// Visibility.afterPrerendering(function () {
|
147
|
+
// Statistics.countVisitor();
|
148
|
+
// });
|
149
|
+
afterPrerendering: function (callback) {
|
150
|
+
if ( !this.isSupported() || 'prerender' != this.state() ) {
|
151
|
+
callback();
|
152
|
+
return true;
|
153
|
+
}
|
154
|
+
this._afterPrerenderingCallbacks.push(callback);
|
155
|
+
this._setListener();
|
156
|
+
},
|
157
|
+
|
158
|
+
// Return true if page now isn’t visible to user.
|
159
|
+
//
|
160
|
+
// if ( !Visibility.hidden() ) {
|
161
|
+
// VideoPlayer.play();
|
162
|
+
// }
|
163
|
+
//
|
164
|
+
// It is just proxy to `document.hidden`, but use vendor prefix.
|
165
|
+
hidden: function () {
|
166
|
+
if ( !this.isSupported() ) {
|
167
|
+
return false;
|
168
|
+
}
|
169
|
+
return this._prop('hidden');
|
170
|
+
},
|
171
|
+
|
172
|
+
// Return visibility state: 'visible', 'hidden' or 'prerender'.
|
173
|
+
//
|
174
|
+
// if ( 'prerender' == Visibility.state() ) {
|
175
|
+
// Statistics.pageIsPrerendering();
|
176
|
+
// }
|
177
|
+
//
|
178
|
+
// Don’t use `Visibility.state()` to detect, is page visible, because
|
179
|
+
// visibility states can extend in next API versions.
|
180
|
+
// Use more simpler and general `Visibility.hidden()` for this cases.
|
181
|
+
//
|
182
|
+
// It is just proxy to `document.visibilityState`, but use
|
183
|
+
// vendor prefix.
|
184
|
+
state: function () {
|
185
|
+
if ( !this.isSupported() ) {
|
186
|
+
return 'visible';
|
187
|
+
}
|
188
|
+
return this._prop('visibilityState');
|
189
|
+
},
|
190
|
+
|
191
|
+
// Return true if browser support Page Visibility API.
|
192
|
+
//
|
193
|
+
// if ( Visibility.isSupported() ) {
|
194
|
+
// Statistics.startTrackingVisibility();
|
195
|
+
// Visibility.change(function(e, state)) {
|
196
|
+
// Statistics.trackVisibility(state);
|
197
|
+
// });
|
198
|
+
// }
|
199
|
+
isSupported: function () {
|
200
|
+
return defined(this._prefix());
|
201
|
+
},
|
202
|
+
|
32
203
|
// Link to document object to change it in tests.
|
33
204
|
_doc: window.document,
|
34
205
|
|
@@ -210,177 +381,6 @@
|
|
210
381
|
var timer = this._timers[id];
|
211
382
|
clearInterval(timer.intervalID);
|
212
383
|
delete timer.intervalID;
|
213
|
-
},
|
214
|
-
|
215
|
-
// Return true if browser support Page Visibility API.
|
216
|
-
//
|
217
|
-
// if ( Visibility.isSupported() ) {
|
218
|
-
// Statistics.startTrackingVisibility();
|
219
|
-
// Visibility.change(function(e, state)) {
|
220
|
-
// Statistics.trackVisibility(state);
|
221
|
-
// });
|
222
|
-
// }
|
223
|
-
isSupported: function () {
|
224
|
-
return defined(this._prefix());
|
225
|
-
},
|
226
|
-
|
227
|
-
// Return true if page now isn’t visible to user.
|
228
|
-
//
|
229
|
-
// if ( !Visibility.hidden() ) {
|
230
|
-
// VideoPlayer.play();
|
231
|
-
// }
|
232
|
-
//
|
233
|
-
// It is just proxy to `document.hidden`, but use vendor prefix.
|
234
|
-
hidden: function () {
|
235
|
-
if ( !this.isSupported() ) {
|
236
|
-
return false;
|
237
|
-
}
|
238
|
-
return this._prop('hidden');
|
239
|
-
},
|
240
|
-
|
241
|
-
// Return visibility state: 'visible', 'hidden' or 'prerender'.
|
242
|
-
//
|
243
|
-
// if ( 'prerender' == Visibility.state() ) {
|
244
|
-
// Statistics.pageIsPrerendering();
|
245
|
-
// }
|
246
|
-
//
|
247
|
-
// Don’t use `Visibility.state()` to detect, is page visible, because
|
248
|
-
// visibility states can extend in next API versions.
|
249
|
-
// Use more simpler and general `Visibility.hidden()` for this cases.
|
250
|
-
//
|
251
|
-
// It is just proxy to `document.visibilityState`, but use
|
252
|
-
// vendor prefix.
|
253
|
-
state: function () {
|
254
|
-
if ( !this.isSupported() ) {
|
255
|
-
return 'visible';
|
256
|
-
}
|
257
|
-
return this._prop('visibilityState');
|
258
|
-
},
|
259
|
-
|
260
|
-
// Call callback when visibility will be changed. First argument for
|
261
|
-
// callback will be original event object, second will be visibility
|
262
|
-
// state name.
|
263
|
-
//
|
264
|
-
// If Page Visibility API doesn’t supported method will be return false
|
265
|
-
// and callback never will be called.
|
266
|
-
//
|
267
|
-
// Visibility.change(function(e, state) {
|
268
|
-
// Statistics.visibilityChange(state);
|
269
|
-
// });
|
270
|
-
//
|
271
|
-
// It is just proxy to `visibilitychange` event, but use vendor prefix.
|
272
|
-
change: function (callback) {
|
273
|
-
if ( !this.isSupported() ) {
|
274
|
-
return false;
|
275
|
-
}
|
276
|
-
this._changeCallbacks.push(callback);
|
277
|
-
this._setListener();
|
278
|
-
return true;
|
279
|
-
},
|
280
|
-
|
281
|
-
// Call callback only when page become to visible for user or
|
282
|
-
// call it now if page is visible now or Page Visibility API
|
283
|
-
// doesn’t supported.
|
284
|
-
//
|
285
|
-
// Return true if callback if called now.
|
286
|
-
//
|
287
|
-
// Visibility.onVisible(function() {
|
288
|
-
// Notification.animateNotice("Hello");
|
289
|
-
// });
|
290
|
-
onVisible: function (callback) {
|
291
|
-
if ( !this.isSupported() || !this.hidden() ) {
|
292
|
-
callback();
|
293
|
-
return true;
|
294
|
-
}
|
295
|
-
this._onVisibleCallbacks.push(callback);
|
296
|
-
this._setListener();
|
297
|
-
},
|
298
|
-
|
299
|
-
// Call `callback` in any state, expect “prerender”. If current state
|
300
|
-
// is “prerender” it will wait until state will be changed.
|
301
|
-
// If Page Visibility API doesn’t supported, it will call `callback`
|
302
|
-
// immediately.
|
303
|
-
//
|
304
|
-
// Visibility.afterPrerendering(function () {
|
305
|
-
// Statistics.countVisitor();
|
306
|
-
// });
|
307
|
-
afterPrerendering: function (callback) {
|
308
|
-
if ( !this.isSupported() || 'prerender' != this.state() ) {
|
309
|
-
callback();
|
310
|
-
return true;
|
311
|
-
}
|
312
|
-
this._afterPrerenderingCallbacks.push(callback);
|
313
|
-
this._setListener();
|
314
|
-
},
|
315
|
-
|
316
|
-
// Run callback every `interval` milliseconds if page is visible and
|
317
|
-
// every `hiddenInterval` milliseconds if page is hidden.
|
318
|
-
//
|
319
|
-
// Visibility.every(60 * 1000, 5 * 60 * 1000, function() {
|
320
|
-
// checkNewMails();
|
321
|
-
// });
|
322
|
-
//
|
323
|
-
// You can skip `hiddenInterval` and callback will be called only if
|
324
|
-
// page is visible.
|
325
|
-
//
|
326
|
-
// Visibility.every(1000, function() {
|
327
|
-
// updateCountdown();
|
328
|
-
// });
|
329
|
-
//
|
330
|
-
// It is analog of `setInterval(callback, interval)` but use visibility
|
331
|
-
// state.
|
332
|
-
//
|
333
|
-
// It return timer ID, that you can use in `Visibility.stop(id)` to stop
|
334
|
-
// timer (`clearInterval` analog).
|
335
|
-
// Warning: timer ID is different from intervalID from `setInterval`,
|
336
|
-
// so don’t use it in `clearInterval`.
|
337
|
-
//
|
338
|
-
// On change state from hidden to visible timers will be execute.
|
339
|
-
//
|
340
|
-
// If you include jQuery Chrono plugin before Visibility.js, you could
|
341
|
-
// use Chrono’s syntax sugar in interval arguments:
|
342
|
-
//
|
343
|
-
// Visibility.every('second', function() {
|
344
|
-
// updateCountdown();
|
345
|
-
// });
|
346
|
-
// Visibility.every('1 minute', '5 minutes', function() {
|
347
|
-
// checkNewMails();
|
348
|
-
// });
|
349
|
-
every: function (interval, hiddenInterval, callback) {
|
350
|
-
if ( !defined(callback) ) {
|
351
|
-
callback = hiddenInterval;
|
352
|
-
hiddenInterval = null;
|
353
|
-
}
|
354
|
-
this._lastTimer += 1;
|
355
|
-
var number = this._lastTimer;
|
356
|
-
this._timers[number] = ({
|
357
|
-
interval: interval,
|
358
|
-
hiddenInterval: hiddenInterval,
|
359
|
-
callback: callback
|
360
|
-
});
|
361
|
-
this._runTimer(number, false);
|
362
|
-
if ( this.isSupported() ) {
|
363
|
-
this._setListener();
|
364
|
-
}
|
365
|
-
return number;
|
366
|
-
},
|
367
|
-
|
368
|
-
// Stop timer from `every` method by it ID (`every` method return it).
|
369
|
-
//
|
370
|
-
// slideshow = Visibility.every(5 * 1000, function() {
|
371
|
-
// changeSlide();
|
372
|
-
// });
|
373
|
-
// $('.stopSlideshow').click(function() {
|
374
|
-
// Visibility.stop(slideshow);
|
375
|
-
// });
|
376
|
-
stop: function(id) {
|
377
|
-
var timer = this._timers[id]
|
378
|
-
if ( !defined(timer) ) {
|
379
|
-
return false;
|
380
|
-
}
|
381
|
-
this._stopTimer(id);
|
382
|
-
delete this._timers[id];
|
383
|
-
return timer;
|
384
384
|
}
|
385
385
|
|
386
386
|
};
|
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.4.
|
4
|
+
version: 0.4.2
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,11 +9,11 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2012-
|
12
|
+
date: 2012-05-19 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sprockets
|
16
|
-
requirement: &
|
16
|
+
requirement: &6958640 !ruby/object:Gem::Requirement
|
17
17
|
none: false
|
18
18
|
requirements:
|
19
19
|
- - ! '>='
|
@@ -21,7 +21,7 @@ dependencies:
|
|
21
21
|
version: 2.0.0.beta.5
|
22
22
|
type: :runtime
|
23
23
|
prerelease: false
|
24
|
-
version_requirements: *
|
24
|
+
version_requirements: *6958640
|
25
25
|
description: Visibility.js allow you to determine whether your web page is visible
|
26
26
|
to an user, is hidden in background tab or is prerendering. It allows you use the
|
27
27
|
page visibility state in JavaScript logic and improve browser performance or improve
|
@@ -53,18 +53,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
53
53
|
- - ! '>='
|
54
54
|
- !ruby/object:Gem::Version
|
55
55
|
version: '0'
|
56
|
-
segments:
|
57
|
-
- 0
|
58
|
-
hash: 24859103780171472
|
59
56
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
60
57
|
none: false
|
61
58
|
requirements:
|
62
59
|
- - ! '>='
|
63
60
|
- !ruby/object:Gem::Version
|
64
61
|
version: '0'
|
65
|
-
segments:
|
66
|
-
- 0
|
67
|
-
hash: 24859103780171472
|
68
62
|
requirements: []
|
69
63
|
rubyforge_project:
|
70
64
|
rubygems_version: 1.8.11
|