swup 2.0.19 → 3.0.0-rc.2

package/lib/index.js

@@ -1,305 +0,0 @@
-'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 _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; }; }();
-
-// modules
-
-
-var _delegateIt = require('delegate-it');
-
-var _delegateIt2 = _interopRequireDefault(_delegateIt);
-
-var _Cache = require('./modules/Cache');
-
-var _Cache2 = _interopRequireDefault(_Cache);
-
-var _loadPage = require('./modules/loadPage');
-
-var _loadPage2 = _interopRequireDefault(_loadPage);
-
-var _renderPage = require('./modules/renderPage');
-
-var _renderPage2 = _interopRequireDefault(_renderPage);
-
-var _triggerEvent = require('./modules/triggerEvent');
-
-var _triggerEvent2 = _interopRequireDefault(_triggerEvent);
-
-var _on = require('./modules/on');
-
-var _on2 = _interopRequireDefault(_on);
-
-var _off = require('./modules/off');
-
-var _off2 = _interopRequireDefault(_off);
-
-var _updateTransition = require('./modules/updateTransition');
-
-var _updateTransition2 = _interopRequireDefault(_updateTransition);
-
-var _getAnchorElement = require('./modules/getAnchorElement');
-
-var _getAnchorElement2 = _interopRequireDefault(_getAnchorElement);
-
-var _getAnimationPromises = require('./modules/getAnimationPromises');
-
-var _getAnimationPromises2 = _interopRequireDefault(_getAnimationPromises);
-
-var _getPageData = require('./modules/getPageData');
-
-var _getPageData2 = _interopRequireDefault(_getPageData);
-
-var _plugins = require('./modules/plugins');
-
-var _utils = require('./utils');
-
-var _helpers = require('./helpers');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var Swup = function () {
-	function Swup(setOptions) {
-		_classCallCheck(this, Swup);
-
-		// default options
-		var defaults = {
-			animateHistoryBrowsing: false,
-			animationSelector: '[class*="transition-"]',
-			linkSelector: 'a[href^="' + window.location.origin + '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup])',
-			cache: true,
-			containers: ['#swup'],
-			requestHeaders: {
-				'X-Requested-With': 'swup',
-				Accept: 'text/html, application/xhtml+xml'
-			},
-			plugins: [],
-			skipPopStateHandling: function skipPopStateHandling(event) {
-				return !(event.state && event.state.source === 'swup');
-			}
-		};
-
-		// merge options
-		var options = _extends({}, defaults, setOptions);
-
-		// handler arrays
-		this._handlers = {
-			animationInDone: [],
-			animationInStart: [],
-			animationOutDone: [],
-			animationOutStart: [],
-			animationSkipped: [],
-			clickLink: [],
-			contentReplaced: [],
-			disabled: [],
-			enabled: [],
-			openPageInNewTab: [],
-			pageLoaded: [],
-			pageRetrievedFromCache: [],
-			pageView: [],
-			popState: [],
-			samePage: [],
-			samePageWithHash: [],
-			serverError: [],
-			transitionStart: [],
-			transitionEnd: [],
-			willReplaceContent: []
-		};
-
-		// 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;
-		// variable for save options
-		this.options = options;
-		// variable for plugins array
-		this.plugins = [];
-		// variable for current transition object
-		this.transition = {};
-		// variable for keeping event listeners from "delegate"
-		this.delegatedListeners = {};
-		// so we are able to remove the listener
-		this.boundPopStateHandler = this.popStateHandler.bind(this);
-
-		// make modules accessible in instance
-		this.cache = new _Cache2.default();
-		this.cache.swup = this;
-		this.loadPage = _loadPage2.default;
-		this.renderPage = _renderPage2.default;
-		this.triggerEvent = _triggerEvent2.default;
-		this.on = _on2.default;
-		this.off = _off2.default;
-		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();
-	}
-
-	_createClass(Swup, [{
-		key: 'enable',
-		value: function enable() {
-			var _this = this;
-
-			// check for Promise support
-			if (typeof Promise === 'undefined') {
-				console.warn('Promise is not supported');
-				return;
-			}
-
-			// add event listeners
-			this.delegatedListeners.click = (0, _delegateIt2.default)(document, this.options.linkSelector, 'click', this.linkClickHandler.bind(this));
-			window.addEventListener('popstate', this.boundPopStateHandler);
-
-			// initial save to cache
-			if (this.options.cache) {}
-			// disabled to avoid caching modified dom state
-			// https://github.com/swup/swup/issues/475
-			// logic moved to preload plugin
-
-
-			// mark swup blocks in html
-			(0, _helpers.markSwupElements)(document.documentElement, this.options.containers);
-
-			// mount plugins
-			this.options.plugins.forEach(function (plugin) {
-				_this.use(plugin);
-			});
-
-			// 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
-			this.triggerEvent('enabled');
-
-			// add swup-enabled class to html tag
-			document.documentElement.classList.add('swup-enabled');
-
-			// trigger page view event
-			this.triggerEvent('pageView');
-		}
-	}, {
-		key: 'destroy',
-		value: function destroy() {
-			var _this2 = this;
-
-			// remove delegated listeners
-			this.delegatedListeners.click.destroy();
-
-			// remove popstate listener
-			window.removeEventListener('popstate', this.boundPopStateHandler);
-
-			// empty cache
-			this.cache.empty();
-
-			// unmount plugins
-			this.options.plugins.forEach(function (plugin) {
-				_this2.unuse(plugin);
-			});
-
-			// remove swup data atributes from blocks
-			(0, _utils.queryAll)('[data-swup]').forEach(function (element) {
-				element.removeAttribute('data-swup');
-			});
-
-			// remove handlers
-			this.off();
-
-			// trigger disable event
-			this.triggerEvent('disabled');
-
-			// remove swup-enabled class from html tag
-			document.documentElement.classList.remove('swup-enabled');
-		}
-	}, {
-		key: 'linkClickHandler',
-		value: function linkClickHandler(event) {
-			// no control key pressed
-			if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) {
-				// index of pressed button needs to be checked because Firefox triggers click on all mouse buttons
-				if (event.button === 0) {
-					this.triggerEvent('clickLink', event);
-					event.preventDefault();
-					var link = new _helpers.Link(event.delegateTarget);
-					if (link.getAddress() == (0, _helpers.getCurrentUrl)() || link.getAddress() == '') {
-						// link to the same URL
-						if (link.getHash() != '') {
-							// link to the same URL with hash
-							this.triggerEvent('samePageWithHash', event);
-							var element = (0, _getAnchorElement2.default)(link.getHash());
-							if (element != null) {
-								history.replaceState({
-									url: link.getAddress() + link.getHash(),
-									random: Math.random(),
-									source: 'swup'
-								}, document.title, link.getAddress() + link.getHash());
-							} else {
-								// referenced element not found
-								console.warn('Element for offset not found (' + link.getHash() + ')');
-							}
-						} else {
-							// link to the same URL without hash
-							this.triggerEvent('samePage', event);
-						}
-					} else {
-						// link to different url
-						if (link.getHash() != '') {
-							this.scrollToElement = link.getHash();
-						}
-
-						// get custom transition from data
-						var customTransition = event.delegateTarget.getAttribute('data-swup-transition');
-
-						// load page
-						this.loadPage({ url: link.getAddress(), customTransition: customTransition }, false);
-					}
-				}
-			} else {
-				// open in new tab (do nothing)
-				this.triggerEvent('openPageInNewTab', event);
-			}
-		}
-	}, {
-		key: 'popStateHandler',
-		value: function popStateHandler(event) {
-			if (this.options.skipPopStateHandling(event)) return;
-			var link = new _helpers.Link(event.state ? event.state.url : window.location.pathname);
-			if (link.getHash() !== '') {
-				this.scrollToElement = link.getHash();
-			} else {
-				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);
-		}
-	}]);
-
-	return Swup;
-}();
-
-exports.default = Swup;

