Simple Pjax mixin-component for twitter flight

Easily enable fast Ajax navigation on any FlightJS app.

Usage example:

####Component with router

``js
define('component_ui/route', [
'flight/lib/component',
'path/to/flight-pjax'
],

function(defineComponent, withPjax) {

return defineComponent(newComponent, withPjax);

function newComponent() {

this.after('initialize', function() {
this.on('touchend click', this.nodeClicked);

this.on('pjax:loading', this.loading);
this.on('pjax:complete', this.complete);
this.on('pjax:error', this.error);
});

this.loading = function() {
// maybe show a loader
};

this.complete = function() {
// hide loader
};

this.error = function() {
// give the user a nice message
};
}
}
);
`
####Initializing

`js
require([
'path/to/flight-component-with-pjax'
], function(component) {

// Attach pjax to the body
pjax.attachTo(document.body, {
defaultAnimation: 'fade',
container: '.content-wrapper',
ignore: [
'data-modal', // Skip elements with the data attribute model
'data-toggle:slidePanel' // Skip elements with the data attribute toggle with the value slidePanel
],
selectors: [
'.flash-messages',
'.nav-bar'
]
});

});
`

Documentation

$3

Returns current page URL.

$3

Used to trigger the load page method.

- ev event

$3

- URL is url like string. Must start from '/'.
- Boolean if passed state would not be pushed, but replaced, to save history clean.

$3

This will perform an Ajax call to load the page.

- URL is url like string. Must start from '/'.
- Args is optional object with following params:

`js
replaceState: Boolean
`
If passed state would not be pushed, but replaced, to save history clean.

`js
transition: String
`
The animation for the container when being displayed.

`js
forced: Boolean
`
Param that tells fire new state any way even if URL is same.

$3

Sometimes there might be a need to disable the built in popstate event.

$3

Used to re-enable the popstate event.

$3

- Array an array of paramaters to append/remove/replace from the current url.

CSS for container animation

Where .content-wrapper is the classname of your container.

`css
/ Fade animation /
.content-wrapper.fade {
opacity: 0;
transition: opacity .1s;
}
.content-wrapper.fade.in {
opacity: 1;
}

/ Slide animation /
.content-wrapper.sliding {
z-index: 2;
transition: transform .4s;
transform: translate3d(0, 0, 0);
}
.content-wrapper.sliding.left {
z-index: 1;
transform: translate3d(-100%, 0, 0);
}
.content-wrapper.sliding.right {
z-index: 3;
transform: translate3d(100%, 0, 0);
}
``

Using Laravel

Checkout the Laravel Pjax Middleware package.