visibilityjs 0.5 → 0.6
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 +4 -0
- data/README.md +58 -19
- data/lib/assets/javascripts/visibility.core.js +11 -3
- data/lib/assets/javascripts/visibility.js +11 -3
- metadata +2 -2
    
        data/ChangeLog
    CHANGED
    
    
    
        data/README.md
    CHANGED
    
    | @@ -1,7 +1,7 @@ | |
| 1 1 | 
             
            # Visibility.js – a wrapper for the Page Visibility API
         | 
| 2 2 |  | 
| 3 | 
            -
            Visibility.js  | 
| 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 | 
            -
             | 
| 26 | 
            -
            ( | 
| 27 | 
            -
             | 
| 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  | 
| 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  | 
| 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  | 
| 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 | 
            -
            ###  | 
| 294 | 
            +
            ### CDN
         | 
| 264 295 |  | 
| 265 | 
            -
            If you don’t use any assets packaging manager  | 
| 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 | 
            -
             | 
| 298 | 
            +
            ```html
         | 
| 299 | 
            +
            <script src="//cdnjs.cloudflare.com/ajax/libs/visibility.js/0.6/visibility.min.js"></script>
         | 
| 300 | 
            +
            ```
         | 
| 270 301 |  | 
| 271 | 
            -
             | 
| 272 | 
            -
             | 
| 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:  | 
| 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  | 
| 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  | 
| 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  | 
| 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  | 
| 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  | 
| 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  | 
| 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. | 
| 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- | 
| 12 | 
            +
            date: 2012-09-26 00:00:00.000000000 Z
         | 
| 13 13 | 
             
            dependencies:
         | 
| 14 14 | 
             
            - !ruby/object:Gem::Dependency
         | 
| 15 15 | 
             
              name: sprockets
         |