jquery.router.js

/*

    plugin name: router
    jquery plugin to handle routes with both hash and push state
    why? why another routing plugin? because i couldnt find one that handles both hash and pushstate
    created by 24hr // camilo.tapia
    author twitter: camilo.tapia
  
    Copyright 2011  camilo tapia // 24hr (email : camilo.tapia@gmail.com)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as 
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA

*/
 

(function($){
    
    var hasPushState = (history && history.pushState);    
    var hasHashState = !hasPushState && ("onhashchange" in window) && false;
    var router = {};
    var routeList = [];
    var eventAdded = false;
    var currentUsedUrl = location.href; //used for ie to hold the current url
    var firstRoute = true;
    var errorCallback = function () {};
    
    // hold the latest route that was activated
    router.currentId = "";
    router.currentParameters = {};
    
    // Create a default error handler
    router.errorCallback = errorCallback;
    
    router.capabilities = {
        hash: hasHashState,
        pushState: hasPushState,
        timer: !hasHashState && !hasPushState
    };
    
    // reset all routes
    router.reset = function()
    {
        var router = {};
        var routeList = [];
        router.currentId = "";
        router.currentParameters = {};
    }
 
    router.add = function(route, id, callback)
    {
        // if we only get a route and a callback, we switch the arguments
        if (typeof id == "function")
        {
            callback = id;
            delete id;
        }
        
        var isRegExp = typeof route == "object";
        
        if (!isRegExp)
        {
            
            // remove the last slash to unifiy all routes
            if (route.lastIndexOf("/") == route.length - 1)
            {
                route = route.substring(0, route.length - 1);
            }
            
            // if the routes where created with an absolute url ,we have to remove the absolut part anyway, since we cant change that much
            route = route.replace(location.protocol + "//", "").replace(location.hostname, "");
        }

        var routeItem = {
            route: route,
            callback: callback,
            type: isRegExp ? "regexp" : "string",
            id: id
        }

        routeList.push(routeItem);
        
        // we add the event listener after the first route is added so that we dont need to listen to events in vain
        if (!eventAdded)
        {
            bindStateEvents();
        }
    };
    
    router.addErrorHandler = function (callback)
    {
        this.errorCallback = callback;
    };
    
    function bindStateEvents()
    {
        eventAdded = true;
        
        // default value telling router that we havent replaced the url from a hash. yet.
        router.fromHash = false;

        
        if (hasPushState)
        {
            // if we get a request with a qualified hash (ie it begins with #!)
            if (location.hash.indexOf("#!/") === 0)
            {
                // replace the state
                var url = location.pathname + location.hash.replace(/^#!\//gi, "");
                history.replaceState({}, "", url);
                
                // this flag tells router that the url was converted from hash to popstate
                router.fromHash = true;
            }
            
            $(window).bind("popstate", handleRoutes);
        }
        else if (hasHashState)
        {
            $(window).bind("hashchange.router", handleRoutes);
        }
        else
        {
            // if no events are available we use a timer to check periodically for changes in the url
            setInterval(
                function()
                {
                    if (location.href != currentUsedUrl)
                    {
                        handleRoutes();
                        currentUsedUrl = location.href;
                    }
                }, 500
            );
        }
       
    }
    
    bindStateEvents();
    
    router.go = function(url, title)
    {   
        if (hasPushState)
        {
            history.pushState({}, title, url);
            checkRoutes();
        }
        else
        {
            // remove part of url that we dont use
            url = url.replace(location.protocol + "//", "").replace(location.hostname, "");
            var hash = url.replace(location.pathname, "");
            
            if (hash.indexOf("!") < 0)
            {
                hash = "!/" + hash;
            }
            location.hash = hash;
        }
    };
    
    // do a check without affecting the history
    router.check = router.redo = function()
    {   
        checkRoutes(true);
    };
    
    // parse and wash the url to process
    function parseUrl(url)
    {
        var currentUrl = url ? url : location.pathname;
        
        currentUrl = decodeURI(currentUrl);
        
        // if no pushstate is availabe we have to use the hash
        if (!hasPushState)
        {   
            if (location.hash.indexOf("#!/") === 0)
            {
                currentUrl += location.hash.substring(3);
            }
            else
            {
                return '';
            }
        }
        
        // and if the last character is a slash, we just remove it
        currentUrl = currentUrl.replace(/\/$/, "");

        return currentUrl;
    }
    
    // get the current parameters for either a specified url or the current one if parameters is ommited
    router.parameters = function(url)
    {
        // parse the url so that we handle a unified url
        var currentUrl = parseUrl(url);
        
        // get the list of actions for the current url
        var list = getParameters(currentUrl);
        
        // if the list is empty, return an empty object
        if (list.length == 0)
        {
            router.currentParameters = {};
        }
        
        // if we got results, return the first one. at least for now
        else 
        {
            router.currentParameters = list[0].data;
        }
        
        return router.currentParameters;
    }
    
    function getParameters(url)
    {

        var dataList = [];
        
       // console.log("ROUTES:");

        for(var i = 0, ii = routeList.length; i < ii; i++)
        {
            var route = routeList[i];
            
            // check for mathing reg exp
            if (route.type == "regexp")
            {
                var result = url.match(route.route);
                if (result)
                {
                    var data = {};
                    data.matches = result;
                    
                    dataList.push(
                        {
                            route: route,
                            data: data
                        }
                    );
                    
                    // saves the current route id
                    router.currentId = route.id;
                    
                    // break after first hit
                    break;
                }
            }
            
            // check for mathing string routes
            else
            {
                var currentUrlParts = url.split("/");
                var routeParts = route.route.split("/");
                
                //console.log("matchCounter ", matchCounter, url, route.route)

                // first check so that they have the same amount of elements at least
                if (routeParts.length == currentUrlParts.length)
                {
                    var data = {};
                    var matched = true;
                    var matchCounter = 0;

                    for(var j = 0, jj = routeParts.length; j < jj; j++)
                    {
                        var isParam = routeParts[j].indexOf(":") === 0;
                        if (isParam)
                        {
                            data[routeParts[j].substring(1)] = decodeURI(currentUrlParts[j]);
                            matchCounter++;
                        }
                        else
                        {
                            if (routeParts[j] == currentUrlParts[j])
                            {
                                matchCounter++;
                            }
                        }
                    }

                    // break after first hit
                    if (routeParts.length == matchCounter)
                    {
                        dataList.push(
                            {
                                route: route,
                                data: data
                            }
                        );

                        // saved the current route id
                        router.currentId = route.id;
                        router.currentParameters = data;
                        
                        break; 
                    }
                    
                }
            }
            
        }
        
        return dataList;
    }
    
    function checkRoutes()
    {
        var currentUrl = parseUrl(location.pathname);

        // check if something is catched
        var actionList = getParameters(currentUrl);
        
        // If no routes have been matched
        if (actionList.length == 0) {
            // Invoke error handler
            return router.errorCallback(currentUrl);
        }
        
        // ietrate trough result (but it will only kick in one)
        for(var i = 0, ii = actionList.length; i < ii; i++)
        {
            actionList[i].route.callback(actionList[i].data);
        }
    }
    

    function handleRoutes(e)
    {
        if (e != null && e.originalEvent && e.originalEvent.state !== undefined)
        {
            checkRoutes();
        }
        else if (hasHashState)
        {
            checkRoutes();
        }
        else if (!hasHashState && !hasPushState)
        {
            checkRoutes();
        }
    }



    if (!$.router)
    {
        $.router = router;
    }
    else
    {
        if (window.console && window.console.warn)
        {
            console.warn("jQuery.status already defined. Something is using the same name.");
        }
    }
        
})( jQuery );