swup 2.0.15 → 2.0.18

package/dist/swup.js

@@ -91,7 +91,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 2);
+/******/ 	return __webpack_require__(__webpack_require__.s = 3);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -104,7 +104,7 @@ return /******/ (function(modules) { // webpackBootstrap
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Link = exports.markSwupElements = exports.getCurrentUrl = exports.transitionEnd = exports.fetch = exports.getDataFromHtml = exports.createHistoryRecord = exports.classify = undefined;
+exports.cleanupAnimationClasses = exports.Link = exports.markSwupElements = exports.normalizeUrl = exports.getCurrentUrl = exports.transitionProperty = exports.transitionEnd = exports.fetch = exports.getDataFromHtml = exports.createHistoryRecord = exports.classify = undefined;
 
 var _classify = __webpack_require__(7);
 
@@ -126,18 +126,30 @@ var _transitionEnd = __webpack_require__(11);
 
 var _transitionEnd2 = _interopRequireDefault(_transitionEnd);
 
-var _getCurrentUrl = __webpack_require__(12);
+var _transitionProperty = __webpack_require__(12);
+
+var _transitionProperty2 = _interopRequireDefault(_transitionProperty);
+
+var _getCurrentUrl = __webpack_require__(13);
 
 var _getCurrentUrl2 = _interopRequireDefault(_getCurrentUrl);
 
-var _markSwupElements = __webpack_require__(13);
+var _normalizeUrl = __webpack_require__(14);
+
+var _normalizeUrl2 = _interopRequireDefault(_normalizeUrl);
+
+var _markSwupElements = __webpack_require__(15);
 
 var _markSwupElements2 = _interopRequireDefault(_markSwupElements);
 
-var _Link = __webpack_require__(14);
+var _Link = __webpack_require__(2);
 
 var _Link2 = _interopRequireDefault(_Link);
 
+var _cleanupAnimationClasses = __webpack_require__(16);
+
+var _cleanupAnimationClasses2 = _interopRequireDefault(_cleanupAnimationClasses);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var classify = exports.classify = _classify2.default;
@@ -145,9 +157,12 @@ var createHistoryRecord = exports.createHistoryRecord = _createHistoryRecord2.de
 var getDataFromHtml = exports.getDataFromHtml = _getDataFromHtml2.default;
 var fetch = exports.fetch = _fetch2.default;
 var transitionEnd = exports.transitionEnd = _transitionEnd2.default;
+var transitionProperty = exports.transitionProperty = _transitionProperty2.default;
 var getCurrentUrl = exports.getCurrentUrl = _getCurrentUrl2.default;
+var normalizeUrl = exports.normalizeUrl = _normalizeUrl2.default;
 var markSwupElements = exports.markSwupElements = _markSwupElements2.default;
 var Link = exports.Link = _Link2.default;
+var cleanupAnimationClasses = exports.cleanupAnimationClasses = _cleanupAnimationClasses2.default;
 
 /***/ }),
 /* 1 */
@@ -179,6 +194,14 @@ var queryAll = exports.queryAll = function queryAll(selector) {
 	return Array.prototype.slice.call(context.querySelectorAll(selector));
 };
 
+var escapeCssIdentifier = exports.escapeCssIdentifier = function escapeCssIdentifier(ident) {
+	if (window.CSS && window.CSS.escape) {
+		return CSS.escape(ident);
+	} else {
+		return ident;
+	}
+};
+
 /***/ }),
 /* 2 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -186,7 +209,69 @@ var queryAll = exports.queryAll = function queryAll(selector) {
 "use strict";
 
 
-var _index = __webpack_require__(3);
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var Link = function () {
+	function Link(elementOrUrl) {
+		_classCallCheck(this, Link);
+
+		if (elementOrUrl instanceof Element || elementOrUrl instanceof SVGElement) {
+			this.link = elementOrUrl;
+		} else {
+			this.link = document.createElement('a');
+			this.link.href = elementOrUrl;
+		}
+	}
+
+	_createClass(Link, [{
+		key: 'getPath',
+		value: function getPath() {
+			var path = this.link.pathname;
+			if (path[0] !== '/') {
+				path = '/' + path;
+			}
+			return path;
+		}
+	}, {
+		key: 'getAddress',
+		value: function getAddress() {
+			var path = this.link.pathname + this.link.search;
+
+			if (this.link.getAttribute('xlink:href')) {
+				path = this.link.getAttribute('xlink:href');
+			}
+
+			if (path[0] !== '/') {
+				path = '/' + path;
+			}
+			return path;
+		}
+	}, {
+		key: 'getHash',
+		value: function getHash() {
+			return this.link.hash;
+		}
+	}]);
+
+	return Link;
+}();
+
+exports.default = Link;
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _index = __webpack_require__(4);
 
 var _index2 = _interopRequireDefault(_index);
 
@@ -195,7 +280,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 module.exports = _index2.default; // this is here for webpack to expose Swup as window.Swup
 
 /***/ }),
