From 16fbf96110df0adee44ce092b69119cb1c379e0c Mon Sep 17 00:00:00 2001 From: Amin Bandali Date: Mon, 17 Feb 2014 20:26:43 -0500 Subject: [PATCH 1/5] README.md typos --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index e302ce3..d589507 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ # ProgressJS -> ProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page. +> ProgressJs is a JavaScript and CSS3 library which helps developers create and manage progress bars for every object on the page. ## How To Use -1) Include `progress.js` and `progressjs.css` in the page (use minified version from `minified` folder for production) +1) Include `progress.js` and `progressjs.css` in the page (use the minified version from `minified` folder for production) -2) Execute following JavaScript code in the page: +2) Execute the following JavaScript code in the page: ```javascript //to set progress-bar for whole page @@ -16,7 +16,7 @@ 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. +Use other methods to increase, decrease or set an auto-increase function for your progress-bar. Furthermore, you can change the template using `setOption` method. ## API @@ -24,9 +24,9 @@ Check the API and method usage with example here: https://github.com/usablica/pr ## Build -First you should install `nodejs` and `npm`, then first run this command: `npm install` to install all dependencies. +First, you should install `nodejs` and `npm`, then run this command: `npm install` to install all dependencies. -Now you can run this command to minify all static resources: +Now you can run this command to minify all the static resources: make build @@ -62,4 +62,4 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI 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 +IN THE SOFTWARE. From a610a399ca4573165c6d2967a34a565d25708913 Mon Sep 17 00:00:00 2001 From: Alex Beauchemin Date: Fri, 9 May 2014 13:28:44 -0400 Subject: [PATCH 2/5] Avoid "Cannot read property 'getAttribute' of undefined" errors when element doesn't exists anymore. --- src/progress.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/progress.js b/src/progress.js index 9669e8e..9d37167 100644 --- a/src/progress.js +++ b/src/progress.js @@ -241,8 +241,10 @@ */ function _autoIncrease(size, millisecond) { var self = this; - - var progressjsId = parseInt(this._targetElement[0].getAttribute('data-progressjs')); + + var target = this._targetElement[0]; + if(!target) return; + var progressjsId = parseInt(target.getAttribute('data-progressjs')); if (typeof window._progressjsIntervals[progressjsId] != 'undefined') { clearInterval(window._progressjsIntervals[progressjsId]); @@ -288,9 +290,11 @@ } else { this._onBeforeEndCallback.call(this); } - } + } - var progressjsId = parseInt(this._targetElement[0].getAttribute('data-progressjs')); + var target = this._targetElement[0]; + if(!target) return; + var progressjsId = parseInt(target.getAttribute('data-progressjs')); for (var i = 0, elmsLength = this._targetElement.length; i < elmsLength; i++) { var currentElement = this._targetElement[i]; From 28e3ff0cb1d82168564a0a5bcd9dccb1c91d6714 Mon Sep 17 00:00:00 2001 From: bramgg Date: Sun, 20 Jul 2014 06:57:19 -0700 Subject: [PATCH 3/5] added kill method --- src/progress.js | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/src/progress.js b/src/progress.js index 9d37167..32a8769 100644 --- a/src/progress.js +++ b/src/progress.js @@ -338,6 +338,51 @@ } } + /** + * Remove progress bar without finishing + * + * @api private + * @method _kill + */ + function _kill() { + var target = this._targetElement[0]; + if(!target) return; + var progressjsId = parseInt(target.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('%', '')); + + //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) { + 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); + })(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 * @@ -491,6 +536,10 @@ _end.call(this); return this; }, + kill: function() { + _kill.call(this); + return this; + }, onbeforeend: function(providedCallback) { if (typeof (providedCallback) === 'function') { this._onBeforeEndCallback = providedCallback; From f9c9895f6673c0d1120ea08362cdd8489bbfd529 Mon Sep 17 00:00:00 2001 From: bramgg Date: Sun, 20 Jul 2014 07:01:55 -0700 Subject: [PATCH 4/5] cleaned up kill method --- src/progress.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/progress.js b/src/progress.js index 32a8769..842bd39 100644 --- a/src/progress.js +++ b/src/progress.js @@ -356,8 +356,6 @@ if (!percentElement) return; - var existingPercent = parseInt(percentElement.style.width.replace('%', '')); - //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) { From e76e0a96092a959b55632f7d2dfd32ba5815ba80 Mon Sep 17 00:00:00 2001 From: bramgg Date: Mon, 21 Jul 2014 16:16:20 -0700 Subject: [PATCH 5/5] scale bar with browser resize --- src/progress.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/progress.js b/src/progress.js index 842bd39..40f50f3 100644 --- a/src/progress.js +++ b/src/progress.js @@ -122,7 +122,12 @@ //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 targetElement is body set to percent so it scales with browser resize + if (targetElement.nodeName == 'BODY') { + progressElementContainer.style.width = '100%'; + } else { + progressElementContainer.style.width = targetElementOffset.width + 'px'; + } if (this._options.overlayMode) { progressElementContainer.style.height = targetElementOffset.height + 'px';