Skip to content

Instantly share code, notes, and snippets.

@HendrikRunte
Created January 28, 2015 10:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save HendrikRunte/54673940516bf7be7d1b to your computer and use it in GitHub Desktop.
Save HendrikRunte/54673940516bf7be7d1b to your computer and use it in GitHub Desktop.
RouterJS: Simple hashbang router for single page apps.
/**
* router.js
*
* Hendrik Runte, 2015
*/
/**
* Simple hashbang router for single page apps.
*
* Expects URIs like
* #!/details/id:12
* #!/buy/id:27
* #!/bet/id:1456
*
* Initialize on DOMready:
* window.LocationRouter = new Router({
* 'bet' : function(_id){
* window.console.log("LocationRouter action triggered: 'bet()'.");
* },
* 'details' : function(_id){
* window.console.log("LocationRouter action triggered: 'details()'.");
* },
* 'buy' : function(_id){
* window.console.log("LocationRouter action triggered: 'buy()'.");
* }
* });
* @param {Object} _router_actions This object takes the RouterActions as methods.
*/
var Router = function(_router_actions){
var self = this;
self.availableRouterActions = [
'bet'
, 'buy'
, 'details'
];
self.registeredRouterActions = {
'bet': function(){}
, 'buy': function(){}
, 'details': function(){}
};
self.shopicoProductsId = 0;
self.routerAction = '';
if ((typeof(_router_actions) !== 'undefined') && ($.isPlainObject(_router_actions))) {
for (var action in _router_actions) {
if (_router_actions.hasOwnProperty(action)) {
self.registerRouterAction(action, _router_actions[action]);
}
}
}
self.grepHashBang(function(){
self.listen();
});
};
/**
* Implements a Event Listener which watches the browser's address bar for changes.
* @return {Object} The instance itself.
*/
Router.prototype.listen = function(){
if ("onhashchange" in window) {
window.addEventListener("hashchange", this.grepHashBang.bind(this), false);
} else {
// This browser does not support haschange event. If so it might fail at window.console as well.
}
return this;
};
/**
* Scrutinizes the hash part of window.location.
* @param {Function} _callback Callback function.
* @return {Object} The instance itself.
*/
Router.prototype.grepHashBang = function(_callback){
var selectors = {
'details' : window.location.hash.split('#!/details/')[1],
'bet' : window.location.hash.split('#!/bet/')[1],
'buy' : window.location.hash.split('#!/buy')[1]
},
shopico_products_id = 0;
for (var selector in selectors) {
if (selectors.hasOwnProperty(selector)) {
if (typeof(selectors[selector]) !== 'undefined') {
this.routerAction = selector;
this.shopicoProductsId = /id:([0-9]+)/i.exec(selectors[selector])[1];
if (typeof(this.registeredRouterActions[this.routerAction]) !== 'undefined') {
this.registeredRouterActions[this.routerAction](this.shopicoProductsId);
} else {
window.console.log("The called RouterAction was not defined.");
}
}
}
}
if ($.isFunction(_callback)) {
_callback();
}
return this;
};
/**
* Registers a given key with a given function. The key should be part of the
* array this.availableRouterActions.
* @param {String} _router_action The action's name.
* @param {Function} _action_method What to do.
* @return {Object} The instance itself.
*/
Router.prototype.registerRouterAction = function(_router_action, _action_method) {
if ($.inArray(_router_action, this.availableRouterActions) !== -1) {
if ($.isFunction(_action_method)) {
this.registeredRouterActions[_router_action] = _action_method;
}
}
return this;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment