signalr.nprogress.js

//TODO: Add configuration for timeout and nprogress templates
(function ($, nProgress, undefined) {
    if ($ === undefined) {
        console.error("jQuery was not found. Please ensure jQuery is referenced before signalr.nprogress.js.");
    }
    
    if ($.signalR === undefined) {
        console.error("SignalR was not found. Please ensure SignalR is referenced before signalr.nprogress.js.");
    }

    if ($.connection.hub.id !== undefined) {
        console.error("signalr/hubs was referenced before signalr.nprogress.js. Please ensure signalr/hubs is referenced after signalr.nprogress.js");
    }
    
    if (nProgress === undefined) {
        console.error("nprogress was not found. Please ensure nprogress is referenced before signalr.nprogress.js.");
        return;
    }

    var signalR = $.signalR;
    var hubConnection = $.hubConnection;
    
    //create copies of existing signalr methods to override and pipe
    var parent = {
        createHubProxy: hubConnection.prototype.createHubProxy,
        received: signalR.prototype.received,
        start: signalR.hub.start,
    };
    var progress = null;
    var connection = $.connection;

    function hideProgressBar() {
        clearTimeout(progress);
        nProgress.done();
    }

    function showProgressBar() {
        //set a timeout to show the progress bar after 2 seconds
        //this will allow us to remove the timeout if we get a
        //response before the timeout expires
        progress = setTimeout(function () {
            nProgress.configure({
                template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>',
                showSpinner: true
            });
            nProgress.start();
        }, 2000);
    }

    function showReconnectingBar() {
        
        //change to the reconnecting bar template
        nProgress.configure({
            template: '<div class="reconnecting-bar" role="bar"><div class="reconnecting-peg"></div></div><div class="reconnecting-spinner" role="spinner"><div class="reconnecting-spinner-icon"></div></div>',
            showSpinner: true
        });
        
        //show the progress bar
        nProgress.start();
    }
    
    function showDisconnectedBar() {
        //clear out the reconnecting bar
        nProgress.done();
        
        //change to the disconnected bar template
        nProgress.configure({
            template: '<div class="disconnected-bar" role="bar"><div class="disconnected-peg"></div></div>',
            showSpinner: false
        });
        
        //show the progress bar
        nProgress.start();
        
        //set the bar to almost 100%
        //setting it to 1 will cause it to be marked as 'done'
        //which will remove the bar
        nProgress.set(.99999);
    }

    //override the createHubProxy with a new one
    hubConnection.prototype.createHubProxy = function () {
        var proxy = parent.createHubProxy.apply(this, arguments);
        var savedInvoke = proxy.invoke;

        //override invoke on the hub proxy.
        //this is called everytime a function on the hub is called
        proxy.invoke = function () {
            showProgressBar();
            return savedInvoke.apply(this, arguments);
        };

        //handle reconnected/disconnected/connected state changes
        //to show/hide special progress bars
        connection.hub.stateChanged(function (change) {
            switch(change.newState) {
                case $.connection.connectionState.reconnecting:
                    showReconnectingBar();
                    break;
                case $.connection.connectionState.connected:
                    hideProgressBar();
                    break;
                case $.connection.connectionState.disconnected:
                    showDisconnectedBar();
                    break;
            }
        });

        //when a message is received we can hide the progress bars again
        //or stop the tiemout
        connection.hub.received(function () {
            hideProgressBar();
        });

        return proxy;
    };


    //on start (connecting) start the progress bar timer
    signalR.hub.start = function () {
        showProgressBar();
        parent.start.apply(this, arguments);
    };

})(window.jQuery, window.NProgress);