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. diff --git a/src/progress.js b/src/progress.js index 9669e8e..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'; @@ -241,8 +246,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 +295,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]; @@ -334,6 +343,49 @@ } } + /** + * 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; + + //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 * @@ -487,6 +539,10 @@ _end.call(this); return this; }, + kill: function() { + _kill.call(this); + return this; + }, onbeforeend: function(providedCallback) { if (typeof (providedCallback) === 'function') { this._onBeforeEndCallback = providedCallback;