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

Modifying the route extension to have a show and hide callback.

Browse Source
This commit is contained in:
Matt Mo 2021-08-25 00:01:10 -07:00
parent 783a87da82
commit 0ea44c76b9
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ignite-html-router.js
View File

@ -4,12 +4,15 @@ import { IgniteCallback} 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.
* @class IgniteTemplate
* @memberof IgniteTemplate
* @param {String,String[]} routes A single or multiple set of routes that will invoke the callback if met.
* @param {Function} callback A callback function that is called when the route is met. It will be passed any route data.
* @param {Boolean} strict If true all routes must match before running the callback.
* @param {Function(data)} showCallback A callback function that is called when the route is shown. Default is null.
* @param {Function} hideCallback A callback function that is called when the route is hidden. Default is null.
* @param {Boolean} strict If true all routes must match before running the callback. Default is false.
* @returns {IgniteTemplate} This ignite template.
*/
IgniteTemplate.prototype.route = function(routes, callback, strict = false) {
IgniteTemplate.prototype.route = function(routes, showCallback = null, hideCallback = null, strict = false) {
//If routes is not an array, wrap it.
if (!Array.isArray(routes)) {
routes = [routes];
@ -17,8 +20,6 @@ IgniteTemplate.prototype.route = function(routes, callback, strict = false) {
//Create an update method that will be used to check and see if the route is met.
var update = (event) => {
console.log("Updating route:", routes);
var routeMatches = false;
//Create an object to hold any data.
@ -38,11 +39,18 @@ IgniteTemplate.prototype.route = function(routes, callback, strict = false) {
//Invoke the callback if the route matched.
if (routeMatches) {
console.log("Route matches");
if (event && event.data) {
callback(event.data);
} else {
callback(data);
//Show the route element.
this.element.style.removeProperty("display");
if (showCallback) {
showCallback((event && event.data ? event.data : data));
}
} else {
//Hide the route element.
this.element.style.setProperty("display", "none");
if (hideCallback) {
hideCallback();
}
}
};