mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-12-25 00:21:29 +08:00
Replaced ProgressJS with simple native dropin
This commit is contained in:
djmaze
parent
70f31ee4a7
commit
b9b9cd736f
13 changed files with 51 additions and 538 deletions
19
README.md
19
README.md
|
|
@ -62,6 +62,7 @@ The result is faster and smaller download code (good for mobile networks).
|
|||
Things might work in Edge 15-18, Firefox 47-62 and Chrome 54-68 due to one polyfill for array.flat().
|
||||
|
||||
* Replaced jQuery with jQuery.slim
|
||||
* Replaced ProgressJS with simple native dropin
|
||||
* Removed pikaday
|
||||
* Removed underscore
|
||||
* Removed polyfills
|
||||
|
|
@ -74,23 +75,23 @@ Things might work in Edge 15-18, Firefox 47-62 and Chrome 54-68 due to one polyf
|
|||
|
||||
|js/* |1.14.0 |native |gzip 1.14 |gzip |
|
||||
|----------- |--------: |--------: |--------: |--------: |
|
||||
|admin.js |2.130.942 |1.210.357 | 485.481 | 297.385 |
|
||||
|app.js |4.184.455 |2.954.400 | 932.725 | 690.873 |
|
||||
|boot.js | 671.522 | 64.041 | 169.502 | 20.006 |
|
||||
|admin.js |2.130.942 |1.210.342 | 485.481 | 297.204 |
|
||||
|app.js |4.184.455 |2.954.385 | 932.725 | 690.805 |
|
||||
|boot.js | 671.522 | 52.263 | 169.502 | 17.146 |
|
||||
|libs.js | 647.614 | 437.187 | 194.728 | 133.728 |
|
||||
|polyfills.js | 325.834 | 0 | 71.825 | 0 |
|
||||
|TOTAL js |7.960.367 |4.665.985 |1.854.261 |1.141.992 |
|
||||
|TOTAL js |7.960.367 |4.665.985 |1.854.261 |1.138.883 |
|
||||
|
||||
|js/min/* |1.14.0 |native |gzip 1.14 |gzip |
|
||||
|--------------- |--------: |--------: |--------: |--------: |
|
||||
|admin.min.js | 252.147 | 156.115 | 73.657 | 44.592 |
|
||||
|app.min.js | 511.202 | 384.048 |140.462 |101.496 |
|
||||
|boot.min.js | 66.007 | 7.642 | 22.567 | 2.930 |
|
||||
|admin.min.js | 252.147 | 156.114 | 73.657 | 44.592 |
|
||||
|app.min.js | 511.202 | 384.047 |140.462 |101.496 |
|
||||
|boot.min.js | 66.007 | 6.187 | 22.567 | 2.515 |
|
||||
|libs.min.js | 572.545 | 392.436 |176.720 |123.484 |
|
||||
|polyfills.min.js | 32.452 | 0 | 11.312 | 0 |
|
||||
|TOTAL js/min |1.434.353 | 940.241 |424.718 |272.502 |
|
||||
|TOTAL js/min |1.434.353 | 938.784 |424.718 |272.087 |
|
||||
|
||||
494.112 bytes (152.216 gzip) is not much, but it feels faster.
|
||||
495.569 bytes (152.631 gzip) is not much, but it feels faster.
|
||||
|
||||
|
||||
|css/* |1.14.0 |native |
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ window.__initAppData = data => {
|
|||
appData.StaticAppJsLink &&
|
||||
appData.StaticEditorJsLink
|
||||
) {
|
||||
p.start().set(5);
|
||||
p.set(5);
|
||||
|
||||
const loadScript = jassl,
|
||||
libs = () =>
|
||||
|
|
|
|||
55
dev/boot.js
55
dev/boot.js
|
|
@ -1,22 +1,47 @@
|
|||
import window from 'window';
|
||||
import { progressJs } from '../vendors/Progress.js/src/progress.js';
|
||||
/* eslint-env browser */
|
||||
|
||||
window.progressJs = window.progressJs || progressJs();
|
||||
(win => {
|
||||
|
||||
window.progressJs.onbeforeend(() => {
|
||||
const div = window.document.querySelector('.progressjs-container');
|
||||
if (div) {
|
||||
try {
|
||||
div.hidden = true;
|
||||
window.setTimeout(() => {
|
||||
div.remove();
|
||||
}, 200); // eslint-disable-line no-magic-numbers
|
||||
} catch (e) {} // eslint-disable-line no-empty
|
||||
const
|
||||
doc = win.document,
|
||||
setPercentWidth = (percent) => {
|
||||
setTimeout(() => progress.style.width = parseInt(Math.min(percent, 100)) + '%', 50);
|
||||
};
|
||||
|
||||
let container = doc.createElement('div'),
|
||||
progress = container.appendChild(doc.createElement("div"));
|
||||
|
||||
container.className = 'progressjs-progress progressjs-theme-rainloop';
|
||||
progress.className = "progressjs-inner";
|
||||
progress.appendChild(doc.createElement('div')).className = "progressjs-percent";
|
||||
|
||||
setPercentWidth(1);
|
||||
doc.body.appendChild(container);
|
||||
|
||||
win.progressJs = new class {
|
||||
set(percent) {
|
||||
setPercentWidth(percent);
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
end() {
|
||||
if (progress) {
|
||||
progress.addEventListener('transitionend', () => {
|
||||
if (container) {
|
||||
container.hidden = true;
|
||||
setTimeout(() => {container.remove();container=null;}, 200);
|
||||
}
|
||||
}, false);
|
||||
setPercentWidth(100);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
require('Common/Booter');
|
||||
|
||||
if (window.__runBoot) {
|
||||
window.__runBoot();
|
||||
if (win.__runBoot) {
|
||||
win.__runBoot();
|
||||
}
|
||||
|
||||
})(window);
|
||||
|
|
|
|||
|
|
@ -201,56 +201,6 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
html.no-css {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Arial, Verdana, Geneva, sans-serif;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#rl-loading, #rl-loading-error {
|
||||
position: absolute;
|
||||
font-size: 30px;
|
||||
line-height: 130%;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
margin: 0;
|
||||
margin-top: -60px;
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.progressjs-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.thm-body {
|
||||
color: #333;
|
||||
background-color: #aaa;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.thm-loading {
|
||||
color: #333 !important;
|
||||
text-shadow: none !important;
|
||||
|
||||
.e-spinner .e-bounce {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.thm-login-desc .desc {
|
||||
color: #333 !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// glass style
|
||||
html.glass {
|
||||
|
||||
|
|
|
|||
20
vendors/Progress.js/LICENSE
vendored
20
vendors/Progress.js/LICENSE
vendored
|
|
@ -1,20 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 Afshin Mehrabani (afshin.meh@gmail.com)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
6
vendors/Progress.js/Makefile
vendored
6
vendors/Progress.js/Makefile
vendored
|
|
@ -1,6 +0,0 @@
|
|||
BASE = .
|
||||
|
||||
build:
|
||||
cd build && node build.js
|
||||
|
||||
.PHONY: build
|
||||
65
vendors/Progress.js/README.md
vendored
65
vendors/Progress.js/README.md
vendored
|
|
@ -1,65 +0,0 @@
|
|||
# ProgressJS
|
||||
|
||||
> ProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page.
|
||||
|
||||
## How To Use
|
||||
|
||||
1) Include `progress.js` and `progressjs.css` in the page (use minified version from `minified` folder for production)
|
||||
|
||||
2) Execute following JavaScript code in the page:
|
||||
|
||||
```javascript
|
||||
//to set progress-bar for whole page
|
||||
progressJs().start();
|
||||
//or for specific element
|
||||
progressJs("#targetElement").start();
|
||||
```
|
||||
|
||||
|
||||
Use other methods to increase, decrease or set a auto-increase function for your progress-bar. Furthermore, you can change the template using `setOption` method.
|
||||
|
||||
## API
|
||||
|
||||
Check the API and method usage with example here: https://github.com/usablica/progress.js/wiki/API
|
||||
|
||||
## Build
|
||||
|
||||
First you should install `nodejs` and `npm`, then first run this command: `npm install` to install all dependencies.
|
||||
|
||||
Now you can run this command to minify all static resources:
|
||||
|
||||
make build
|
||||
|
||||
## Roadmap
|
||||
- Add `example` folder and provide examples
|
||||
- More browser compatibility + mobile/tablet device support
|
||||
- Add more templates
|
||||
|
||||
## Release History
|
||||
* **v0.1.0** - 2014-02-14
|
||||
- First version
|
||||
- Increase, decrease and auto-increase functions
|
||||
- Ability to design and add templates
|
||||
|
||||
## Author
|
||||
**Afshin Mehrabani**
|
||||
|
||||
- [Twitter](https://twitter.com/afshinmeh)
|
||||
- [Github](https://github.com/afshinm)
|
||||
- [Personal page](http://afshinm.name/)
|
||||
|
||||
## License
|
||||
> Copyright (C) 2012 Afshin Mehrabani (afshin.meh@gmail.com)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
|
||||
documentation files (the "Software"), to deal in the Software without restriction, including without limitation
|
||||
the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
|
||||
and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions
|
||||
of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
|
||||
TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
||||
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
|
||||
CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||
IN THE SOFTWARE.
|
||||
9
vendors/Progress.js/bower.json
vendored
9
vendors/Progress.js/bower.json
vendored
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"name": "Progress.js",
|
||||
"version": "0.1.0",
|
||||
"description": "Themeable HTML5 progress bar library",
|
||||
"keywords": ["progress", "progressbar", "loading"],
|
||||
"homepage": "http://usablica.github.io/progress.js/",
|
||||
"author": "Afshin Mehrabani",
|
||||
"main": ["src/progress.js","src/progressjs.css"]
|
||||
}
|
||||
1
vendors/Progress.js/minified/progress.min.js
vendored
1
vendors/Progress.js/minified/progress.min.js
vendored
|
|
@ -1 +0,0 @@
|
|||
(e=>{const t=window,r=document,s=e=>void 0!==e;function o(e){this._targetElement=s(e.length)?e:[e],s(t._progressjsId)||(t._progressjsId=1),s(t._progressjsIntervals)||(t._progressjsIntervals={}),this._options={theme:"rainloop",overlayMode:!1,considerTransition:!0}}function n(e){if(!e.hasAttribute("data-progressjs")){var s=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",t._progressjsId);var o=r.createElement("div");o.className="progressjs-progress progressjs-theme-"+this._options.theme,o.style.position="body"===e.tagName.toLowerCase()?"fixed":"absolute",o.setAttribute("data-progressjs",t._progressjsId);var n=r.createElement("div");n.className="progressjs-inner";var i=r.createElement("div");i.className="progressjs-percent",i.innerHTML="1%",n.appendChild(i),this._options.overlayMode&&"body"===e.tagName.toLowerCase()?(o.style.left=0,o.style.right=0,o.style.top=0,o.style.bottom=0):(o.style.left=s.left+"px",o.style.top=s.top+"px",o.style.width=s.width+"px",this._options.overlayMode&&(o.style.height=s.height+"px")),o.appendChild(n),r.querySelector(".progressjs-container").appendChild(o),a(e,1),++t._progressjsId}}function a(e,t){t>=100&&(t=100),e.hasAttribute("data-progressjs")&&setTimeout(()=>{var r=i(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 a=Math.abs(r-n);o=a<3?30:a<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 i(e){var t=parseInt(e.getAttribute("data-progressjs"));return r.querySelector('.progressjs-container > .progressjs-progress[data-progressjs="'+t+'"] > .progressjs-inner')}var l=function(e){if("object"==typeof e)return new o(e);if("string"==typeof e){var t=r.querySelectorAll(e);if(t)return new o(t);throw new Error("There is no element with given selector.")}return new o(r.body)};l.version="0.1.0",l.fn=o.prototype={start:function(){if(!r.querySelector(".progressjs-container")){var e=r.createElement("div");e.className="progressjs-container",r.body.appendChild(e)}var t=this;return t._targetElement.forEach(e=>n.call(t,e)),t},set:function(e){var t=this;return t._targetElement.forEach(r=>a.call(t,r,e)),t},end:function(){var e=this;s(e._onBeforeEndCallback)&&(!0===e._options.considerTransition?i(e._targetElement[0]).addEventListener("transitionend",e._onBeforeEndCallback,!1):e._onBeforeEndCallback.call(e));var r=parseInt(e._targetElement[0].getAttribute("data-progressjs"));if(e._targetElement.forEach(t=>{var r=i(t);if(r){var s=parseInt(r.style.width.replace("%","")),o=1;s<100&&(a.call(e,t,100),o=500),((e,t)=>{setTimeout(()=>{e.parentNode.className+=" progressjs-end",setTimeout(()=>{e.parentNode.parentNode.removeChild(e.parentNode),t.removeAttribute("data-progressjs")},1e3)},o)})(r,t)}}),t._progressjsIntervals[r])try{clearInterval(t._progressjsIntervals[r]),t._progressjsIntervals[r]=null,delete t._progressjsIntervals[r]}catch(e){}return e},onbeforeend:function(e){return this._onBeforeEndCallback=e,this}},e.progressJs=l})(this);
|
||||
|
|
@ -1 +0,0 @@
|
|||
.progressjs-inner{width:0}.progressjs-progress{z-index:9999999}.progressjs-theme-blue .progressjs-inner{height:2px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;background-color:#3498db}.progressjs-theme-blue.progressjs-end{-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;opacity:0}.progressjs-theme-blue .progressjs-percent{display:none}.progressjs-theme-blueOverlay{background-color:white;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.progressjs-theme-blueOverlay .progressjs-inner{height:100%;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;background-color:#3498db}.progressjs-theme-blueOverlay.progressjs-end{opacity:0!important}.progressjs-theme-blueOverlay .progressjs-percent{display:none}.progressjs-theme-blueOverlay{background-color:white;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.progressjs-theme-blueOverlay .progressjs-inner{height:100%;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;background-color:#3498db}.progressjs-theme-blueOverlay.progressjs-end{opacity:0!important}.progressjs-theme-blueOverlay .progressjs-percent{display:none}.progressjs-theme-blueOverlayRadius{background-color:white;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;border-radius:5px}.progressjs-theme-blueOverlayRadius .progressjs-inner{height:100%;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;background-color:#3498db;border-radius:5px}.progressjs-theme-blueOverlayRadius.progressjs-end{opacity:0!important}.progressjs-theme-blueOverlayRadius .progressjs-percent{display:none}.progressjs-theme-blueOverlayRadiusHalfOpacity{background-color:white;opacity:.5;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;border-radius:5px}.progressjs-theme-blueOverlayRadiusHalfOpacity .progressjs-inner{height:100%;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;background-color:#3498db;border-radius:5px}.progressjs-theme-blueOverlayRadiusHalfOpacity.progressjs-end{opacity:0!important}.progressjs-theme-blueOverlayRadiusHalfOpacity .progressjs-percent{display:none}.progressjs-theme-blueOverlayRadiusWithPercentBar{background-color:white;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;border-radius:5px}.progressjs-theme-blueOverlayRadiusWithPercentBar .progressjs-inner{height:100%;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;background-color:#3498db;border-radius:5px}.progressjs-theme-blueOverlayRadiusWithPercentBar.progressjs-end{opacity:0!important}.progressjs-theme-blueOverlayRadiusWithPercentBar .progressjs-percent{width:70px;text-align:center;height:40px;position:absolute;right:50%;margin-right:-35px;top:50%;margin-top:-20px;font-size:30px;opacity:.5}.progressjs-theme-blackRadiusInputs{height:10px;border-radius:10px;overflow:hidden}.progressjs-theme-blackRadiusInputs .progressjs-inner{height:2px;-webkit-transition:all 1s ease-out;-moz-transition:all 1s ease-out;-o-transition:all 1s ease-out;transition:all 1s ease-out;background-color:#34495e}.progressjs-theme-blackRadiusInputs.progressjs-end{-webkit-transition:opacity .2s ease-out;-moz-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;opacity:0}.progressjs-theme-blackRadiusInputs .progressjs-percent{display:none}
|
||||
17
vendors/Progress.js/package.json
vendored
17
vendors/Progress.js/package.json
vendored
|
|
@ -1,17 +0,0 @@
|
|||
{
|
||||
"name": "Progress.js",
|
||||
"description": "Themeable HTML5 progress bar library",
|
||||
"version": "0.1.0",
|
||||
"author": "Afshin Mehrabani <afshin.meh@gmail.com>",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/usablica/progress.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"node-minify": "*"
|
||||
},
|
||||
"engine": [
|
||||
"node >=0.1.90"
|
||||
],
|
||||
"main": "src/progress.js"
|
||||
}
|
||||
163
vendors/Progress.js/src/progress.js
vendored
163
vendors/Progress.js/src/progress.js
vendored
|
|
@ -1,163 +0,0 @@
|
|||
/**
|
||||
* Progress.js v0.1.0
|
||||
* https://github.com/usablica/progress.js
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2013 usabli.ca - Afshin Mehrabani (@afshinmeh)
|
||||
*/
|
||||
|
||||
(exports => {
|
||||
//Default config/variables
|
||||
const doc = document,
|
||||
defined = v => undefined !== v;
|
||||
let progressjsId = 1;
|
||||
|
||||
/**
|
||||
* ProgressJs main class
|
||||
*
|
||||
* @class ProgressJs
|
||||
*/
|
||||
function ProgressJs(obj) {
|
||||
this._targetElement = defined(obj.length) ? obj : [obj];
|
||||
}
|
||||
|
||||
/**
|
||||
* Set progress bar for specific element
|
||||
*
|
||||
* @api private
|
||||
* @method _setProgress
|
||||
* @param {Object} targetElement
|
||||
*/
|
||||
function _setProgress(targetElement) {
|
||||
|
||||
//if the target element already as `data-progressjs`, ignore the init
|
||||
if (targetElement.hasAttribute("data-progressjs"))
|
||||
return;
|
||||
|
||||
targetElement.setAttribute("data-progressjs", progressjsId);
|
||||
|
||||
var progressElementContainer = doc.createElement('div');
|
||||
progressElementContainer.className = 'progressjs-progress progressjs-theme-rainloop';
|
||||
progressElementContainer.setAttribute("data-progressjs", 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";
|
||||
progressElement.appendChild(progressPercentElement);
|
||||
|
||||
//append the element to container
|
||||
doc.querySelector('.progressjs-container').appendChild(progressElementContainer);
|
||||
|
||||
_setPercentFor(targetElement, 1);
|
||||
|
||||
//and increase the progressId
|
||||
++progressjsId;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set percent for specific element
|
||||
*
|
||||
* @api private
|
||||
* @method _setPercentFor
|
||||
* @param {Object} targetElement
|
||||
* @param {Number} percent
|
||||
*/
|
||||
function _setPercentFor(targetElement, percent) {
|
||||
//prevent overflow!
|
||||
if (percent >= 100)
|
||||
percent = 100;
|
||||
|
||||
if (targetElement.hasAttribute("data-progressjs")) {
|
||||
//setTimeout for better CSS3 animation applying in some cases
|
||||
setTimeout(() => {
|
||||
var percentElement = _getPercentElement(targetElement);
|
||||
percentElement.style.width = parseInt(percent) + '%';
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the progress bar element
|
||||
*
|
||||
* @api private
|
||||
* @method _getPercentElement
|
||||
* @param {Object} targetElement
|
||||
*/
|
||||
function _getPercentElement(targetElement) {
|
||||
var progressjsId = parseInt(targetElement.getAttribute('data-progressjs'));
|
||||
return doc.querySelector('.progressjs-container > .progressjs-progress[data-progressjs="' + progressjsId + '"] > .progressjs-inner');
|
||||
}
|
||||
|
||||
var progressJs = function (targetElm) {
|
||||
if (typeof (targetElm) === 'object') {
|
||||
//Ok, create a new instance
|
||||
return new ProgressJs(targetElm);
|
||||
}
|
||||
if (typeof (targetElm) === 'string') {
|
||||
//select the target element with query selector
|
||||
var targetElement = doc.querySelectorAll(targetElm);
|
||||
|
||||
if (targetElement) {
|
||||
return new ProgressJs(targetElement);
|
||||
}
|
||||
throw new Error('There is no element with given selector.');
|
||||
}
|
||||
return new ProgressJs(doc.body);
|
||||
};
|
||||
|
||||
//Prototype
|
||||
progressJs.fn = ProgressJs.prototype = {
|
||||
start: function() {
|
||||
//first check if we have an container already, we don't need to create it again
|
||||
if (!doc.querySelector(".progressjs-container")) {
|
||||
//create the container for progress bar
|
||||
var containerElement = doc.createElement("div");
|
||||
containerElement.className = "progressjs-container";
|
||||
doc.body.appendChild(containerElement);
|
||||
}
|
||||
var p = this;
|
||||
p._targetElement.forEach(item => _setProgress.call(p, item));
|
||||
return p;
|
||||
},
|
||||
set: function(percent) {
|
||||
var p = this;
|
||||
p._targetElement.forEach(item => _setPercentFor.call(p, item, percent));
|
||||
return p;
|
||||
},
|
||||
end: function() {
|
||||
var p = this;
|
||||
//call onBeforeEnd callback
|
||||
if (defined(p._onBeforeEndCallback)) {
|
||||
//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);
|
||||
}
|
||||
|
||||
p._targetElement.forEach(currentElement => {
|
||||
var percentElement = _getPercentElement(currentElement);
|
||||
|
||||
if (!percentElement)
|
||||
return;
|
||||
|
||||
var existingPercent = parseInt(percentElement.style.width.replace('%', ''));
|
||||
|
||||
if (existingPercent < 100) {
|
||||
_setPercentFor.call(p, currentElement, 100);
|
||||
}
|
||||
});
|
||||
|
||||
return p;
|
||||
},
|
||||
onbeforeend: function(providedCallback) {
|
||||
this._onBeforeEndCallback = providedCallback;
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
exports.progressJs = progressJs;
|
||||
return progressJs;
|
||||
})(this);
|
||||
181
vendors/Progress.js/src/progressjs.css
vendored
181
vendors/Progress.js/src/progressjs.css
vendored
|
|
@ -1,181 +0,0 @@
|
|||
.progressjs-inner {
|
||||
width: 0;
|
||||
}
|
||||
.progressjs-progress {
|
||||
z-index: 9999999;
|
||||
}
|
||||
|
||||
/* blue theme, like iOS 7 progress bar */
|
||||
.progressjs-theme-blue .progressjs-inner {
|
||||
height: 2px;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
background-color: #3498db;
|
||||
}
|
||||
.progressjs-theme-blue.progressjs-end {
|
||||
-webkit-transition: opacity 0.2s ease-out;
|
||||
-moz-transition: opacity 0.2s ease-out;
|
||||
-o-transition: opacity 0.2s ease-out;
|
||||
transition: opacity 0.2s ease-out;
|
||||
opacity: 0;
|
||||
}
|
||||
.progressjs-theme-blue .progressjs-percent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* blue theme with overlay layer, no percent bar */
|
||||
.progressjs-theme-blueOverlay {
|
||||
background-color: white;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
.progressjs-theme-blueOverlay .progressjs-inner {
|
||||
height: 100%;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
background-color: #3498db;
|
||||
}
|
||||
.progressjs-theme-blueOverlay.progressjs-end {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.progressjs-theme-blueOverlay .progressjs-percent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* blue theme with overlay layer, no percent bar */
|
||||
.progressjs-theme-blueOverlay {
|
||||
background-color: white;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
.progressjs-theme-blueOverlay .progressjs-inner {
|
||||
height: 100%;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
background-color: #3498db;
|
||||
}
|
||||
.progressjs-theme-blueOverlay.progressjs-end {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.progressjs-theme-blueOverlay .progressjs-percent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Blue theme with border radius and overlay layer */
|
||||
.progressjs-theme-blueOverlayRadius {
|
||||
background-color: white;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.progressjs-theme-blueOverlayRadius .progressjs-inner {
|
||||
height: 100%;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
background-color: #3498db;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.progressjs-theme-blueOverlayRadius.progressjs-end {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.progressjs-theme-blueOverlayRadius .progressjs-percent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Blue theme with border radius and overlay layer */
|
||||
.progressjs-theme-blueOverlayRadiusHalfOpacity {
|
||||
background-color: white;
|
||||
opacity: 0.5;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.progressjs-theme-blueOverlayRadiusHalfOpacity .progressjs-inner {
|
||||
height: 100%;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
background-color: #3498db;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.progressjs-theme-blueOverlayRadiusHalfOpacity.progressjs-end {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.progressjs-theme-blueOverlayRadiusHalfOpacity .progressjs-percent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Blue theme with border radius, overlay layer and percent bar */
|
||||
.progressjs-theme-blueOverlayRadiusWithPercentBar {
|
||||
background-color: white;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.progressjs-theme-blueOverlayRadiusWithPercentBar .progressjs-inner {
|
||||
height: 100%;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
background-color: #3498db;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.progressjs-theme-blueOverlayRadiusWithPercentBar.progressjs-end {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.progressjs-theme-blueOverlayRadiusWithPercentBar .progressjs-percent {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
margin-right: -35px;
|
||||
top: 50%;
|
||||
margin-top: -20px;
|
||||
font-size: 30px;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.progressjs-theme-blackRadiusInputs {
|
||||
height: 10px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progressjs-theme-blackRadiusInputs .progressjs-inner {
|
||||
height: 2px;
|
||||
-webkit-transition: all 1s ease-out;
|
||||
-moz-transition: all 1s ease-out;
|
||||
-o-transition: all 1s ease-out;
|
||||
transition: all 1s ease-out;
|
||||
background-color: #34495e;
|
||||
}
|
||||
.progressjs-theme-blackRadiusInputs.progressjs-end {
|
||||
-webkit-transition: opacity 0.2s ease-out;
|
||||
-moz-transition: opacity 0.2s ease-out;
|
||||
-o-transition: opacity 0.2s ease-out;
|
||||
transition: opacity 0.2s ease-out;
|
||||
opacity: 0;
|
||||
}
|
||||
.progressjs-theme-blackRadiusInputs .progressjs-percent {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Reference in a new issue