flight-with-pjax

    0.0.12 • Public • Published

    Simple Pjax mixin-component for twitter flight

    Easily enable fast Ajax navigation on any FlightJS app.

    Usage example:

    Component with router

    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

    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

    this.getCurrentURL();

    Returns current page URL.

    this.nodeClicked(ev);

    Used to trigger the load page method.

    • ev event

    this.navigate(URL, [boolean]);

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

    this.loadPage(url, [args])

    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:
        replaceState: Boolean

    If passed state would not be pushed, but replaced, to save history clean.

        transition: String

    The animation for the container when being displayed.

        forced: Boolean

    Param that tells fire new state any way even if URL is same.

    this.disablePopstate();

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

    this.enablePopstate();

    Used to re-enable the popstate event.

    this.replaceParams(Array);

    • 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.

    /* 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(000);
    }
    .content-wrapper.sliding.left {
      z-index: 1;
      transform: translate3d(-100%00);
    }
    .content-wrapper.sliding.right {
      z-index: 3;
      transform: translate3d(100%00);
    }

    Using Laravel

    Checkout the Laravel Pjax Middleware package.

    Install

    npm i flight-with-pjax

    DownloadsWeekly Downloads

    1

    Version

    0.0.12

    License

    MIT

    Last publish

    Collaborators

    • avatar