@swup/progress-plugin - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/SwupProgressPlugin.js

@@ -167,14 +167,6 @@ (function webpackUniversalModuleDefinition(root, factory) {
 			}
-
-			if (_this.showProgressBarTimeout != null) {
-				window.clearTimeout(_this.showProgressBarTimeout);
-				delete _this.showProgressBarTimeout;
-			}
 		};
 
 		_this.showProgressBar = function () {
-			if (_this.hideProgressBarTimeout != null) {
-				window.clearTimeout(_this.hideProgressBarTimeout);
-				delete _this.hideProgressBarTimeout;
-			}
+			_this.cancelHideProgressBarTimeout();
 			_this.progressBar.show();
@@ -184,2 +176,4 @@ };
 		_this.showProgressBarAfterDelay = function () {
+			_this.cancelShowProgressBarTimeout();
+			_this.cancelHideProgressBarTimeout();
 			_this.showProgressBarTimeout = window.setTimeout(_this.showProgressBar, _this.options.delay);
@@ -189,2 +183,3 @@ };
 		_this.hideProgressBar = function () {
+			_this.cancelShowProgressBarTimeout();
 			_this.progressBar.hide();
@@ -194,5 +189,16 @@ };
 		_this.finishAnimationAndHideProgressBar = function () {
+			_this.cancelShowProgressBarTimeout();
 			_this.hideProgressBarTimeout = window.setTimeout(_this.hideProgressBar, _this.options.transition);
 		};
 
