[![Build Status](https://travis-ci.org/igor-alexandrov/wiselinks.png)](https://travis-ci.org/igor-alexandrov/wiselinks) [![Code Climate](https://codeclimate.com/github/igor-alexandrov/wiselinks.png)](https://codeclimate.com/github/igor-alexandrov/wiselinks) [![Coverage Status](https://coveralls.io/repos/igor-alexandrov/wiselinks/badge.png)](https://coveralls.io/r/igor-alexandrov/wiselinks) [![Dependency Status](https://gemnasium.com/igor-alexandrov/wiselinks.png)](https://gemnasium.com/igor-alexandrov/wiselinks) [![Gem Version](https://badge.fury.io/rb/wiselinks.png)](http://badge.fury.io/rb/wiselinks) #Wiselinks Wiselinks makes following links and submitting some forms in your web application faster. You may find Wiselinks similar to [Turbolinks](https://github.com/rails/turbolinks) or [Pjax](https://github.com/defunkt/jquery-pjax), but Wiselinks have several rather important differences from both projects. We tried to make Wiselinks as easy to use as Turbolinks are but also as configurable as Pjax. ## Compatibility **Please be advised that Javascript events in wiselinks-0.5.0 are not backward compatible.** Wiselinks uses [History.js](https://github.com/balupton/History.js/) library to perform requests. Wiselinks works in all major browsers including browsers that do not support HTML History API out of the box. ## In Comparison to Turbolinks and PJAX
Wiselinks Turbolinks PJAX
Work in HTML5 browsers Yes Yes Yes
Work in browsers without History API Yes, with hashbang (can be switched off) No, degrades to normal request processing No, degrades to normal request processing
Work without JavaScript No, degrades to normal request processing No, degrades to normal request processing No, degrades to normal request processing
Form processing Yes No Yes (experimental feature)
Form parameters optimization Yes No No
Assets change detection Yes, by calculating assets MD5 hash on boot Yes, by parsing document head on every request No
30x HTTP redirects processing Yes No Yes
##Installation Add this to your Gemfile: ```ruby gem 'wiselinks' ``` Then do: bundle install Restart your server and you're now using wiselinks! ## How does it work? ### CoffeeScript Create Wiselinks object in your `application.js.coffee`: ```coffeescript #= require jquery #= require wiselinks $(document).ready -> window.wiselinks = new Wiselinks() ``` You can disable HTML4 browsers support easily: ```coffeescript #= require jquery #= require wiselinks $(document).ready -> window.wiselinks = new Wiselinks($('body'), html4: false ) ``` Or you can add some more options, if you want: ```coffeescript #= require jquery #= require jquery.role #= require wiselinks $(document).ready -> # DOM element with id = "content" will be replaced after data load. window.wiselinks = new Wiselinks($('#content')) $(document).off('page:loading').on( 'page:loading' (event, $target, render, url) -> console.log("Loading: #{url} to #{$target.selector} within '#{render}'") # code to start loading animation ) $(document).off('page:redirected').on( 'page:redirected' (event, $target, render, url) -> console.log("Redirected to: #{url}") # code to start loading animation ) $(document).off('page:always').on( 'page:always' (event, xhr, settings) -> console.log("Wiselinks page loading completed") # code to stop loading animation ) $(document).off('page:done').on( 'page:done' (event, $target, status, url, data) -> console.log("Wiselinks status: '#{status}'") ) $(document).off('page:fail').on( 'page:fail' (event, $target, status, url, error) -> console.log("Wiselinks status: '#{status}'") # code to show error message ) ``` ### HTML Click on links with `data-push` attribute will fire History.pushState() event. Data from the request will replace content of the container that was passed to Wiselinks (default is `$('body')`) ```html ``` Click on links with `data-replace` will fire History.replaceState() event. Data from the request will replace content of the container that was passed to Wiselinks (default is "body") ```html
Proceed to the next step
``` Click on following links will fire History.pushState() event. Data from the request will be pasted into `
`. This configuration is widely when you have list of items that are paginated, sorted or maybe grouped by some attributes and you want to update only these items and nothing more on page. ```html
...
``` **Form processing** Wiselinks can process forms. After submit button is clicked, Wiselinks will perform a request to form url with form attributes serialized to a string. Wiselinks always performs a HTTP GET request. ```html
...
``` ### Rendering The idea of Wiselinks is that you should render only content that you need in current request. Usually you don't need to reload your stylesheets and javascripts on every request. ### Javascript Events While using Wiselinks you **can rely** on `DOMContentLoaded` or `jQuery.ready()` to trigger your JavaScript code, but Wiselinks gives you some additional useful event to deal with the lifecycle of the page: **page:loading ($target, render, url)** Event is triggered before the `XMLHttpRequest` is initialised and performed. * *$target* – JQuery object in which result of the request will be inserted; * *url* - URL of the request that will be performed; * *render* – what should be rendered; can be 'template' or 'partial'; **page:redirected ($target, render, url)** Event is triggered when you were redirected during `XMLHttpRequest` (with HTTP 30x status). * *$target* – jQuery object in which result of the request will be inserted; * *url* - URL where you have been redirected to; * *render* – what should be rendered; can be 'template' or 'partial'; **page:done ($target, status, url, data)** Event is triggered if the request succeeds. * *$target* – jQuery object that was updated with the request; * *status* – a string describing the status; * *url* – url of the request; * *data* – content of the request; **page:fail ($target, status, url, error)** Event is triggered if the request fails. * *$target* – jQuery object that had to be updated with the request; * *status* – a string describing the status; * *url* – url of the request; * *error* – a string describing the type of error that occurred; **page:always ($target, status, url)** Event is triggered after each request. * *$target* – jQuery object that had to be updated with the request; * *status* – a string describing the status; * *url* – url of the request; So if you want to show a client-side loading spinner, you could listen for `page:loading` to start it and `page:always` to stop it. ### ActionDispatch::Request extensions Wiselinks adds a couple of methods to `ActionDispatch::Request`. These methods are mostly syntax sugar and don't have any complex logic, so you can use them or not. #### #wiselinks? ### Method returns `true` if current request is initiated by Wiselinks, `false` otherwise. #### #wiselinks_template? ### Method returns `true` if current request is initiated by Wiselinks and client want to render template, `false` otherwise. #### #wiselinks_partial? ### Method returns `true` if current request is initiated by Wiselinks and client want to render partial, `false` otherwise. ### Assets change detection You can enable assets change detection with Wiselinks. To do this you have to enable assets digests by adding this to you environment file: ```ruby config.assets.digest = true ``` Then you should append your layout by adding this to head section: ```erb <%= wiselinks_meta_tag %> ``` Now Wiselinks will track changes of your assets and if anything will change, your page will be reloaded completely. ### Title handling Wiselinks handles page titles by passing `X-Wiselinks-Title` header with response. To set this header you can use `wiselinks_title` helper (in Rails). ```html <% wiselinks_title("Wiselinks is awesome") %>
...
``` Of course you can use `wiselinks_title` helper in your own helpers too. ### Redirect handling Wiselinks follows 30x HTTP redirects. Location is updated in browser with `X-Wiselinks-Url` header that is setting up automatically (in Rails) on every wiselinks request. ### Target missing handling By default, if Wiselinks cannot find target that you specified during initialization, it will fail silently. But you can override this behaviour: ```coffeescript #= require jquery #= require wiselinks $(document).ready -> window.wiselinks = new Wiselinks( $('something that does not exist'), target_missing: 'exception' ) ``` `[Wiselinks] Target missing` exception will be thrown. This also works for `data-target` attributes. ### Google Analytics and Yandex Metrika If you want to handle these analytics tools, then you should add handler to `page:done` event. Let's say, that you have two objects, first is `_gaq` – instance of Google Analytics, second is `_metrika` – instance of Yandex Metrika. Then you have to add the following code somewhere in your `application.js.coffee`. ```coffeescript $(document).off('page:done').on( 'page:done' (event, $target, status, url, data) -> _gaq.push(['_trackPageview', url]) _metrika.hit(url) ) ``` After this, you will have correct page view statistics in your analytics tools. ## Example We crafted example application that uses nearly all features of Wiselinks so you can see it in action. * GitHub Repository: [https://github.com/igor-alexandrov/wiselinks_example](https://github.com/igor-alexandrov/wiselinks_example) * Live Example: [http://wiselinks.herokuapp.com/](http://wiselinks.herokuapp.com/) ## Note on Patches / Pull Requests * Fork the project. * Make your feature addition or bug fix. * Add tests for it. This is important so I don't break it in a future version unintentionally. * Commit, do not mess with rakefile, version, or history. (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull) * Send me a pull request. Bonus points for topic branches. ## Credits ![JetRockets](http://www.jetrockets.ru/public/logo.png) Wiselinks is maintained by [JetRockets](http://www.jetrockets.ru/en). Contributors: * [Igor Alexandrov](http://igor-alexandrov.github.com/) * [Alexey Solilin](https://github.com/solilin) * [Julia Egorova](https://github.com/vankiru) * [Alexandr Borisov](https://github.com/aishek) ## License It is free software, and may be redistributed under the terms specified in the LICENSE file.