@swup/progress-plugin - npm Package Compare versions

Comparing version 1.0.1 to 1.1.1

dist/SwupProgressPlugin.js

@@ -160,6 +160,14 @@ (function webpackUniversalModuleDefinition(root, factory) {
 			_this.progressBar.setValue(1);
-			_this.hideProgressBar();
+			if (_this.options.hideImmediately) {
+				_this.hideProgressBar();
+			} else {
+				_this.finishAnimationAndHideProgressBar();
+			}
 		};
 
 		_this.showProgressBar = function () {
+			if (_this.hideProgressBarTimeout != null) {
+				window.clearTimeout(_this.hideProgressBarTimeout);
+				delete _this.hideProgressBarTimeout;
+			}
 			_this.progressBar.show();
@@ -169,3 +177,3 @@ };
 		_this.showProgressBarAfterDelay = function () {
-			_this.progressBarTimeout = window.setTimeout(_this.showProgressBar, _this.options.delay);
+			_this.showProgressBarTimeout = window.setTimeout(_this.showProgressBar, _this.options.delay);
 		};
@@ -175,5 +183,10 @@
 			_this.progressBar.hide();
-			if (_this.progressBarTimeout != null) {
-				window.clearTimeout(_this.progressBarTimeout);
-				delete _this.progressBarTimeout;
+		};
+
+		_this.finishAnimationAndHideProgressBar = function () {
+			_this.hideProgressBarTimeout = window.setTimeout(_this.hideProgressBar, _this.options.transition);
+
+			if (_this.showProgressBarTimeout != null) {
+				window.clearTimeout(_this.showProgressBarTimeout);
+				delete _this.showProgressBarTimeout;
 			}
@@ -185,3 +198,4 @@ };
 			transition: 300,
-			delay: 300
+			delay: 300,
+			hideImmediately: true
 		};
@@ -191,3 +205,3 @@
 
-		_this.progressBarTimeout = null;
+		_this.showProgressBarTimeout = null;
 		_this.progressBar = new _ProgressBar2.default({
@@ -194,0 +208,0 @@ className: _this.options.className,

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 p=function(e){h(t,e);function t(e){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);n.hideProgressBar()};n.showProgressBar=function(){n.progressBar.show()};n.showProgressBarAfterDelay=function(){n.progressBarTimeout=window.setTimeout(n.showProgressBar,n.options.delay)};n.hideProgressBar=function(){n.progressBar.hide();if(n.progressBarTimeout!=null){window.clearTimeout(n.progressBarTimeout);delete n.progressBarTimeout}};var i={className:"swup-progress-bar",transition:300,delay:300};n.options=r({},i,e);n.progressBarTimeout=null;n.progressBar=new u.default({className:n.options.className,animationDuration:n.options.transition});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=p},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(t){var n=this;var r=t.className,o=r===undefined?null:r,s=t.animationDuration,a=s===undefined?null:s;i(this,e);this.className="progress-bar";this.animationDuration=300;this.minValue=.1;this.stylesheetElement=null;this.progressElement=null;this.hiding=false;this.trickleInterval=null;this.value=0;this.visible=false;this.trickle=function(){var e=Math.random()*3/100;n.setValue(n.value+e)};if(o!==null){this.className=o}if(a!==null){this.animationDuration=a}this.stylesheetElement=this.createStylesheetElement();this.progressElement=this.createProgressElement()}r(e,[{key:"show",value:function e(){if(!this.visible){this.visible=true;this.installStylesheetElement();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.max(this.minValue,t);this.refresh()}},{key:"installStylesheetElement",value:function e(){document.head.insertBefore(this.stylesheetElement,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.refresh()}},{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=10+t.value*90+"%"})}},{key:"createStylesheetElement",value:function e(){var t=document.createElement("style");t.setAttribute("data-progressbar-styles","");t.textContent=this.defaultCSS;return t}},{key:"createProgressElement",value:function e(){var t=document.createElement("div");t.className=this.className;return t}},{key:"defaultCSS",get:function e(){return"\n    ."+this.className+" {\n        position: fixed;\n        display: block;\n        top: 0;\n        left: 0;\n        height: 3px;\n        background-color: black;\n        z-index: 9999;\n        transition:\n          width "+this.animationDuration+"ms ease-out,\n          opacity "+this.animationDuration/2+"ms "+this.animationDuration/2+"ms ease-in;\n        transform: translate3d(0, 0, 0);\n      }\n    "}}]);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(e){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(){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);if(n.showProgressBarTimeout!=null){window.clearTimeout(n.showProgressBarTimeout);delete n.showProgressBarTimeout}};var i={className:"swup-progress-bar",transition:300,delay:300,hideImmediately:true};n.options=r({},i,e);n.showProgressBarTimeout=null;n.progressBar=new u.default({className:n.options.className,animationDuration:n.options.transition});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(t){var n=this;var r=t.className,o=r===undefined?null:r,s=t.animationDuration,a=s===undefined?null:s;i(this,e);this.className="progress-bar";this.animationDuration=300;this.minValue=.1;this.stylesheetElement=null;this.progressElement=null;this.hiding=false;this.trickleInterval=null;this.value=0;this.visible=false;this.trickle=function(){var e=Math.random()*3/100;n.setValue(n.value+e)};if(o!==null){this.className=o}if(a!==null){this.animationDuration=a}this.stylesheetElement=this.createStylesheetElement();this.progressElement=this.createProgressElement()}r(e,[{key:"show",value:function e(){if(!this.visible){this.visible=true;this.installStylesheetElement();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.max(this.minValue,t);this.refresh()}},{key:"installStylesheetElement",value:function e(){document.head.insertBefore(this.stylesheetElement,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.refresh()}},{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=10+t.value*90+"%"})}},{key:"createStylesheetElement",value:function e(){var t=document.createElement("style");t.setAttribute("data-progressbar-styles","");t.textContent=this.defaultCSS;return t}},{key:"createProgressElement",value:function e(){var t=document.createElement("div");t.className=this.className;return t}},{key:"defaultCSS",get:function e(){return"\n    ."+this.className+" {\n        position: fixed;\n        display: block;\n        top: 0;\n        left: 0;\n        height: 3px;\n        background-color: black;\n        z-index: 9999;\n        transition:\n          width "+this.animationDuration+"ms ease-out,\n          opacity "+this.animationDuration/2+"ms "+this.animationDuration/2+"ms ease-in;\n        transform: translate3d(0, 0, 0);\n      }\n    "}}]);return e}();t.default=o}])});

