Added support for multiple route checking for router links and router views.

This commit is contained in:
Matt Mo 2020-11-02 08:15:12 -08:00
parent af88f24a29
commit bf48cac433

View File

@ -15,7 +15,7 @@ class RouterLink extends IgniteElement {
get properties() { get properties() {
return { return {
active: false, active: false,
route: null routes: []
}; };
} }
@ -44,7 +44,11 @@ class RouterLink extends IgniteElement {
} }
update() { update() {
var routeMatches = RouteMatcher.matches(this.route); var routeMatches = true;
for (var i = 0; i < this.routes.length && routeMatches; i++) {
routeMatches = RouteMatcher.matches(this.routes[i]);
}
if (routeMatches && !this.active) { if (routeMatches && !this.active) {
this.active = true; this.active = true;
@ -79,7 +83,7 @@ class RouterView extends IgniteElement {
get properties() { get properties() {
return { return {
show: false, show: false,
route: null routes: []
}; };
} }
@ -94,7 +98,11 @@ class RouterView extends IgniteElement {
} }
update() { update() {
var routeMatches = RouteMatcher.matches(this.route); var routeMatches = true;
for (var i = 0; i < this.routes.length && routeMatches; i++) {
routeMatches = RouteMatcher.matches(this.routes[i]);
}
if (routeMatches && !this.show) { if (routeMatches && !this.show) {
this.show = true; this.show = true;
@ -196,18 +204,26 @@ class RouteMatcher {
window.RouteMatcher = RouteMatcher; window.RouteMatcher = RouteMatcher;
class RouterLinkTemplate extends IgniteTemplate { class RouterLinkTemplate extends IgniteTemplate {
constructor(route, ...elements) { constructor(routes, ...elements) {
super("router-link", elements); super("router-link", elements);
this.property("route", route); if (!Array.isArray(routes)) {
routes = [routes];
}
this.property("routes", routes);
} }
} }
class RouterViewTemplate extends IgniteTemplate { class RouterViewTemplate extends IgniteTemplate {
constructor(route, ...elements) { constructor(routes, ...elements) {
super("router-view", elements); super("router-view", elements);
this.property("route", route); if (!Array.isArray(routes)) {
routes = [routes];
}
this.property("routes", routes);
} }
} }