+		_this.cancelShowProgressBarTimeout = function () {
+			window.clearTimeout(_this.showProgressBarTimeout);
+			delete _this.showProgressBarTimeout;
+		};
+
+		_this.cancelHideProgressBarTimeout = function () {
+			window.clearTimeout(_this.hideProgressBarTimeout);
+			delete _this.hideProgressBarTimeout;
+		};
+
 		var defaultOptions = {
@@ -210,2 +216,3 @@ className: 'swup-progress-bar',
 		_this.showProgressBarTimeout = null;
+		_this.hideProgressBarTimeout = null;
 
@@ -212,0 +219,0 @@ _this.progressBar = new _ProgressBar2.default({

dist/SwupProgressPlugin.min.js

@@ -1,1 +0,1 @@
-(function e(t,n){if(typeof exports==="object"&&typeof module==="object")module.exports=n();else if(typeof define==="function"&&define.amd)define([],n);else if(typeof exports==="object")exports["SwupProgressPlugin"]=n();else t["SwupProgressPlugin"]=n()})(window,function(){return function(e){var t={};function n(r){if(t[r]){return t[r].exports}var i=t[r]={i:r,l:false,exports:{}};e[r].call(i.exports,i,i.exports,n);i.l=true;return i.exports}n.m=e;n.c=t;n.d=function(e,t,r){if(!n.o(e,t)){Object.defineProperty(e,t,{enumerable:true,get:r})}};n.r=function(e){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(e,"__esModule",{value:true})};n.t=function(e,t){if(t&1)e=n(e);if(t&8)return e;if(t&4&&typeof e==="object"&&e&&e.__esModule)return e;var r=Object.create(null);n.r(r);Object.defineProperty(r,"default",{enumerable:true,value:e});if(t&2&&typeof e!="string")for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r};n.n=function(e){var t=e&&e.__esModule?function t(){return e["default"]}:function t(){return e};n.d(t,"a",t);return t};n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};n.p="";return n(n.s=0)}([function(e,t,n){"use strict";var r=n(1);var i=o(r);function o(e){return e&&e.__esModule?e:{default:e}}e.exports=i.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n){if(Object.prototype.hasOwnProperty.call(n,r)){e[r]=n[r]}}}return e};var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||false;r.configurable=true;if("value"in r)r.writable=true;Object.defineProperty(e,r.key,r)}}return function(t,n,r){if(n)e(t.prototype,n);if(r)e(t,r);return t}}();var o=n(2);var s=l(o);var a=n(3);var u=l(a);function l(e){return e&&e.__esModule?e:{default:e}}function f(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}function c(e,t){if(!e){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return t&&(typeof t==="object"||typeof t==="function")?t:e}function h(e,t){if(typeof t!=="function"&&t!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof t)}e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:false,writable:true,configurable:true}});if(t)Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t}var d=function(e){h(t,e);function t(){var e=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};f(this,t);var n=c(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));n.name="SwupProgressPlugin";n.startShowingProgress=function(){n.progressBar.setValue(0);n.showProgressBarAfterDelay()};n.stopShowingProgress=function(){n.progressBar.setValue(1);if(n.options.hideImmediately){n.hideProgressBar()}else{n.finishAnimationAndHideProgressBar()}if(n.showProgressBarTimeout!=null){window.clearTimeout(n.showProgressBarTimeout);delete n.showProgressBarTimeout}};n.showProgressBar=function(){if(n.hideProgressBarTimeout!=null){window.clearTimeout(n.hideProgressBarTimeout);delete n.hideProgressBarTimeout}n.progressBar.show()};n.showProgressBarAfterDelay=function(){n.showProgressBarTimeout=window.setTimeout(n.showProgressBar,n.options.delay)};n.hideProgressBar=function(){n.progressBar.hide()};n.finishAnimationAndHideProgressBar=function(){n.hideProgressBarTimeout=window.setTimeout(n.hideProgressBar,n.options.transition)};var i={className:"swup-progress-bar",delay:300,transition:undefined,minValue:undefined,initialValue:undefined,hideImmediately:true};n.options=r({},i,e);n.showProgressBarTimeout=null;n.progressBar=new u.default({className:n.options.className,animationDuration:n.options.transition,minValue:n.options.minValue,initialValue:n.options.initialValue});return n}i(t,[{key:"mount",value:function e(){this.swup.on("transitionStart",this.startShowingProgress);this.swup.on("contentReplaced",this.stopShowingProgress)}},{key:"unmount",value:function e(){this.swup.off("transitionStart",this.startShowingProgress);this.swup.off("contentReplaced",this.stopShowingProgress)}}]);return t}(s.default);t.default=d},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||false;r.configurable=true;if("value"in r)r.writable=true;Object.defineProperty(e,r.key,r)}}return function(t,n,r){if(n)e(t.prototype,n);if(r)e(t,r);return t}}();function i(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}var o=function(){function e(){i(this,e);this.isSwupPlugin=true}r(e,[{key:"mount",value:function e(){}},{key:"unmount",value:function e(){}},{key:"_beforeMount",value:function e(){}},{key:"_afterUnmount",value:function e(){}}]);return e}();t.default=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||false;r.configurable=true;if("value"in r)r.writable=true;Object.defineProperty(e,r.key,r)}}return function(t,n,r){if(n)e(t.prototype,n);if(r)e(t,r);return t}}();function i(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}var o=function(){function e(){var t=this;var n=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{},r=n.className,o=r===undefined?"progress-bar":r,s=n.styleAttr,a=s===undefined?"data-progressbar-styles":s,u=n.animationDuration,l=u===undefined?300:u,f=n.minValue,c=f===undefined?.1:f,h=n.initialValue,d=h===undefined?.25:h,m=n.trickleValue,p=m===undefined?.03:m;i(this,e);this.styleElement=null;this.progressElement=null;this.value=0;this.visible=false;this.hiding=false;this.trickleInterval=null;this.trickle=function(){var e=Math.random()*t.trickleValue;t.setValue(t.value+e)};this.className=o;this.styleAttr=a;this.animationDuration=l;this.minValue=c;this.initialValue=d;this.trickleValue=p;this.styleElement=this.createStyleElement();this.progressElement=this.createProgressElement()}r(e,[{key:"show",value:function e(){if(!this.visible){this.visible=true;this.installStyleElement();this.installProgressElement();this.startTrickling()}}},{key:"hide",value:function e(){var t=this;if(this.visible&&!this.hiding){this.hiding=true;this.fadeProgressElement(function(){t.uninstallProgressElement();t.stopTrickling();t.visible=false;t.hiding=false})}}},{key:"setValue",value:function e(t){this.value=Math.min(1,Math.max(this.minValue,t));this.refresh()}},{key:"installStyleElement",value:function e(){document.head.insertBefore(this.styleElement,document.head.firstChild)}},{key:"installProgressElement",value:function e(){this.progressElement.style.width="0%";this.progressElement.style.opacity="1";document.documentElement.insertBefore(this.progressElement,document.body);this.progressElement.scrollTop=0;this.setValue(Math.random()*this.initialValue)}},{key:"fadeProgressElement",value:function e(t){this.progressElement.style.opacity="0";setTimeout(t,this.animationDuration*1.5)}},{key:"uninstallProgressElement",value:function e(){if(this.progressElement.parentNode){document.documentElement.removeChild(this.progressElement)}}},{key:"startTrickling",value:function e(){if(!this.trickleInterval){this.trickleInterval=window.setInterval(this.trickle,this.animationDuration)}}},{key:"stopTrickling",value:function e(){window.clearInterval(this.trickleInterval);delete this.trickleInterval}},{key:"refresh",value:function e(){var t=this;requestAnimationFrame(function(){t.progressElement.style.width=t.value*100+"%"})}},{key:"createStyleElement",value:function e(){var t=document.createElement("style");t.setAttribute(this.styleAttr,"");t.textContent=this.defaultStyles;return t}},{key:"createProgressElement",value:function e(){var t=document.createElement("div");t.className=this.className;return t}},{key:"defaultStyles",get:function e(){return"\n\t\t."+this.className+" {\n\t\t\t\tposition: fixed;\n\t\t\t\tdisplay: block;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\theight: 3px;\n\t\t\t\tbackground-color: black;\n\t\t\t\tz-index: 9999;\n\t\t\t\ttransition:\n\t\t\t\t\twidth "+this.animationDuration+"ms ease-out,\n\t\t\t\t\topacity "+this.animationDuration/2+"ms "+this.animationDuration/2+"ms ease-in;\n\t\t\t\ttransform: translate3d(0, 0, 0);\n\t\t\t}\n\t\t"}}]);return e}();t.default=o}])});
+(function e(t,n){if(typeof exports==="object"&&typeof module==="object")module.exports=n();else if(typeof define==="function"&&define.amd)define([],n);else if(typeof exports==="object")exports["SwupProgressPlugin"]=n();else t["SwupProgressPlugin"]=n()})(window,function(){return function(e){var t={};function n(r){if(t[r]){return t[r].exports}var i=t[r]={i:r,l:false,exports:{}};e[r].call(i.exports,i,i.exports,n);i.l=true;return i.exports}n.m=e;n.c=t;n.d=function(e,t,r){if(!n.o(e,t)){Object.defineProperty(e,t,{enumerable:true,get:r})}};n.r=function(e){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(e,"__esModule",{value:true})};n.t=function(e,t){if(t&1)e=n(e);if(t&8)return e;if(t&4&&typeof e==="object"&&e&&e.__esModule)return e;var r=Object.create(null);n.r(r);Object.defineProperty(r,"default",{enumerable:true,value:e});if(t&2&&typeof e!="string")for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r};n.n=function(e){var t=e&&e.__esModule?function t(){return e["default"]}:function t(){return e};n.d(t,"a",t);return t};n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};n.p="";return n(n.s=0)}([function(e,t,n){"use strict";var r=n(1);var i=o(r);function o(e){return e&&e.__esModule?e:{default:e}}e.exports=i.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n){if(Object.prototype.hasOwnProperty.call(n,r)){e[r]=n[r]}}}return e};var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||false;r.configurable=true;if("value"in r)r.writable=true;Object.defineProperty(e,r.key,r)}}return function(t,n,r){if(n)e(t.prototype,n);if(r)e(t,r);return t}}();var o=n(2);var s=l(o);var a=n(3);var u=l(a);function l(e){return e&&e.__esModule?e:{default:e}}function f(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}function c(e,t){if(!e){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return t&&(typeof t==="object"||typeof t==="function")?t:e}function h(e,t){if(typeof t!=="function"&&t!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof t)}e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:false,writable:true,configurable:true}});if(t)Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t}var d=function(e){h(t,e);function t(){var e=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};f(this,t);var n=c(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));n.name="SwupProgressPlugin";n.startShowingProgress=function(){n.progressBar.setValue(0);n.showProgressBarAfterDelay()};n.stopShowingProgress=function(){n.progressBar.setValue(1);if(n.options.hideImmediately){n.hideProgressBar()}else{n.finishAnimationAndHideProgressBar()}};n.showProgressBar=function(){n.cancelHideProgressBarTimeout();n.progressBar.show()};n.showProgressBarAfterDelay=function(){n.cancelShowProgressBarTimeout();n.cancelHideProgressBarTimeout();n.showProgressBarTimeout=window.setTimeout(n.showProgressBar,n.options.delay)};n.hideProgressBar=function(){n.cancelShowProgressBarTimeout();n.progressBar.hide()};n.finishAnimationAndHideProgressBar=function(){n.cancelShowProgressBarTimeout();n.hideProgressBarTimeout=window.setTimeout(n.hideProgressBar,n.options.transition)};n.cancelShowProgressBarTimeout=function(){window.clearTimeout(n.showProgressBarTimeout);delete n.showProgressBarTimeout};n.cancelHideProgressBarTimeout=function(){window.clearTimeout(n.hideProgressBarTimeout);delete n.hideProgressBarTimeout};var i={className:"swup-progress-bar",delay:300,transition:undefined,minValue:undefined,initialValue:undefined,hideImmediately:true};n.options=r({},i,e);n.showProgressBarTimeout=null;n.hideProgressBarTimeout=null;n.progressBar=new u.default({className:n.options.className,animationDuration:n.options.transition,minValue:n.options.minValue,initialValue:n.options.initialValue});return n}i(t,[{key:"mount",value:function e(){this.swup.on("transitionStart",this.startShowingProgress);this.swup.on("contentReplaced",this.stopShowingProgress)}},{key:"unmount",value:function e(){this.swup.off("transitionStart",this.startShowingProgress);this.swup.off("contentReplaced",this.stopShowingProgress)}}]);return t}(s.default);t.default=d},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||false;r.configurable=true;if("value"in r)r.writable=true;Object.defineProperty(e,r.key,r)}}return function(t,n,r){if(n)e(t.prototype,n);if(r)e(t,r);return t}}();function i(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}var o=function(){function e(){i(this,e);this.isSwupPlugin=true}r(e,[{key:"mount",value:function e(){}},{key:"unmount",value:function e(){}},{key:"_beforeMount",value:function e(){}},{key:"_afterUnmount",value:function e(){}}]);return e}();t.default=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||false;r.configurable=true;if("value"in r)r.writable=true;Object.defineProperty(e,r.key,r)}}return function(t,n,r){if(n)e(t.prototype,n);if(r)e(t,r);return t}}();function i(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}var o=function(){function e(){var t=this;var n=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{},r=n.className,o=r===undefined?"progress-bar":r,s=n.styleAttr,a=s===undefined?"data-progressbar-styles":s,u=n.animationDuration,l=u===undefined?300:u,f=n.minValue,c=f===undefined?.1:f,h=n.initialValue,d=h===undefined?.25:h,m=n.trickleValue,p=m===undefined?.03:m;i(this,e);this.styleElement=null;this.progressElement=null;this.value=0;this.visible=false;this.hiding=false;this.trickleInterval=null;this.trickle=function(){var e=Math.random()*t.trickleValue;t.setValue(t.value+e)};this.className=o;this.styleAttr=a;this.animationDuration=l;this.minValue=c;this.initialValue=d;this.trickleValue=p;this.styleElement=this.createStyleElement();this.progressElement=this.createProgressElement()}r(e,[{key:"show",value:function e(){if(!this.visible){this.visible=true;this.installStyleElement();this.installProgressElement();this.startTrickling()}}},{key:"hide",value:function e(){var t=this;if(this.visible&&!this.hiding){this.hiding=true;this.fadeProgressElement(function(){t.uninstallProgressElement();t.stopTrickling();t.visible=false;t.hiding=false})}}},{key:"setValue",value:function e(t){this.value=Math.min(1,Math.max(this.minValue,t));this.refresh()}},{key:"installStyleElement",value:function e(){document.head.insertBefore(this.styleElement,document.head.firstChild)}},{key:"installProgressElement",value:function e(){this.progressElement.style.width="0%";this.progressElement.style.opacity="1";document.documentElement.insertBefore(this.progressElement,document.body);this.progressElement.scrollTop=0;this.setValue(Math.random()*this.initialValue)}},{key:"fadeProgressElement",value:function e(t){this.progressElement.style.opacity="0";setTimeout(t,this.animationDuration*1.5)}},{key:"uninstallProgressElement",value:function e(){if(this.progressElement.parentNode){document.documentElement.removeChild(this.progressElement)}}},{key:"startTrickling",value:function e(){if(!this.trickleInterval){this.trickleInterval=window.setInterval(this.trickle,this.animationDuration)}}},{key:"stopTrickling",value:function e(){window.clearInterval(this.trickleInterval);delete this.trickleInterval}},{key:"refresh",value:function e(){var t=this;requestAnimationFrame(function(){t.progressElement.style.width=t.value*100+"%"})}},{key:"createStyleElement",value:function e(){var t=document.createElement("style");t.setAttribute(this.styleAttr,"");t.textContent=this.defaultStyles;return t}},{key:"createProgressElement",value:function e(){var t=document.createElement("div");t.className=this.className;return t}},{key:"defaultStyles",get:function e(){return"\n\t\t."+this.className+" {\n\t\t\t\tposition: fixed;\n\t\t\t\tdisplay: block;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\theight: 3px;\n\t\t\t\tbackground-color: black;\n\t\t\t\tz-index: 9999;\n\t\t\t\ttransition:\n\t\t\t\t\twidth "+this.animationDuration+"ms ease-out,\n\t\t\t\t\topacity "+this.animationDuration/2+"ms "+this.animationDuration/2+"ms ease-in;\n\t\t\t\ttransform: translate3d(0, 0, 0);\n\t\t\t}\n\t\t"}}]);return e}();t.default=o}])});