-/* 3 */
+/* 4 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -212,47 +297,51 @@ var _createClass = function () { function defineProperties(target, props) { for
 // modules
 
 
-var _delegateIt = __webpack_require__(4);
+var _delegateIt = __webpack_require__(5);
 
 var _delegateIt2 = _interopRequireDefault(_delegateIt);
 
-var _Cache = __webpack_require__(5);
+var _Cache = __webpack_require__(6);
 
 var _Cache2 = _interopRequireDefault(_Cache);
 
-var _loadPage = __webpack_require__(6);
+var _loadPage = __webpack_require__(17);
 
 var _loadPage2 = _interopRequireDefault(_loadPage);
 
-var _renderPage = __webpack_require__(15);
+var _renderPage = __webpack_require__(18);
 
 var _renderPage2 = _interopRequireDefault(_renderPage);
 
-var _triggerEvent = __webpack_require__(16);
+var _triggerEvent = __webpack_require__(19);
 
 var _triggerEvent2 = _interopRequireDefault(_triggerEvent);
 
-var _on = __webpack_require__(17);
+var _on = __webpack_require__(20);
 
 var _on2 = _interopRequireDefault(_on);
 
-var _off = __webpack_require__(18);
+var _off = __webpack_require__(21);
 
 var _off2 = _interopRequireDefault(_off);
 
-var _updateTransition = __webpack_require__(19);
+var _updateTransition = __webpack_require__(22);
 
 var _updateTransition2 = _interopRequireDefault(_updateTransition);
 
-var _getAnimationPromises = __webpack_require__(20);
+var _getAnchorElement = __webpack_require__(23);
+
+var _getAnchorElement2 = _interopRequireDefault(_getAnchorElement);
+
+var _getAnimationPromises = __webpack_require__(24);
 
 var _getAnimationPromises2 = _interopRequireDefault(_getAnimationPromises);
 
-var _getPageData = __webpack_require__(21);
+var _getPageData = __webpack_require__(25);
 
 var _getPageData2 = _interopRequireDefault(_getPageData);
 
-var _plugins = __webpack_require__(22);
+var _plugins = __webpack_require__(26);
 
 var _utils = __webpack_require__(1);
 
@@ -310,7 +399,7 @@ var Swup = function () {
 			willReplaceContent: []
 		};
 
-		// variable for id of element to scroll to after render
+		// variable for anchor to scroll to after render
 		this.scrollToElement = null;
 		// variable for promise used for preload, so no new loading of the same page starts while page is loading
 		this.preloadPromise = null;
@@ -336,10 +425,13 @@ var Swup = function () {
 		this.updateTransition = _updateTransition2.default;
 		this.getAnimationPromises = _getAnimationPromises2.default;
 		this.getPageData = _getPageData2.default;
+		this.getAnchorElement = _getAnchorElement2.default;
 		this.log = function () {}; // here so it can be used by plugins
 		this.use = _plugins.use;
 		this.unuse = _plugins.unuse;
 		this.findPlugin = _plugins.findPlugin;
+		this.getCurrentUrl = _helpers.getCurrentUrl;
+		this.cleanupAnimationClasses = _helpers.cleanupAnimationClasses;
 
 		// enable swup
 		this.enable();
@@ -361,9 +453,9 @@ var Swup = function () {
 			window.addEventListener('popstate', this.boundPopStateHandler);
 
 			// initial save to cache
-			var page = (0, _helpers.getDataFromHtml)(document.documentElement.outerHTML, this.options.containers);
-			page.url = page.responseURL = (0, _helpers.getCurrentUrl)();
 			if (this.options.cache) {
+				var page = (0, _helpers.getDataFromHtml)(document.documentElement.outerHTML, this.options.containers);
+				page.url = page.responseURL = (0, _helpers.getCurrentUrl)();
 				this.cache.cacheUrl(page);
 			}
 
@@ -439,7 +531,7 @@ var Swup = function () {
 						if (link.getHash() != '') {
 							// link to the same URL with hash
 							this.triggerEvent('samePageWithHash', event);
-							var element = document.querySelector(link.getHash());
+							var element = (0, _getAnchorElement2.default)(link.getHash());
 							if (element != null) {
 								history.replaceState({
 									url: link.getAddress() + link.getHash(),
@@ -483,6 +575,12 @@ var Swup = function () {
 				event.preventDefault();
 			}
 			this.triggerEvent('popState', event);
+
+			if (!this.options.animateHistoryBrowsing) {
+				document.documentElement.classList.remove('is-animating');
+				(0, _helpers.cleanupAnimationClasses)();
+			}
+
 			this.loadPage({ url: link.getAddress() }, event);
 		}
 	}]);
@@ -493,7 +591,7 @@ var Swup = function () {
 exports.default = Swup;
 
 /***/ }),
