mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-11-10 09:02:45 +08:00
Cleanup ProgressJS
This commit is contained in:
djmaze
parent
12c88e34b3
commit
7584e9003f
3 changed files with 21 additions and 205 deletions
|
|
@ -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); }
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
]
|
||||
}
|
||||
|
|
|
|||
176
vendors/Progress.js/src/progress.js
vendored
176
vendors/Progress.js/src/progress.js
vendored
|
|
@ -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,16 +132,10 @@
|
|||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue