mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 07:35:55 +08:00
Cleanup ProgressJS
This commit is contained in:
parent
12c88e34b3
commit
7584e9003f
|
@ -1,5 +1,15 @@
|
||||||
|
.progressjs-inner {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
.progressjs-progress {
|
||||||
|
z-index: 9999999;
|
||||||
|
}
|
||||||
|
|
||||||
.progressjs-theme-rainloop {
|
.progressjs-theme-rainloop {
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -10,10 +20,6 @@
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
-webkit-transition: width .5s;
|
|
||||||
-moz-transition: width .5s;
|
|
||||||
-o-transition: width .5s;
|
|
||||||
transition: width .5s;
|
transition: width .5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -23,40 +29,11 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
right: -32px;
|
right: -32px;
|
||||||
bottom: 0;
|
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);
|
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;
|
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;
|
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 {
|
@keyframes simple-pace-stripe-animation {
|
||||||
0% { transform: none; transform: none; }
|
0% { transform: none; transform: none; }
|
||||||
100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
|
100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
|
||||||
|
|
|
@ -58,7 +58,6 @@ config.paths.css = {
|
||||||
'node_modules/opentip/css/opentip.css',
|
'node_modules/opentip/css/opentip.css',
|
||||||
'vendors/lightgallery/dist/css/lightgallery.min.css',
|
'vendors/lightgallery/dist/css/lightgallery.min.css',
|
||||||
'vendors/lightgallery/dist/css/lg-transitions.min.css',
|
'vendors/lightgallery/dist/css/lg-transitions.min.css',
|
||||||
'vendors/Progress.js/minified/progressjs.min.css',
|
|
||||||
'dev/Styles/_progressjs.css'
|
'dev/Styles/_progressjs.css'
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
182
vendors/Progress.js/src/progress.js
vendored
182
vendors/Progress.js/src/progress.js
vendored
|
@ -8,10 +8,9 @@
|
||||||
|
|
||||||
(exports => {
|
(exports => {
|
||||||
//Default config/variables
|
//Default config/variables
|
||||||
const VERSION = '0.1.0',
|
const doc = document,
|
||||||
win = window,
|
|
||||||
doc = document,
|
|
||||||
defined = v => undefined !== v;
|
defined = v => undefined !== v;
|
||||||
|
let progressjsId = 1;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ProgressJs main class
|
* ProgressJs main class
|
||||||
|
@ -19,23 +18,7 @@
|
||||||
* @class ProgressJs
|
* @class ProgressJs
|
||||||
*/
|
*/
|
||||||
function ProgressJs(obj) {
|
function ProgressJs(obj) {
|
||||||
|
|
||||||
this._targetElement = defined(obj.length) ? obj : [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"))
|
if (targetElement.hasAttribute("data-progressjs"))
|
||||||
return;
|
return;
|
||||||
|
|
||||||
//get target element position
|
targetElement.setAttribute("data-progressjs", progressjsId);
|
||||||
var targetElementOffset = _getOffset.call(this, targetElement);
|
|
||||||
|
|
||||||
targetElement.setAttribute("data-progressjs", win._progressjsId);
|
|
||||||
|
|
||||||
var progressElementContainer = doc.createElement('div');
|
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");
|
var progressElement = doc.createElement("div");
|
||||||
progressElement.className = "progressjs-inner";
|
progressElement.className = "progressjs-inner";
|
||||||
|
progressElementContainer.appendChild(progressElement);
|
||||||
|
|
||||||
//create an element for current percent of progress bar
|
//create an element for current percent of progress bar
|
||||||
var progressPercentElement = doc.createElement('div');
|
var progressPercentElement = doc.createElement('div');
|
||||||
progressPercentElement.className = "progressjs-percent";
|
progressPercentElement.className = "progressjs-percent";
|
||||||
progressPercentElement.innerHTML = "1%";
|
|
||||||
|
|
||||||
progressElement.appendChild(progressPercentElement);
|
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
|
//append the element to container
|
||||||
var container = doc.querySelector('.progressjs-container');
|
doc.querySelector('.progressjs-container').appendChild(progressElementContainer);
|
||||||
container.appendChild(progressElementContainer);
|
|
||||||
|
|
||||||
_setPercentFor(targetElement, 1);
|
_setPercentFor(targetElement, 1);
|
||||||
|
|
||||||
//and increase the progressId
|
//and increase the progressId
|
||||||
++win._progressjsId;
|
++progressjsId;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -120,44 +74,8 @@
|
||||||
if (targetElement.hasAttribute("data-progressjs")) {
|
if (targetElement.hasAttribute("data-progressjs")) {
|
||||||
//setTimeout for better CSS3 animation applying in some cases
|
//setTimeout for better CSS3 animation applying in some cases
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
||||||
var percentElement = _getPercentElement(targetElement);
|
var percentElement = _getPercentElement(targetElement);
|
||||||
percentElement.style.width = parseInt(percent) + '%';
|
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);
|
}, 50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -174,44 +92,6 @@
|
||||||
return doc.querySelector('.progressjs-container > .progressjs-progress[data-progressjs="' + progressjsId + '"] > .progressjs-inner');
|
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) {
|
var progressJs = function (targetElm) {
|
||||||
if (typeof (targetElm) === 'object') {
|
if (typeof (targetElm) === 'object') {
|
||||||
//Ok, create a new instance
|
//Ok, create a new instance
|
||||||
|
@ -229,14 +109,6 @@
|
||||||
return new ProgressJs(doc.body);
|
return new ProgressJs(doc.body);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* Current ProgressJs version
|
|
||||||
*
|
|
||||||
* @property version
|
|
||||||
* @type String
|
|
||||||
*/
|
|
||||||
progressJs.version = VERSION;
|
|
||||||
|
|
||||||
//Prototype
|
//Prototype
|
||||||
progressJs.fn = ProgressJs.prototype = {
|
progressJs.fn = ProgressJs.prototype = {
|
||||||
start: function() {
|
start: function() {
|
||||||
|
@ -260,17 +132,11 @@
|
||||||
var p = this;
|
var p = this;
|
||||||
//call onBeforeEnd callback
|
//call onBeforeEnd callback
|
||||||
if (defined(p._onBeforeEndCallback)) {
|
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]`
|
||||||
//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])
|
||||||
_getPercentElement(p._targetElement[0])
|
.addEventListener('transitionend', p._onBeforeEndCallback, false);
|
||||||
.addEventListener('transitionend', p._onBeforeEndCallback, false);
|
|
||||||
} else {
|
|
||||||
p._onBeforeEndCallback.call(p);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var progressjsId = parseInt(p._targetElement[0].getAttribute('data-progressjs'));
|
|
||||||
|
|
||||||
p._targetElement.forEach(currentElement => {
|
p._targetElement.forEach(currentElement => {
|
||||||
var percentElement = _getPercentElement(currentElement);
|
var percentElement = _getPercentElement(currentElement);
|
||||||
|
|
||||||
|
@ -279,37 +145,11 @@
|
||||||
|
|
||||||
var existingPercent = parseInt(percentElement.style.width.replace('%', ''));
|
var existingPercent = parseInt(percentElement.style.width.replace('%', ''));
|
||||||
|
|
||||||
var timeoutSec = 1;
|
|
||||||
if (existingPercent < 100) {
|
if (existingPercent < 100) {
|
||||||
_setPercentFor.call(p, 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.
|
|
||||||
((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;
|
return p;
|
||||||
},
|
},
|
||||||
onbeforeend: function(providedCallback) {
|
onbeforeend: function(providedCallback) {
|
||||||
|
|
Loading…
Reference in a new issue