├── README.md ├── docs ├── spa.html ├── HRouter.js └── index.html ├── LICENSE.txt └── HRouter.js /README.md: -------------------------------------------------------------------------------- 1 | # HRouter.js 2 | HRouter.js is a Simple and Lightweight Javascript Routing Library for Single-page Applications, Client-side Routing and HTML5 Mobile Applications. 3 | -------------------------------------------------------------------------------- /docs/spa.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 - Current 4 | Oyedele Hammed Horlah, http://www.oyedelehammed.ml 5 | 6 | 7 | All rights reserved. 8 | 9 | 10 | Permission is hereby granted, free of charge, to any person obtaining 11 | a copy 12 | 13 | of this software and associated documentation files (the 14 | "Software"), to deal 15 | 16 | in the Software without restriction, including 17 | without limitation the rights to use, copy, modify, merge, publish, 18 | distribute, sublicense, and/or sell 19 | 20 | copies of the Software, and to 21 | permit persons to whom the Software is furnished to do so, subject to 22 | the following conditions: 23 | 24 | The above copyright notice and this permission notice shall be 25 | included in all copies or substantial portions of the Software. 26 | 27 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 28 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 29 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 30 | NONINFRINGEMENT. 31 | 32 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 33 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 34 | OF CONTRACT, TORT OR 35 | 36 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 37 | WITH THE SOFTWARE OR 38 | THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /docs/HRouter.js: -------------------------------------------------------------------------------- 1 | /** HRouter.js | Routing Library 2 | * @author Oyedele Hammed Horlah 3 | * @version 2.5 4 | * @since January 28, 2018 5 | * @see http://www.oyedelehammed.ml/HRouter.html 6 | */ 7 | 8 | function HRouter() { 9 | this.routes = []; 10 | } 11 | HRouter.prototype = { 12 | on: function( path, fn ) { 13 | this.routes.push({ path: path, fn: fn }); 14 | return this; 15 | }, 16 | run: function() { 17 | var self = this, 18 | go = function() { 19 | var url = location.hash.slice(1).split("?"), 20 | path = url[0] || "/", 21 | qs = url[1] + "&" + location.search.slice(1) || "", 22 | i = 0, 23 | keys = []; 24 | for ( ; i < self.routes.length; i++ ) { 25 | var reg = RegExp( "^" + self.routes[i].path.replace(/\:(\w+)/g, function( _, key ){ 26 | keys.push( key ); 27 | return "([^\/]+)"; 28 | }) + "(?:\/$|$)" ), 29 | m; 30 | if ( reg.test( path ) ) { 31 | m = reg.exec( path ); 32 | var req = { params: {}, query: {} }; 33 | m.slice(1).map(function( val, i ){ 34 | req.params[keys[i]] = val; 35 | }); 36 | qs.split("&").map(function( p ){ 37 | p = p.split("="); 38 | req.query[p[0]] = p[1]; 39 | }); 40 | self.routes[i].fn( req ); 41 | break; 42 | } 43 | } 44 | }; 45 | window.onload = go; 46 | window.onhashchange = go; 47 | } 48 | }; -------------------------------------------------------------------------------- /HRouter.js: -------------------------------------------------------------------------------- 1 | /** HRouter.js | Routing Library 2 | * @author Oyedele Hammed Horlah 3 | * @version 2.5 4 | * @since January 28, 2018 5 | * @see http://www.oyedelehammed.ml/HRouter.html 6 | */ 7 | 8 | function HRouter() { 9 | this.routes = []; 10 | } 11 | HRouter.prototype = { 12 | on: function( path, fn ) { 13 | this.routes.push( { path: path, fn: fn } ); 14 | return this; 15 | }, 16 | run: function() { 17 | var self = this, 18 | go = function() { 19 | var url = location.hash.slice( 1 ).split( '?' ), 20 | path = url[0] || '/', 21 | queryStr = url[ 1 ] + '&' + location.search.slice( 1 ) || '', 22 | i = 0, 23 | keys = []; 24 | for ( ; i < self.routes.length; i++ ) { 25 | var reg = RegExp( '^' + self.routes[i].path.replace( /\:(\w+)/g, function( _, key ){ 26 | keys.push( key ); 27 | return '([^\/]+)'; 28 | }) + '(?:\/$|$)' ), 29 | match; 30 | if ( reg.test( path ) ) { 31 | match = reg.exec( path ); 32 | var req = { params: {}, query: {} }; 33 | match.slice( 1 ).map( function( val, idx ){ 34 | req.params[ keys[ idx ] ] = val; 35 | } ); 36 | queryStr.split( '&' ).map( function( pair ){ 37 | pair = pair.split( '=' ); 38 | req.query[ pair[ 0 ] ] = pair[ 1 ]; 39 | } ); 40 | self.routes[ i ].fn( req ); 41 | break; 42 | } 43 | } 44 | }; 45 | window.onload = go; 46 | window.onhashchange = go; 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HRouter.js - Simple and Lightweight Javascript Routing Library 9 | 10 | 11 | 12 | 13 | 14 |
15 |