-/* 4 */
+/* 5 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -586,7 +684,7 @@ function delegate(base, selector, type, callback, options) {
 
 
 /***/ }),
-/* 5 */
+/* 6 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -595,9 +693,12 @@ function delegate(base, selector, type, callback, options) {
 Object.defineProperty(exports, "__esModule", {
 	value: true
 });
+exports.Cache = undefined;
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+var _helpers = __webpack_require__(0);
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 var Cache = exports.Cache = function () {
@@ -611,6 +712,7 @@ var Cache = exports.Cache = function () {
 	_createClass(Cache, [{
 		key: 'cacheUrl',
 		value: function cacheUrl(page) {
+			page.url = (0, _helpers.normalizeUrl)(page.url);
 			if (page.url in this.pages === false) {
 				this.pages[page.url] = page;
 			}
@@ -620,16 +722,18 @@ var Cache = exports.Cache = function () {
 	}, {
 		key: 'getPage',
 		value: function getPage(url) {
+			url = (0, _helpers.normalizeUrl)(url);
 			return this.pages[url];
 		}
 	}, {
 		key: 'getCurrentPage',
 		value: function getCurrentPage() {
-			return this.getPage(window.location.pathname + window.location.search);
+			return this.getPage((0, _helpers.getCurrentUrl)());
 		}
 	}, {
 		key: 'exists',
 		value: function exists(url) {
+			url = (0, _helpers.normalizeUrl)(url);
 			return url in this.pages;
 		}
 	}, {
@@ -651,130 +755,6 @@ var Cache = exports.Cache = function () {
 
 exports.default = Cache;
 
-/***/ }),
-/* 6 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-	value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _helpers = __webpack_require__(0);
-
-var loadPage = function loadPage(data, popstate) {
-	var _this = this;
-
-	// create array for storing animation promises
-	var animationPromises = [],
-	    xhrPromise = void 0;
-	var animateOut = function animateOut() {
-		_this.triggerEvent('animationOutStart');
-
-		// handle classes
-		document.documentElement.classList.add('is-changing');
-		document.documentElement.classList.add('is-leaving');
-		document.documentElement.classList.add('is-animating');
-		if (popstate) {
-			document.documentElement.classList.add('is-popstate');
-		}
-		document.documentElement.classList.add('to-' + (0, _helpers.classify)(data.url));
-
-		// animation promise stuff
-		animationPromises = _this.getAnimationPromises('out');
-		Promise.all(animationPromises).then(function () {
-			_this.triggerEvent('animationOutDone');
-		});
-
-		// create history record if this is not a popstate call
-		if (!popstate) {
-			// create pop element with or without anchor
-			var state = void 0;
-			if (_this.scrollToElement != null) {
-				state = data.url + _this.scrollToElement;
-			} else {
-				state = data.url;
-			}
-
-			(0, _helpers.createHistoryRecord)(state);
-		}
-	};
-
-	this.triggerEvent('transitionStart', popstate);
-
-	// set transition object
-	if (data.customTransition != null) {
-		this.updateTransition(window.location.pathname, data.url, data.customTransition);
-		document.documentElement.classList.add('to-' + (0, _helpers.classify)(data.customTransition));
-	} else {
-		this.updateTransition(window.location.pathname, data.url);
-	}
-
-	// start/skip animation
-	if (!popstate || this.options.animateHistoryBrowsing) {
-		animateOut();
-	} else {
-		this.triggerEvent('animationSkipped');
-	}
-
-	// start/skip loading of page
-	if (this.cache.exists(data.url)) {
-		xhrPromise = new Promise(function (resolve) {
-			resolve();
-		});
-		this.triggerEvent('pageRetrievedFromCache');
-	} else {
-		if (!this.preloadPromise || this.preloadPromise.route != data.url) {
-			xhrPromise = new Promise(function (resolve, reject) {
-				(0, _helpers.fetch)(_extends({}, data, { headers: _this.options.requestHeaders }), function (response) {
-					if (response.status === 500) {
-						_this.triggerEvent('serverError');
-						reject(data.url);
-						return;
-					} else {
-						// get json data
-						var page = _this.getPageData(response);
-						if (page != null) {
-							page.url = data.url;
-						} else {
-							reject(data.url);
-							return;
-						}
-						// render page
-						_this.cache.cacheUrl(page);
-						_this.triggerEvent('pageLoaded');
-					}
-					resolve();
-				});
-			});
-		} else {
-			xhrPromise = this.preloadPromise;
-		}
-	}
-
-	// when everything is ready, handle the outcome
-	Promise.all(animationPromises.concat([xhrPromise])).then(function () {
-		// render page
-		_this.renderPage(_this.cache.getPage(data.url), popstate);
-		_this.preloadPromise = null;
-	}).catch(function (errorUrl) {
-		// rewrite the skipPopStateHandling function to redirect manually when the history.go is processed
-		_this.options.skipPopStateHandling = function () {
-			window.location = errorUrl;
-			return true;
-		};
-
-		// go back to the actual page were still at
-		window.history.go(-1);
-	});
-};
-
-exports.default = loadPage;
-
 /***/ }),
 /* 7 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -830,8 +810,6 @@ Object.defineProperty(exports, "__esModule", {
 	value: true
 });
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
 var _utils = __webpack_require__(1);
 
 var getDataFromHtml = function getDataFromHtml(html, containers) {
@@ -839,25 +817,20 @@ var getDataFromHtml = function getDataFromHtml(html, containers) {
 	fakeDom.innerHTML = html;
 	var blocks = [];
 
-	var _loop = function _loop(i) {
-		if (fakeDom.querySelector(containers[i]) == null) {
-			// page in invalid
-			return {
-				v: null
-			};
+	containers.forEach(function (selector) {
+		if ((0, _utils.query)(selector, fakeDom) == null) {
+			console.error('Container ' + selector + ' not found on page.');
+			return null;
 		} else {
-			(0, _utils.queryAll)(containers[i]).forEach(function (item, index) {
-				(0, _utils.queryAll)(containers[i], fakeDom)[index].setAttribute('data-swup', blocks.length); // marks element with data-swup
-				blocks.push((0, _utils.queryAll)(containers[i], fakeDom)[index].outerHTML);
+			if ((0, _utils.queryAll)(selector).length !== (0, _utils.queryAll)(selector, fakeDom).length) {
+				console.warn('Mismatched number of containers found on new page.');
+			}
+			(0, _utils.queryAll)(selector).forEach(function (item, index) {
+				(0, _utils.queryAll)(selector, fakeDom)[index].setAttribute('data-swup', blocks.length);
+				blocks.push((0, _utils.queryAll)(selector, fakeDom)[index].outerHTML);
 			});
 		}
-	};
-
-	for (var i = 0; i < containers.length; i++) {
-		var _ret = _loop(i);
-
-		if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
-	}
+	});
 
 	var json = {
 		title: fakeDom.querySelector('title').innerText,
@@ -933,22 +906,11 @@ Object.defineProperty(exports, "__esModule", {
 	value: true
 });
 var transitionEnd = function transitionEnd() {
-	var el = document.createElement('div');
-
-	var transEndEventNames = {
-		WebkitTransition: 'webkitTransitionEnd',
-		MozTransition: 'transitionend',
-		OTransition: 'oTransitionEnd otransitionend',
-		transition: 'transitionend'
-	};
-
-	for (var name in transEndEventNames) {
-		if (el.style[name] !== undefined) {
-			return transEndEventNames[name];
-		}
+	if (window.ontransitionend === undefined && window.onwebkittransitionend !== undefined) {
+		return 'webkitTransitionEnd';
+	} else {
+		return 'transitionend';
 	}
-
-	return false;
 };
 
 exports.default = transitionEnd;
@@ -960,6 +922,26 @@ exports.default = transitionEnd;
 "use strict";
 
 
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+var transitionProperty = function transitionProperty() {
+	if (window.ontransitionend === undefined && window.onwebkittransitionend !== undefined) {
+		return 'WebkitTransition';
+	} else {
+		return 'transition';
+	}
+};
+
+exports.default = transitionProperty;
+
+/***/ }),
+/* 13 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 Object.defineProperty(exports, "__esModule", {
 	value: true
 });
@@ -970,7 +952,30 @@ var getCurrentUrl = function getCurrentUrl() {
 exports.default = getCurrentUrl;
 
 /***/ }),