lib/index.js

@@ -51,14 +51,6 @@ 'use strict';
 			}
-
-			if (_this.showProgressBarTimeout != null) {
-				window.clearTimeout(_this.showProgressBarTimeout);
-				delete _this.showProgressBarTimeout;
-			}
 		};
 
 		_this.showProgressBar = function () {
-			if (_this.hideProgressBarTimeout != null) {
-				window.clearTimeout(_this.hideProgressBarTimeout);
-				delete _this.hideProgressBarTimeout;
-			}
+			_this.cancelHideProgressBarTimeout();
 			_this.progressBar.show();
@@ -68,2 +60,4 @@ };
 		_this.showProgressBarAfterDelay = function () {
+			_this.cancelShowProgressBarTimeout();
+			_this.cancelHideProgressBarTimeout();
 			_this.showProgressBarTimeout = window.setTimeout(_this.showProgressBar, _this.options.delay);
@@ -73,2 +67,3 @@ };
 		_this.hideProgressBar = function () {
+			_this.cancelShowProgressBarTimeout();
 			_this.progressBar.hide();
@@ -78,5 +73,16 @@ };
 		_this.finishAnimationAndHideProgressBar = function () {
+			_this.cancelShowProgressBarTimeout();
 			_this.hideProgressBarTimeout = window.setTimeout(_this.hideProgressBar, _this.options.transition);
 		};
 
