smoothState - wordpress integration scripts

smoothState-wordpress.js

!function( $ ){
"use strict";

// include modified jquery.execReeady.js RIGHT AFTER jquery script, to handle onReady as mod exec
// the approach taken here is this:
// only the absolutely necessary assets (scripts/styles) should be included in ALL pages (e.g jquery, jquery.execReday, smoothState.js, smoothState-wordpress.js)
// all other assets (scripts/styles) per specific page should be included INSIDE the page part handled by smoothState, this script will make sure everything will load and init as transparently as possible
// the smoothState container element is #page and the replaced element is #page > .site.inner which should have a class .page-transition as well
// the transitions are parametrisable through some global settings under window.WPSmoothStateOptions which includes duration, inTransition, outTransition classes
// but one can change that if one wishes, this is quite generic since i use libraries of css-based animations with lots of options, so i find this more generic and parametrisable at will.
// current script adds a .smoothstate.smoothstate-delayed class(es) on container once page loading starts (one can add some ajax loader here, i have one in pure css as well),
// then on page ready it removes the .smoothstate-delayed and adds a .smoothstate-undelayed class (e.g ajax-loader removed), it also adds a .page-exiting and .page-entering on the page that is removrd or added respectively
// finaly when the page transition is over the animation classes are removed as the .smoothstate.smoothstate-undelayed classes of the container
// and any extra scripts of the current page (included INSIDE the loaded page) are waited to load before calling jquery.onReady mod exec
// the above scheme can handle all usual cases (at least) of WP with extra plugins which add their own .js scripts and so on (e.g ajax forms)

function onReady( scripts, before, after )
{
    var execReady = function( ) {
        // trigger ready listeners, if any
        // using jquery ready method as mod exec, document.ContentLoaded and window.onload mod execs
        setTimeout(function(){
            if ( before ) before( );
            if ( document.triggerReady ) document.triggerReady( true );
            if ( $.readyFn ) $.readyFn.execute( document, true );
            if ( window.triggerLoad ) window.triggerLoad( true );
            if ( after ) after( );
        }, 0);
    };
    
    var numScripts = 0;
    if ( scripts && scripts.length )
    {
        scripts.each(function( ){
            var script = this;
            if ( script.src && (!script.readyState || ('loaded' !== script.readyState) && ('complete' !== script.readyState)) )
            {
                numScripts++;
                var loader = function loader( ){
                    if ( !loader.done && 
                        (!loader.readyState ||
                        ('loaded' === loader.script.readyState) ||
                        ('complete' === loader.script.readyState))
                    )
                    {
                        loader.done = true;
                        loader.script.onload = loader.script.onreadystatechange = null;
                        numScripts--;
                        if ( loader.prev ) loader.prev( );
                        if ( 0 === numScripts ) execReady( );
                    }
                };
                loader.script = script;
                loader.done = false;
                loader.readyState = script.readyState ? true : false;
                loader.prev = script.onload || script.onreadystatechange || null;
                script.onerror = script.onload = script.onreadystatechange = loader;
                // run it manualy as well, since it may be already loaded and never call onload
                setTimeout(loader, 100);
            }
        });
    }
    if ( 0 === numScripts ) execReady( );
}

$(function(){
    var $page = $( '#page' ), beyondFinalFrontier;
    
    $page.smoothState({ 
        anchors: 'a',
        forms: 'form',
        blacklist: '.no-smoothState',
        scroll: true,
        //cacheLength: 0,
        onStart: {
            duration: 0,
            render: function( $container ) {
                $page.addClass( 'smoothstate smoothstate-delayed' );
                $('.page-transition', $container).addClass( 'page-exiting' );
                // may need to remove any extra html appended dynamicaly at body or head (e.g modal windows)
                // #finalfrontier are just empty elements with such an id as last elements of body and head (e.g defined in theme/header.php, theme/footer.php),
                // so in a sense they mark the "frontier line" after which only dynamicaly added stuff have been appended by current page
                beyondFinalFrontier = $('#headfinalfrontier').nextAll().add($('#finalfrontier').nextAll());
            }
        },
        onReady: {
            duration: +WPSmoothStateOptions.duration, // parametrisable global options
            render: function( $container, $newContent ) {
                $page.removeClass( 'smoothstate-delayed' ).addClass( 'smoothstate-undelayed' );
                $('.page-transition', $container).addClass( WPSmoothStateOptions.outTransition ); // parametrisable global options
                $newContent.addClass( 'page-entering ' + WPSmoothStateOptions.inTransition ); // parametrisable global options
                $container.append( $newContent );
            }
        },
        onAfter: function( $container, $newContent ) {
            $page.removeClass( 'smoothstate smoothstate-undelayed' );
            if ( beyondFinalFrontier.length ) beyondFinalFrontier.remove();
            $('.page-exiting', $container).removeClass( WPSmoothStateOptions.outTransition ).remove( );
            $newContent.removeClass( 'page-entering ' + WPSmoothStateOptions.inTransition );
            // listen for any extra scripts and wait to load before calling onReady
            onReady( $('script[src]:not([async]):not([defer])', $newContent) );
        }
    });
});

}( jQuery );

smoothState.js issue miguel-perez/smoothState.js#304

Hello foo123 ,
Thanks for you this code. I try but can't able to make it work can you show me working example so i better understand.

Thanks

No sur to understand. I need to enqueue
jquery-2.2.1.min.js
AND
jquery.smoothState.min.js
AND
smoothState-wordpress.js
AND
jquery.execReady.js
AND
my_script.js (my animation/transition)
??

Thanks for your help