-/* 13 */
+/* 14 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _Link = __webpack_require__(2);
+
+var _Link2 = _interopRequireDefault(_Link);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var normalizeUrl = function normalizeUrl(url) {
+	return new _Link2.default(url).getAddress();
+};
+
+exports.default = normalizeUrl;
+
+/***/ }),
+/* 15 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -985,26 +990,46 @@ var _utils = __webpack_require__(1);
 var markSwupElements = function markSwupElements(element, containers) {
 	var blocks = 0;
 
-	var _loop = function _loop(i) {
-		if (element.querySelector(containers[i]) == null) {
-			console.warn('Element ' + containers[i] + ' is not in current page.');
+	containers.forEach(function (selector) {
+		if ((0, _utils.query)(selector, element) == null) {
+			console.error('Container ' + selector + ' not found on page.');
 		} else {
-			(0, _utils.queryAll)(containers[i]).forEach(function (item, index) {
-				(0, _utils.queryAll)(containers[i], element)[index].setAttribute('data-swup', blocks);
+			(0, _utils.queryAll)(selector).forEach(function (item, index) {
+				(0, _utils.queryAll)(selector, element)[index].setAttribute('data-swup', blocks);
 				blocks++;
 			});
 		}
-	};
-
-	for (var i = 0; i < containers.length; i++) {
-		_loop(i);
-	}
+	});
 };
 
 exports.default = markSwupElements;
 
 /***/ }),
