diff --git a/dev/Styles/_progressjs.css b/dev/Styles/_progressjs.css index 3928a6651..4f0844ce5 100644 --- a/dev/Styles/_progressjs.css +++ b/dev/Styles/_progressjs.css @@ -1,5 +1,15 @@ +.progressjs-inner { + width: 0; +} +.progressjs-progress { + z-index: 9999999; +} .progressjs-theme-rainloop { + left: 0; + position: fixed; + top: 0; + width: 100%; z-index: 2000; } @@ -10,10 +20,6 @@ z-index: 2000; height: 3px; overflow: hidden; - - -webkit-transition: width .5s; - -moz-transition: width .5s; - -o-transition: width .5s; transition: width .5s; } @@ -23,40 +29,11 @@ left: 0; right: -32px; bottom: 0; - - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.3)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.3)), color-stop(0.75, rgba(255, 255, 255, 0.3)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent); - -webkit-background-size: 32px 32px; - -moz-background-size: 32px 32px; - -o-background-size: 32px 32px; background-size: 32px 32px; - - -webkit-animation: simple-pace-stripe-animation 500ms linear infinite; - -moz-animation: simple-pace-stripe-animation 500ms linear infinite; - -ms-animation: simple-pace-stripe-animation 500ms linear infinite; - -o-animation: simple-pace-stripe-animation 500ms linear infinite; animation: simple-pace-stripe-animation 500ms linear infinite; } -@-webkit-keyframes simple-pace-stripe-animation { - 0% { -webkit-transform: none; transform: none; } - 100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); } -} -@-moz-keyframes simple-pace-stripe-animation { - 0% { -moz-transform: none; transform: none; } - 100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); } -} -@-o-keyframes simple-pace-stripe-animation { - 0% { -o-transform: none; transform: none; } - 100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); } -} -@-ms-keyframes simple-pace-stripe-animation { - 0% { -ms-transform: none; transform: none; } - 100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); } -} @keyframes simple-pace-stripe-animation { 0% { transform: none; transform: none; } 100% { transform: translate(-32px, 0); transform: translate(-32px, 0); } diff --git a/tasks/config.js b/tasks/config.js index 56c1cb600..85b2fb167 100644 --- a/tasks/config.js +++ b/tasks/config.js @@ -58,7 +58,6 @@ config.paths.css = { 'node_modules/opentip/css/opentip.css', 'vendors/lightgallery/dist/css/lightgallery.min.css', 'vendors/lightgallery/dist/css/lg-transitions.min.css', - 'vendors/Progress.js/minified/progressjs.min.css', 'dev/Styles/_progressjs.css' ] } diff --git a/vendors/Progress.js/src/progress.js b/vendors/Progress.js/src/progress.js index ed67a2c8e..1688dd536 100644 --- a/vendors/Progress.js/src/progress.js +++ b/vendors/Progress.js/src/progress.js @@ -8,10 +8,9 @@ (exports => { //Default config/variables - const VERSION = '0.1.0', - win = window, - doc = document, + const doc = document, defined = v => undefined !== v; + let progressjsId = 1; /** * ProgressJs main class @@ -19,23 +18,7 @@ * @class ProgressJs */ function ProgressJs(obj) { - this._targetElement = defined(obj.length) ? obj : [obj]; - - if (!defined(win._progressjsId)) - win._progressjsId = 1; - - if (!defined(win._progressjsIntervals)) - win._progressjsIntervals = {}; - - this._options = { - //progress bar theme - theme: 'rainloop', - //overlay mode makes an overlay layer in the target element - overlayMode: false, - //to consider CSS3 transitions in events - considerTransition: true - }; } /** @@ -51,57 +34,28 @@ if (targetElement.hasAttribute("data-progressjs")) return; - //get target element position - var targetElementOffset = _getOffset.call(this, targetElement); - - targetElement.setAttribute("data-progressjs", win._progressjsId); + targetElement.setAttribute("data-progressjs", progressjsId); var progressElementContainer = doc.createElement('div'); - progressElementContainer.className = 'progressjs-progress progressjs-theme-' + this._options.theme; + progressElementContainer.className = 'progressjs-progress progressjs-theme-rainloop'; + progressElementContainer.setAttribute("data-progressjs", progressjsId); - - //set the position percent elements, it depends on targetElement tag - progressElementContainer.style.position = targetElement.tagName.toLowerCase() === 'body' ? 'fixed' : 'absolute'; - - progressElementContainer.setAttribute("data-progressjs", win._progressjsId); var progressElement = doc.createElement("div"); progressElement.className = "progressjs-inner"; + progressElementContainer.appendChild(progressElement); //create an element for current percent of progress bar var progressPercentElement = doc.createElement('div'); progressPercentElement.className = "progressjs-percent"; - progressPercentElement.innerHTML = "1%"; - progressElement.appendChild(progressPercentElement); - if (this._options.overlayMode && targetElement.tagName.toLowerCase() === 'body') { - //if we have `body` for target element and also overlay mode is enable, we should use a different - //position for progress bar container element - progressElementContainer.style.left = 0; - progressElementContainer.style.right = 0; - progressElementContainer.style.top = 0; - progressElementContainer.style.bottom = 0; - } else { - //set progress bar container size and offset - progressElementContainer.style.left = targetElementOffset.left + 'px'; - progressElementContainer.style.top = targetElementOffset.top + 'px'; - progressElementContainer.style.width = targetElementOffset.width + 'px'; - - if (this._options.overlayMode) { - progressElementContainer.style.height = targetElementOffset.height + 'px'; - } - } - - progressElementContainer.appendChild(progressElement); - //append the element to container - var container = doc.querySelector('.progressjs-container'); - container.appendChild(progressElementContainer); + doc.querySelector('.progressjs-container').appendChild(progressElementContainer); _setPercentFor(targetElement, 1); //and increase the progressId - ++win._progressjsId; + ++progressjsId; } /** @@ -120,44 +74,8 @@ if (targetElement.hasAttribute("data-progressjs")) { //setTimeout for better CSS3 animation applying in some cases setTimeout(() => { - var percentElement = _getPercentElement(targetElement); percentElement.style.width = parseInt(percent) + '%'; - - percentElement = percentElement.querySelector(".progressjs-percent"); - var existingPercent = parseInt(percentElement.innerHTML.replace('%', '')); - - //start increase/decrease the percent element with animation - ((percentElement, existingPercent, currentPercent) => { - - var increasement = true; - if (existingPercent > currentPercent) { - increasement = false; - } - - var intervalIn = 10; - function changePercentTimer(percentElement, existingPercent, currentPercent) { - //calculate the distance between two percents - var distance = Math.abs(existingPercent - currentPercent); - if (distance < 3) { - intervalIn = 30; - } else if (distance < 20) { - intervalIn = 20; - } else { - intervalIn = 1; - } - - if ((existingPercent - currentPercent) != 0) { - //set the percent - percentElement.innerHTML = (increasement ? (++existingPercent) : (--existingPercent)) + '%'; - setTimeout(() => changePercentTimer(percentElement, existingPercent, currentPercent), intervalIn); - } - } - - changePercentTimer(percentElement, existingPercent, currentPercent); - - })(percentElement, existingPercent, parseInt(percent)); - }, 50); } } @@ -174,44 +92,6 @@ return doc.querySelector('.progressjs-container > .progressjs-progress[data-progressjs="' + progressjsId + '"] > .progressjs-inner'); } - /** - * Get an element position on the page - * Thanks to `meouw`: http://stackoverflow.com/a/442474/375966 - * - * @api private - * @method _getOffset - * @param {Object} element - * @returns Element's position info - */ - function _getOffset(element) { - var elementPosition = {}, _x = 0, _y = 0; - - if (element.tagName.toLowerCase() === 'body') { - //set width - elementPosition.width = element.clientWidth; - //set height - elementPosition.height = element.clientHeight; - } else { - //set width - elementPosition.width = element.offsetWidth; - //set height - elementPosition.height = element.offsetHeight; - } - - //calculate element top and left - while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) { - _x += element.offsetLeft; - _y += element.offsetTop; - element = element.offsetParent; - } - //set top - elementPosition.top = _y; - //set left - elementPosition.left = _x; - - return elementPosition; - } - var progressJs = function (targetElm) { if (typeof (targetElm) === 'object') { //Ok, create a new instance @@ -229,14 +109,6 @@ return new ProgressJs(doc.body); }; - /** - * Current ProgressJs version - * - * @property version - * @type String - */ - progressJs.version = VERSION; - //Prototype progressJs.fn = ProgressJs.prototype = { start: function() { @@ -260,17 +132,11 @@ var p = this; //call onBeforeEnd callback if (defined(p._onBeforeEndCallback)) { - if (p._options.considerTransition === true) { - //we can safety assume that all layers would be the same, so `p._targetElement[0]` is the same as `p._targetElement[1]` - _getPercentElement(p._targetElement[0]) - .addEventListener('transitionend', p._onBeforeEndCallback, false); - } else { - p._onBeforeEndCallback.call(p); - } + //we can safety assume that all layers would be the same, so `p._targetElement[0]` is the same as `p._targetElement[1]` + _getPercentElement(p._targetElement[0]) + .addEventListener('transitionend', p._onBeforeEndCallback, false); } - var progressjsId = parseInt(p._targetElement[0].getAttribute('data-progressjs')); - p._targetElement.forEach(currentElement => { var percentElement = _getPercentElement(currentElement); @@ -279,37 +145,11 @@ var existingPercent = parseInt(percentElement.style.width.replace('%', '')); - var timeoutSec = 1; if (existingPercent < 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. - ((percentElement, currentElement) => { - setTimeout(() => { - percentElement.parentNode.className += " progressjs-end"; - - setTimeout(() => { - //remove the percent element from page - percentElement.parentNode.parentNode.removeChild(percentElement.parentNode); - //and remove the attribute - currentElement.removeAttribute("data-progressjs"); - }, 1000); - }, timeoutSec); - })(percentElement, currentElement); }); - //clean the setInterval for autoIncrease function - if (win._progressjsIntervals[progressjsId]) { - //`delete` keyword has some problems in IE - try { - clearInterval(win._progressjsIntervals[progressjsId]); - win._progressjsIntervals[progressjsId] = null; - delete win._progressjsIntervals[progressjsId]; - } catch(ex) { } - } return p; }, onbeforeend: function(providedCallback) {