Route Mapping Module

readme.md

Route Mapping Module

Small regex based router (maybe route checker is a better name) whose main purpose is just to map routes to functions. Built with the intention of using with jQuery pjax, so on pjax:complete check to see if the new route has specific code that needs to be executed. If you don't want to use with pjax, just leave the event option blank (or plop in any event you want the router to be bound to). There's jQuery dependency in here, but could be rejiggered to be without pretty easy.

Check out the router.usage.js file for config.

Regex matching logic from miniroutes!

router.module.js

// Router
Modules.Router = function(options) {
  
  var self = {

    options : $.extend({
      routes : {},
      ignore : null,
      event : null,
      notFound : function() {}
    }, options),

    events : function() {
      if(self.options.event){
         $(window).on(self.options.event, function() {
          self.navigate();
        });
      }
    },

    navigate : function() {
      var url = self.getCurrentRoute();
      var params;
      var cb; 

      Object.keys(self.options.routes).some(function(i) {
        params = self.matches(self.options.routes[i].pattern, url);
        if (params !== null) {
          cb = self.options.routes[i].cb;
          return true;
        }
      });

      $(window).trigger({
        type: "route.change",
        url: url
      });
      
      cb = cb ? cb : self.options.notfound;
      return cb(params);
    },

    matches : function(re, path) {
      var matches = re.exec(path);
      if (matches === null) return null;
      matches = matches.slice(1);
      matches = matches.map(function(val) {
        if (typeof val === 'undefined') return null;
        return val;
      });
      return matches;
    },

    getCurrentRoute : function() {
      var origin    = window.location.origin;
      var path      = window.location.href;
      var pathArray = path.replace(origin,'').split( '/' );
      var builtPath = self.options.ignore ? pathArray.join("/").replace(self.options.ignore, '') : pathArray.join("/");
      if (builtPath.indexOf('/') === 0)
        builtPath = builtPath.replace('/','');
      return builtPath;
    }

  };

  self.navigate();
  self.events();
  
  return false;

};

router.usage.js

var myRouter = Modules.Router({
  routes : {
    about : {
      pattern : /^about\/?$/,
      cb : function(params){
        // do stuff on about page
      }
    },
    contact : {
      pattern : /^contact\/?$/,
      cb : function(params){
        // do stuff on contact page
      }
    },
    project : {
      pattern : /^project(?:\/(.+))?$/,
      cb : function(params){
        // do stuff on project pages
      }
    },
    home : {
      pattern : /^\/?$/,
      cb : function(params){
        // do stuff on homepage
      }
    }
  },
  ignore : '/local/dev/path', // helpful if your root isn't the root
  event : 'popstate pjax:complete', // really just made this thing to combine with pjax
  notfound : function(){
    console.log('not found!');
    // do stuff on an unmatched route
  }
});