Get/Keep Previous Page's URL with SmoothState

Question

I am using https://github.com/miguel-perez/smoothState.js and trying to create an if/else statement using the previous page's URL. I tried storing the pathname in a cookie, but I also need to use the current pathname and it was only logging the cookie for some reason.

I hope this explains what I'm trying to do:

(function($) {
'use strict';
var $page = $('#main'),
    options = {
        debug: true,
        prefetch: true,
        cacheLength: 0,
        onBefore: function($currentTarget, $container) {

            // Keep the current page's pathname. Specifically
            // check if it's the sites index

        },
        onStart: {
            duration: 1000,
            render: function ($container) {
                $('#tempWrapper').remove();

                // Check if the new page is the site's index or not
                // and run a specific function

                if ( window.location.pathname == "/" ) {
                    smoothState.restartCSSAnimations();
                } else {
                    $("html, body").animate({ scrollTop: "0px" });
                    $(".carousel").remove();                

                    var $newContainer = $container.clone();             
                    $newContainer.attr("id", "tempWrapper");
                    $newContainer.css({
                        position:'absolute',
                        top:$container.offset().top,
                        width:$container.css("width"),
                        maxHeight:"100vh",
                        overflow:"hidden"
                    });

                    // $container.empty(); 
                    $container.before($newContainer);
                    $('#inner-content').removeClass('entering'); 

                    var element = $('#inner-content', $newContainer);
                    setTimeout(callAnimation(element, true), 0);
                }
            }
        },
        onReady: {
            duration: 1000,
            render: function ($container, $newContent) {
                $container.html($newContent);

                // This is where it gets tricky: I need to check if
                // the previous page was the site's index. If the
                // previous page was a subpage, it does an animation.

                if ( window.location.pathname == "/" ) {
                    // Index (home) page
                } else {
                    // Do animations
                    var element = document.getElementById($container[0].id).getElementsByClassName('move')[0];
                    callAnimation(element);
                }
            }
        }
    },
    smoothState = $page.smoothState(options).data('smoothState');
 })(jQuery);

I've inlined my notes, any help is greatly appreciated. I've also tried using document.referrer but displays blank; I'm assuming it's because there's no click page refreshing.

Answer 1

I've just written the very same thing. Have a look at the following:

(function($) {
'use strict';

var state = {
    source: '',
    bearing: ''
};

var wp = {
    homeUrl: 'http://www.example.com/'
};

/**
 * Get the slug from a full URL.
 * @param  string url
 * @return string
 */
function getSlug( url ) {
    // Remove home URL
    url = url.replace( new RegExp( wp.homeUrl, 'g' ), '' );

    // Remove file extensions
    url = url.replace( /\.[^/.]+$/, '' );

    return ( '' === url || 'index' === url ) ? '/' : url;
}

/**
 * Check if a journey is from a page to another page.
 * @param  string|array  source  The page you are coming from.
 * @param  string|array  bearing The page you are going to.
 * @return boolean
 */
function isJourney( source, bearing ) {
    // Convert array params into strings
    if ( Array.isArray(source) ) {
        source = source.join();
    }

    if ( Array.isArray(bearing) ) {
        bearing = bearing.join();
    }

    return -1 !== source.indexOf( state.source ) && -1 !== bearing.indexOf( state.bearing );
}

var $page = $('#main'),
    options = {
        debug: true,
        prefetch: true,
        cacheLength: 0,
        onBefore: function($currentTarget, $container) {

            // Keep the current page's pathname. Specifically
            // check if it's the sites index
            var smoothState = $container.smoothState().data('smoothState');

            // Store where you're coming from and where you're going
            state.source = getSlug( smoothState.href );
            state.bearing = getSlug( $currentTarget.get(0).href );

        },
        onStart: {
            duration: 1000,
            render: function ($container) {
                $('#tempWrapper').remove();

                // Check if the new page is the site's index or not
                // and run a specific function

                if ( '/' == state.bearing ) {
                    smoothState.restartCSSAnimations();
                } else {
                    $("html, body").animate({ scrollTop: "0px" });
                    $(".carousel").remove();                

                    var $newContainer = $container.clone();             
                    $newContainer.attr("id", "tempWrapper");
                    $newContainer.css({
                        position:'absolute',
                        top:$container.offset().top,
                        width:$container.css("width"),
                        maxHeight:"100vh",
                        overflow:"hidden"
                    });

                    // $container.empty(); 
                    $container.before($newContainer);
                    $('#inner-content').removeClass('entering'); 

                    var element = $('#inner-content', $newContainer);
                    setTimeout(callAnimation(element, true), 0);
                }
            }
        },
        onReady: {
            duration: 1000,
            render: function ($container, $newContent) {
                $container.html($newContent);

                // This is where it gets tricky: I need to check if
                // the previous page was the site's index. If the
                // previous page was a subpage, it does an animation.

                if ( '/' == state.source ) {
                    // Index (home) page
                } else {
                    // Do animations
                    var element = document.getElementById($container[0].id).getElementsByClassName('move')[0];
                    callAnimation(element);
                }
            }
        }
    },
    smoothState = $page.smoothState(options).data('smoothState');
 })(jQuery);

Place your home page URL in the wp.homeUrl variable. This can be done with wp_localize_script when adding the script file, if you'd rather not hardcode it.

Then you can check the state variable to see which page you came from (source) or are going to (bearing).

I've also thrown in a quick isJourney() function that I wrote, which allows you to quickly check if you're going from a specific page to another specific page. It supports arrays in either parameter, so you can test if going from a page to a set of pages.

Hope this helps!

PS - if anyone knows a better way to get the slug from the URL let me know!