From 0ea44c76b9fb1df924587415f2c9c48b7b08ae4e Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Wed, 25 Aug 2021 00:01:10 -0700
Subject: [PATCH] Modifying the route extension to have a show and hide
 callback.

---
 ignite-html-router.js | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/ignite-html-router.js b/ignite-html-router.js
index aa3c982..733526a 100644
--- a/ignite-html-router.js
+++ b/ignite-html-router.js
@@ -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();
             }
         }
     };