Modernizing (lol) to use popstate event; this.history[] will keep…

… track of the nav history

README.md

@@ -3,7 +3,7 @@
 [![build status](https://secure.travis-ci.org/avoidwork/dom-router.svg)](http://travis-ci.org/avoidwork/dom-router)
 
 Imagine you didn't have to write a bunch of JavaScript to get a slick, progressively enhanced interface! `dom-router`
-is a URL hash to DOM router which automatically, & intelligently toggles visibility of `Elements` based on `hashchange`
+is a URL hash to DOM router which automatically, & intelligently toggles visibility of `Elements` based on `popstate`
 events.
 
 This provides a clean separation of concerns, and progressive enhancement in a simple library. You can write clean HTML,
@@ -96,7 +96,7 @@ Multi-tier routing delimiter, defaults to `/`, e.g. `#settings/billing`; each ti
 #### current()
 Returns the current `Route`, if logging is enabled
 
-#### hashchange(ev)
+#### popstate(ev)
 Event handler, expects `{oldURL: "", newURL: ""}`
 
 #### scan(default)

lib/dom-router.js

@@ -4,7 +4,7 @@
  * @author Jason Mulligan <jason.mulligan@avoidwork.com>
  * @copyright 2021
  * @license BSD-3-Clause
- * @version 3.1.6
+ * @version 4.0.0
  */
 
 "use strict";
@@ -42,26 +42,12 @@
 		}
 
 		current () {
-			return this.history[0];
+			return this.history[this.history.length - 1];
 		}
 
-		hashchange (ev) {
-			if (this.stop) {
-				if ("stopPropagation" in ev && typeof ev.stopPropagation === "function") {
-					ev.stopPropagation();
-				}
-
-				if ("preventDefault" in ev && typeof ev.preventDefault === "function") {
-					ev.preventDefault();
-				}
-			}
-
-			this.handler(ev);
-		}
-
-		handler (ev) {
-			const oldHash = includes(ev.oldURL, "#") ? ev.oldURL.replace(not_hash, "") : null,
-				newHash = includes(ev.newURL, "#") ? ev.newURL.replace(not_hash, "") : null;
+		handler () {
+			const oldHash = this.history.length > 0 ? (this.current().hash || "").replace(not_hash, "") || null : null,
+				newHash = includes(location.hash, "#") ? location.hash.replace(not_hash, "") : null;
 
 			if (this.active && this.valid(newHash)) {
 				if (!includes(this.routes, newHash)) {
@@ -133,13 +119,15 @@
 		}
 
 		log (arg) {
-			if (this.logging) {
-				this.history.unshift(arg);
-			}
+			this.history.push(this.logging ? arg : {hash: arg.hash});
 
 			return this;
 		}
 
+		popstate (ev) {
+			this.handler(ev);
+		}
+
 		process () {
 			const hash = document.location.hash.replace("#", "");
 
@@ -186,12 +174,12 @@
 	function factory (arg) {
 		const obj = new Router(arg);
 
-		obj.hashchange = obj.hashchange.bind(obj);
+		obj.popstate = obj.popstate.bind(obj);
 
 		if ("addEventListener" in window) {
-			window.addEventListener("hashchange", obj.hashchange, false);
+			window.addEventListener("popstate", obj.popstate, false);
 		} else {
-			window.onhashchange = obj.hashchange;
+			window.onpopstate = obj.popstate;
 		}
 
 		if (obj.active) {
@@ -201,7 +189,7 @@
 		return obj;
 	}
 
-	factory.version = "3.1.6";
+	factory.version = "4.0.0";
 
 	// CJS, AMD & window supported
 	if (typeof exports !== "undefined") {