fix popstate issue with recursive routing (#73)

Profiscience · Jun 13, 2016 · 1a79c74 · 1a79c74
1 parent 8b4b650
commit 1a79c74
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 99 deletions.
diff --git a/dist/ko-component-router.js b/dist/ko-component-router.js
@@ -172,29 +172,34 @@ return /******/ (function(modules) { // webpackBootstrap
 	      var _ref2$pushState = _ref2.pushState;
 	      var pushState = _ref2$pushState === undefined ? false : _ref2$pushState;
 
-	      if (path.toLowerCase().indexOf(this.config.base.toLowerCase()) === 0) {
-	        path = path.substr(this.config.base.length) || '/';
+	      var ctx = this.ctx;
+	      while (ctx.$child) {
+	        ctx = ctx.$child;
 	      }
 
-	      return this.ctx.update(path, state, pushState, false);
+	      if (path.toLowerCase().indexOf(ctx.config.base.toLowerCase()) === 0) {
+	        path = path.substr(ctx.config.base.length) || '/';
+	      }
+
+	      return ctx.update(path, state, pushState, false);
 	    }
 	  }, {
 	    key: 'onpopstate',
-	    value: function onpopstate(_ref3) {
-	      var state = _ref3.state;
+	    value: function onpopstate(e) {
+	      if (e.defaultPrevented) {
+	        return;
+	      }
 
-	      this.dispatch({
-	        path: location.pathname + location.search + location.hash,
-	        state: (state || {})[this.ctx.config.depth + this.ctx.pathname()]
-	      });
+	      var path = location.pathname + location.search + location.hash;
+	      var state = (e.state || {})[this.ctx.config.depth + this.ctx.pathname()];
+
+	      if (this.dispatch({ path: path, state: state })) {
+	        e.preventDefault();
+	      }
 	    }
 	  }, {
 	    key: 'onclick',
 	    value: function onclick(e) {
-	      if (1 !== which(e) || e.metaKey || e.ctrlKey || e.shiftKey) {
-	        return;
-	      }
-
 	      // ensure link
 	      var el = e.target;
 	      while (el && 'A' !== el.nodeName) {
@@ -204,35 +209,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return;
 	      }
 
+	      var isDoubleClick = 1 !== which(e);
+	      var hasModifier = e.metaKey || e.ctrlKey || e.shiftKey;
 	      var isDownload = el.hasAttribute('download');
 	      var hasOtherTarget = el.hasAttribute('target');
 	      var hasExternalRel = el.getAttribute('rel') === 'external';
 	      var isMailto = ~(el.getAttribute('href') || '').indexOf('mailto:');
 	      var isCrossOrigin = !sameOrigin(el.href);
 	      var isEmptyHash = el.getAttribute('href') === '#';
 
-	      if (isDownload || hasOtherTarget || hasExternalRel || isMailto || isCrossOrigin || isEmptyHash) {
+	      if (isCrossOrigin || isDoubleClick || isDownload || isEmptyHash || isMailto || hasExternalRel || hasModifier || hasOtherTarget) {
 	        return;
 	      }
 
-	      // rebuild path
 	      var path = el.pathname + el.search + (el.hash || '');
 
-	      // same page
-	      var orig = path;
-	      var base = this.config.base.replace('/#!', '');
-	      if (path.toLowerCase().indexOf(base.toLowerCase()) === 0) {
-	        path = path.substr(base.length);
-	      }
-
-	      if (this.config.hashbang) {
-	        path = path.replace('/#!', '');
-	      }
-
-	      if (this.config.base && orig === path) {
-	        return;
-	      }
-
 	      if (this.dispatch({ path: path, pushState: true })) {
 	        e.preventDefault();
 	      }

diff --git a/dist/ko-component-router.min.js b/dist/ko-component-router.min.js
diff --git a/example/dist/bundle.js b/example/dist/bundle.js
diff --git a/example/dist/bundle.js.map b/example/dist/bundle.js.map
diff --git a/lib/router.js b/lib/router.js
@@ -86,29 +86,34 @@ var Router = function () {
       var _ref2$pushState = _ref2.pushState;
       var pushState = _ref2$pushState === undefined ? false : _ref2$pushState;
 
-      if (path.toLowerCase().indexOf(this.config.base.toLowerCase()) === 0) {
-        path = path.substr(this.config.base.length) || '/';
+      var ctx = this.ctx;
+      while (ctx.$child) {
+        ctx = ctx.$child;
       }
 
-      return this.ctx.update(path, state, pushState, false);
+      if (path.toLowerCase().indexOf(ctx.config.base.toLowerCase()) === 0) {
+        path = path.substr(ctx.config.base.length) || '/';
+      }
+
+      return ctx.update(path, state, pushState, false);
     }
   }, {
     key: 'onpopstate',
-    value: function onpopstate(_ref3) {
-      var state = _ref3.state;
+    value: function onpopstate(e) {
+      if (e.defaultPrevented) {
+        return;
+      }
+
+      var path = location.pathname + location.search + location.hash;
+      var state = (e.state || {})[this.ctx.config.depth + this.ctx.pathname()];
 
-      this.dispatch({
-        path: location.pathname + location.search + location.hash,
-        state: (state || {})[this.ctx.config.depth + this.ctx.pathname()]
-      });
+      if (this.dispatch({ path: path, state: state })) {
+        e.preventDefault();
+      }
     }
   }, {
     key: 'onclick',
     value: function onclick(e) {
-      if (1 !== which(e) || e.metaKey || e.ctrlKey || e.shiftKey) {
-        return;
-      }
-
       // ensure link
       var el = e.target;
       while (el && 'A' !== el.nodeName) {
@@ -118,35 +123,21 @@ var Router = function () {
         return;
       }
 
+      var isDoubleClick = 1 !== which(e);
+      var hasModifier = e.metaKey || e.ctrlKey || e.shiftKey;
       var isDownload = el.hasAttribute('download');
       var hasOtherTarget = el.hasAttribute('target');
       var hasExternalRel = el.getAttribute('rel') === 'external';
       var isMailto = ~(el.getAttribute('href') || '').indexOf('mailto:');
       var isCrossOrigin = !sameOrigin(el.href);
       var isEmptyHash = el.getAttribute('href') === '#';
 
-      if (isDownload || hasOtherTarget || hasExternalRel || isMailto || isCrossOrigin || isEmptyHash) {
+      if (isCrossOrigin || isDoubleClick || isDownload || isEmptyHash || isMailto || hasExternalRel || hasModifier || hasOtherTarget) {
         return;
       }
 
-      // rebuild path
       var path = el.pathname + el.search + (el.hash || '');
 
-      // same page
-      var orig = path;
-      var base = this.config.base.replace('/#!', '');
-      if (path.toLowerCase().indexOf(base.toLowerCase()) === 0) {
-        path = path.substr(base.length);
-      }
-
-      if (this.config.hashbang) {
-        path = path.replace('/#!', '');
-      }
-
-      if (this.config.base && orig === path) {
-        return;
-      }
-
       if (this.dispatch({ path: path, pushState: true })) {
         e.preventDefault();
       }

diff --git a/src/router.js b/src/router.js
@@ -54,25 +54,32 @@ class Router {
   }
 
   dispatch({ path, state, pushState = false }) {
-    if (path.toLowerCase().indexOf(this.config.base.toLowerCase()) === 0) {
-      path = path.substr(this.config.base.length) || '/'
+    let ctx = this.ctx
+    while (ctx.$child) {
+      ctx = ctx.$child
     }
 
-    return this.ctx.update(path, state, pushState, false)
-  }
+    if (path.toLowerCase().indexOf(ctx.config.base.toLowerCase()) === 0) {
+      path = path.substr(ctx.config.base.length) || '/'
+    }
 
-  onpopstate({ state }) {
-    this.dispatch({
-      path: location.pathname + location.search + location.hash,
-      state: (state || {})[this.ctx.config.depth + this.ctx.pathname()]
-    })
+    return ctx.update(path, state, pushState, false)
   }
 
-  onclick(e) {
-    if (1 !== which(e) || e.metaKey || e.ctrlKey || e.shiftKey) {
+  onpopstate(e) {
+    if (e.defaultPrevented) {
       return
     }
 
+    const path = location.pathname + location.search + location.hash
+    const state = (e.state || {})[this.ctx.config.depth + this.ctx.pathname()]
+
+    if (this.dispatch({ path, state })) {
+      e.preventDefault()
+    }
+  }
+
+  onclick(e) {
     // ensure link
     let el = e.target
     while (el && 'A' !== el.nodeName) {
@@ -82,34 +89,27 @@ class Router {
       return
     }
 
+    const isDoubleClick = 1 !== which(e)
+    const hasModifier = e.metaKey || e.ctrlKey || e.shiftKey
     const isDownload = el.hasAttribute('download')
     const hasOtherTarget = el.hasAttribute('target')
     const hasExternalRel = el.getAttribute('rel') === 'external'
     const isMailto = ~(el.getAttribute('href') || '').indexOf('mailto:')
     const isCrossOrigin = !sameOrigin(el.href)
     const isEmptyHash = el.getAttribute('href') === '#'
 
-    if (isDownload || hasOtherTarget || hasExternalRel || isMailto || isCrossOrigin || isEmptyHash) {
+    if (isCrossOrigin ||
+        isDoubleClick ||
+        isDownload ||
+        isEmptyHash ||
+        isMailto ||
+        hasExternalRel ||
+        hasModifier ||
+        hasOtherTarget) {
       return
     }
 
-    // rebuild path
-    let path = el.pathname + el.search + (el.hash || '')
-
-    // same page
-    const orig = path
-    const base = this.config.base.replace('/#!', '')
-    if (path.toLowerCase().indexOf(base.toLowerCase()) === 0) {
-      path = path.substr(base.length)
-    }
-
-    if (this.config.hashbang) {
-      path = path.replace('/#!', '')
-    }
-
-    if (this.config.base && orig === path) {
-      return
-    }
+    const path = el.pathname + el.search + (el.hash || '')
 
     if (this.dispatch({ path, pushState: true })) {
       e.preventDefault()