-/* 14 */
+/* 16 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var cleanupAnimationClasses = function cleanupAnimationClasses() {
+  document.documentElement.className.split(' ').forEach(function (classItem) {
+    if (
+    // remove "to-{page}" classes
+    new RegExp('^to-').test(classItem) ||
+    // remove all other classes
+    classItem === 'is-changing' || classItem === 'is-rendering' || classItem === 'is-popstate') {
+      document.documentElement.classList.remove(classItem);
+    }
+  });
+};
+
+exports.default = cleanupAnimationClasses;
+
+/***/ }),
+/* 17 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1014,59 +1039,121 @@ Object.defineProperty(exports, "__esModule", {
 	value: true
 });
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _helpers = __webpack_require__(0);
 
-var Link = function () {
-	function Link(elementOrUrl) {
-		_classCallCheck(this, Link);
+var loadPage = function loadPage(data, popstate) {
+	var _this = this;
 
-		if (elementOrUrl instanceof Element || elementOrUrl instanceof SVGElement) {
-			this.link = elementOrUrl;
-		} else {
-			this.link = document.createElement('a');
-			this.link.href = elementOrUrl;
-		}
-	}
+	// create array for storing animation promises
+	var animationPromises = [],
+	    xhrPromise = void 0;
+	var animateOut = function animateOut() {
+		_this.triggerEvent('animationOutStart');
 
-	_createClass(Link, [{
-		key: 'getPath',
-		value: function getPath() {
-			var path = this.link.pathname;
-			if (path[0] !== '/') {
-				path = '/' + path;
-			}
-			return path;
+		// handle classes
+		document.documentElement.classList.add('is-changing');
+		document.documentElement.classList.add('is-leaving');
+		document.documentElement.classList.add('is-animating');
+		if (popstate) {
+			document.documentElement.classList.add('is-popstate');
 		}
-	}, {
-		key: 'getAddress',
-		value: function getAddress() {
-			var path = this.link.pathname + this.link.search;
+		document.documentElement.classList.add('to-' + (0, _helpers.classify)(data.url));
 
-			if (this.link.getAttribute('xlink:href')) {
-				path = this.link.getAttribute('xlink:href');
-			}
+		// animation promise stuff
+		animationPromises = _this.getAnimationPromises('out');
+		Promise.all(animationPromises).then(function () {
+			_this.triggerEvent('animationOutDone');
+		});
 
-			if (path[0] !== '/') {
-				path = '/' + path;
+		// create history record if this is not a popstate call
+		if (!popstate) {
+			// create pop element with or without anchor
+			var state = void 0;
+			if (_this.scrollToElement != null) {
+				state = data.url + _this.scrollToElement;
+			} else {
+				state = data.url;
 			}
-			return path;
+
+			(0, _helpers.createHistoryRecord)(state);
 		}
-	}, {
-		key: 'getHash',
-		value: function getHash() {
-			return this.link.hash;
+	};
+
+	this.triggerEvent('transitionStart', popstate);
+
+	// set transition object
+	if (data.customTransition != null) {
+		this.updateTransition(window.location.pathname, data.url, data.customTransition);
+		document.documentElement.classList.add('to-' + (0, _helpers.classify)(data.customTransition));
+	} else {
+		this.updateTransition(window.location.pathname, data.url);
+	}
+
+	// start/skip animation
+	if (!popstate || this.options.animateHistoryBrowsing) {
+		animateOut();
+	} else {
+		this.triggerEvent('animationSkipped');
+	}
+
+	// start/skip loading of page
+	if (this.cache.exists(data.url)) {
+		xhrPromise = new Promise(function (resolve) {
+			resolve();
+		});
+		this.triggerEvent('pageRetrievedFromCache');
+	} else {
+		if (!this.preloadPromise || this.preloadPromise.route != data.url) {
+			xhrPromise = new Promise(function (resolve, reject) {
+				(0, _helpers.fetch)(_extends({}, data, { headers: _this.options.requestHeaders }), function (response) {
+					if (response.status === 500) {
+						_this.triggerEvent('serverError');
+						reject(data.url);
+						return;
+					} else {
+						// get json data
+						var page = _this.getPageData(response);
+						if (page != null) {
+							page.url = data.url;
+						} else {
+							reject(data.url);
+							return;
+						}
+						// render page
+						_this.cache.cacheUrl(page);
+						_this.triggerEvent('pageLoaded');
+					}
+					resolve();
+				});
+			});
+		} else {
+			xhrPromise = this.preloadPromise;
 		}
-	}]);
+	}
 
-	return Link;
-}();
+	// when everything is ready, handle the outcome
+	Promise.all(animationPromises.concat([xhrPromise])).then(function () {
+		// render page
+		_this.renderPage(_this.cache.getPage(data.url), popstate);
+		_this.preloadPromise = null;
+	}).catch(function (errorUrl) {
+		// rewrite the skipPopStateHandling function to redirect manually when the history.go is processed
+		_this.options.skipPopStateHandling = function () {
+			window.location = errorUrl;
+			return true;
+		};
 
-exports.default = Link;
+		// go back to the actual page were still at
+		window.history.go(-1);
+	});
+};
+
+exports.default = loadPage;
 
 /***/ }),
