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

Cleaned up code and fixed a bug where parameters were not taking into consideration with routes that are not root based.

Browse Source
This commit is contained in:
MattMo 2023-07-09 22:24:33 -07:00
parent 8560e24761
commit 0ebd6d1ab4
1 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ignite-html-router.js
View File

@ -1,7 +1,7 @@
import { IgniteHtml, IgniteRendering } from "../ignite-html/ignite-html.js"; import { IgniteHtml, IgniteRendering } from "../ignite-html/ignite-html.js";
import { IgniteElement } from "../ignite-html/ignite-element.js"; import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.js"; import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.js";
import { IgniteCallback, IgniteProperty} from "../ignite-html/ignite-html.js"; import { IgniteCallback, IgniteProperty } from "../ignite-html/ignite-html.js";
/** /**
* Creates a route listener that runs when a route is switched. The listener will run on construct the first time and update the state. * Creates a route listener that runs when a route is switched. The listener will run on construct the first time and update the state.
@ -13,7 +13,7 @@ import { IgniteCallback, IgniteProperty} from "../ignite-html/ignite-html.js";
* @param {Boolean} strict If true all routes must match before running the callback. Default is false. * @param {Boolean} strict If true all routes must match before running the callback. Default is false.
* @returns {IgniteTemplate} This ignite template. * @returns {IgniteTemplate} This ignite template.
*/ */
IgniteTemplate.prototype.route = function(routes, showCallback = null, hideCallback = null, strict = false) { IgniteTemplate.prototype.route = function (routes, showCallback = null, hideCallback = null, strict = false) {
//If routes is not an array, wrap it. //If routes is not an array, wrap it.
if (!Array.isArray(routes)) { if (!Array.isArray(routes)) {
routes = [routes]; routes = [routes];
@ -21,7 +21,7 @@ IgniteTemplate.prototype.route = function(routes, showCallback = null, hideCallb
//By default hide this route. //By default hide this route.
this.element.style.setProperty("display", "none", "important"); this.element.style.setProperty("display", "none", "important");
//Create an update method that will be used to check and see if the route is met. //Create an update method that will be used to check and see if the route is met.
var update = (event) => { var update = (event) => {
var routeMatches = false; var routeMatches = false;
@ -93,7 +93,7 @@ IgniteTemplate.prototype.route = function(routes, showCallback = null, hideCallb
* @param {Boolean|IgniteProperty|Function} keepQuery Whether or not to keep the current url query, default is false. * @param {Boolean|IgniteProperty|Function} keepQuery Whether or not to keep the current url query, default is false.
* @returns {IgniteTemplate} This ignite template. * @returns {IgniteTemplate} This ignite template.
*/ */
IgniteTemplate.prototype.navigate = function(route, data = null, refresh = false, keepQuery = false) { IgniteTemplate.prototype.navigate = function (route, data = null, refresh = false, keepQuery = false) {
return this.onClick((e) => { return this.onClick((e) => {
Router.navigate( Router.navigate(
(route instanceof IgniteProperty ? route.value : (route instanceof Function ? route() : route)), (route instanceof IgniteProperty ? route.value : (route instanceof Function ? route() : route)),
@ -338,7 +338,7 @@ class Router {
* @param {String} fallback The fallback route incase there is no history, default is null. * @param {String} fallback The fallback route incase there is no history, default is null.
* @param {Boolean} refresh Whether or not to refresh the page, default is false. * @param {Boolean} refresh Whether or not to refresh the page, default is false.
*/ */
static back(fallback = null, refresh = false) { static back(fallback = null, refresh = false) {
if (Router.states && Router.states.length > 1) { if (Router.states && Router.states.length > 1) {
Router.states.pop(); //Pop the current state. Router.states.pop(); //Pop the current state.
Router.navigate(Router.states.pop(), null, refresh); //Navigate to the previous state. Router.navigate(Router.states.pop(), null, refresh); //Navigate to the previous state.
@ -354,7 +354,7 @@ class Router {
window.history.back(); window.history.back();
} }
} }
} }
/** /**
* Returns whether or not the current location matches a given route. * Returns whether or not the current location matches a given route.
@ -371,7 +371,7 @@ class Router {
//If hash mode is set and we have a hash location, get it and split it. //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) { if (Router.hashMode && window.location.hash && window.location.hash.length > 0) {
var path = window.location.hash.substr(1); var path = window.location.hash.substring(1);
//If the path contains ? then remove the query. //If the path contains ? then remove the query.
if (path.includes("?")) { if (path.includes("?")) {
@ -392,11 +392,12 @@ class Router {
var fromRoot = (route.trim().startsWith("/")); var fromRoot = (route.trim().startsWith("/"));
var routeParts = (fromRoot ? route.trim().split("/").splice(1) : route.trim().split("/")); var routeParts = (fromRoot ? route.trim().split("/").splice(1) : route.trim().split("/"));
//Check to see if we have a trailing route part, if so, remove it. //Remove trailing parts
if (pathParts.length > 0 && pathParts[pathParts.length - 1] == "") { if (pathParts.length > 0 && pathParts[pathParts.length - 1] == "") {
pathParts.pop(); pathParts.pop();
} }
//Remove trailing parts
if (routeParts.length > 0 && routeParts[routeParts.length - 1] == "") { if (routeParts.length > 0 && routeParts[routeParts.length - 1] == "") {
routeParts.pop(); routeParts.pop();
} }
@ -405,7 +406,7 @@ class Router {
if (pathParts.length == 0 && routeParts.length == 0) { if (pathParts.length == 0 && routeParts.length == 0) {
return true; return true;
} }
//If path parts is 0, and the route part is ** then this is a match. //If path parts is 0, and the route part is a wildcard then this is a match.
else if (pathParts.length == 0 && routeParts.length == 1 && (routeParts[0] == "**" || routeParts[0] == "*")) { else if (pathParts.length == 0 && routeParts.length == 1 && (routeParts[0] == "**" || routeParts[0] == "*")) {
return true; return true;
} }
@ -413,7 +414,7 @@ class Router {
else if (pathParts.length == 0 && routeParts.length == 1 && routeParts[0].startsWith("!")) { else if (pathParts.length == 0 && routeParts.length == 1 && routeParts[0].startsWith("!")) {
return true; return true;
} }
//If the path parts is 0 and the route is !*/** then this is a match //If the path parts is 0 and the route is an exclude wildcard then this is a match
else if (pathParts.length == 0 && routeParts.length == 2 && routeParts[0].startsWith("!") && routeParts[1] == "**") { else if (pathParts.length == 0 && routeParts.length == 2 && routeParts[0].startsWith("!") && routeParts[1] == "**") {
return true; return true;
} }
@ -446,16 +447,20 @@ class Router {
} }
} else { } else {
for (var offset = 0; offset < pathParts.length; offset++) { for (var offset = 0; offset < pathParts.length; offset++) {
for (var i = 0; i < max; i++) { for (var i = 0; i <= max; i++) {
if (i + offset >= pathParts.length) { if (i == max) {
return true;
} else if (i + offset >= pathParts.length) {
return false; return false;
} } else if (routeParts[i].startsWith("{") && routeParts[i].endsWith("}")) {
else if (routeParts[i].startsWith("!") && pathParts[i + offset] == routeParts[i].substring(1)) { if (data) {
data[routeParts[i].substring(1, routeParts[i].length - 1)] = pathParts[i + offset];
}
} else if (routeParts[i].startsWith("!") && pathParts[i + offset] == routeParts[i].substring(1)) {
break; break;
} else if (routeParts[i] == "**") { } else if (routeParts[i] == "**") {
return true; return true;
} } else if (routeParts[i] != pathParts[i + offset] && routeParts[i] != "*" && !routeParts[i].startsWith("!")) {
else if (routeParts[i] != pathParts[i + offset] && routeParts[i] != "*" && !routeParts[i].startsWith("!")) {
break; break;
} else if (i + 1 == routeParts.length && offset + routeParts.length == pathParts.length) { } else if (i + 1 == routeParts.length && offset + routeParts.length == pathParts.length) {
return true; return true;
@ -477,7 +482,7 @@ class Router {
static getParameter(name) { static getParameter(name) {
if (Router.hashMode) { if (Router.hashMode) {
var params = new URLSearchParams(window.location.hash.includes("?") ? "?" + window.location.hash.split("?")[1] : ""); var params = new URLSearchParams(window.location.hash.includes("?") ? "?" + window.location.hash.split("?")[1] : "");
return (params.has(name) ? params.get(name) : null); return (params.has(name) ? params.get(name) : null);
} else { } else {
var params = new URLSearchParams(window.location.search); var params = new URLSearchParams(window.location.search);
return (params.has(name) ? params.get(name) : null); return (params.has(name) ? params.get(name) : null);