OxyRouter

OxyRouter is a simple plugin for making front-end routes super-easy to make and use. DEMO

So, no more running to the backend just to make unnecessary routes that don't do much. And if you're making a static website, this will make the application much faster by cutting back the requests made to the server and only receiving the information you need. It integrates with handlebars to render templates. You can render templates from script tags as well as partial template files.

Guide

####Installing OxyRouter We haven't uploaded it to any repositories or cdn's yet but you can still use it by adding the following script tags in your html

<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js'></script>
<script src='https://rawgit.com/phenax/oxyrouter/master/js/oxygen.router.js'></script>

####Initiating OxyRouter

var router= new OxyRouter({
	otherwise: '/',
	page: '.container',
	defaultTitle: 'My Website'
});

• new OxyRouter is where it all starts.
• otherwise: '/'. This redirects requests from undefined routes to '/'.
• page: '.container'. Here, '.container' is css selector for the div where you want the contents to be placed.
• defaultTitle: 'My Website'. This sets the default title for all routes that a user navigates to.

####Create a route

router.route({
	name: 'about',
	title: 'About Us',
	url: '/about',
	template: '#about',
	data: {
		info: "Hello"
	}
});

• router.route is used to create a route.
• name: 'about'. Used to identify your route(doesn't matter what it is).
• title: 'About Us'. It is the title of the page when a user navigates to that route.
• url: '/about'. Create a route at the url //oxyrouter/#/about.
• template: '#about'. CSS selector for the template.
• data: { info: "Hello" }. Rendering text.

Other stuff you can try

• text: "Hello". To be used instead of template for rendering text.
• template_url: "./part.html". To be used instead of template for templating using an html file.
• success: function() { alert("Done"); }. This will be executed everytime the template is done rendering. This is only used with template_url.
• sub: function(r) { }. This function is a sub-router. You can use it to create url for specific posts (Eg- /post/2 or /user/akshay) and 'r' is the id(the '2' in /post/2) (Example given below).

####Subrouting example

var getPostFromServer= function(pid) {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
		if (xhttp.readyState == 4 && xhttp.status == 200) {
			fn(xhttp.responseText);
		} else {
			fn(new Error("Sorry, bruh... Something went wrong."));
		}
	};
	xhttp.open("GET", "/post/"+pid, true);
	xhttp.send();
};

// This is the important part!
router.route({
	name: 'post',
	url: '/post',
	template: '#about',
	data: {
		info: "Hello"
	},
	sub: function(pid) {
		var post= getPostFromServer(pid,function(data) {
			router.render_text('#post-template',{ post: data });
		});
	}
});

• getPostFromServer(pid) is your function that interacts with the - server and returns the data required.
• router.render_text(.....) allows you to render stuff to container yourself. NOTE: The template will still be rendered in the '.container' that was declared in the initiation.

####Psuedo GET Requests

router.route({
  name: 'post',
  url: '/post',
  template: '#about',
  data: { },
  get: function(data) {
    if(data.pid && data.page) {
      var post= getPostFromServer(data.pid,data.page);
      router.render_text('#post-template',{ post: post });
    } else {
      // For no request
  }
}
});

get: function(data) { .... This function can be used to perform actions on the requests made and give the user an output. getPostFromServer(pid) is your function that interacts with the server and returns the data required. router.render_text(.....) allows you to render stuff to container yourself. NOTE: The template will still be rendered in the '.container' that was declared in the initiation.

####My work here is done

Thats it. You're good to go.

Contact Me

Follow me on Codepen,Github,Twitter