swup - npm Package Compare versions
Comparing version 0.2.8 to 0.3.0
@@ -93,2 +93,10 @@ 'use strict'; | ||
| var _usePlugin = require('./modules/usePlugin'); | ||
| var _usePlugin2 = _interopRequireDefault(_usePlugin); | ||
| var _log = require('./modules/log'); | ||
| var _log2 = _interopRequireDefault(_log); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -119,2 +127,3 @@ | ||
| disableIE: false, | ||
| plugins: [], | ||
@@ -141,2 +150,4 @@ LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]' | ||
| this.options = options; | ||
| // plugins array | ||
| this.plugins = []; | ||
@@ -163,2 +174,4 @@ /** | ||
| this.preloadPages = _preloadPages2.default; | ||
| this.usePlugin = _usePlugin2.default; | ||
| this.log = _log2.default; | ||
| this.detectie = _detectie2.default; | ||
@@ -187,2 +200,4 @@ this.enable = this.enable; | ||
| value: function enable() { | ||
| var _this = this; | ||
| /** | ||
@@ -238,3 +253,3 @@ * support check | ||
| */ | ||
| var page = this.getDataFromHtml(document.documentElement.innerHTML); | ||
| var page = this.getDataFromHtml(document.documentElement.outerHTML); | ||
| page.url = this.currentUrl; | ||
@@ -251,2 +266,9 @@ if (this.options.cache) { | ||
| /** | ||
| * enable plugins from options | ||
| */ | ||
| this.options.plugins.forEach(function (item) { | ||
| return _this.usePlugin(item); | ||
| }); | ||
| /** | ||
| * trigger enabled event | ||
@@ -337,3 +359,3 @@ */ | ||
| value: function linkMouseoverHandler(event) { | ||
| var _this = this; | ||
| var _this2 = this; | ||
@@ -346,15 +368,15 @@ this.triggerEvent('hoverLink'); | ||
| this.preloadPromise = new Promise(function (resolve) { | ||
| _this.getPage(link.getAddress(), function (response) { | ||
| _this2.getPage(link.getAddress(), function (response) { | ||
| if (response === null) { | ||
| console.warn('Server error.'); | ||
| _this.triggerEvent('serverError'); | ||
| _this2.triggerEvent('serverError'); | ||
| } else { | ||
| // get json data | ||
| var page = _this.getDataFromHtml(response); | ||
| var page = _this2.getDataFromHtml(response); | ||
| page.url = link.getAddress(); | ||
| _this.cache.cacheUrl(page, _this.options.debugMode); | ||
| _this.triggerEvent('pagePreloaded'); | ||
| _this2.cache.cacheUrl(page, _this2.options.debugMode); | ||
| _this2.triggerEvent('pagePreloaded'); | ||
| } | ||
| resolve(); | ||
| _this.preloadPromise = null; | ||
| _this2.preloadPromise = null; | ||
| }); | ||
@@ -361,0 +383,0 @@ }); |
| { | ||
| "name": "swup", | ||
| "version": "0.2.8", | ||
| "version": "0.3.0", | ||
| "description": "Animated page transitions with css.", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -33,2 +33,6 @@ # swup | ||
| [Plugins](#plugins) | ||
| * [Installation](#installation) | ||
| * [swupMergeHeadPlugin](#swupmergeheadplugin) | ||
| [API](#api) | ||
@@ -72,3 +76,3 @@ | ||
| ### Example | ||
| While developing the site, simply define the elements that are being animated and need to be replaced. Let's assume we want to fade in/out the main content of the page. | ||
| While developing the site, define the elements that are being animated and need to be replaced. Let's assume we want to fade in/out the main content of the page. | ||
| ```html | ||
@@ -96,3 +100,3 @@ <html> | ||
| or simply | ||
| or | ||
@@ -316,2 +320,39 @@ ```javascript | ||
| ## Plugins | ||
| Some functionality is only necessary in certain projects. For this reason, swup has support for plugins. | ||
| ### Installation | ||
| ```javascript | ||
| import Swup from 'swup' | ||
| import pluginName from 'swup/plugins/pluginName' | ||
| ``` | ||
| or | ||
| ```html | ||
| <script src="./dist/swup.js"></script> | ||
| <script src="./dist/plugins/pluginName.js"></script> | ||
| ``` | ||
| and enable plugin at initialisation of swup by including it in options: | ||
| ```javascript | ||
| var options = { | ||
| plugins: [ | ||
| pluginName | ||
| ] | ||
| } | ||
| var swup = new Swup(options) | ||
| ``` | ||
| Plugins may also have some default options. To rewrite default options of plugin, use swup's `usePlugin` function. | ||
| ```javascript | ||
| var swup = new Swup(options) | ||
| swup.usePlugin(pluginName, {option: "value of options"}) | ||
| ``` | ||
| ### swupMergeHeadPlugin | ||
| Merge Head Plugin replaces the html tags in head on each content replace (`swup:contentReplaced` event). | ||
| Plugin has one option `runScripts`. If the options is set to `true`, script tags placed into head are executed (code inside of the tag as well as linked by `src` attribute). | ||
| Option defaults to `false`. | ||
| ## API | ||
@@ -318,0 +359,0 @@ The instance of the swup can be imported and used across your sites JavaScript to enable some additional features. When debug mode (see [options](#options) section) is enabled, instance is also available in `window` object as `window.swup`. |
@@ -0,14 +1,13 @@ | ||
| const webpack = require('webpack') | ||
| const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | ||
| const fs = require('fs') | ||
| var glob = require("glob"); | ||
| let plugins = []; | ||
| module.exports = { | ||
| glob.sync("./src/plugins/**.js").forEach(item => { | ||
| plugins.push(item.replace('./src/plugins/', '').replace('.js', '')); | ||
| }); | ||
| const baseConfig = { | ||
| mode: "production", | ||
| entry: { | ||
| "swup": "./entry.js", | ||
| "swup.min": "./entry.js", | ||
| }, | ||
| output: { | ||
| library: "Swup", | ||
| libraryTarget: "umd", | ||
| filename: "[name].js", | ||
| }, | ||
| module: { | ||
@@ -39,2 +38,41 @@ rules: [ | ||
| } | ||
| } | ||
| } | ||
| const swupConfig = Object.assign({}, baseConfig, { | ||
| entry: { | ||
| "swup": "./entry.js", | ||
| "swup.min": "./entry.js", | ||
| }, | ||
| output: { | ||
| path: __dirname + "/dist/", | ||
| library: "Swup", | ||
| libraryTarget: "umd", | ||
| filename: "[name].js", | ||
| }, | ||
| }) | ||
| function createPluginConfig(pluginName) { | ||
| let config = Object.assign({}, baseConfig, { | ||
| entry: {}, | ||
| output: { | ||
| path: __dirname + "/dist/plugins", | ||
| library: pluginName, | ||
| libraryTarget: "umd", | ||
| filename: "[name].js", | ||
| }, | ||
| }) | ||
| config.entry[pluginName] = `./src/plugins/${pluginName}.js` | ||
| config.entry[pluginName + ".min"] = `./src/plugins/${pluginName}.js` | ||
| return config | ||
| } | ||
| let configsArray = [] | ||
| configsArray.push(swupConfig) | ||
| plugins.forEach(item => { | ||
| configsArray.push(createPluginConfig(item)) | ||
| }) | ||
| module.exports = configsArray |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by9.16%
122712
- Number of package files
- increased by10%
33
- Lines of code
- increased by16.58%
935
- Number of lines in readme file
- increased by11.85%
387
Worsened metrics
- Number of low supply chain risk alerts
- increased byInfinity%
1