146 lines
4.1 KiB
HTML
146 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html lang="en">
|
||
|
<head>
|
||
|
<meta charset="utf-8">
|
||
|
<title>JSDoc: Source: module/routing.js</title>
|
||
|
|
||
|
<script src="scripts/prettify/prettify.js"> </script>
|
||
|
<script src="scripts/prettify/lang-css.js"> </script>
|
||
|
<!--[if lt IE 9]>
|
||
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||
|
<![endif]-->
|
||
|
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
|
||
|
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
|
||
|
</head>
|
||
|
|
||
|
<body>
|
||
|
|
||
|
<div id="main">
|
||
|
|
||
|
<h1 class="page-title">Source: module/routing.js</h1>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<section>
|
||
|
<article>
|
||
|
<pre class="prettyprint source linenums"><code>/** @module routing */
|
||
|
|
||
|
/**
|
||
|
* A bare-bones history-api based SPA router.
|
||
|
*/
|
||
|
class Router {
|
||
|
/**
|
||
|
* Arguments for the current route.
|
||
|
* @type {undefined|*}
|
||
|
*/
|
||
|
route_args = undefined
|
||
|
|
||
|
/**
|
||
|
* List of callback functions listening for route changes.
|
||
|
* @type {function[]}
|
||
|
*/
|
||
|
subscribers = []
|
||
|
|
||
|
/**
|
||
|
* Array of router history records.
|
||
|
* @type {object[]}
|
||
|
*/
|
||
|
history = []
|
||
|
|
||
|
/**
|
||
|
* Returns the APP_BASE_PATH of the application.
|
||
|
* @return {string}
|
||
|
*/
|
||
|
get base_path() {
|
||
|
return APP_BASE_PATH
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Navigate the app to the given path with the given args.
|
||
|
* @param {string} path
|
||
|
* @param {*} args
|
||
|
*/
|
||
|
navigate(path, args) {
|
||
|
this.route_args = args
|
||
|
this.history.push({path, args})
|
||
|
window.history.pushState({}, path, this.build_url(path))
|
||
|
this.subscribers.forEach(sub => sub(path, args))
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Navigate back one route.
|
||
|
*/
|
||
|
back() {
|
||
|
window.history.back()
|
||
|
if ( this.history.length < 2 ) return;
|
||
|
this.history.pop()
|
||
|
const { path, args } = this.history[this.history.length - 1]
|
||
|
this.subscribers.forEach(sub => sub(path, args))
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Subscribe to listen for route changes. Returns an object with an unsubscribe() property.
|
||
|
* @param {function} handler - callback called when the route changes
|
||
|
* @return {object} - subscription manager
|
||
|
*/
|
||
|
subscribe(handler) {
|
||
|
if ( !this.subscribers.includes(handler) ) {
|
||
|
this.subscribers.push(handler)
|
||
|
}
|
||
|
|
||
|
return {
|
||
|
unsubscribe: () => {
|
||
|
this.subscribers = this.subscribers.filter(handler)
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Given an array of route parts, build a joined URL route.
|
||
|
* @param {...string} parts
|
||
|
* @return {string}
|
||
|
*/
|
||
|
build_url(...parts) {
|
||
|
parts = [this.base_path, ...parts].map(part => {
|
||
|
if ( part.endsWith('/') ) part = part.slice(0, -1)
|
||
|
if ( part.startsWith('/') ) part = part.slice(1)
|
||
|
return part
|
||
|
})
|
||
|
|
||
|
return parts.join('/')
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Global router instance.
|
||
|
* @type {Router}
|
||
|
*/
|
||
|
const router = new Router()
|
||
|
export { router }
|
||
|
</code></pre>
|
||
|
</article>
|
||
|
</section>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
</div>
|
||
|
|
||
|
<nav>
|
||
|
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-routing.html">routing</a></li><li><a href="module-util.html">util</a></li></ul><h3>Classes</h3><ul><li><a href="AddPlayersComponent.html">AddPlayersComponent</a></li><li><a href="DraftBoardComponent.html">DraftBoardComponent</a></li><li><a href="GridActionButtonComponent.html">GridActionButtonComponent</a></li><li><a href="GridComponent.html">GridComponent</a></li><li><a href="LeagueComponent.html">LeagueComponent</a></li><li><a href="LinkComponent.html">LinkComponent</a></li><li><a href="module-routing-Router.html">Router</a></li><li><a href="MyTeamComponent.html">MyTeamComponent</a></li><li><a href="ScoresComponent.html">ScoresComponent</a></li><li><a href="TopLevelComponent.html">TopLevelComponent</a></li></ul><h3>Global</h3><ul><li><a href="global.html#GridCellRenderType">GridCellRenderType</a></li></ul>
|
||
|
</nav>
|
||
|
|
||
|
<br class="clear">
|
||
|
|
||
|
<footer>
|
||
|
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.5</a> on Sun Oct 25 2020 12:32:18 GMT-0500 (Central Daylight Time)
|
||
|
</footer>
|
||
|
|
||
|
<script> prettyPrint(); </script>
|
||
|
<script src="scripts/linenumber.js"> </script>
|
||
|
</body>
|
||
|
</html>
|