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

Added parameter to route on shown that specifies whether or not the route was shown because we navigated back to it.

Browse Source
This commit is contained in:
MattMo 2024-01-15 09:54:45 -08:00
parent 28e85092c9
commit 81a44ec7ea
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ignite-html-router.js
View File

@ -46,6 +46,9 @@ IgniteTemplate.prototype.route = function (routes, showCallback = null, hideCall
//Invoke the callback if the route matched. //Invoke the callback if the route matched.
if (routeMatches) { if (routeMatches) {
//Determine if we are going back to this route.
var back = (event && event.type == "popstate");
//If the route is already visible, call hidden, because we are reshowing the route. //If the route is already visible, call hidden, because we are reshowing the route.
if (hideCallback && this.element.style.display != "none") { if (hideCallback && this.element.style.display != "none") {
hideCallback(); hideCallback();
@ -55,7 +58,7 @@ IgniteTemplate.prototype.route = function (routes, showCallback = null, hideCall
this.element.style.removeProperty("display"); this.element.style.removeProperty("display");
if (showCallback) { if (showCallback) {
showCallback(matchedRoute, (event && event.data ? event.data : data)); showCallback(matchedRoute, (event && event.data ? event.data : data), back);
} }
} else { } else {
//Hide the route element. //Hide the route element.
@ -293,8 +296,9 @@ class Router {
* @param {Any} data The data to pass along with this navigate, this only applies when not refreshing, default is null. * @param {Any} data The data to pass along with this navigate, this only applies when not refreshing, 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.
* @param {Boolean} keepQuery Whether or not to keep the current url query, default is false. * @param {Boolean} keepQuery Whether or not to keep the current url query, default is false.
* @param {Boolean} back Whether or not we are navigating back to this route, default is false.
*/ */
static navigate(route, data = null, refresh = false, keepQuery = false) { static navigate(route, data = null, refresh = false, keepQuery = false, back = false) {
//If keepQuery is true then include the current query. //If keepQuery is true then include the current query.
if (keepQuery) { if (keepQuery) {
if (route.includes("?")) { if (route.includes("?")) {
@ -342,10 +346,16 @@ class Router {
//Push the route to our internal states //Push the route to our internal states
Router.states.push(route); Router.states.push(route);
//Fire a pushstate event to make the routes switch. //Fire a pushstate or popstate event to make the routes switch.
var event = new Event("pushstate"); if (back) {
event.data = data; var event = new Event("popstate");
window.dispatchEvent(event); event.data = data;
window.dispatchEvent(event);
} else {
var event = new Event("pushstate");
event.data = data;
window.dispatchEvent(event);
}
} }
} }
@ -359,8 +369,8 @@ class Router {
//Pop the current state. //Pop the current state.
Router.states.pop(); Router.states.pop();
//Navigate to the previous state //Navigate to the previous state (Back is true, because we are going to a previous state)
Router.navigate(Router.states.pop(), null, refresh, false); Router.navigate(Router.states.pop(), null, refresh, false, true);
} else { } else {
//Pop the current state, otherwise it can be used to go back but we don't want that. //Pop the current state, otherwise it can be used to go back but we don't want that.
if (Router.states.length > 0) { if (Router.states.length > 0) {
@ -368,7 +378,7 @@ class Router {
} }
if (fallback) { if (fallback) {
Router.navigate(fallback, null, refresh); Router.navigate(fallback, null, refresh, false, false);
} else { } else {
window.history.back(); window.history.back();
} }