-/* 15 */
+/* 18 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1078,8 +1165,6 @@ Object.defineProperty(exports, "__esModule", {
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _utils = __webpack_require__(1);
-
 var _helpers = __webpack_require__(0);
 
 var renderPage = function renderPage(page, popstate) {
@@ -1087,17 +1172,20 @@ var renderPage = function renderPage(page, popstate) {
 
 	document.documentElement.classList.remove('is-leaving');
 
+	var isCurrentPage = this.getCurrentUrl() === page.url;
+	if (!isCurrentPage) return;
+
 	// replace state in case the url was redirected
-	var link = new _helpers.Link(page.responseURL);
-	if (window.location.pathname !== link.getPath()) {
+	var url = new _helpers.Link(page.responseURL).getPath();
+	if (window.location.pathname !== url) {
 		window.history.replaceState({
-			url: link.getPath(),
+			url: url,
 			random: Math.random(),
 			source: 'swup'
-		}, document.title, link.getPath());
+		}, document.title, url);
 
 		// save new record for redirected url
-		this.cache.cacheUrl(_extends({}, page, { url: link.getPath() }));
+		this.cache.cacheUrl(_extends({}, page, { url: url }));
 	}
 
 	// only add for non-popstate transitions
@@ -1106,15 +1194,12 @@ var renderPage = function renderPage(page, popstate) {
 	}
 
 	this.triggerEvent('willReplaceContent', popstate);
-
 	// replace blocks
 	for (var i = 0; i < page.blocks.length; i++) {
 		document.body.querySelector('[data-swup="' + i + '"]').outerHTML = page.blocks[i];
 	}
-
 	// set title
 	document.title = page.title;
-
 	this.triggerEvent('contentReplaced', popstate);
 	this.triggerEvent('pageView', popstate);
 
@@ -1137,12 +1222,7 @@ var renderPage = function renderPage(page, popstate) {
 		Promise.all(animationPromises).then(function () {
 			_this.triggerEvent('animationInDone');
 			_this.triggerEvent('transitionEnd', popstate);
-			// remove "to-{page}" classes
-			document.documentElement.className.split(' ').forEach(function (classItem) {
-				if (new RegExp('^to-').test(classItem) || classItem === 'is-changing' || classItem === 'is-rendering' || classItem === 'is-popstate') {
-					document.documentElement.classList.remove(classItem);
-				}
-			});
+			_this.cleanupAnimationClasses();
 		});
 	} else {
 		this.triggerEvent('transitionEnd', popstate);
@@ -1155,7 +1235,7 @@ var renderPage = function renderPage(page, popstate) {
 exports.default = renderPage;
 
 /***/ }),
