Repository: gmrchk/swupjs
Branch: master
Commit: c1278a66f1c7
Files: 15
Total size: 78.4 KB
Directory structure:
gitextract_ygtp08t5/
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ └── issue-template.md
│ └── workflows/
│ └── npm-publish.yml
├── .gitignore
├── .npmignore
├── LICENSE
├── dist/
│ └── swupjs.js
├── entry.js
├── package.json
├── readme.md
├── src/
│ ├── index.js
│ └── modules/
│ ├── createAnimationPromise.js
│ ├── getAnimation.js
│ ├── loadPage.js
│ └── renderPage.js
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/ISSUE_TEMPLATE/issue-template.md
================================================
---
name: Issue template
about: Create a report to help us improve
title: ''
labels: ''
assignees: ''
---
**Describe your issue**:
Describe your issue here...
**Swup config or any additional relevant code used**:
```javascript
const swup = Swup();
```
**Before creating this issue, did you think of...**:
- [ ] Have you checked closed issues for similar/related problems.
- [ ] Have you provided all helpful information available?
- [ ] Have you considered creating a demo so we can help you better?
================================================
FILE: .github/workflows/npm-publish.yml
================================================
# This workflow publishes a package to NPM
name: Publish package
on:
release:
types: [published]
jobs:
publish-npm:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: 12
registry-url: https://registry.npmjs.org/
- run: npm ci
- run: npm publish --access public
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
================================================
FILE: .gitignore
================================================
.DS_Store
*.DS_Store
!.gitignore
!.htaccess
!web.config
node_modules
bower_components
Thumbs.db
wiki-common
wiki-images files
wiki-wishlist
*.sublime-project
*.sublime-workspace
.editorconfig
.idea
lib
================================================
FILE: .npmignore
================================================
src/
entry.js
webpack.config.js
.idea
.github
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2017 Georgy Marchuk
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: dist/swupjs.js
================================================
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["Swupjs"] = factory();
else
root["Swupjs"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 30);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.query = query;
exports.queryAll = queryAll;
function query(selector) {
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
if (typeof selector !== 'string') {
return selector;
}
return context.querySelector(selector);
}
function queryAll(selector) {
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
if (typeof selector !== 'string') {
return selector;
}
return Array.prototype.slice.call(context.querySelectorAll(selector));
}
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
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() {
_classCallCheck(this, Link);
this.link = document.createElement("a");
}
_createClass(Link, [{
key: 'setPath',
value: function setPath(href) {
this.link.href = href;
}
}, {
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 (path[0] != '/') {
path = '/' + path;
}
return path;
}
}, {
key: 'getHash',
value: function getHash() {
return this.link.hash;
}
}]);
return Link;
}();
exports.default = Link;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = function (fn) {
return new Promise(function (resolve) {
fn(resolve);
});
};
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = function (transition, animations, type) {
var animation = null;
var animationName = null;
var topRating = 0;
Object.keys(animations).forEach(function (item) {
var rating = 0;
if (item.includes('>')) {
var route = item.split('>');
var from = route[0];
var to = route[1];
// TO equals to TO
if (to == transition.to || to == "*") {
rating++;
}
// equals to CUSTOM animation
if (to == transition.custom) {
rating = rating + 2;
}
// FROM equals or is ANY
if (from == transition.from || from == "*") {
rating++;
}
}
// set new final animation
if (rating > topRating) {
topRating = rating;
animationName = item;
animation = animations[item];
}
});
if (animation == null || topRating == 1) {
animation = animations['*'];
animationName = '*';
}
return animation[type];
};
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _Link = __webpack_require__(1);
var _Link2 = _interopRequireDefault(_Link);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var forEach = Array.prototype.forEach;
module.exports = function (page, popstate) {
var _this = this;
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());
}
if (!popstate || this.options.animateHistoryBrowsing) {
document.documentElement.classList.add('is-rendering');
}
this.triggerEvent('willReplaceContent');
// 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;
// handle classes after render
// remove
if (this.options.pageClassPrefix !== false) {
document.body.className.split(' ').forEach(function (className) {
// empty string for page class
if (className != "" && className.includes(_this.options.pageClassPrefix)) {
document.body.classList.remove(className);
}
});
}
// add
if (page.pageClass != "") {
page.pageClass.split(' ').forEach(function (className) {
if (className != "" && className.includes(_this.options.pageClassPrefix)) {
document.body.classList.add(className);
}
});
}
this.triggerEvent('contentReplaced');
this.triggerEvent('pageView');
if (!this.options.cache) {
this.cache.empty(this.options.debugMode);
}
// scrolling
if (!this.options.doScrollingRightAway || this.scrollToElement) {
this.doScrolling(popstate);
}
// detect animation end
var animationPromises = [];
if (!popstate || this.options.animateHistoryBrowsing) {
this.triggerEvent('animationInStart');
var animationPromise = this.createAnimationPromise(this.getAnimation(this.transition, this.animations, 'in'));
animationPromises.push(animationPromise);
}
//preload pages if possible
this.preloadPages();
if (!popstate || this.options.animateHistoryBrowsing) {
Promise.all(animationPromises).then(function () {
_this.triggerEvent('animationInDone');
// 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);
}
});
});
}
// update current url
this.getUrl();
// reset scroll-to element
this.scrollToElement = null;
};
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = function (data, popstate) {
var _this = this;
// scrolling
if (this.options.doScrollingRightAway && !this.scrollToElement) {
this.doScrolling(popstate);
}
// create array for storing animation promises
var animationPromises = [];
// set transition object
if (data.customTransition != null) {
this.updateTransition(window.location.pathname, data.url, data.customTransition);
document.documentElement.classList.add('to-' + this.classify(data.customTransition));
} else {
this.updateTransition(window.location.pathname, data.url);
}
if (!popstate || this.options.animateHistoryBrowsing) {
// start animation
this.triggerEvent('animationOutStart');
document.documentElement.classList.add('is-changing');
document.documentElement.classList.add('is-leaving');
if (popstate) {
document.documentElement.classList.add('is-popstate');
}
document.documentElement.classList.add('to-' + this.classify(data.url));
// animation promise
var animationPromise = this.createAnimationPromise(this.getAnimation(this.transition, this.animations, 'out'));
animationPromises.push(animationPromise);
Promise.all(animationPromises).then(function () {
_this.triggerEvent('animationOutDone');
});
// create pop element with or without anchor
if (this.scrollToElement != null) {
var pop = data.url + this.scrollToElement;
} else {
var pop = data.url;
}
if (!popstate) this.createState(pop);
} else {
// proceed without animating
this.triggerEvent('animationSkipped');
}
if (this.cache.exists(data.url)) {
var xhrPromise = new Promise(function (resolve) {
resolve();
});
this.triggerEvent('pageRetrievedFromCache');
} else {
if (!this.preloadPromise || this.preloadPromise.route != data.url) {
var xhrPromise = new Promise(function (resolve, reject) {
_this.getPage(data, function (response, request) {
if (request.status === 500) {
_this.triggerEvent('serverError');
reject(data.url);
return;
} else {
// get json data
var page = _this.getDataFromHtml(response, request);
if (page != null) {
page.url = data.url;
} else {
reject(data.url);
return;
}
// render page
_this.cache.cacheUrl(page, _this.options.debugMode);
_this.triggerEvent('pageLoaded');
}
resolve();
});
});
} else {
var xhrPromise = this.preloadPromise;
}
}
Promise.all(animationPromises.concat([xhrPromise])).then(function () {
_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);
});
};
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = function (str) {
if (this.options.debugMode) {
console.log(str + '%c', 'color: #009ACD');
}
};
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = function (plugin, options) {
var _this = this;
options = Object.assign({}, plugin.options, options);
plugin.options = options;
var getCurrentPageHtml = function getCurrentPageHtml() {
var page = _this.cache.getPage(window.location.pathname + window.location.search);
var html = document.createElement('html');
html.innerHTML = page.originalContent;
return html;
};
this.plugins.push(plugin);
plugin.exec(options, this, getCurrentPageHtml);
return this.plugins;
};
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _utils = __webpack_require__(0);
module.exports = function () {
var _this = this;
if (this.options.preload) {
(0, _utils.queryAll)('[data-swup-preload]').forEach(function (element) {
_this.preloadPage(element.href);
});
}
};
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _Link = __webpack_require__(1);
var _Link2 = _interopRequireDefault(_Link);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
module.exports = function (pathname) {
var _this = this;
var link = new _Link2.default();
link.setPath(pathname);
return new Promise(function (resolve, reject) {
if (link.getAddress() != _this.currentUrl && !_this.cache.exists(link.getAddress())) {
_this.getPage({ url: link.getAddress() }, function (response, request) {
if (request.status === 500) {
_this.triggerEvent('serverError');
reject();
} else {
// get json data
var page = _this.getDataFromHtml(response, request);
if (page != null) {
page.url = link.getAddress();
_this.cache.cacheUrl(page, _this.options.debugMode);
_this.triggerEvent('pagePreloaded');
}
resolve(_this.cache.getPage(link.getAddress()));
}
});
} else {
resolve(_this.cache.getPage(link.getAddress()));
}
});
};
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = function (from, to, custom) {
// homepage case
if (from == "/") {
from = "/homepage";
}
if (to == "/") {
to = "/homepage";
}
// transition routes
this.transition = {
from: from.replace('/', ''),
to: to.replace('/', '')
};
if (custom) {
this.transition.custom = custom;
}
};
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = 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] = [];
});
}
};
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = function on(event, handler) {
if (this._handlers[event]) {
this._handlers[event].push(handler);
} else {
console.warn("Unsupported event " + event + ".");
}
};
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _utils = __webpack_require__(0);
module.exports = function (element) {
var _this = this;
var blocks = 0;
for (var i = 0; i < this.options.elements.length; i++) {
if (element.querySelector(this.options.elements[i]) == null) {
console.warn("Element " + this.options.elements[i] + " is not in current page.");
} else {
(0, _utils.queryAll)(this.options.elements[i]).forEach(function (item, index) {
(0, _utils.queryAll)(_this.options.elements[i], element)[index].dataset.swup = blocks;
blocks++;
});
}
}
};
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = function (popstate) {
if (this.options.scroll && (!popstate || this.options.animateHistoryBrowsing)) {
if (this.scrollToElement != null) {
var element = document.querySelector(this.scrollToElement);
if (element != null) {
var top = element.getBoundingClientRect().top + window.pageYOffset;
this.scrollTo(document.body, top);
} else {
console.warn("Element for offset not found (" + this.scrollToElement + ")");
}
this.scrollToElement = null;
} else {
this.scrollTo(document.body, 0);
}
}
};
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = function (text) {
var output = text.toString().toLowerCase().replace(/\s+/g, '-') // Replace spaces with -
.replace(/\//g, '-') // Replace / with -
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
.replace(/\-\-+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, ''); // Trim - from end of text
if (output[0] == "/") output = output.splice(1);
if (output == '') output = 'homepage';
return output;
};
/***/ }),
/* 16 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = function (element, to) {
var _this = this;
var animatedScroll = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.options.animateScroll;
var friction = 1 - this.options.scrollFriction;
var acceleration = this.options.scrollAcceleration;
var positionY = 0;
var velocityY = 0;
var targetPositionY = 0;
var targetPositionYWithOffset = 0;
var direction = 0;
var raf = null;
function getScrollTop() {
return document.body.scrollTop || document.documentElement.scrollTop;
}
var animate = function animate() {
var distance = update();
render();
if (direction === 1 && targetPositionY > positionY || direction === -1 && targetPositionY < positionY) {
raf = requestAnimationFrame(animate);
} else {
window.scrollTo(0, targetPositionY);
_this.triggerEvent('scrollDone');
}
};
function update() {
var distance = targetPositionYWithOffset - positionY;
var attraction = distance * acceleration;
applyForce(attraction);
velocityY *= friction;
positionY += velocityY;
return distance;
}
var applyForce = function applyForce(force) {
velocityY += force;
};
var render = function render() {
window.scrollTo(0, positionY);
};
window.addEventListener('mousewheel', function (event) {
if (raf) {
cancelAnimationFrame(raf);
raf = null;
}
}, {
passive: true
});
var scrollTo = function scrollTo(offset, callback) {
positionY = getScrollTop();
direction = positionY > offset ? -1 : 1;
targetPositionYWithOffset = offset + direction;
targetPositionY = offset;
velocityY = 0;
if (positionY != targetPositionY) {
animate();
} else {
_this.triggerEvent('scrollDone');
}
};
this.triggerEvent('scrollStart');
if (animatedScroll == 0) {
window.scrollTo(0, to);
this.triggerEvent('scrollDone');
} else {
scrollTo(to);
}
};
/***/ }),
/* 17 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = function () {
this.currentUrl = window.location.pathname + window.location.search;
};
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = function (eventName, originalEvent) {
if (this.options.debugMode && originalEvent) {
console.groupCollapsed('%cswup:' + '%c' + eventName, 'color: #343434', 'color: #009ACD');
console.log(originalEvent);
console.groupEnd();
} else if (this.options.debugMode) {
console.log('%cswup:' + '%c' + eventName, 'color: #343434', 'color: #009ACD');
}
// call saved handlers with "on" method and pass originalEvent object if available
this._handlers[eventName].forEach(function (handler) {
try {
handler(originalEvent);
} catch (error) {
console.error(error);
}
});
// trigger event on document with prefix "swup:"
var event = new CustomEvent('swup:' + eventName, { detail: eventName });
document.dispatchEvent(event);
};
/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = function (url) {
window.history.pushState({
url: url || window.location.href.split(window.location.hostname)[1],
random: Math.random(),
source: "swup"
}, document.getElementsByTagName('title')[0].innerText, url || window.location.href.split(window.location.hostname)[1]);
};
/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _utils = __webpack_require__(0);
var _Link = __webpack_require__(1);
var _Link2 = _interopRequireDefault(_Link);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var forEach = Array.prototype.forEach;
module.exports = function (page, popstate) {
var _this = this;
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');
}
this.triggerEvent('willReplaceContent');
// 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;
// handle classes after render
// remove
if (this.options.pageClassPrefix !== false) {
document.body.className.split(' ').forEach(function (className) {
// empty string for page class
if (className != "" && className.includes(_this.options.pageClassPrefix)) {
document.body.classList.remove(className);
}
});
}
// add
if (page.pageClass != "") {
page.pageClass.split(' ').forEach(function (className) {
if (className != "" && className.includes(_this.options.pageClassPrefix)) {
document.body.classList.add(className);
}
});
}
this.triggerEvent('contentReplaced');
this.triggerEvent('pageView');
if (!this.options.cache) {
this.cache.empty(this.options.debugMode);
}
setTimeout(function () {
if (!popstate || _this.options.animateHistoryBrowsing) {
_this.triggerEvent('animationInStart');
document.documentElement.classList.remove('is-animating');
}
}, 10);
// scrolling
if (!this.options.doScrollingRightAway || this.scrollToElement) {
this.doScrolling(popstate);
}
// detect animation end
var animatedElements = (0, _utils.queryAll)(this.options.animationSelector);
var promises = [];
forEach.call(animatedElements, function (element) {
var promise = new Promise(function (resolve) {
element.addEventListener(_this.transitionEndEvent, function (event) {
if (element == event.target) {
resolve();
}
});
});
promises.push(promise);
});
//preload pages if possible
this.preloadPages();
if (!popstate || this.options.animateHistoryBrowsing) {
Promise.all(promises).then(function () {
_this.triggerEvent('animationInDone');
// 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);
}
});
});
}
// update current url
this.getUrl();
// reset scroll-to element
this.scrollToElement = null;
};
/***/ }),
/* 21 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _utils = __webpack_require__(0);
var forEach = Array.prototype.forEach;
module.exports = function (data, popstate) {
var _this = this;
// scrolling
if (this.options.doScrollingRightAway && !this.scrollToElement) {
this.doScrolling(popstate);
}
// create array for storing animation promises
var animationPromises = [];
// set transition object
if (data.customTransition != null) {
this.updateTransition(window.location.pathname, data.url, data.customTransition);
document.documentElement.classList.add('to-' + this.classify(data.customTransition));
} else {
this.updateTransition(window.location.pathname, data.url);
}
if (!popstate || this.options.animateHistoryBrowsing) {
// start animation
this.triggerEvent('animationOutStart');
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-' + this.classify(data.url));
// detect animation end
var animatedElements = (0, _utils.queryAll)(this.options.animationSelector);
forEach.call(animatedElements, function (element) {
var promise = new Promise(function (resolve) {
element.addEventListener(_this.transitionEndEvent, function (event) {
if (element == event.target) {
resolve();
}
});
});
animationPromises.push(promise);
});
Promise.all(animationPromises).then(function () {
_this.triggerEvent('animationOutDone');
});
// create pop element with or without anchor
if (this.scrollToElement != null) {
var pop = data.url + this.scrollToElement;
} else {
var pop = data.url;
}
if (!popstate) this.createState(pop);
} else {
// proceed without animating
this.triggerEvent('animationSkipped');
}
if (this.cache.exists(data.url)) {
var xhrPromise = new Promise(function (resolve) {
resolve();
});
this.triggerEvent('pageRetrievedFromCache');
} else {
if (!this.preloadPromise || this.preloadPromise.route != data.url) {
var xhrPromise = new Promise(function (resolve, reject) {
_this.getPage(data, function (response, request) {
if (request.status === 500) {
_this.triggerEvent('serverError');
reject(data.url);
return;
} else {
// get json data
var page = _this.getDataFromHtml(response, request);
if (page != null) {
page.url = data.url;
} else {
reject(data.url);
return;
}
// render page
_this.cache.cacheUrl(page, _this.options.debugMode);
_this.triggerEvent('pageLoaded');
}
resolve();
});
});
} else {
var xhrPromise = this.preloadPromise;
}
}
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);
});
};
/***/ }),
/* 22 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _utils = __webpack_require__(0);
module.exports = function (html, request) {
var _this = this;
var content = html.replace('<body', '<div id="swupBody"').replace('</body>', '</div>');
var fakeDom = document.createElement('div');
fakeDom.innerHTML = content;
var blocks = [];
for (var i = 0; i < this.options.elements.length; i++) {
if (fakeDom.querySelector(this.options.elements[i]) == null) {
console.warn('Element ' + this.options.elements[i] + ' is not found in cached page.');
return null;
} else {
(0, _utils.queryAll)(this.options.elements[i]).forEach(function (item, index) {
(0, _utils.queryAll)(_this.options.elements[i], fakeDom)[index].dataset.swup = blocks.length;
blocks.push((0, _utils.queryAll)(_this.options.elements[i], fakeDom)[index].outerHTML);
});
}
}
var json = {
title: fakeDom.querySelector('title').innerText,
pageClass: fakeDom.querySelector('#swupBody').className,
originalContent: html,
blocks: blocks,
responseURL: request != null ? request.responseURL : window.location.href
};
return json;
};
/***/ }),
/* 23 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
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; };
module.exports = function (options) {
var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var defaults = {
url: window.location.pathname + window.location.search,
method: "GET",
data: null
};
var data = _extends({}, defaults, options);
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status !== 500) {
callback(request.responseText, request);
} else {
callback(null, request);
}
}
};
request.open(data.method, data.url, true);
request.setRequestHeader("X-Requested-With", "swup");
request.send(data.data);
return request;
};
/***/ }),
/* 24 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
module.exports = 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];
}
}
return false;
};
/***/ }),
/* 25 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
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 Cache = function () {
function Cache() {
_classCallCheck(this, Cache);
this.pages = {};
this.count = 0;
this.last = null;
}
_createClass(Cache, [{
key: 'cacheUrl',
value: function cacheUrl(page, displayCache) {
this.count++;
if (page.url in this.pages === false) {
this.pages[page.url] = page;
}
this.last = this.pages[page.url];
if (displayCache) {
this.displayCache();
}
}
}, {
key: 'getPage',
value: function getPage(url) {
return this.pages[url];
}
}, {
key: 'displayCache',
value: function displayCache() {
console.groupCollapsed('Cache (' + Object.keys(this.pages).length + ')');
for (var key in this.pages) {
console.log(this.pages[key]);
}
console.groupEnd();
}
}, {
key: 'exists',
value: function exists(url) {
if (url in this.pages) return true;
return false;
}
}, {
key: 'empty',
value: function empty(showLog) {
this.pages = {};
this.count = 0;
this.last = null;
if (showLog) {
console.log('Cache cleared');
}
}
}, {
key: 'remove',
value: function remove(url) {
delete this.pages[url];
}
}]);
return Cache;
}();
exports.default = Cache;
/***/ }),
/* 26 */
/***/ (function(module, exports) {
var DOCUMENT_NODE_TYPE = 9;
/**
* A polyfill for Element.matches()
*/
if (typeof Element !== 'undefined' && !Element.prototype.matches) {
var proto = Element.prototype;
proto.matches = proto.matchesSelector ||
proto.mozMatchesSelector ||
proto.msMatchesSelector ||
proto.oMatchesSelector ||
proto.webkitMatchesSelector;
}
/**
* Finds the closest parent that matches a selector.
*
* @param {Element} element
* @param {String} selector
* @return {Function}
*/
function closest (element, selector) {
while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {
if (typeof element.matches === 'function' &&
element.matches(selector)) {
return element;
}
element = element.parentNode;
}
}
module.exports = closest;
/***/ }),
/* 27 */
/***/ (function(module, exports, __webpack_require__) {
var closest = __webpack_require__(26);
/**
* Delegates event to a selector.
*
* @param {Element} element
* @param {String} selector
* @param {String} type
* @param {Function} callback
* @param {Boolean} useCapture
* @return {Object}
*/
function delegate(element, selector, type, callback, useCapture) {
var listenerFn = listener.apply(this, arguments);
element.addEventListener(type, listenerFn, useCapture);
return {
destroy: function() {
element.removeEventListener(type, listenerFn, useCapture);
}
}
}
/**
* Finds closest match and invokes callback.
*
* @param {Element} element
* @param {String} selector
* @param {String} type
* @param {Function} callback
* @return {Function}
*/
function listener(element, selector, type, callback) {
return function(e) {
e.delegateTarget = closest(e.target, selector);
if (e.delegateTarget) {
callback.call(element, e);
}
}
}
module.exports = delegate;
/***/ }),
/* 28 */
/***/ (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 _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; }; }();
// helpers
// modules
var _delegate = __webpack_require__(27);
var _delegate2 = _interopRequireDefault(_delegate);
var _Cache = __webpack_require__(25);
var _Cache2 = _interopRequireDefault(_Cache);
var _Link = __webpack_require__(1);
var _Link2 = _interopRequireDefault(_Link);
var _transitionEnd = __webpack_require__(24);
var _transitionEnd2 = _interopRequireDefault(_transitionEnd);
var _request = __webpack_require__(23);
var _request2 = _interopRequireDefault(_request);
var _getDataFromHtml = __webpack_require__(22);
var _getDataFromHtml2 = _interopRequireDefault(_getDataFromHtml);
var _loadPage = __webpack_require__(21);
var _loadPage2 = _interopRequireDefault(_loadPage);
var _renderPage = __webpack_require__(20);
var _renderPage2 = _interopRequireDefault(_renderPage);
var _createState = __webpack_require__(19);
var _createState2 = _interopRequireDefault(_createState);
var _triggerEvent = __webpack_require__(18);
var _triggerEvent2 = _interopRequireDefault(_triggerEvent);
var _getUrl = __webpack_require__(17);
var _getUrl2 = _interopRequireDefault(_getUrl);
var _scrollTo = __webpack_require__(16);
var _scrollTo2 = _interopRequireDefault(_scrollTo);
var _classify = __webpack_require__(15);
var _classify2 = _interopRequireDefault(_classify);
var _doScrolling = __webpack_require__(14);
var _doScrolling2 = _interopRequireDefault(_doScrolling);
var _markSwupElements = __webpack_require__(13);
var _markSwupElements2 = _interopRequireDefault(_markSwupElements);
var _on = __webpack_require__(12);
var _on2 = _interopRequireDefault(_on);
var _off = __webpack_require__(11);
var _off2 = _interopRequireDefault(_off);
var _updateTransition = __webpack_require__(10);
var _updateTransition2 = _interopRequireDefault(_updateTransition);
var _preloadPage = __webpack_require__(9);
var _preloadPage2 = _interopRequireDefault(_preloadPage);
var _preloadPages = __webpack_require__(8);
var _preloadPages2 = _interopRequireDefault(_preloadPages);
var _usePlugin = __webpack_require__(7);
var _usePlugin2 = _interopRequireDefault(_usePlugin);
var _log = __webpack_require__(6);
var _log2 = _interopRequireDefault(_log);
var _utils = __webpack_require__(0);
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 = {
cache: true,
animationSelector: '[class*="transition-"]',
elements: ['#swup'],
pageClassPrefix: '',
debugMode: false,
scroll: true,
doScrollingRightAway: false,
animateScroll: true,
scrollFriction: .3,
scrollAcceleration: .04,
preload: true,
support: true,
plugins: [],
skipPopStateHandling: function skipPopStateHandling(event) {
if (event.state && event.state.source == "swup") {
return false;
}
return true;
},
animateHistoryBrowsing: false,
LINK_SELECTOR: 'a[href^="' + window.location.origin + '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup])',
FORM_SELECTOR: 'form[data-swup-form]'
/**
* current transition object
*/
};this.transition = {};
var options = _extends({}, defaults, setOptions);
/**
* handler arrays
*/
this._handlers = {
animationInDone: [],
animationInStart: [],
animationOutDone: [],
animationOutStart: [],
animationSkipped: [],
clickLink: [],
contentReplaced: [],
disabled: [],
enabled: [],
hoverLink: [],
openPageInNewTab: [],
pageLoaded: [],
pagePreloaded: [],
pageRetrievedFromCache: [],
pageView: [],
popState: [],
samePage: [],
samePageWithHash: [],
scrollDone: [],
scrollStart: [],
serverError: [],
submitForm: [],
willReplaceContent: []
};
/**
* helper variables
*/
// id of element to scroll to after render
this.scrollToElement = null;
// promise used for preload, so no new loading of the same page starts while page is loading
this.preloadPromise = null;
// save options
this.options = options;
// plugins array
this.plugins = [];
/**
* make modules accessible in instance
*/
this.getUrl = _getUrl2.default;
this.cache = new _Cache2.default();
this.link = new _Link2.default();
this.transitionEndEvent = (0, _transitionEnd2.default)();
this.getDataFromHtml = _getDataFromHtml2.default;
this.getPage = _request2.default;
this.scrollTo = _scrollTo2.default;
this.loadPage = _loadPage2.default;
this.renderPage = _renderPage2.default;
this.createState = _createState2.default;
this.triggerEvent = _triggerEvent2.default;
this.classify = _classify2.default;
this.doScrolling = _doScrolling2.default;
this.markSwupElements = _markSwupElements2.default;
this.on = _on2.default;
this.off = _off2.default;
this.updateTransition = _updateTransition2.default;
this.preloadPage = _preloadPage2.default;
this.preloadPages = _preloadPages2.default;
this.usePlugin = _usePlugin2.default;
this.log = _log2.default;
this.enable = this.enable;
this.destroy = this.destroy;
// attach instance to window in debug mode
if (this.options.debugMode) {
window.swup = this;
}
this.getUrl();
this.enable();
}
_createClass(Swup, [{
key: 'enable',
value: function enable() {
var _this = this;
/**
* support check
*/
if (this.options.support) {
// check pushState support
if (!('pushState' in window.history)) {
console.warn('pushState is not supported');
return;
}
// check transitionEnd support
if ((0, _transitionEnd2.default)()) {
this.transitionEndEvent = (0, _transitionEnd2.default)();
} else {
console.warn('transitionEnd detection is not supported');
return;
}
// check Promise support
if (typeof Promise === "undefined" || Promise.toString().indexOf("[native code]") === -1) {
console.warn('Promise is not supported');
return;
}
}
// variable to keep event listeners from "delegate"
this.delegatedListeners = {};
/**
* link click handler
*/
this.delegatedListeners.click = (0, _delegate2.default)(document, this.options.LINK_SELECTOR, 'click', this.linkClickHandler.bind(this));
/**
* link mouseover handler (preload)
*/
this.delegatedListeners.mouseover = (0, _delegate2.default)(document.body, this.options.LINK_SELECTOR, 'mouseover', this.linkMouseoverHandler.bind(this));
/**
* form submit handler
*/
this.delegatedListeners.formSubmit = (0, _delegate2.default)(document, this.options.FORM_SELECTOR, 'submit', this.formSubmitHandler.bind(this));
/**
* popstate handler
*/
window.addEventListener('popstate', this.popStateHandler.bind(this));
/**
* initial save to cache
*/
var page = this.getDataFromHtml(document.documentElement.outerHTML);
page.url = this.currentUrl;
if (this.options.cache) {
this.cache.cacheUrl(page, this.options.debugMode);
}
/**
* mark swup blocks in html
*/
this.markSwupElements(document.documentElement);
/**
* enable plugins from options
*/
this.options.plugins.forEach(function (item) {
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);
/**
* Disable browser scroll control on popstates when animateHistoryBrowsing option is enabled
*/
if (this.options.animateHistoryBrowsing) {
window.history.scrollRestoration = "manual";
}
/**
* trigger enabled event
*/
this.triggerEvent('enabled');
document.documentElement.classList.add('swup-enabled');
/**
* trigger page view event
*/
this.triggerEvent('pageView');
/**
* preload pages if possible
*/
this.preloadPages();
}
}, {
key: 'destroy',
value: function destroy() {
// remove delegated listeners
this.delegatedListeners.click.destroy();
this.delegatedListeners.mouseover.destroy();
// remove popstate listener
window.removeEventListener('popstate', this.popStateHandler.bind(this));
// empty cache
this.cache.empty();
// remove swup data atributes from blocks
(0, _utils.queryAll)('[data-swup]').forEach(function (element) {
delete element.dataset.swup;
});
// remove handlers
this.off();
this.triggerEvent('disabled');
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);
var link = new _Link2.default();
event.preventDefault();
link.setPath(event.delegateTarget.href);
if (link.getAddress() == this.currentUrl || link.getAddress() == '') {
// link to the same URL
if (link.getHash() != '') {
// link to the same URL with hash
this.triggerEvent('samePageWithHash', event);
var element = document.querySelector(link.getHash());
if (element != null) {
// referenced element found
if (this.options.scroll) {
var top = element.getBoundingClientRect().top + window.pageYOffset;
this.scrollTo(document.body, top);
}
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);
if (this.options.scroll) {
this.scrollTo(document.body, 0, 1);
}
}
} else {
// link to different url
if (link.getHash() != '') {
this.scrollToElement = link.getHash();
}
// get custom transition from data
var customTransition = event.delegateTarget.dataset.swupTransition;
// load page
this.loadPage({ url: link.getAddress(), customTransition: customTransition }, false);
}
}
} else {
// open in new tab (do nothing)
this.triggerEvent('openPageInNewTab', event);
}
}
}, {
key: 'linkMouseoverHandler',
value: function linkMouseoverHandler(event) {
var _this2 = this;
this.triggerEvent('hoverLink', event);
if (this.options.preload) {
var link = new _Link2.default();
link.setPath(event.delegateTarget.href);
if (link.getAddress() != this.currentUrl && !this.cache.exists(link.getAddress()) && this.preloadPromise == null) {
this.preloadPromise = new Promise(function (resolve, reject) {
_this2.getPage({ url: link.getAddress() }, function (response, request) {
if (request.status === 500) {
_this2.triggerEvent('serverError', event);
reject(link.getAddress());
return;
} else {
// get json data
var page = _this2.getDataFromHtml(response, request);
if (page != null) {
page.url = link.getAddress();
_this2.cache.cacheUrl(page, _this2.options.debugMode);
_this2.triggerEvent('pagePreloaded', event);
} else {
reject(link.getAddress());
return;
}
}
resolve();
_this2.preloadPromise = null;
});
});
this.preloadPromise.route = link.getAddress();
}
}
}
}, {
key: 'formSubmitHandler',
value: function formSubmitHandler(event) {
// no control key pressed
if (!event.metaKey) {
this.triggerEvent('submitForm', event);
event.preventDefault();
var form = event.target;
var formData = new FormData(form);
var link = new _Link2.default();
link.setPath(form.action);
if (link.getHash() != '') {
this.scrollToElement = link.getHash();
}
if (form.method.toLowerCase() != "get") {
// remove page from cache
this.cache.remove(link.getAddress());
// send data
this.loadPage({
url: link.getAddress(),
method: form.method,
data: formData
});
} else {
// create base url
var url = link.getAddress() || window.location.href;
var inputs = (0, _utils.queryAll)('input, select', form);
if (url.indexOf('?') == -1) {
url += "?";
} else {
url += "&";
}
// add form data to url
inputs.forEach(function (input) {
if (input.type == "checkbox" || input.type == "radio") {
if (input.checked) {
url += encodeURIComponent(input.name) + "=" + encodeURIComponent(input.value) + "&";
}
} else {
url += encodeURIComponent(input.name) + "=" + encodeURIComponent(input.value) + "&";
}
});
// remove last "&"
url = url.slice(0, -1);
// remove page from cache
this.cache.remove(url);
// send data
this.loadPage({
url: url
});
}
} else {
this.triggerEvent('openFormSubmitInNewTab', event);
}
}
}, {
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();
} else {
event.preventDefault();
}
this.triggerEvent('popState', event);
this.loadPage({ url: link.getAddress() }, event);
}
}]);
return Swup;
}();
exports.default = Swup;
/***/ }),
/* 29 */
/***/ (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 _swup = __webpack_require__(28);
var _swup2 = _interopRequireDefault(_swup);
var _loadPage = __webpack_require__(5);
var _loadPage2 = _interopRequireDefault(_loadPage);
var _renderPage = __webpack_require__(4);
var _renderPage2 = _interopRequireDefault(_renderPage);
var _getAnimation = __webpack_require__(3);
var _getAnimation2 = _interopRequireDefault(_getAnimation);
var _createAnimationPromise = __webpack_require__(2);
var _createAnimationPromise2 = _interopRequireDefault(_createAnimationPromise);
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"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
// modules
var Swupjs = function (_Swup) {
_inherits(Swupjs, _Swup);
function Swupjs(setOptions) {
_classCallCheck(this, Swupjs);
var defaults = {
animations: {
'*': {
out: function out(next) {
next();
},
in: function _in(next) {
next();
}
}
}
};
var options = _extends({}, defaults, setOptions);
var _this = _possibleConstructorReturn(this, (Swupjs.__proto__ || Object.getPrototypeOf(Swupjs)).call(this, options));
_this.loadPage = _loadPage2.default;
_this.renderPage = _renderPage2.default;
_this.getAnimation = _getAnimation2.default;
_this.createAnimationPromise = _createAnimationPromise2.default;
_this.animations = options.animations;
return _this;
}
/**
* make modules accessible in instance
*/
return Swupjs;
}(_swup2.default);
exports.default = Swupjs;
/***/ }),
/* 30 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _index = __webpack_require__(29);
var _index2 = _interopRequireDefault(_index);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
module.exports = _index2.default; // this is here for webpack to expose Swupjs as window.Swupjs
/***/ })
/******/ ]);
});
================================================
FILE: entry.js
================================================
// this is here for webpack to expose Swupjs as window.Swupjs
import Swupjs from './src/index.js'
module.exports = Swupjs
================================================
FILE: package.json
================================================
{
"name": "swupjs",
"version": "1.7.1",
"description": "Complete, flexible, easy to use page transition library - swup extension.",
"main": "lib/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile": "babel --presets es2015,stage-0 -d lib/ src/",
"build": "webpack-cli",
"prepublish": "npm run compile"
},
"author": "Georgy Marchuk",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/gmrchk/swupjs.git"
},
"keywords": [
"js",
"animation",
"page",
"transition"
],
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.8.3",
"webpack-cli": "^5.0.1"
},
"dependencies": {
"swup": "^1.9.0"
}
}
================================================
FILE: readme.md
================================================
# swupjs
| WARNING: this repository is deprecated in favour of [JS-plugin](https://swup.js.org/plugins/js-plugin) |
| --- |
Swupjs is an extension of [swup](https://github.com/gmrchk/swup), which modifies the module for use with JavaScript animations.
Swupjs only slightly modifies swup, where all the capabilities of swup remain the same, with only one exception - timing and animations are based on JavaScript, not CSS transitions.
For more information about functionality and idea of swupjs, refer to [swup](https://github.com/gmrchk/swup) documentation.
## Installation
```bash
npm install swupjs
```
or include the file from the dist folder
```html
<script src="./dist/swupjs.js"></script>
```
## How it works
Swupjs is enabled similarly as swup.
```javascript
let options = {}
const swupjs = new Swupjs(options)
```
## Animations option
To use your animations for page transitions, you first need to define the animation object.
```javascript
animations: {
'*': {
out: function (next) {
next()
},
in: function (next) {
next()
}
}
}
```
The example above is the default setup in swupjs and defines two animations, where **out** is the animation (function) being executed before content replace, and **in** is animation being executed after the content is replaced.
As one may have noticed, one parameter is passed into both functions.
Call of `next` function serves as an indicator, that animation is done - so in a real world `next()` would be called as a callback of the animation.
As you can see, by default no animation is being executed and `next()` is called right away.
**Note:** Although the whole purpose of swup is to enable page transitions, this can still enhance your user experience even without the animation as it can shorten your load time drastically when preload and/or cache options are set to `true`. In most cases, your page change should be immediate without any wait time.
```javascript
out: function (next) {
setTimeout(next, 2000)
}
```
In the example above, next function is called after two seconds, which means that swupjs would wait two seconds (or any time necessary for the load of the new page content), before continuing to the content replace.
Animation object needs to be passed as a part of your options.
```javascript
let options = {
animations: {
'*': {
out: function (next) {
next()
},
in: function (next) {
next()
}
}
}
}
const swupjs = new Swupjs(options)
```
Basic usage with tools like GSAP would look something like the following:
```javascript
let options = {
animations: {
'*': {
in: function(next){
document.querySelector('#swup').style.opacity = 0;
TweenLite.to(document.querySelector('#swup'), .5, {
opacity: 1,
onComplete: next
});
},
out: function(next){
document.querySelector('#swup').style.opacity = 1;
TweenLite.to(document.querySelector('#swup'), .5, {
opacity: 0,
onComplete: next
});
}
},
}
}
const swupjs = new Swupjs(options);
```
## Choosing the animation
As one may have noticed, the name of animation object in options is defined as `'*'`, which serves as a fallback or base set of animations used throughout the website.
Custom animations can be defined for a transition between any pages, where the name is defined by `[starting route]>[final route]`.
```javascript
...
'homepage>documentation': {
out: function (next) {
next()
},
in: function (next) {
next()
}
}
...
```
The animation above would be executed for the transition between homepage (/) and documentation page (/documentation).
Notice that for the lack of route, keyword "homepage" is used.
Any of the two routes can also be defined by wildcard symbol (`homepage>*` or `*>documentation`).
The most fitting animation is always chosen.
## Custom animation to dynamic pages
Similarly to swup, where `data-swup-transition` attribute of the clicked link is used for assigning a special class to the html tag, swupjs uses the same attribute for choosing custom animation.
In case the attribute is defined on clicked link, swupjs also tests the animation object for the content of the data attribute.
So following attribute `data-swup-transition="post"` would end up in `*>post` being executed.
```javascript
...
'*': {
...
},
'*>documentation': {
...
},
'*>post': {
...
}
...
```
================================================
FILE: src/index.js
================================================
import Swup from 'swup'
// modules
import loadPage from './modules/loadPage'
import renderPage from './modules/renderPage'
import getAnimation from './modules/getAnimation'
import createAnimationPromise from './modules/createAnimationPromise'
export default class Swupjs extends Swup {
constructor(setOptions) {
let defaults = {
animations: {
'*': {
out: function (next) {
next()
},
in: function (next) {
next()
}
}
}
}
let options = {
...defaults,
...setOptions
}
super(options)
this.animations = options.animations
}
/**
* make modules accessible in instance
*/
loadPage = loadPage
renderPage = renderPage
getAnimation = getAnimation
createAnimationPromise = createAnimationPromise
}
================================================
FILE: src/modules/createAnimationPromise.js
================================================
module.exports = function (fn) {
return new Promise(resolve => {
fn(resolve)
})
}
================================================
FILE: src/modules/getAnimation.js
================================================
module.exports = function (transition, animations, type) {
let animation = null
let animationName = null
let topRating = 0
Object.keys(animations).forEach(item => {
let rating = 0
if (item.includes('>')) {
let route = item.split('>')
let from = route[0]
let to = route[1]
// TO equals to TO
if (to == transition.to || to == "*") {
rating++
}
// equals to CUSTOM animation
if (to == transition.custom) {
rating=rating+2
}
// FROM equals or is ANY
if (from == transition.from || from == "*") {
rating++
}
}
// set new final animation
if (rating > topRating) {
topRating = rating
animationName = item
animation = animations[item]
}
})
if (animation == null || topRating == 1) {
animation = animations['*']
animationName = '*'
}
return animation[type]
}
================================================
FILE: src/modules/loadPage.js
================================================
module.exports = function (data, popstate) {
// scrolling
if (this.options.doScrollingRightAway && !this.scrollToElement) {
this.doScrolling(popstate)
}
// create array for storing animation promises
let animationPromises = []
// set transition object
if (data.customTransition != null) {
this.updateTransition(window.location.pathname, data.url, data.customTransition)
document.documentElement.classList.add(`to-${ this.classify(data.customTransition) }`)
} else {
this.updateTransition(window.location.pathname, data.url)
}
if (!popstate || this.options.animateHistoryBrowsing) {
// start animation
this.triggerEvent('animationOutStart')
document.documentElement.classList.add('is-changing')
document.documentElement.classList.add('is-leaving')
if (popstate) {
document.documentElement.classList.add('is-popstate')
}
document.documentElement.classList.add('to-' + this.classify(data.url))
// animation promise
let animationPromise = this.createAnimationPromise(this.getAnimation(this.transition, this.animations, 'out'))
animationPromises.push(animationPromise)
Promise
.all(animationPromises)
.then(() => {
this.triggerEvent('animationOutDone')
})
// create pop element with or without anchor
if (this.scrollToElement != null) {
var pop = data.url + this.scrollToElement;
} else {
var pop = data.url;
}
if(!popstate)
this.createState(pop)
} else {
// proceed without animating
this.triggerEvent('animationSkipped')
}
if (this.cache.exists(data.url)) {
var xhrPromise = new Promise(resolve => {
resolve()
})
this.triggerEvent('pageRetrievedFromCache')
} else {
if (!this.preloadPromise || this.preloadPromise.route != data.url) {
var xhrPromise = new Promise((resolve, reject) => {
this.getPage(data, (response, request) => {
if (request.status === 500) {
this.triggerEvent('serverError')
reject(data.url)
return;
} else {
// get json data
var page = this.getDataFromHtml(response, request)
if (page != null) {
page.url = data.url
} else {
reject(data.url)
return;
}
// render page
this.cache.cacheUrl(page, this.options.debugMode)
this.triggerEvent('pageLoaded')
}
resolve()
})
})
} else {
var xhrPromise = this.preloadPromise
}
}
Promise
.all(animationPromises.concat([xhrPromise]))
.then(() => {
this.renderPage(this.cache.getPage(data.url), popstate)
this.preloadPromise = null
})
.catch(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)
});
}
================================================
FILE: src/modules/renderPage.js
================================================
const { forEach } = Array.prototype;
import Link from 'swup/lib/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(),
);
}
if (!popstate || this.options.animateHistoryBrowsing) {
document.documentElement.classList.add('is-rendering')
}
this.triggerEvent('willReplaceContent');
// 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;
// handle classes after render
// remove
if (this.options.pageClassPrefix !== false) {
document.body.className.split(' ').forEach(className => {
// empty string for page class
if (className != "" && className.includes(this.options.pageClassPrefix)) {
document.body.classList.remove(className)
}
})
}
// add
if (page.pageClass != "") {
page.pageClass.split(' ').forEach(className => {
if (className != "" && className.includes(this.options.pageClassPrefix)) {
document.body.classList.add(className)
}
})
}
this.triggerEvent('contentReplaced')
this.triggerEvent('pageView')
if (!this.options.cache) {
this.cache.empty(this.options.debugMode)
}
// scrolling
if (!this.options.doScrollingRightAway || this.scrollToElement) {
this.doScrolling(popstate)
}
// detect animation end
let animationPromises = []
if (!popstate || this.options.animateHistoryBrowsing) {
this.triggerEvent('animationInStart')
let animationPromise = this.createAnimationPromise(this.getAnimation(this.transition, this.animations, 'in'))
animationPromises.push(animationPromise)
}
//preload pages if possible
this.preloadPages()
if (!popstate || this.options.animateHistoryBrowsing) {
Promise
.all(animationPromises)
.then(() => {
this.triggerEvent('animationInDone')
// remove "to-{page}" classes
document.documentElement.className.split(' ').forEach(classItem => {
if (new RegExp("^to-").test(classItem) || classItem === "is-changing" || classItem === "is-rendering" || classItem === "is-popstate") {
document.documentElement.classList.remove(classItem);
}
})
})
}
// update current url
this.getUrl()
// reset scroll-to element
this.scrollToElement = null
}
================================================
FILE: webpack.config.js
================================================
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
mode: "production",
entry: {
"swupjs": "./entry.js",
"swupjs.min": "./entry.js",
},
output: {
library: "Swupjs",
libraryTarget: "umd",
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['es2015', 'stage-0'],
}
}
]
},
optimization: {
minimizer: [
// we specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
include: /\.min\.js$/
})
]
}
}
gitextract_ygtp08t5/ ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ └── issue-template.md │ └── workflows/ │ └── npm-publish.yml ├── .gitignore ├── .npmignore ├── LICENSE ├── dist/ │ └── swupjs.js ├── entry.js ├── package.json ├── readme.md ├── src/ │ ├── index.js │ └── modules/ │ ├── createAnimationPromise.js │ ├── getAnimation.js │ ├── loadPage.js │ └── renderPage.js └── webpack.config.js
SYMBOL INDEX (29 symbols across 2 files)
FILE: dist/swupjs.js
function __webpack_require__ (line 16) | function __webpack_require__(moduleId) {
function query (line 94) | function query(selector) {
function queryAll (line 104) | function queryAll(selector) {
function defineProperties (line 125) | function defineProperties(target, props) { for (var i = 0; i < props.len...
function _classCallCheck (line 127) | function _classCallCheck(instance, Constructor) { if (!(instance instanc...
function Link (line 130) | function Link() {
function _interopRequireDefault (line 247) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
function _interopRequireDefault (line 518) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
function getScrollTop (line 718) | function getScrollTop() {
function update (line 734) | function update() {
function _interopRequireDefault (line 854) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
function defineProperties (line 1197) | function defineProperties(target, props) { for (var i = 0; i < props.len...
function _classCallCheck (line 1199) | function _classCallCheck(instance, Constructor) { if (!(instance instanc...
function Cache (line 1202) | function Cache() {
function closest (line 1290) | function closest (element, selector) {
function delegate (line 1319) | function delegate(element, selector, type, callback, useCapture) {
function listener (line 1340) | function listener(element, selector, type, callback) {
function defineProperties (line 1366) | function defineProperties(target, props) { for (var i = 0; i < props.len...
function _interopRequireDefault (line 1464) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
function _classCallCheck (line 1466) | function _classCallCheck(instance, Constructor) { if (!(instance instanc...
function Swup (line 1469) | function Swup(setOptions) {
function _interopRequireDefault (line 1924) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
function _classCallCheck (line 1926) | function _classCallCheck(instance, Constructor) { if (!(instance instanc...
function _possibleConstructorReturn (line 1928) | function _possibleConstructorReturn(self, call) { if (!self) { throw new...
function _inherits (line 1930) | function _inherits(subClass, superClass) { if (typeof superClass !== "fu...
function Swupjs (line 1938) | function Swupjs(setOptions) {
function _interopRequireDefault (line 1989) | function _interopRequireDefault(obj) { return obj && obj.__esModule ? ob...
FILE: src/index.js
class Swupjs (line 9) | class Swupjs extends Swup {
method constructor (line 10) | constructor(setOptions) {
Condensed preview — 15 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (84K chars).
[
{
"path": ".github/ISSUE_TEMPLATE/issue-template.md",
"chars": 506,
"preview": "---\nname: Issue template\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe y"
},
{
"path": ".github/workflows/npm-publish.yml",
"chars": 452,
"preview": "# This workflow publishes a package to NPM\n\nname: Publish package\n\non:\n release:\n types: [published]\n\njobs:\n publis"
},
{
"path": ".gitignore",
"chars": 201,
"preview": ".DS_Store\n*.DS_Store\n!.gitignore\n!.htaccess\n!web.config\nnode_modules\nbower_components\nThumbs.db\nwiki-common\nwiki-images "
},
{
"path": ".npmignore",
"chars": 46,
"preview": "src/\nentry.js\nwebpack.config.js\n.idea\n.github\n"
},
{
"path": "LICENSE",
"chars": 1071,
"preview": "MIT License\n\nCopyright (c) 2017 Georgy Marchuk\n\nPermission is hereby granted, free of charge, to any person obtaining a "
},
{
"path": "dist/swupjs.js",
"chars": 62391,
"preview": "(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object"
},
{
"path": "entry.js",
"chars": 121,
"preview": "// this is here for webpack to expose Swupjs as window.Swupjs\nimport Swupjs from './src/index.js'\nmodule.exports = Swupj"
},
{
"path": "package.json",
"chars": 892,
"preview": "{\n \"name\": \"swupjs\",\n \"version\": \"1.7.1\",\n \"description\": \"Complete, flexible, easy to use page transition library - "
},
{
"path": "readme.md",
"chars": 4737,
"preview": "# swupjs\n\n| WARNING: this repository is deprecated in favour of [JS-plugin](https://swup.js.org/plugins/js-plugin) |\n| -"
},
{
"path": "src/index.js",
"chars": 986,
"preview": "import Swup from 'swup'\n\n// modules\nimport loadPage from './modules/loadPage'\nimport renderPage from './modules/renderPa"
},
{
"path": "src/modules/createAnimationPromise.js",
"chars": 97,
"preview": "module.exports = function (fn) {\n return new Promise(resolve => {\n fn(resolve)\n })\n}"
},
{
"path": "src/modules/getAnimation.js",
"chars": 1081,
"preview": "module.exports = function (transition, animations, type) {\n\n let animation = null\n let animationName = null\n le"
},
{
"path": "src/modules/loadPage.js",
"chars": 3639,
"preview": "\nmodule.exports = function (data, popstate) {\n // scrolling\n if (this.options.doScrollingRightAway && !this.scroll"
},
{
"path": "src/modules/renderPage.js",
"chars": 3048,
"preview": "const { forEach } = Array.prototype;\nimport Link from 'swup/lib/Link';\n\nmodule.exports = function (page, popstate) {\n "
},
{
"path": "webpack.config.js",
"chars": 967,
"preview": "const UglifyJsPlugin = require('uglifyjs-webpack-plugin')\n\nmodule.exports = {\n mode: \"production\",\n entry: {\n "
}
]
About this extraction
This page contains the full source code of the gmrchk/swupjs GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 15 files (78.4 KB), approximately 17.3k tokens, and a symbol index with 29 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.