lib/index.js

@@ -44,6 +44,14 @@ 'use strict';
 			_this.progressBar.setValue(1);
-			_this.hideProgressBar();
+			if (_this.options.hideImmediately) {
+				_this.hideProgressBar();
+			} else {
+				_this.finishAnimationAndHideProgressBar();
+			}
 		};
 
 		_this.showProgressBar = function () {
+			if (_this.hideProgressBarTimeout != null) {
+				window.clearTimeout(_this.hideProgressBarTimeout);
+				delete _this.hideProgressBarTimeout;
+			}
 			_this.progressBar.show();
@@ -53,3 +61,3 @@ };
 		_this.showProgressBarAfterDelay = function () {
-			_this.progressBarTimeout = window.setTimeout(_this.showProgressBar, _this.options.delay);
+			_this.showProgressBarTimeout = window.setTimeout(_this.showProgressBar, _this.options.delay);
 		};
@@ -59,5 +67,10 @@
 			_this.progressBar.hide();
-			if (_this.progressBarTimeout != null) {
-				window.clearTimeout(_this.progressBarTimeout);
-				delete _this.progressBarTimeout;
+		};
+
+		_this.finishAnimationAndHideProgressBar = function () {
+			_this.hideProgressBarTimeout = window.setTimeout(_this.hideProgressBar, _this.options.transition);
+
+			if (_this.showProgressBarTimeout != null) {
+				window.clearTimeout(_this.showProgressBarTimeout);
+				delete _this.showProgressBarTimeout;
 			}
@@ -69,3 +82,4 @@ };
 			transition: 300,
-			delay: 300
+			delay: 300,
+			hideImmediately: true
 		};
@@ -75,3 +89,3 @@
 
-		_this.progressBarTimeout = null;
+		_this.showProgressBarTimeout = null;
 		_this.progressBar = new _ProgressBar2.default({
@@ -78,0 +92,0 @@ className: _this.options.className,

package.json

 {
   "name": "@swup/progress-plugin",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Swup plugin for displaying a loading indicator",
@@ -21,2 +21,7 @@ "main": "lib/index.js",
       "url": "https://gmrchk.com/"
+    },
+    {
+      "name": "Rasso Hilber",
+      "email": "[e-mail]",
+      "url": "https://rassohilber.com"
     }
@@ -23,0 +28,0 @@ ],

No alert changes

Improved metrics

Total package byte prevSize

37653

increased by3.9%

Lines of code

599

increased by4.17%

No dependency changes