package/lib/modules/Cache.js

@@ -1,66 +0,0 @@
-'use strict';
-
-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 = require('../helpers');
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var Cache = exports.Cache = function () {
-	function Cache() {
-		_classCallCheck(this, Cache);
-
-		this.pages = {};
-		this.last = null;
-	}
-
-	_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;
-			}
-			this.last = this.pages[page.url];
-			this.swup.log('Cache (' + Object.keys(this.pages).length + ')', this.pages);
-		}
-	}, {
-		key: 'getPage',
-		value: function getPage(url) {
-			url = (0, _helpers.normalizeUrl)(url);
-			return this.pages[url];
-		}
-	}, {
-		key: 'getCurrentPage',
-		value: function getCurrentPage() {
-			return this.getPage((0, _helpers.getCurrentUrl)());
-		}
-	}, {
-		key: 'exists',
-		value: function exists(url) {
-			url = (0, _helpers.normalizeUrl)(url);
-			return url in this.pages;
-		}
-	}, {
-		key: 'empty',
-		value: function empty() {
-			this.pages = {};
-			this.last = null;
-			this.swup.log('Cache cleared');
-		}
-	}, {
-		key: 'remove',
-		value: function remove(url) {
-			delete this.pages[url];
-		}
-	}]);
-
-	return Cache;
-}();
-
-exports.default = Cache;

package/lib/modules/getAnchorElement.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-	value: true
-});
-
-var _utils = require('../utils');
-
-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;

package/lib/modules/getAnimationPromises.js

