RouterMatcher is now Router. Added navigate. Added hash mode.

ignite-html-router.js

@@ -46,11 +46,11 @@ class RouterLink extends IgniteElement {
         var routeMatches = false;
 
         //Check the target first.
-        routeMatches = RouteMatcher.matches(this.target);
+        routeMatches = Router.matches(this.target);
 
         //Check optional routes next.
         for (var i = 0; i < this.routes.length && !routeMatches; i++) {
-            routeMatches = RouteMatcher.matches(this.routes[i]);
+            routeMatches = Router.matches(this.routes[i]);
         }
 
         if (routeMatches && !this.active) {
@@ -62,8 +62,7 @@ class RouterLink extends IgniteElement {
 
     onClick(event) {
         event.preventDefault();
-        window.history.pushState(this.target, this.target, this.target);
+        Router.navigate(this.target, false);
-        window.dispatchEvent(new Event("pushstate"));
     }
 
     cleanup() {
@@ -92,9 +91,9 @@ class RouterView extends IgniteElement {
     }
 
     render() {
-        return this.template.child(
+        return this.template
-            new slot(this)
+            .child(new slot(this))
-        ).style("display", this.show, null, (value) => { return value ? null : "none"; });
+            .style("display", this.show, null, value => value ? null : "none");
     }
 
     ready() {
@@ -107,12 +106,12 @@ class RouterView extends IgniteElement {
         //Based on whether we are strict matching or not check if we have a match.
         if (!this.strict) {
             for (var i = 0; i < this.routes.length && !routeMatches; i++) {
-                routeMatches = RouteMatcher.matches(this.routes[i]);
+                routeMatches = Router.matches(this.routes[i]);
             }
         } else {
             routeMatches = true;
             for (var i = 0; i < this.routes.length && routeMatches; i++) {
-                routeMatches = RouteMatcher.matches(this.routes[i]);
+                routeMatches = Router.matches(this.routes[i]);
             }
         }
 
@@ -130,10 +129,82 @@ class RouterView extends IgniteElement {
     }
 }
 
-class RouteMatcher {
+class RouterLinkTemplate extends IgniteTemplate {
+    /**
+     * Initializes a new router link template.
+     * @param {String} target The target route when the link is clicked.
+     * @param {String|String[]} routes Optional routes that can be used to control the active state of the link.
+     * @param  {...any} elements Elements to render within the link.
+     */
+    constructor(target, routes, ...elements) {
+        super("router-link", elements);
+
+        if (!routes) {
+            routes = [];
+        }
+
+        if (!Array.isArray(routes)) {
+            routes = [routes];
+        }
+
+        this.property("target", target);
+        this.property("routes", routes);
+    }
+}
+
+class RouterViewTemplate extends IgniteTemplate {
+    /**
+     * Initializes a new router view.
+     * @param {String|String[]} routes Single or multiple routes to trigger this view to render. 
+     * @param {any|any[]} elements Elements to render within the view.
+     * @param {Boolean} strict If true all routes must match before this view becomes visible.
+     */
+    constructor(routes, elements, strict = false) {
+        super("router-view", Array.isArray(elements) ? elements : [elements]);
+
+        if (!Array.isArray(routes)) {
+            routes = [routes];
+        }
+
+        this.property("routes", routes);
+        this.property("strict", strict);
+    }
+}
+
+class Router {
+    static navigate(route, refresh = false) {
+        if (refresh) {
+            if (Router.hashMode) {
+                window.location.hash = route;
+                window.location.reload();
+            } else {
+                window.location.href = route;
+            }
+        } else {
+            if (Router.hashMode) {
+                window.location.hash = route;
+            } else {
+                window.history.pushState(route, route, route);
+            }
+
+            window.dispatchEvent(new Event("pushstate"));
+        }
+    }
+
     static matches(route) {
         //Get the path parts from the window
-        var pathParts = window.location.pathname.split("/").splice(1);
+        var pathParts = [];
+
+        //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) {
+            pathParts = window.location.hash.substr(1).split("/");
+            if (pathParts.length > 0 && pathParts[0].length == 0) {
+                pathParts.splice(1);
+            }
+        }
+        else if (!Router.hashMode) {
+            pathParts = window.location.pathname.split("/").splice(1);
+        }
 
         //Get the route parts
         var fromRoot = (route.trim().startsWith("/"));
@@ -214,55 +285,15 @@ class RouteMatcher {
     }
 }
 
-window.RouteMatcher = RouteMatcher;
+Router.hashMode = false;
-
-class RouterLinkTemplate extends IgniteTemplate {
-    /**
-     * Initializes a new router link template.
-     * @param {String} target The target route when the link is clicked.
-     * @param {String|String[]} routes Optional routes that can be used to control the active state of the link.
-     * @param  {...any} elements Elements to render within the link.
-     */
-    constructor(target, routes, ...elements) {
-        super("router-link", elements);
-
-        if (!routes) {
-            routes = [];
-        }
-
-        if (!Array.isArray(routes)) {
-            routes = [routes];
-        }
-
-        this.property("target", target);
-        this.property("routes", routes);
-    }
-}
-
-class RouterViewTemplate extends IgniteTemplate {
-    /**
-     * Initializes a new router view.
-     * @param {String|String[]} routes Single or multiple routes to trigger this view to render. 
-     * @param {any|any[]} elements Elements to render within the view.
-     * @param {Boolean} strict If true all routes must match before this view becomes visible.
-     */
-    constructor(routes, elements, strict = false) {
-        super("router-view", Array.isArray(elements) ? elements : [elements]);
-
-        if (!Array.isArray(routes)) {
-            routes = [routes];
-        }
-
-        this.property("routes", routes);
-        this.property("strict", strict);
-    }
-}
 
 customElements.define("router-link", RouterLink);
 customElements.define("router-view", RouterView);
 
+window.Router = Router;
+
 export {
     RouterLinkTemplate as RouterLink,
     RouterViewTemplate as RouterView,
-    RouteMatcher
+    Router
 }