From a1f78f1d75dc9ee2072ef204449a01c0a6830773 Mon Sep 17 00:00:00 2001 From: Georgy Marchuk Date: Fri, 12 Oct 2018 00:21:38 +0200 Subject: [PATCH] fix display of correct url on redirected links --- dist/swup.js | 45 +++++++++++++++++++++++++--------- dist/swup.min.js | 2 +- package.json | 2 +- src/index.js | 2 +- src/modules/getDataFromHtml.js | 5 ++-- src/modules/loadPage.js | 2 +- src/modules/preloadPages.js | 18 ++++++++------ src/modules/renderPage.js | 16 ++++++++++++ 8 files changed, 66 insertions(+), 26 deletions(-) diff --git a/dist/swup.js b/dist/swup.js index 3e7376eb..40d85a19 100644 --- a/dist/swup.js +++ b/dist/swup.js @@ -555,7 +555,7 @@ var Swup = function () { return; } else { // get json data - var page = _this2.getDataFromHtml(response); + var page = _this2.getDataFromHtml(response, request); if (page != null) { page.url = link.getAddress(); _this2.cache.cacheUrl(page, _this2.options.debugMode); @@ -929,7 +929,7 @@ module.exports = function (options) { "use strict"; -module.exports = function (html) { +module.exports = function (html, request) { var _this = this; var content = html.replace('', ''); @@ -953,7 +953,8 @@ module.exports = function (html) { title: fakeDom.querySelector('title').innerText, pageClass: fakeDom.querySelector('#swupBody').className, originalContent: html, - blocks: blocks + blocks: blocks, + responseURL: request != null ? request.responseURL : window.location.href }; return json; }; @@ -1034,7 +1035,7 @@ module.exports = function (data, popstate) { return; } else { // get json data - var page = _this.getDataFromHtml(response); + var page = _this.getDataFromHtml(response, request); if (page != null) { page.url = data.url; } else { @@ -1076,6 +1077,12 @@ module.exports = function (data, popstate) { "use strict"; +var _Link = __webpack_require__(0); + +var _Link2 = _interopRequireDefault(_Link); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + var forEach = Array.prototype.forEach; @@ -1084,6 +1091,18 @@ module.exports = function (page, popstate) { document.documentElement.classList.remove('is-leaving'); + // replace state in case the url was redirected + var link = new _Link2.default(); + link.setPath(page.responseURL); + + if (window.location.pathname !== link.getPath()) { + window.history.replaceState({ + url: link.getPath(), + random: Math.random(), + source: "swup" + }, document.title, link.getPath()); + } + // only add for non-popstate transitions if (!popstate || this.options.animateHistoryBrowsing) { document.documentElement.classList.add('is-rendering'); @@ -1416,7 +1435,7 @@ var _Link2 = _interopRequireDefault(_Link); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -module.exports = function (eventName) { +module.exports = function () { var _this = this; if (this.options.preload) { @@ -1424,16 +1443,18 @@ module.exports = function (eventName) { var link = new _Link2.default(); link.setPath(pathname); if (link.getAddress() != _this.currentUrl && !_this.cache.exists(link.getAddress()) && _this.preloadPromise == null) { - _this.getPage({ url: link.getAddress() }, function (response) { - if (response === null) { - console.warn('Server error.'); + _this.getPage({ url: link.getAddress() }, function (response, request) { + if (request.status === 500) { _this.triggerEvent('serverError'); + return; } else { // get json data - var page = _this.getDataFromHtml(response); - page.url = link.getAddress(); - _this.cache.cacheUrl(page, _this.options.debugMode); - _this.triggerEvent('pagePreloaded'); + var page = _this.getDataFromHtml(response, request); + if (page != null) { + page.url = link.getAddress(); + _this.cache.cacheUrl(page, _this.options.debugMode); + _this.triggerEvent('pagePreloaded'); + } } }); } diff --git a/dist/swup.min.js b/dist/swup.min.js index 7bce23e4..cf4ac9c7 100644 --- a/dist/swup.min.js +++ b/dist/swup.min.js @@ -1 +1 @@ -(function e(t,n){if(typeof exports==="object"&&typeof module==="object")module.exports=n();else if(typeof define==="function"&&define.amd)define([],n);else if(typeof exports==="object")exports["Swup"]=n();else t["Swup"]=n()})(window,function(){return function(e){var t={};function n(o){if(t[o]){return t[o].exports}var r=t[o]={i:o,l:false,exports:{}};e[o].call(r.exports,r,r.exports,n);r.l=true;return r.exports}n.m=e;n.c=t;n.d=function(e,t,o){if(!n.o(e,t)){Object.defineProperty(e,t,{enumerable:true,get:o})}};n.r=function(e){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(e,"__esModule",{value:true})};n.t=function(e,t){if(t&1)e=n(e);if(t&8)return e;if(t&4&&typeof e==="object"&&e&&e.__esModule)return e;var o=Object.create(null);n.r(o);Object.defineProperty(o,"default",{enumerable:true,value:e});if(t&2&&typeof e!="string")for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o};n.n=function(e){var t=e&&e.__esModule?function t(){return e["default"]}:function t(){return e};n.d(t,"a",t);return t};n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};n.p="";return n(n.s=1)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var o=function(){function e(e,t){for(var n=0;n1&&arguments[1]!==undefined?arguments[1]:false;var n={url:window.location.pathname+window.location.search,method:"GET",data:null};var r=o({},n,e);var i=new XMLHttpRequest;i.onreadystatechange=function(){if(i.readyState===4){if(i.status!==500){t(i.responseText,i)}else{t(null,i)}}};i.open(r.method,r.url,true);i.setRequestHeader("X-Requested-With","swup");i.send(r.data);return i}},function(e,t,n){"use strict";e.exports=function(e){var t=this;var n=e.replace("","");var o=document.createElement("div");o.innerHTML=n;var r=[];for(var i=0;i2&&arguments[2]!==undefined?arguments[2]:this.options.animateScroll;var r=1-this.options.scrollFriction;var i=this.options.scrollAcceleration;var s=0;var a=0;var l=0;var u=0;var c=0;var d=null;function f(){return document.body.scrollTop||document.documentElement.scrollTop}var h=function e(){var t=p();m();if(c===1&&l>s||c===-1&&lt?-1:1;u=t+c;l=t;a=0;if(s!=l){h()}else{n.triggerEvent("scrollDone")}};this.triggerEvent("scrollStart");if(o==0){window.scrollTo(0,t);this.triggerEvent("scrollDone")}else{v(t)}}},function(e,t,n){"use strict";e.exports=function(e){var t=e.toString().toLowerCase().replace(/\s+/g,"-").replace(/\//g,"-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-").replace(/^-+/,"").replace(/-+$/,"");if(t[0]=="/")t=t.splice(1);if(t=="")t="homepage";return t}},function(e,t,n){"use strict";e.exports=function(e){if(this.options.scroll&&(!e||this.options.animateHistoryBrowsing)){if(this.scrollToElement!=null){var t=document.querySelector(this.scrollToElement);if(t!=null){var n=t.getBoundingClientRect().top+window.pageYOffset;this.scrollTo(document.body,n)}else{console.warn("Element for offset not found ("+this.scrollToElement+")")}this.scrollToElement=null}else{this.scrollTo(document.body,0)}}}},function(e,t,n){"use strict";e.exports=function(e){var t=this;var n=0;for(var o=0;o1&&arguments[1]!==undefined?arguments[1]:false;var n={url:window.location.pathname+window.location.search,method:"GET",data:null};var r=o({},n,e);var i=new XMLHttpRequest;i.onreadystatechange=function(){if(i.readyState===4){if(i.status!==500){t(i.responseText,i)}else{t(null,i)}}};i.open(r.method,r.url,true);i.setRequestHeader("X-Requested-With","swup");i.send(r.data);return i}},function(e,t,n){"use strict";e.exports=function(e,t){var n=this;var o=e.replace("","");var r=document.createElement("div");r.innerHTML=o;var i=[];for(var s=0;s2&&arguments[2]!==undefined?arguments[2]:this.options.animateScroll;var r=1-this.options.scrollFriction;var i=this.options.scrollAcceleration;var s=0;var a=0;var l=0;var u=0;var c=0;var d=null;function f(){return document.body.scrollTop||document.documentElement.scrollTop}var h=function e(){var t=p();m();if(c===1&&l>s||c===-1&&lt?-1:1;u=t+c;l=t;a=0;if(s!=l){h()}else{n.triggerEvent("scrollDone")}};this.triggerEvent("scrollStart");if(o==0){window.scrollTo(0,t);this.triggerEvent("scrollDone")}else{v(t)}}},function(e,t,n){"use strict";e.exports=function(e){var t=e.toString().toLowerCase().replace(/\s+/g,"-").replace(/\//g,"-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-").replace(/^-+/,"").replace(/-+$/,"");if(t[0]=="/")t=t.splice(1);if(t=="")t="homepage";return t}},function(e,t,n){"use strict";e.exports=function(e){if(this.options.scroll&&(!e||this.options.animateHistoryBrowsing)){if(this.scrollToElement!=null){var t=document.querySelector(this.scrollToElement);if(t!=null){var n=t.getBoundingClientRect().top+window.pageYOffset;this.scrollTo(document.body,n)}else{console.warn("Element for offset not found ("+this.scrollToElement+")")}this.scrollToElement=null}else{this.scrollTo(document.body,0)}}}},function(e,t,n){"use strict";e.exports=function(e){var t=this;var n=0;for(var o=0;o', '') let fakeDom = document.createElement('div') fakeDom.innerHTML = content @@ -20,7 +20,8 @@ module.exports = function (html) { title: fakeDom.querySelector('title').innerText, pageClass: fakeDom.querySelector('#swupBody').className, originalContent: html, - blocks: blocks + blocks: blocks, + responseURL: request != null ? request.responseURL : window.location.href, } return json; } \ No newline at end of file diff --git a/src/modules/loadPage.js b/src/modules/loadPage.js index c2ee2472..d709a3b1 100755 --- a/src/modules/loadPage.js +++ b/src/modules/loadPage.js @@ -68,7 +68,7 @@ module.exports = function (data, popstate) { return; } else { // get json data - var page = this.getDataFromHtml(response) + var page = this.getDataFromHtml(response, request) if (page != null) { page.url = data.url } else { diff --git a/src/modules/preloadPages.js b/src/modules/preloadPages.js index bb00566c..d2da62f7 100755 --- a/src/modules/preloadPages.js +++ b/src/modules/preloadPages.js @@ -1,21 +1,23 @@ import Link from '../Link' -module.exports = function (eventName) { +module.exports = function () { if (this.options.preload) { const preload = pathname => { var link = new Link() link.setPath(pathname) if (link.getAddress() != this.currentUrl && !this.cache.exists(link.getAddress()) && this.preloadPromise == null) { - this.getPage({ url: link.getAddress() }, response => { - if (response === null) { - console.warn('Server error.') + this.getPage({ url: link.getAddress() }, (response, request) => { + if (request.status === 500) { this.triggerEvent('serverError') + return; } else { // get json data - var page = this.getDataFromHtml(response) - page.url = link.getAddress() - this.cache.cacheUrl(page, this.options.debugMode) - this.triggerEvent('pagePreloaded') + var page = this.getDataFromHtml(response, request) + if (page != null) { + page.url = link.getAddress() + this.cache.cacheUrl(page, this.options.debugMode) + this.triggerEvent('pagePreloaded') + } } }) } diff --git a/src/modules/renderPage.js b/src/modules/renderPage.js index de93b777..f7d5d18b 100755 --- a/src/modules/renderPage.js +++ b/src/modules/renderPage.js @@ -1,8 +1,24 @@ const { forEach } = Array.prototype; +import Link from '../Link'; module.exports = function (page, popstate) { document.documentElement.classList.remove('is-leaving') + // replace state in case the url was redirected + let link = new Link() + link.setPath(page.responseURL) + + if (window.location.pathname !== link.getPath()) { + window.history.replaceState({ + url: link.getPath(), + random: Math.random(), + source: "swup", + }, + document.title, + link.getPath(), + ); + } + // only add for non-popstate transitions if (!popstate || this.options.animateHistoryBrowsing) { document.documentElement.classList.add('is-rendering')