Prevent user to leave the route in a single page app with hashbang

Question

I am using Sammy.js for my single page app. I want to create functionality similar to SO (the one when you type your question and try to leave the page and it is asking you if you are sure).

If it would not be a single page app, I would just do something like:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

The problem is that in single page app user do not actually leave the page, but rather changing his document.location.hash (he can leave the page by closing it). Is there a way to make something similar for a SPA, preferably with sammy.js?

Answer 1

We had a similar problem to solve in our Single Page Webapp at my work. We had some pages that could be dirty and, if they were, we wanted to prevent navigation away from that page until a user verifies it's okay to do so. Since we wanted to prevent navigation, we couldn't listen for the onhashchange event, which is fired after the hash is changed, not before. Therefore, we decided to override the default LocationProxy to include logic that allowed us to optionally prevent the navigation before the location was changed.

With that in mind, here is the proxy that we used:

PreventableLocationProxy = (function () {
    function PreventableLocationProxy(delegateProxy, navigationValidators) {
        /// <summary>This is an implementation of a Sammy Location Proxy that allows cancelling of setting a location based on the validators passed in.</summary>
        /// <param name="delegateProxy" type="Sammy.DefaultLocationProxy">The Location Proxy which we will delegate all method calls to.</param>
        /// <param name="navigationValidators" type="Function" parameterArray="true" mayBeNull="true">One or more validator functions that will be called whenever someone tries to change the location.</param>
        this.delegateProxy = delegateProxy;
        this.navigationValidators = Array.prototype.slice.call(arguments, 1);
    }

    PreventableLocationProxy.prototype.bind = function () {
        this.delegateProxy.bind();
    };

    PreventableLocationProxy.prototype.unbind = function () {
        this.delegateProxy.unbind();
    };

    PreventableLocationProxy.prototype.getLocation = function () {
        return this.delegateProxy.getLocation();
    };

    PreventableLocationProxy.prototype.setLocation = function (new_location) {
        var doNavigation = true;
        _.each(this.navigationValidators, function (navValidator) {
            if (_.isFunction(navValidator)) {
                // I don't just want to plug the result of the validator in, it could be anything!
                var okayToNavigate = navValidator(new_location);
                // A validator explicitly returning false should cancel the setLocation call. All other values will
                // allow navigation still.
                if (okayToNavigate === false) {
                    doNavigation = false;
                }
            }
        });
        if (doNavigation) {
            return this.delegateProxy.setLocation(new_location);
        }
    };

    return PreventableLocationProxy;
}());

This code is pretty simple in and of itself, it is a javascript object that takes a delegate proxy, as well as one or more validator functions. If any of those validators explicitly return false, then the navigation is prevented and the location won't change. Otherwise, the navigation is allowed. In order to make this work, we had to override our anchor tags' default onclick handling to route it through Sammy.Application.setLocation. Once done, though, this cleanly allowed our application to handle the dirty page logic.

For good measure, here is our dirty page validator:

function preventNavigationIfDirty(new_location) {
    /// <summary>This is an implementation of a Sammy Location Proxy that allows cancelling of setting a location based on the validators passed in.</summary>
    /// <param name="new_location" type="String">The location that will be navigated to.</param>
    var currentPageModels = [];
    var dirtyPageModels = [];
    //-----

    // Get the IDs of the current virtual page(s), if any exist.
    currentPageModels = _.keys(our.namespace.currentPageModels);

    // Iterate through all models on the current page, looking for any that are dirty and haven't had their changes abored.
    _.forEach(currentPageModels, function (currentPage) {
        if (currentPage.isDirty() && currentPage.cancelled === false) {
            dirtyPageModels.push(currentPage);
        }
    });

    // I only want to show a confirmation dialog if we actually have dirty pages that haven't been cancelled.
    if (dirtyPageModels.length > 0) {
        // Show a dialog with the buttons okay and cancel, and listen for the okay button's onclick event.
        our.namespace.confirmDirtyNavigation(true, function () {
            // If the user has said they want to navigate away, then mark all dirty pages with the cancelled
            // property then do the navigating again. No pages will then prevent the navigation, unlike this
            // first run.

            _.each(dirtyPageModels, function (dirtyPage) {
                dirtyPage.cancelled = true;
            });

            our.namespace.sammy.setLocation(new_location);
        });

        // Returns false in order to explicitly cancel the navigation. We don't need to return anything in any
        // other case.
        return false;
    }
}

Remember, this solution won't work if the user explicitly changes the location, but that wasn't a use case that we wanted to support. Hopefully this gets you closer to a solution of your own.