1
0
Fork 0
mirror of https://github.com/sbrl/powahroot.git synced 2024-12-06 04:15:02 +00:00
powahroot/Client/Router.mjs

109 lines
3.7 KiB
JavaScript

"use strict";
import EventEmitter from 'event-emitter-es6';
import pathspec_to_regex from '../Shared/Pathspec.mjs';
/**
* Client-side request router.
* You should use this in a browser. If you're not in a browser, you probably want ServerRouter instead.
* @extends EventEmitter
* @param {object} options The options object to use when creating the router.
* @property {Boolean} verbose Whether to be verbose and log debugging information to the console.
* @property {Boolean} listen_pushstate Whether to listen to the browser's `pushstate` event and automatically navigate on recieving it.
*/
class ClientRouter extends EventEmitter {
constructor(options) {
super();
/***** Settings *****/
this.listen_pushstate = true;
this.verbose = false;
/********************/
for(let key in options) {
this[key] = options[key];
}
/********************/
/** Whether we should handle popstate events or not. @type {Boolean} */
this.handle_popstates = true;
this.routes = [];
window.addEventListener("popstate", ((event) => {
if(!this.handle_popstates) return;
console.info(`[ClientRouter] Handling popstate - path: ${window.location.hash.substr(1)} (state`, event.state, `)`);
this.navigate(window.location.hash.substr(1));
}).bind(this));
}
/**
* Sets the function to execute when no other route could be matched.
* @param {Function} callback The callback to execute.
* @example router.add_404((path) => console.log(`Oops! Couldn't find a route to handle '${path}'.`));
*/
add_404(callback) {
this.callback_404 = callback;
}
/**
* Adds a route to the router.
* @param {string|RegExp} routespec The route specification that the route should match against. May contain regular expression syntax, and the domain-specific :param syntax. A raw regular expression may also be passed, if you need the flexibility.
* @param {Function} callback The callback to execute when the route is matched.
* @example router.add_page("/add/vegetable/:name/:weight", (params) => console.log(`We added a ${params.name} with a weight of ${params.weight}g.`));
*/
add_page(routespec, callback) {
this.routes.push({
spec: routespec,
match: routespec instanceof RegExp ? { regex: routespec, tokens: [] } : pathspec_to_regex(routespec),
callback
});
}
/**
* Manually navigate to a given path.
* @param {string} path The path to navigate to.
* @example router.navigate("/add/carrot/frederick/10001");
*/
navigate(path) {
for(let route_info of this.routes) {
const matches = path.match(route_info.match.regex);
if(matches) {
if(this.verbose) console.log(`%c[Router] Matched against ${route_info.match.regex}!`, "color: hsl(331, 76%, 40%); font-weight: bold;");
// Build the parameters object
let params = {};
for(let i = 1; i < matches.length; i++) { // Skip the top-level group match
params[route_info.match.tokens[i-1]] = matches[i];
}
// Don't handle any popstates potentially generated by changing the hash
this.handle_popstates = false;
window.location.hash = `#${path}`;
this.handle_popstates = true;
route_info.callback(params);
return;
}
if(this.verbose) console.debug(`%c[Router] No match against ${route_info.match.regex} - moving on.`, "color: hsl(331, 76%, 40%)");
}
if(this.verbose) console.warn(`Couldn't find a match for '${path}'.`);
if(typeof this.callback_404 == "function")
this.callback_404(path);
}
/**
* Navigate to the current URL's hash value - i.e. the bit after the '#' symbol in the URL.
* @example router.navigate_current_hash();
*/
navigate_current_hash() {
this.navigate(window.location.hash.substr(1));
}
}
export default ClientRouter;