[Pkg-javascript-commits] [node-progressjs] 01/02: Import Upstream version 0.1.0
Daniel Ring
techwolf-guest at moszumanska.debian.org
Tue Jan 2 08:01:58 UTC 2018
This is an automated email from the git hooks/post-receive script.
techwolf-guest pushed a commit to branch master
in repository node-progressjs.
commit fe66107bdff9a5d5287e19dc251100dbee75e903
Author: Daniel Ring <dring at wolfishly.me>
Date: Mon Jan 1 23:34:30 2018 -0800
Import Upstream version 0.1.0
---
LICENSE | 20 ++
Makefile | 6 +
README.md | 65 ++++++
bower.json | 9 +
build/build.js | 30 +++
minified/progress.min.js | 11 +
minified/progressjs.min.css | 1 +
package.json | 17 ++
src/progress.js | 518 ++++++++++++++++++++++++++++++++++++++++++++
src/progressjs.css | 181 ++++++++++++++++
10 files changed, 858 insertions(+)
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..5d0d36c
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Afshin Mehrabani (afshin.meh at 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.
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..e4b9956
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,6 @@
+BASE = .
+
+build:
+ cd build && node build.js
+
+.PHONY: build
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e302ce3
--- /dev/null
+++ b/README.md
@@ -0,0 +1,65 @@
+# 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 at 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.
\ No newline at end of file
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..682cd30
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,9 @@
+{
+ "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"]
+}
diff --git a/build/build.js b/build/build.js
new file mode 100644
index 0000000..886db5a
--- /dev/null
+++ b/build/build.js
@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+
+var fs = require('fs'),
+ compressor = require('node-minify');
+
+new compressor.minify({
+ type: 'gcc',
+ fileIn: '../src/progress.js',
+ fileOut: '../minified/progress.min.js',
+ callback: function (err) {
+ if (err) {
+ console.log(err);
+ } else {
+ console.log("JS minified successfully.");
+ }
+ }
+});
+
+new compressor.minify({
+ type: 'yui-css',
+ fileIn: '../src/progressjs.css',
+ fileOut: '../minified/progressjs.min.css',
+ callback: function (err) {
+ if (err) {
+ console.log(err);
+ } else {
+ console.log("Main CSS minified successfully.");
+ }
+ }
+});
\ No newline at end of file
diff --git a/minified/progress.min.js b/minified/progress.min.js
new file mode 100644
index 0000000..f7c5b41
--- /dev/null
+++ b/minified/progress.min.js
@@ -0,0 +1,11 @@
+(function(l,e){"object"===typeof exports?e(exports):"function"===typeof define&&define.amd?define(["exports"],e):e(l)})(this,function(l){function e(a){this._targetElement="undefined"!=typeof a.length?a:[a];"undefined"===typeof window._progressjsId&&(window._progressjsId=1);"undefined"===typeof window._progressjsIntervals&&(window._progressjsIntervals={});this._options={theme:"blue",overlayMode:!1,considerTransition:!0}}function m(a,c){var d=this;100<=c&&(c=100);a.hasAttribute("data-progr [...]
+setTimeout(function(){"undefined"!=typeof d._onProgressCallback&&d._onProgressCallback.call(d,a,c);var b=h(a);b.style.width=parseInt(c)+"%";var b=b.querySelector(".progressjs-percent"),g=parseInt(b.innerHTML.replace("%","")),e=parseInt(c),j=function(a,b,c){var d=Math.abs(b-c);3>d?k=30:20>d?k=20:intervanIn=1;0!=b-c&&(a.innerHTML=(f?++b:--b)+"%",setTimeout(function(){j(a,b,c)},k))},f=!0;g>e&&(f=!1);var k=10;j(b,g,e)},50)}function h(a){a=parseInt(a.getAttribute("data-progressjs"));return do [...]
+a+'"] > .progressjs-inner')}function p(a){for(var c=0,d=this._targetElement.length;c<d;c++){var b=this._targetElement[c];if(b.hasAttribute("data-progressjs")){var g=h(b);(g=parseInt(g.style.width.replace("%","")))&&m.call(this,b,g+(a||1))}}}function q(){var a,c=document.createElement("fakeelement"),d={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in d)if(void 0!==c.style[a])return d[a]}var n=function(a) [...]
+typeof a)return new e(a);if("string"===typeof a){if(a=document.querySelectorAll(a))return new e(a);throw Error("There is no element with given selector.");}return new e(document.body)};n.version="0.1.0";n.fn=e.prototype={clone:function(){return new e(this)},setOption:function(a,c){this._options[a]=c;return this},setOptions:function(a){var c=this._options,d={},b;for(b in c)d[b]=c[b];for(b in a)d[b]=a[b];this._options=d;return this},start:function(){"undefined"!=typeof this._onBeforeStartC [...]
+this._onBeforeStartCallback.call(this);if(!document.querySelector(".progressjs-container")){var a=document.createElement("div");a.className="progressjs-container";document.body.appendChild(a)}for(var a=0,c=this._targetElement.length;a<c;a++){var d=this._targetElement[a];if(!d.hasAttribute("data-progressjs")){var b=d,g,e,j;"body"===b.tagName.toLowerCase()?(g=b.clientWidth,e=b.clientHeight):(g=b.offsetWidth,e=b.offsetHeight);for(var f=j=0;b&&!isNaN(b.offsetLeft)&&!isNaN(b.offsetTop);)j+=b. [...]
+f+=b.offsetTop,b=b.offsetParent;b=f;d.setAttribute("data-progressjs",window._progressjsId);f=document.createElement("div");f.className="progressjs-progress progressjs-theme-"+this._options.theme;f.style.position="body"===d.tagName.toLowerCase()?"fixed":"absolute";f.setAttribute("data-progressjs",window._progressjsId);var k=document.createElement("div");k.className="progressjs-inner";var h=document.createElement("div");h.className="progressjs-percent";h.innerHTML="1%";k.appendChild(h);thi [...]
+"body"===d.tagName.toLowerCase()?(f.style.left=0,f.style.right=0,f.style.top=0,f.style.bottom=0):(f.style.left=j+"px",f.style.top=b+"px",f.style.width=g+"px",this._options.overlayMode&&(f.style.height=e+"px"));f.appendChild(k);document.querySelector(".progressjs-container").appendChild(f);m(d,1);++window._progressjsId}}return this},set:function(a){for(var c=0,d=this._targetElement.length;c<d;c++)m.call(this,this._targetElement[c],a);return this},increase:function(a){p.call(this,a);return [...]
+c){var d=this,b=parseInt(this._targetElement[0].getAttribute("data-progressjs"));"undefined"!=typeof window._progressjsIntervals[b]&&clearInterval(window._progressjsIntervals[b]);window._progressjsIntervals[b]=setInterval(function(){p.call(d,a)},c);return this},end:function(){a:{"undefined"!=typeof this._onBeforeEndCallback&&(!0===this._options.considerTransition?h(this._targetElement[0]).addEventListener(q(),this._onBeforeEndCallback,!1):this._onBeforeEndCallback.call(this));for(var a=p [...]
+c=0,d=this._targetElement.length;c<d;c++){var b=this._targetElement[c],e=h(b);if(!e)break a;var l=1;100>parseInt(e.style.width.replace("%",""))&&(m.call(this,b,100),l=500);(function(a,b){setTimeout(function(){a.parentNode.className+=" progressjs-end";setTimeout(function(){a.parentNode.parentNode.removeChild(a.parentNode);b.removeAttribute("data-progressjs")},1E3)},l)})(e,b)}if(window._progressjsIntervals[a])try{clearInterval(window._progressjsIntervals[a]),window._progressjsIntervals[a]= [...]
+onbeforeend:function(a){if("function"===typeof a)this._onBeforeEndCallback=a;else throw Error("Provided callback for onbeforeend was not a function");return this},onbeforestart:function(a){if("function"===typeof a)this._onBeforeStartCallback=a;else throw Error("Provided callback for onbeforestart was not a function");return this},onprogress:function(a){if("function"===typeof a)this._onProgressCallback=a;else throw Error("Provided callback for onprogress was not a function");return this}} [...]
+n});
diff --git a/minified/progressjs.min.css b/minified/progressjs.min.css
new file mode 100644
index 0000000..9ac739e
--- /dev/null
+++ b/minified/progressjs.min.css
@@ -0,0 +1 @@
+.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 .progress [...]
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..4172afc
--- /dev/null
+++ b/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "Progress.js",
+ "description": "Themeable HTML5 progress bar library",
+ "version": "0.1.0",
+ "author": "Afshin Mehrabani <afshin.meh at gmail.com>",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/usablica/progress.js"
+ },
+ "devDependencies": {
+ "node-minify": "*"
+ },
+ "engine": [
+ "node >=0.1.90"
+ ],
+ "main": "src/progress.js"
+}
\ No newline at end of file
diff --git a/src/progress.js b/src/progress.js
new file mode 100644
index 0000000..9669e8e
--- /dev/null
+++ b/src/progress.js
@@ -0,0 +1,518 @@
+/**
+ * Progress.js v0.1.0
+ * https://github.com/usablica/progress.js
+ * MIT licensed
+ *
+ * Copyright (C) 2013 usabli.ca - Afshin Mehrabani (@afshinmeh)
+ */
+
+(function (root, factory) {
+ if (typeof exports === 'object') {
+ // CommonJS
+ factory(exports);
+ } else if (typeof define === 'function' && define.amd) {
+ // AMD. Register as an anonymous module.
+ define(['exports'], factory);
+ } else {
+ // Browser globals
+ factory(root);
+ }
+} (this, function (exports) {
+ //Default config/variables
+ var VERSION = '0.1.0';
+
+ /**
+ * ProgressJs main class
+ *
+ * @class ProgressJs
+ */
+ function ProgressJs(obj) {
+
+ if (typeof obj.length != 'undefined') {
+ this._targetElement = obj;
+ } else {
+ this._targetElement = [obj];
+ }
+
+ if (typeof window._progressjsId === 'undefined')
+ window._progressjsId = 1;
+
+ if (typeof window._progressjsIntervals === 'undefined')
+ window._progressjsIntervals = {};
+
+ this._options = {
+ //progress bar theme
+ theme: 'blue',
+ //overlay mode makes an overlay layer in the target element
+ overlayMode: false,
+ //to consider CSS3 transitions in events
+ considerTransition: true
+ };
+ }
+
+ /**
+ * Start progress for specific element(s)
+ *
+ * @api private
+ * @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]);
+ }
+ }
+
+ /**
+ * 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;
+
+ //get target element position
+ var targetElementOffset = _getOffset.call(this, targetElement);
+
+ targetElement.setAttribute("data-progressjs", window._progressjsId);
+
+ var progressElementContainer = document.createElement('div');
+ progressElementContainer.className = 'progressjs-progress progressjs-theme-' + this._options.theme;
+
+
+ //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.setAttribute("data-progressjs", window._progressjsId);
+ var progressElement = document.createElement("div");
+ progressElement.className = "progressjs-inner";
+
+ //create an element for current percent of progress bar
+ var progressPercentElement = document.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 = document.querySelector('.progressjs-container');
+ container.appendChild(progressElementContainer);
+
+ _setPercentFor(targetElement, 1);
+
+ //and increase the progressId
+ ++window._progressjsId;
+ }
+
+ /**
+ * Set percent for all elements
+ *
+ * @api private
+ * @method _setPercent
+ * @param {Number} percent
+ */
+ function _setPercent(percent) {
+ for (var i = 0, elmsLength = this._targetElement.length; i < elmsLength; i++) {
+ _setPercentFor.call(this, this._targetElement[i], percent);
+ }
+ }
+
+ /**
+ * Set percent for specific element
+ *
+ * @api private
+ * @method _setPercentFor
+ * @param {Object} targetElement
+ * @param {Number} percent
+ */
+ function _setPercentFor(targetElement, percent) {
+ var self = this;
+
+ //prevent overflow!
+ if (percent >= 100)
+ percent = 100;
+
+ if (targetElement.hasAttribute("data-progressjs")) {
+ //setTimeout for better CSS3 animation applying in some cases
+ setTimeout(function() {
+
+ //call the onprogress callback
+ if (typeof self._onProgressCallback != 'undefined') {
+ self._onProgressCallback.call(self, targetElement, percent);
+ }
+
+ var percentElement = _getPercentElement(targetElement);
+ percentElement.style.width = parseInt(percent) + '%';
+
+ var percentElement = percentElement.querySelector(".progressjs-percent");
+ var existingPercent = parseInt(percentElement.innerHTML.replace('%', ''));
+
+ //start increase/decrease the percent element with animation
+ (function(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 {
+ intervanIn = 1;
+ }
+
+ if ((existingPercent - currentPercent) != 0) {
+ //set the percent
+ percentElement.innerHTML = (increasement ? (++existingPercent) : (--existingPercent)) + '%';
+ setTimeout(function() { changePercentTimer(percentElement, existingPercent, currentPercent); }, intervalIn);
+ }
+ }
+
+ changePercentTimer(percentElement, existingPercent, currentPercent);
+
+ })(percentElement, existingPercent, 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 document.querySelector('.progressjs-container > .progressjs-progress[data-progressjs="' + progressjsId + '"] > .progressjs-inner');
+ }
+
+ /**
+ * Auto increase the progress bar every X milliseconds
+ *
+ * @api private
+ * @method _autoIncrease
+ * @param {Number} size
+ * @param {Number} millisecond
+ */
+ function _autoIncrease(size, millisecond) {
+ var self = this;
+
+ var progressjsId = parseInt(this._targetElement[0].getAttribute('data-progressjs'));
+
+ if (typeof window._progressjsIntervals[progressjsId] != 'undefined') {
+ clearInterval(window._progressjsIntervals[progressjsId]);
+ }
+ window._progressjsIntervals[progressjsId] = setInterval(function() {
+ _increasePercent.call(self, size);
+ }, millisecond);
+ }
+
+ /**
+ * Increase the size of progress bar
+ *
+ * @api private
+ * @method _increasePercent
+ * @param {Number} size
+ */
+ function _increasePercent(size) {
+ for (var i = 0, elmsLength = this._targetElement.length; i < elmsLength; i++) {
+ var currentElement = this._targetElement[i];
+ if (currentElement.hasAttribute('data-progressjs')) {
+ var percentElement = _getPercentElement(currentElement);
+ var existingPercent = parseInt(percentElement.style.width.replace('%', ''));
+ if (existingPercent) {
+ _setPercentFor.call(this, currentElement, existingPercent + (size || 1));
+ }
+ }
+ }
+ }
+
+ /**
+ * Close and remove progress bar
+ *
+ * @api private
+ * @method _end
+ */
+ function _end() {
+
+ //call onBeforeEnd callback
+ 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);
+ } else {
+ this._onBeforeEndCallback.call(this);
+ }
+ }
+
+ 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 percentElement = _getPercentElement(currentElement);
+
+ if (!percentElement)
+ return;
+
+ var existingPercent = parseInt(percentElement.style.width.replace('%', ''));
+
+ var timeoutSec = 1;
+ if (existingPercent < 100) {
+ _setPercentFor.call(this, 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.parentNode.className += " progressjs-end";
+
+ setTimeout(function() {
+ //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 (window._progressjsIntervals[progressjsId]) {
+ //`delete` keyword has some problems in IE
+ try {
+ clearInterval(window._progressjsIntervals[progressjsId]);
+ window._progressjsIntervals[progressjsId] = null;
+ delete window._progressjsIntervals[progressjsId];
+ } catch(ex) { }
+ }
+ }
+
+ /**
+ * Create the progress bar container
+ *
+ * @api private
+ * @method _createContainer
+ */
+ function _createContainer() {
+ //first check if we have an container already, we don't need to create it again
+ if (!document.querySelector(".progressjs-container")) {
+ var containerElement = document.createElement("div");
+ containerElement.className = "progressjs-container";
+ document.body.appendChild(containerElement);
+ }
+ }
+
+ /**
+ * 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 = {};
+
+ 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
+ var _x = 0;
+ var _y = 0;
+ 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;
+ }
+
+ /**
+ * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
+ * via: http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically
+ *
+ * @param obj1
+ * @param obj2
+ * @returns obj3 a new object based on obj1 and obj2
+ */
+ function _mergeOptions(obj1, obj2) {
+ var obj3 = {};
+ for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
+ for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
+ return obj3;
+ }
+
+ var progressJs = function (targetElm) {
+ if (typeof (targetElm) === 'object') {
+ //Ok, create a new instance
+ return new ProgressJs(targetElm);
+
+ } else if (typeof (targetElm) === 'string') {
+ //select the target element with query selector
+ var targetElement = document.querySelectorAll(targetElm);
+
+ if (targetElement) {
+ return new ProgressJs(targetElement);
+ } else {
+ throw new Error('There is no element with given selector.');
+ }
+ } else {
+ return new ProgressJs(document.body);
+ }
+ };
+
+ /**
+ * Get correct transition callback
+ * Thanks @webinista: http://stackoverflow.com/a/9090128/375966
+ *
+ * @returns transition name
+ */
+ function whichTransitionEvent() {
+ var t;
+ var el = document.createElement('fakeelement');
+ var transitions = {
+ 'transition': 'transitionend',
+ 'OTransition': 'oTransitionEnd',
+ 'MozTransition': 'transitionend',
+ 'WebkitTransition': 'webkitTransitionEnd'
+ }
+
+ for (t in transitions) {
+ if (el.style[t] !== undefined) {
+ return transitions[t];
+ }
+ }
+ }
+
+ /**
+ * Current ProgressJs version
+ *
+ * @property version
+ * @type String
+ */
+ progressJs.version = VERSION;
+
+ //Prototype
+ progressJs.fn = ProgressJs.prototype = {
+ clone: function () {
+ return new ProgressJs(this);
+ },
+ setOption: function(option, value) {
+ this._options[option] = value;
+ return this;
+ },
+ setOptions: function(options) {
+ this._options = _mergeOptions(this._options, options);
+ return this;
+ },
+ start: function() {
+ _startProgress.call(this);
+ return this;
+ },
+ set: function(percent) {
+ _setPercent.call(this, percent);
+ return this;
+ },
+ increase: function(size) {
+ _increasePercent.call(this, size);
+ return this;
+ },
+ autoIncrease: function(size, millisecond) {
+ _autoIncrease.call(this, size, millisecond);
+ return this;
+ },
+ end: function() {
+ _end.call(this);
+ return this;
+ },
+ onbeforeend: function(providedCallback) {
+ if (typeof (providedCallback) === 'function') {
+ this._onBeforeEndCallback = providedCallback;
+ } else {
+ throw new Error('Provided callback for onbeforeend was not a function');
+ }
+ return this;
+ },
+ onbeforestart: function(providedCallback) {
+ if (typeof (providedCallback) === 'function') {
+ this._onBeforeStartCallback = providedCallback;
+ } else {
+ throw new Error('Provided callback for onbeforestart was not a function');
+ }
+ return this;
+ },
+ onprogress: function(providedCallback) {
+ if (typeof (providedCallback) === 'function') {
+ this._onProgressCallback = providedCallback;
+ } else {
+ throw new Error('Provided callback for onprogress was not a function');
+ }
+ return this;
+ }
+ };
+
+ exports.progressJs = progressJs;
+ return progressJs;
+}));
diff --git a/src/progressjs.css b/src/progressjs.css
new file mode 100644
index 0000000..892bd6f
--- /dev/null
+++ b/src/progressjs.css
@@ -0,0 +1,181 @@
+.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;
+}
\ No newline at end of file
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/node-progressjs.git
More information about the Pkg-javascript-commits
mailing list