< labo

Z-Router

What is Z-router ?

Z-router is a light javascript router based on the hash # part of the url allowing you to display inline or ajax-fetched templates.

No dependencies are required, It is very simple to use and is very flexible with the possibility to add parameters into the url and use it in the template.

The only thing you'll have to do is adding a div #z-router-view and make your own routes.

Demo :

Here are some routes examples, click on them and see the magic in the browser window just below.

//user/user/42/fetched

How to build a route

A route is an object with some properties :


Example :

{
  url: "/home",
  options: {
    siteName: "Z-Router"
  },
  template: "<h1> My website is called : <% this.siteName %> </h1>",
  callback : function(options) {
    console.log("Hello, the website is called " + options.siteName);
  }
}

Z-Router methods :

ZRouter is the main "object Class", most of its methods are chaining capable.

Z-Router Example:

Here is the code for a simple router:

ZRouter
// set the root path (default "/")
  .setRoot("/")
  // set the loader template
  .setLoaderTpl('<h2>The template is loading, be patient please!</h2>')

  //add a route
  .add({
    url : "/",
    template: '<h2>The root Url</h2>' +
              '<hr>' +
              '<p><span class="inline-code"> url : "<% this.url %>" </span></p>' +
              '<p>What is the root url?</p>' +
              '<ul><li>It will be automatically loaded if no route has been provided on page load</li>' +
              '<li>It will be loaded if no route matches the entered url</li></ul>' +
              '<p>It can be changed : <span class="inline-code">ZRouter.setRoot("/newRootRoute")</span></p>',
    options: {
      url : "/"
    },
    callback : function(options){
      displayhashRoute();
    }
  })

  //add a route
  .add({
    url  : "/user",
    template : '<h2>A Normal route</h2>' +
                '<hr>' +
                '<p><span class="inline-code"> url : "<% this.url %>" </span></p>' +
                '<p>You could probably use this route to display a list of users...</p>',
    options:{
      url: "/user"
    },
    callback : function(options){
      displayhashRoute();
    }
  })

  //add a route
  .add({
    url  : "/user/:id",
    template : '<h2>A route with parameter </h2>' +
                '<hr>' +
                '<p><span class="inline-code"> url : "<% this.url %>" </span></p>' +
                '<p><span class="inline-code"> parameter : id = <% this.params.id %> </span></p>' +
                '<p>You could probably use this route to display a specific user</p>',
    options: {
      url: "/user/:id"
    },
      callback : function(options){
      displayhashRoute();
    }
  })

  //add a route
  .add({
    url : "/fetched",
    templateUrl : 'partials/fetched.html',
    options: {
      url : "/fetched"
    },
    callback : function(options) {
      displayhashRoute();
    }
  })

  // listen for hash changes
  .listen();
  
  //display the hash url inside the adressbar of the fake browser
  function displayhashRoute (){
    var url = window.location.hash;
    document.querySelector('.address-bar').innerHTML = url;
  }

More :

I developed this for me and wanted to share it with you because I think it can be usefull.

I don't guarantee that it is perfect but I tried to do my best.

Contributions, forks, pull requests, comments... are welcome!