HRouter.js - Javascript Routing Made Easy

16 |
17 |
18 | Download v1.1 19 | View Demo 20 | Fork on Github 21 |
22 |

HRouter.js Javascript Routing Library

23 | HRouter.js is a Simple and Lightweight Javascript Routing Library suitable and designed for Single-page Web Applications 24 | and Mobile HTML5 Applications. 25 |
26 |
27 |
28 |

How to Use & Examples

29 | Download it 30 | HERE and Include it in your Project then create instance of 31 | HRouter object and add routes using the 32 | on( path, handler ) method then activate the routes using the 33 | run method. 34 |
35 | 36 |
37 |

HRouter#on( path, handler)

38 |

This method register routes.

39 |

40 | Path : The Route URL, it can be static or dynamic e.g 41 | /about or 42 | /user/:name (required)

. 43 |

44 | Handler : The handler function executes each time the route is been visited and it takes 1 argument that is 45 | an Object containing two Objects ( params: Dynamic URL Variables Object, query: URL Query String Object )

46 |

HRouter#run()

47 |

This method will initiate and add onload and onhashchange listeners to the window then redirect to appropriate route 48 | and execute the route handler function, making the HRouter routes clean and bookmarkable.

49 |
Below is an example code that explains the Static, Dynamic and URL Query String concepts. Check the demo of below 50 | code 51 | here. 52 |

53 |

index.html

54 | 
 55 | <!DOCTYPE html>
 56 | <html>
 57 | <head>
 58 | <meta charset="UTF-8">
 59 | </head>
 60 | <body>
 61 | <div id="hrView"></div>
 62 | </body>
 63 | <script src="js/HRouter.js"></script>
 64 | <script src="js/routes.js"></script>
 65 | </html>
 66 |
67 |

js/routes.js

68 | 
 69 | /*
 70 |   HRouter supports method chaining
 71 |   and 'hrView' is a variable that points to
 72 |   the block-level element
 73 |   with id="hrView".
 74 | */
 75 | var route = new HRouter();
 76 | route.on( "/", function( req ){
 77 |   document.title = "Home";
 78 |   hrView.innerHTML = "Hello world";
 79 | })
 80 | .on( "/user/:name", function( req ){
 81 |   var name = req.params.name;
 82 |   document.title = "User " + name;
 83 |   hrView.innerHTML = name + " profile";
 84 | })
 85 | .on( "/search", function( req ){
 86 |   var search = req.query.q;
 87 |   document.title = "Results for " + search;
 88 |   hrView.innerHTML = "Results for " + search;
 89 | });
 90 | route.run();
 91 |
92 |

93 |
94 |

Notes:

95 | 1. HRouter.js would redirect to Homepage if no route has been registered for the current URL. 96 |
2. You can link between pages using anchor links e.g <a href="#/about">About page</a> .NOTE: The Hash '#' 97 | is a must to put when linking. 98 |
3. You should register static routes before registering almost similar dynamic routes to avoid conflicts e.g 99 | /about before 100 | /:page. 101 |
102 |
103 |
104 |
105 | Thanks, Check out my other projects 106 | here. 107 |
108 |

109 | 112 | 113 | 114 | 115 | --------------------------------------------------------------------------------