@@ -1,43 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-	value: true
-});
-
-var _utils = require('../utils');
-
-var _helpers = require('../helpers');
-
-var getAnimationPromises = function getAnimationPromises() {
-	var selector = this.options.animationSelector;
-	var durationProperty = (0, _helpers.transitionProperty)() + 'Duration';
-	var promises = [];
-	var animatedElements = (0, _utils.queryAll)(selector, document.body);
-
-	if (!animatedElements.length) {
-		console.warn('[swup] No animated elements found by selector ' + selector);
-		return [Promise.resolve()];
-	}
-
-	animatedElements.forEach(function (element) {
-		var transitionDuration = window.getComputedStyle(element)[durationProperty];
-		// Resolve immediately if no transition defined
-		if (!transitionDuration || transitionDuration == '0s') {
-			console.warn('[swup] No CSS transition duration defined for element of selector ' + selector);
-			promises.push(Promise.resolve());
-			return;
-		}
-		var promise = new Promise(function (resolve) {
-			element.addEventListener((0, _helpers.transitionEnd)(), function (event) {
-				if (element == event.target) {
-					resolve();
-				}
-			});
-		});
-		promises.push(promise);
-	});
-
-	return promises;
-};
-
-exports.default = getAnimationPromises;

package/lib/modules/getPageData.js

@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-	value: true
-});
-
-var _helpers = require('../helpers');
-
-var getPageData = function getPageData(request) {
-	// this method can be replaced in case other content than html is expected to be received from server
-	// this function should always return {title, pageClass, originalContent, blocks, responseURL}
-	// in case page has invalid structure - return null
-	var html = request.responseText;
-	var pageObject = (0, _helpers.getDataFromHtml)(html, this.options.containers);
-
-	if (pageObject) {
-		pageObject.responseURL = request.responseURL ? request.responseURL : window.location.href;
-	} else {
-		console.warn('[swup] Received page is invalid.');
-		return null;
-	}
-
-	return pageObject;
-};
-
-exports.default = getPageData;

package/lib/modules/loadPage.js

@@ -1,123 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-	value: true
-});
-
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
-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 = require('../helpers');
-
-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.cache.getPage(data.url));
-		});
-		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.blocks.length > 0) {
-							page.url = data.url;
-						} else {
-							reject(data.url);
-							return;
-						}
-						// render page
-						_this.cache.cacheUrl(page);
-						_this.triggerEvent('pageLoaded');
-						resolve(page);
-					}
-				});
-			});
-		} else {
-			xhrPromise = this.preloadPromise;
-		}
-	}
-
-	// when everything is ready, handle the outcome
-	Promise.all([xhrPromise].concat(animationPromises)).then(function (_ref) {
-		var _ref2 = _slicedToArray(_ref, 1),
-		    pageData = _ref2[0];
-
-		// render page
-		_this.renderPage(pageData, 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;

package/lib/modules/off.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-	value: true
-});
-var off = function off(event, handler) {
-	var _this = this;
-
-	if (event != null) {
-		if (handler != null) {
-			if (this._handlers[event] && this._handlers[event].filter(function (savedHandler) {
-				return savedHandler === handler;
-			}).length) {
-				var toRemove = this._handlers[event].filter(function (savedHandler) {
-					return savedHandler === handler;
-				})[0];
-				var index = this._handlers[event].indexOf(toRemove);
-				if (index > -1) {
-					this._handlers[event].splice(index, 1);
-				}
-			} else {
-				console.warn("Handler for event '" + event + "' no found.");
-			}
-		} else {
-			this._handlers[event] = [];
-		}
-	} else {
-		Object.keys(this._handlers).forEach(function (keys) {
-			_this._handlers[keys] = [];
-		});
-	}
-};
-
-exports.default = off;

package/lib/modules/on.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-	value: true
-});
-var on = function on(event, handler) {
-	if (this._handlers[event]) {
-		this._handlers[event].push(handler);
-	} else {
-		console.warn("Unsupported event " + event + ".");
-	}
-};
-
-exports.default = on;

package/lib/modules/plugins.js

@@ -1,54 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-	value: true
-});
-var use = exports.use = function use(plugin) {
-	if (!plugin.isSwupPlugin) {
-		console.warn('Not swup plugin instance ' + plugin + '.');
-		return;
-	}
-
-	this.plugins.push(plugin);
-	plugin.swup = this;
-	if (typeof plugin._beforeMount === 'function') {
-		plugin._beforeMount();
-	}
-	plugin.mount();
-
-	return this.plugins;
-};
-
-var unuse = exports.unuse = function unuse(plugin) {
-	var pluginReference = void 0;
-
-	if (typeof plugin === 'string') {
-		pluginReference = this.plugins.find(function (p) {
-			return plugin === p.name;
-		});
-	} else {
-		pluginReference = plugin;
-	}
-
-	if (!pluginReference) {
-		console.warn('No such plugin.');
-		return;
-	}
-
-	pluginReference.unmount();
-
-	if (typeof pluginReference._afterUnmount === 'function') {
-		pluginReference._afterUnmount();
-	}
-
-	var index = this.plugins.indexOf(pluginReference);
-	this.plugins.splice(index, 1);
-
-	return this.plugins;
-};
-
-var findPlugin = exports.findPlugin = function findPlugin(pluginName) {
-	return this.plugins.find(function (p) {
-		return pluginName === p.name;
-	});
-};