MontoyaTech/ignite-html-router
MontoyaTech/ignite-html-router
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

RouterMatcher is now Router. Added navigate. Added hash mode.

Browse Source
This commit is contained in:
MattMo 2021-05-19 10:28:07 -07:00
parent 12916f008c
commit 9bee6456cb
1 changed files with 86 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
ignite-html-router.js
View File

@ -46,11 +46,11 @@ class RouterLink extends IgniteElement {
var routeMatches = false;
//Check the target first.
routeMatches = RouteMatcher.matches(this.target);
routeMatches = Router.matches(this.target);
//Check optional routes next.
for (var i = 0; i < this.routes.length && !routeMatches; i++) {
routeMatches = RouteMatcher.matches(this.routes[i]);
routeMatches = Router.matches(this.routes[i]);
}
if (routeMatches && !this.active) {
@ -62,8 +62,7 @@ class RouterLink extends IgniteElement {
onClick(event) {
event.preventDefault();
window.history.pushState(this.target, this.target, this.target);
window.dispatchEvent(new Event("pushstate"));
Router.navigate(this.target, false);
}
cleanup() {
@ -92,9 +91,9 @@ class RouterView extends IgniteElement {
}
render() {
return this.template.child(
new slot(this)
).style("display", this.show, null, (value) => { return value ? null : "none"; });
return this.template
.child(new slot(this))
.style("display", this.show, null, value => value ? null : "none");
}
ready() {
@ -107,12 +106,12 @@ class RouterView extends IgniteElement {
//Based on whether we are strict matching or not check if we have a match.
if (!this.strict) {
for (var i = 0; i < this.routes.length && !routeMatches; i++) {
routeMatches = RouteMatcher.matches(this.routes[i]);
routeMatches = Router.matches(this.routes[i]);
}
} else {
routeMatches = true;
for (var i = 0; i < this.routes.length && routeMatches; i++) {
routeMatches = RouteMatcher.matches(this.routes[i]);
routeMatches = Router.matches(this.routes[i]);
}
}
@ -130,10 +129,82 @@ class RouterView extends IgniteElement {
}
}
class RouteMatcher {
class RouterLinkTemplate extends IgniteTemplate {
/**
* Initializes a new router link template.
* @param {String} target The target route when the link is clicked.
* @param {String|String[]} routes Optional routes that can be used to control the active state of the link.
* @param {...any} elements Elements to render within the link.
*/
constructor(target, routes, ...elements) {
super("router-link", elements);
if (!routes) {
routes = [];
}
if (!Array.isArray(routes)) {
routes = [routes];
}
this.property("target", target);
this.property("routes", routes);
}
}
class RouterViewTemplate extends IgniteTemplate {
/**
* Initializes a new router view.
* @param {String|String[]} routes Single or multiple routes to trigger this view to render.
* @param {any|any[]} elements Elements to render within the view.
* @param {Boolean} strict If true all routes must match before this view becomes visible.
*/
constructor(routes, elements, strict = false) {
super("router-view", Array.isArray(elements) ? elements : [elements]);
if (!Array.isArray(routes)) {
routes = [routes];
}
this.property("routes", routes);
this.property("strict", strict);
}
}
class Router {
static navigate(route, refresh = false) {
if (refresh) {
if (Router.hashMode) {
window.location.hash = route;
window.location.reload();
} else {
window.location.href = route;
}
} else {
if (Router.hashMode) {
window.location.hash = route;
} else {
window.history.pushState(route, route, route);
}
window.dispatchEvent(new Event("pushstate"));
}
}
static matches(route) {
//Get the path parts from the window
var pathParts = window.location.pathname.split("/").splice(1);
var pathParts = [];
//If hash mode is set and we have a hash location, get it and split it.
if (Router.hashMode && window.location.hash && window.location.hash.length > 0) {
pathParts = window.location.hash.substr(1).split("/");
if (pathParts.length > 0 && pathParts[0].length == 0) {
pathParts.splice(1);
}
}
else if (!Router.hashMode) {
pathParts = window.location.pathname.split("/").splice(1);
}
//Get the route parts
var fromRoot = (route.trim().startsWith("/"));
@ -214,55 +285,15 @@ class RouteMatcher {
}
}
window.RouteMatcher = RouteMatcher;
class RouterLinkTemplate extends IgniteTemplate {
/**
* Initializes a new router link template.
* @param {String} target The target route when the link is clicked.
* @param {String|String[]} routes Optional routes that can be used to control the active state of the link.
* @param {...any} elements Elements to render within the link.
*/
constructor(target, routes, ...elements) {
super("router-link", elements);
if (!routes) {
routes = [];
}
if (!Array.isArray(routes)) {
routes = [routes];
}
this.property("target", target);
this.property("routes", routes);
}
}
class RouterViewTemplate extends IgniteTemplate {
/**
* Initializes a new router view.
* @param {String|String[]} routes Single or multiple routes to trigger this view to render.
* @param {any|any[]} elements Elements to render within the view.
* @param {Boolean} strict If true all routes must match before this view becomes visible.
*/
constructor(routes, elements, strict = false) {
super("router-view", Array.isArray(elements) ? elements : [elements]);
if (!Array.isArray(routes)) {
routes = [routes];
}
this.property("routes", routes);
this.property("strict", strict);
}
}
Router.hashMode = false;
customElements.define("router-link", RouterLink);
customElements.define("router-view", RouterView);
window.Router = Router;
export {
RouterLinkTemplate as RouterLink,
RouterViewTemplate as RouterView,
RouteMatcher
Router
}