-/* 16 */
+/* 19 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1182,7 +1262,7 @@ var triggerEvent = function triggerEvent(eventName, originalEvent) {
 exports.default = triggerEvent;
 
 /***/ }),
-/* 17 */
+/* 20 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1202,7 +1282,7 @@ var on = function on(event, handler) {
 exports.default = on;
 
 /***/ }),
-/* 18 */
+/* 21 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1242,7 +1322,7 @@ var off = function off(event, handler) {
 exports.default = off;
 
 /***/ }),
-/* 19 */
+/* 22 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1263,7 +1343,38 @@ var updateTransition = function updateTransition(from, to, custom) {
 exports.default = updateTransition;
 
 /***/ }),
-/* 20 */
+/* 23 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _utils = __webpack_require__(1);
+
+var getAnchorElement = function getAnchorElement(hash) {
+	if (!hash) {
+		return null;
+	}
+
+	if (hash.charAt(0) === '#') {
+		hash = hash.substring(1);
+	}
+
+	hash = decodeURIComponent(hash);
+	hash = (0, _utils.escapeCssIdentifier)(hash);
+
+	// https://html.spec.whatwg.org/#find-a-potential-indicated-element
+	return (0, _utils.query)('#' + hash) || (0, _utils.query)('a[name=\'' + hash + '\']');
+};
+
+exports.default = getAnchorElement;
+
+/***/ }),
+/* 24 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1278,9 +1389,24 @@ var _utils = __webpack_require__(1);
 var _helpers = __webpack_require__(0);
 
 var getAnimationPromises = function getAnimationPromises() {
+	var _this = this;
+
 	var promises = [];
-	var animatedElements = (0, _utils.queryAll)(this.options.animationSelector);
+	var animatedElements = (0, _utils.queryAll)(this.options.animationSelector, document.body);
+
+	if (!animatedElements.length) {
+		console.error('No animated elements found by selector ' + this.options.animationSelector);
+		return [Promise.resolve()];
+	}
+
 	animatedElements.forEach(function (element) {
+		var transitionDuration = window.getComputedStyle(element)[(0, _helpers.transitionProperty)() + 'Duration'];
+		// Resolve immediately if no transition defined
+		if (!transitionDuration || transitionDuration == '0s') {
+			console.error('No CSS transition duration defined for element of selector ' + _this.options.animationSelector);
+			promises.push(Promise.resolve());
+			return;
+		}
 		var promise = new Promise(function (resolve) {
 			element.addEventListener((0, _helpers.transitionEnd)(), function (event) {
 				if (element == event.target) {
@@ -1290,13 +1416,14 @@ var getAnimationPromises = function getAnimationPromises() {
 		});
 		promises.push(promise);
 	});
+
 	return promises;
 };
 
 exports.default = getAnimationPromises;
 
 /***/ }),
-/* 21 */
+/* 25 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1328,7 +1455,7 @@ var getPageData = function getPageData(request) {
 exports.default = getPageData;
 
 /***/ }),
-/* 22 */
+/* 26 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";