Added swup source property to the history state object. Modified defa…

…ult skipPopStateHandling option to evaluate whether the history state was created by swup or not.
Bemoth · Jun 17, 2018 · 7ae42ca · 7ae42ca
1 parent 7ec6c17
commit 7ae42ca
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 7 deletions.
diff --git a/dist/swup.js b/dist/swup.js
@@ -436,7 +436,8 @@ module.exports = function (eventName) {
 module.exports = function (url) {
     window.history.pushState({
         url: url || window.location.href.split(window.location.hostname)[1],
-        random: Math.random()
+        random: Math.random(),
+        source: "swup"
     }, document.getElementsByTagName('title')[0].innerText, url || window.location.href.split(window.location.hostname)[1]);
 };
 
@@ -1060,6 +1061,13 @@ var Swup = function () {
             disableIE: false,
             plugins: [],
 
+            skipPopStateHandling: function skipPopStateHandling(event) {
+                if (event.state && event.state.source == "swup") {
+                    return false;
+                }
+                return true;
+            },
+
             LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
 
             /**
@@ -1198,6 +1206,15 @@ var Swup = function () {
                 return _this.usePlugin(item);
             });
 
+            /**
+             * modify initial history record
+             */
+            window.history.replaceState(Object.assign({}, window.history.state, {
+                url: window.location.href,
+                random: Math.random(),
+                source: "swup"
+            }), document.title, window.location.href);
+
             /**
              * trigger enabled event
              */
@@ -1315,6 +1332,7 @@ var Swup = function () {
         key: 'popStateHandler',
         value: function popStateHandler(event) {
             var link = new _Link2.default();
+            if (this.options.skipPopStateHandling(event)) return;
             link.setPath(event.state ? event.state.url : window.location.pathname);
             if (link.getHash() != '') {
                 this.scrollToElement = link.getHash();

diff --git a/dist/swup.min.js b/dist/swup.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "swup",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "Animated page transitions with css.",
   "main": "lib/index.js",
   "scripts": {

diff --git a/readme.md b/readme.md
@@ -265,6 +265,21 @@ Debug mode is useful for integrating swup into your site. When enabled, swup dis
 debugMode: false
 ```
 
+### Skip popState Handling
+Swup is built around browser history API, but sometimes some other tools manipulating the browser history can be used as well. 
+For this reason, swup places a source property into every history state object it creates, so it can be later identified (swup also modifies current history record on start, to include the "swup" source property as well). 
+On `popState` events, swup only handles the records that were created by swup. 
+This behavior can be modified by `skipPopStateHandling` option, which is represented by a function returning boolean (false = handle the popstate, true = do nothing). 
+The function accepts one argument - the popstate event. Option defaults to the following:
+```javascript
+skipPopStateHandling: function(event){
+    if (event.state && event.state.source == "swup") {
+        return false;
+    }
+    return true;
+}
+```
+
 ### Default values
 ```javascript
 let options = {
@@ -279,7 +294,13 @@ let options = {
     debugMode: false,
     preload: true,
     support: true,
-    disableIE: false
+    disableIE: false,
+    skipPopStateHandling: function(event){
+        if (event.state && event.state.source == "swup") {
+            return false;
+        }
+        return true;
+    },
 }
 ```
 

diff --git a/src/index.js b/src/index.js
@@ -45,7 +45,12 @@ export default class Swup {
             disableIE: false,
             plugins: [],
 
-            skipPopStateHandling: function(){ return false; },
+            skipPopStateHandling: function(event){
+                if (event.state && event.state.source == "swup") {
+                    return false;
+                }
+                return true;
+            },
 
             LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
         }
@@ -183,6 +188,19 @@ export default class Swup {
          */
         this.options.plugins.forEach(item => this.usePlugin(item))
 
+        /**
+         * modify initial history record
+         */
+        window.history.replaceState(
+            Object.assign({}, window.history.state, {
+                url: window.location.href,
+                random: Math.random(),
+                source: "swup",
+            }),
+            document.title,
+            window.location.href
+        );
+
         /**
          * trigger enabled event
          */
@@ -294,8 +312,8 @@ export default class Swup {
 
     popStateHandler (event)  {
         var link = new Link()
+        if (this.options.skipPopStateHandling(event)) return;
         link.setPath(event.state ? event.state.url : window.location.pathname)
-        if (this.options.skipPopStateHandling(link)) return;
         if (link.getHash() != '') {
             this.scrollToElement = link.getHash()
         } else {

diff --git a/src/modules/createState.js b/src/modules/createState.js
@@ -2,7 +2,8 @@ module.exports = function (url) {
     window.history.pushState(
         {
             url: url || window.location.href.split(window.location.hostname)[1],
-            random: Math.random()
+            random: Math.random(),
+            source: "swup",
         },
         document.getElementsByTagName('title')[0].innerText,
         url || window.location.href.split(window.location.hostname)[1]