From d28e193556efdcc4cd65554564e891f577f44875 Mon Sep 17 00:00:00 2001 From: djmaze Date: Mon, 27 Jul 2020 17:40:00 +0200 Subject: [PATCH] cleanup Progress.js --- README.md | 15 ++-- vendors/Progress.js/minified/progress.min.js | 2 +- vendors/Progress.js/src/progress.js | 74 +++++--------------- 3 files changed, 27 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index 7a5a196ae..d5c4baeb6 100644 --- a/README.md +++ b/README.md @@ -49,18 +49,19 @@ This fork has the following changes: * Removed Sentry (Application Monitoring and Error Tracking Software) * Replaced gulp-uglify with gulp-terser * CRLF => LF line endings -* Ongoing removal of jQuery and Underscore.js dependencies (things are native these days) +* Ongoing removal of old JavaScript code (things are native these days) -### jQuery.slim and Underscore.js +### Removal of old JavaScript + +This fork uses jQuery.slim and downsized versions of Underscore.js, Jua.js, etc. etc., and has no support for Internet Explorer. -This fork has no support for Internet Explorer. Things might work in Edge 15-18, Firefox 47-62 and Chrome 54-68 due to one polyfill for array.flat(). |js/* |1.14.0 |native | div | |----------- |--------: |--------: |--------: | |admin.js |2.130.942 |1.359.501 | | |app.js |4.184.455 |3.127.807 | | -|boot.js | 671.522 | 120.319 | | +|boot.js | 671.522 | 117.510 | | |libs.js | 647.614 | 508.324 | | |polyfills.js | 325.834 | 0 | | |TOTAL js |7.960.367 |5.119.409 | | @@ -69,12 +70,12 @@ Things might work in Edge 15-18, Firefox 47-62 and Chrome 54-68 due to one polyf |----------- |--------: |--------: |--------: | |admin.js | 252.147 | 177.094 | | |app.js | 511.202 | 409.778 | | -|boot.js | 66.007 | 14.697 | | +|boot.js | 66.007 | 14.229 | | |libs.js | 572.545 | 465.247 | | |polyfills.js | 32.452 | 0 | | -|TOTAL js/min |1.434.353 |1.066.816 |367.537 | +|TOTAL js/min |1.434.353 |1.066.348 |368.005 | -367.537 bytes is not much, but it feels faster. +368.005 bytes is not much, but it feels faster. ### PHP73 branch diff --git a/vendors/Progress.js/minified/progress.min.js b/vendors/Progress.js/minified/progress.min.js index 040ff72b6..9e8f8bd45 100644 --- a/vendors/Progress.js/minified/progress.min.js +++ b/vendors/Progress.js/minified/progress.min.js @@ -1 +1 @@ -(e=>{function t(e){void 0!==e.length?this._targetElement=e:this._targetElement=[e],void 0===window._progressjsId&&(window._progressjsId=1),void 0===window._progressjsIntervals&&(window._progressjsIntervals={}),this._options={theme:"rainloop",overlayMode:!1,considerTransition:!0}}function r(){void 0!==this._onBeforeStartCallback&&this._onBeforeStartCallback.call(this),function(){if(!document.querySelector(".progressjs-container")){var e=document.createElement("div");e.className="progressjs-container",document.body.appendChild(e)}}.call(this);for(var e=0,t=this._targetElement.length;e=100&&(t=100),e.hasAttribute("data-progressjs")&&setTimeout(function(){var r=o(e);r.style.width=parseInt(t)+"%",r=r.querySelector(".progressjs-percent");var s=parseInt(r.innerHTML.replace("%",""));!function(e,t,r){var s=!0;t>r&&(s=!1);var n=10;!function e(t,r,o){var i=Math.abs(r-o);n=i<3?30:i<20?20:1,r-o!=0&&(t.innerHTML=(s?++r:--r)+"%",setTimeout(function(){e(t,r,o)},n))}(e,t,r)}(r,s,parseInt(t))},50)}function o(e){var t=parseInt(e.getAttribute("data-progressjs"));return document.querySelector('.progressjs-container > .progressjs-progress[data-progressjs="'+t+'"] > .progressjs-inner')}function i(){void 0!==this._onBeforeEndCallback&&(!0===this._options.considerTransition?o(this._targetElement[0]).addEventListener(function(){var e,t=document.createElement("fakeelement"),r={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in r)if(void 0!==t.style[e])return r[e]}(),this._onBeforeEndCallback,!1):this._onBeforeEndCallback.call(this));for(var e=parseInt(this._targetElement[0].getAttribute("data-progressjs")),t=0,r=this._targetElement.length;t{function t(e){void 0!==e.length?this._targetElement=e:this._targetElement=[e],void 0===window._progressjsId&&(window._progressjsId=1),void 0===window._progressjsIntervals&&(window._progressjsIntervals={}),this._options={theme:"rainloop",overlayMode:!1,considerTransition:!0}}function r(){(function(){if(!document.querySelector(".progressjs-container")){var e=document.createElement("div");e.className="progressjs-container",document.body.appendChild(e)}}).call(this);var e=this;e._targetElement.forEach(t=>(function(e){if(e.hasAttribute("data-progressjs"))return;var t=function(e){var t={},r=0,s=0;"body"===e.tagName.toLowerCase()?(t.width=e.clientWidth,t.height=e.clientHeight):(t.width=e.offsetWidth,t.height=e.offsetHeight);for(;e&&!isNaN(e.offsetLeft)&&!isNaN(e.offsetTop);)r+=e.offsetLeft,s+=e.offsetTop,e=e.offsetParent;return t.top=s,t.left=r,t}.call(this,e);e.setAttribute("data-progressjs",window._progressjsId);var r=document.createElement("div");r.className="progressjs-progress progressjs-theme-"+this._options.theme,r.style.position="body"===e.tagName.toLowerCase()?"fixed":"absolute",r.setAttribute("data-progressjs",window._progressjsId);var o=document.createElement("div");o.className="progressjs-inner";var n=document.createElement("div");n.className="progressjs-percent",n.innerHTML="1%",o.appendChild(n),this._options.overlayMode&&"body"===e.tagName.toLowerCase()?(r.style.left=0,r.style.right=0,r.style.top=0,r.style.bottom=0):(r.style.left=t.left+"px",r.style.top=t.top+"px",r.style.width=t.width+"px",this._options.overlayMode&&(r.style.height=t.height+"px"));r.appendChild(o),document.querySelector(".progressjs-container").appendChild(r),s(e,1),++window._progressjsId}).call(e,t))}function s(e,t){t>=100&&(t=100),e.hasAttribute("data-progressjs")&&setTimeout(()=>{var r=o(e);r.style.width=parseInt(t)+"%",r=r.querySelector(".progressjs-percent");var s=parseInt(r.innerHTML.replace("%",""));((e,t,r)=>{var s=!0;t>r&&(s=!1);var o=10;!function e(t,r,n){var i=Math.abs(r-n);o=i<3?30:i<20?20:1,r-n!=0&&(t.innerHTML=(s?++r:--r)+"%",setTimeout(()=>e(t,r,n),o))}(e,t,r)})(r,s,parseInt(t))},50)}function o(e){var t=parseInt(e.getAttribute("data-progressjs"));return document.querySelector('.progressjs-container > .progressjs-progress[data-progressjs="'+t+'"] > .progressjs-inner')}var n=function(e){if("object"==typeof e)return new t(e);if("string"==typeof e){var r=document.querySelectorAll(e);if(r)return new t(r);throw new Error("There is no element with given selector.")}return new t(document.body)};n.version="0.1.0",n.fn=t.prototype={start:function(){return r.call(this),this},set:function(e){return function(e){var t=this;t._targetElement.forEach(r=>s.call(t,r,e))}.call(this,e),this},end:function(){return function(){void 0!==this._onBeforeEndCallback&&(!0===this._options.considerTransition?o(this._targetElement[0]).addEventListener("transitionend",this._onBeforeEndCallback,!1):this._onBeforeEndCallback.call(this));var e=parseInt(this._targetElement[0].getAttribute("data-progressjs")),t=this;if(t._targetElement.forEach(e=>{var r=o(e);if(r){var n=parseInt(r.style.width.replace("%","")),i=1;n<100&&(s.call(t,e,100),i=500),((e,t)=>{setTimeout(()=>{e.parentNode.className+=" progressjs-end",setTimeout(()=>{e.parentNode.parentNode.removeChild(e.parentNode),t.removeAttribute("data-progressjs")},1e3)},i)})(r,e)}}),window._progressjsIntervals[e])try{clearInterval(window._progressjsIntervals[e]),window._progressjsIntervals[e]=null,delete window._progressjsIntervals[e]}catch(e){}}.call(this),this},onbeforeend:function(e){if("function"!=typeof e)throw new Error("Provided callback for onbeforeend was not a function");return this._onBeforeEndCallback=e,this}},e.progressJs=n})(this); diff --git a/vendors/Progress.js/src/progress.js b/vendors/Progress.js/src/progress.js index 2ef87d913..a43f39161 100644 --- a/vendors/Progress.js/src/progress.js +++ b/vendors/Progress.js/src/progress.js @@ -46,18 +46,11 @@ * @method _createContainer */ function _startProgress() { - - //call onBeforeStart callback - if (typeof this._onBeforeStartCallback != 'undefined') { - this._onBeforeStartCallback.call(this); - } - //create the container for progress bar _createContainer.call(this); - for (var i = 0, elmsLength = this._targetElement.length; i < elmsLength; i++) { - _setProgress.call(this, this._targetElement[i]); - } + var p = this; + p._targetElement.forEach(item => _setProgress.call(p, item)); } /** @@ -83,11 +76,7 @@ //set the position percent elements, it depends on targetElement tag - if (targetElement.tagName.toLowerCase() === 'body') { - progressElementContainer.style.position = 'fixed'; - } else { - progressElementContainer.style.position = 'absolute'; - } + progressElementContainer.style.position = targetElement.tagName.toLowerCase() === 'body' ? 'fixed' : 'absolute'; progressElementContainer.setAttribute("data-progressjs", window._progressjsId); var progressElement = document.createElement("div"); @@ -138,9 +127,8 @@ * @param {Number} percent */ function _setPercent(percent) { - for (var i = 0, elmsLength = this._targetElement.length; i < elmsLength; i++) { - _setPercentFor.call(this, this._targetElement[i], percent); - } + var p = this; + p._targetElement.forEach(item => _setPercentFor.call(p, item, percent)); } /** @@ -158,7 +146,7 @@ if (targetElement.hasAttribute("data-progressjs")) { //setTimeout for better CSS3 animation applying in some cases - setTimeout(function() { + setTimeout(() => { var percentElement = _getPercentElement(targetElement); percentElement.style.width = parseInt(percent) + '%'; @@ -167,7 +155,7 @@ var existingPercent = parseInt(percentElement.innerHTML.replace('%', '')); //start increase/decrease the percent element with animation - (function(percentElement, existingPercent, currentPercent) { + ((percentElement, existingPercent, currentPercent) => { var increasement = true; if (existingPercent > currentPercent) { @@ -189,7 +177,7 @@ if ((existingPercent - currentPercent) != 0) { //set the percent percentElement.innerHTML = (increasement ? (++existingPercent) : (--existingPercent)) + '%'; - setTimeout(function() { changePercentTimer(percentElement, existingPercent, currentPercent); }, intervalIn); + setTimeout(() => changePercentTimer(percentElement, existingPercent, currentPercent), intervalIn); } } @@ -225,7 +213,7 @@ if (typeof this._onBeforeEndCallback != 'undefined') { if (this._options.considerTransition === true) { //we can safety assume that all layers would be the same, so `this._targetElement[0]` is the same as `this._targetElement[1]` - _getPercentElement(this._targetElement[0]).addEventListener(whichTransitionEvent(), this._onBeforeEndCallback, false); + _getPercentElement(this._targetElement[0]).addEventListener('transitionend', this._onBeforeEndCallback, false); } else { this._onBeforeEndCallback.call(this); } @@ -233,8 +221,8 @@ var progressjsId = parseInt(this._targetElement[0].getAttribute('data-progressjs')); - for (var i = 0, elmsLength = this._targetElement.length; i < elmsLength; i++) { - var currentElement = this._targetElement[i]; + var p = this; + p._targetElement.forEach(currentElement => { var percentElement = _getPercentElement(currentElement); if (!percentElement) @@ -244,17 +232,17 @@ var timeoutSec = 1; if (existingPercent < 100) { - _setPercentFor.call(this, currentElement, 100); + _setPercentFor.call(p, currentElement, 100); timeoutSec = 500; } //I believe I should handle this situation with eventListener and `transitionend` event but I'm not sure //about compatibility with IEs. Should be fixed in further versions. - (function(percentElement, currentElement) { - setTimeout(function() { + ((percentElement, currentElement) => { + setTimeout(() => { percentElement.parentNode.className += " progressjs-end"; - setTimeout(function() { + setTimeout(() => { //remove the percent element from page percentElement.parentNode.parentNode.removeChild(percentElement.parentNode); //and remove the attribute @@ -262,7 +250,7 @@ }, 1000); }, timeoutSec); })(percentElement, currentElement); - } + }); //clean the setInterval for autoIncrease function if (window._progressjsIntervals[progressjsId]) { @@ -300,7 +288,7 @@ * @returns Element's position info */ function _getOffset(element) { - var elementPosition = {}; + var elementPosition = {}, _x = 0, _y = 0; if (element.tagName.toLowerCase() === 'body') { //set width @@ -315,8 +303,6 @@ } //calculate element top and left - var _x = 0; - var _y = 0; while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) { _x += element.offsetLeft; _y += element.offsetTop; @@ -341,36 +327,12 @@ if (targetElement) { return new ProgressJs(targetElement); - } else { - throw new Error('There is no element with given selector.'); } + throw new Error('There is no element with given selector.'); } return new ProgressJs(document.body); }; - /** - * Get correct transition callback - * Thanks @webinista: http://stackoverflow.com/a/9090128/375966 - * - * @returns transition name - */ - function whichTransitionEvent() { - var t, - el = document.createElement('fakeelement'), - transitions = { - 'transition': 'transitionend', - 'OTransition': 'oTransitionEnd', - 'MozTransition': 'transitionend', - 'WebkitTransition': 'webkitTransitionEnd' - } - - for (t in transitions) { - if (el.style[t] !== undefined) { - return transitions[t]; - } - } - } - /** * Current ProgressJs version *