+		_this.cancelShowProgressBarTimeout = function () {
+			window.clearTimeout(_this.showProgressBarTimeout);
+			delete _this.showProgressBarTimeout;
+		};
+
+		_this.cancelHideProgressBarTimeout = function () {
+			window.clearTimeout(_this.hideProgressBarTimeout);
+			delete _this.hideProgressBarTimeout;
+		};
+
 		var defaultOptions = {
@@ -94,2 +100,3 @@ className: 'swup-progress-bar',
 		_this.showProgressBarTimeout = null;
+		_this.hideProgressBarTimeout = null;
 
@@ -96,0 +103,0 @@ _this.progressBar = new _ProgressBar2.default({

package.json

 {
   "name": "@swup/progress-plugin",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Swup plugin for displaying a loading indicator",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

readme.md

 # Swup Progress Bar Plugin
 
-**by [daun](https://github.com/daun)**
-
 This [swup](https://github.com/swup/swup) plugin will display a progress bar for
 all requests taking longer than ~300ms.
 
-More or less a port of Turbolink's implementation.
-
 ## Installation
@@ -42,3 +38,3 @@
 
-The progressbar has a class name of `swup-progress-bar` you can use for styling.
+The progress bar has a class name of `swup-progress-bar` you can use for styling.
 
@@ -45,0 +41,0 @@ ```css

No alert changes

Improved metrics

Total package byte prevSize

40853

increased by1.56%

Lines of code

635

increased by1.93%

Worsened metrics

Number of lines in readme file

84

decreased by-4.55%

No dependency changes