diff --git a/Readme.md b/Readme.md index b0245e7..9230848 100644 --- a/Readme.md +++ b/Readme.md @@ -149,12 +149,28 @@ NProgress.configure({ showSpinner: false }); ~~~ #### `parent` -specify this to change the parent container. (default: `body`) +Specify this to change the parent container. (default: `body`) ~~~ js NProgress.configure({ parent: '#container' }); ~~~ +#### `forceRedraw` +Force redraw in the browser when the progress changes. Can have performance implications. (default: `false`) + +~~~ js +NProgress.configure({ forceRedraw: 'true' }); +~~~ + +#### `removeFromDOM` +Remove the component from the DOM when done, re-add when needed. This can have performance implications on complex apps in IE 11 as style calculations are slow. (default: `false`) + +~~~ js +NProgress.configure({ removeFromDOM: 'true' }); +~~~ + + + Customization ------------- diff --git a/nprogress.js b/nprogress.js index 708bee1..dede924 100644 --- a/nprogress.js +++ b/nprogress.js @@ -24,6 +24,8 @@ trickle: true, trickleSpeed: 250, showSpinner: true, + removeFromDOM: false, + forceRedraw: false, barSelector: '[role="bar"]', spinnerSelector: '[role="spinner"]', parent: 'body', @@ -71,7 +73,11 @@ speed = Settings.speed, ease = Settings.easing; - progress.offsetWidth; /* Repaint */ + + if(Settings.forceRedraw) + { + progress.offsetWidth; /* Repaint */ + } queue(function(next) { // Set positionUsing if it hasn't already been set @@ -86,7 +92,11 @@ transition: 'none', opacity: 1 }); - progress.offsetWidth; /* Repaint */ + + if(Settings.forceRedraw) + { + progress.offsetWidth; /* Repaint */ + } setTimeout(function() { css(progress, { @@ -118,6 +128,16 @@ * */ NProgress.start = function() { + + + if(NProgress.isRendered() && !Settings.removeFromDOM) + { + var progress= document.getElementById('nprogress'); + //Marius - set to visible after hiding + progress.style.visibility = "visible"; + NProgress.status = null; + } + if (!NProgress.status) NProgress.set(0); var work = function() { @@ -269,10 +289,19 @@ */ NProgress.remove = function() { - removeClass(document.documentElement, 'nprogress-busy'); - removeClass(document.querySelector(Settings.parent), 'nprogress-custom-parent'); - var progress = document.getElementById('nprogress'); - progress && removeElement(progress); + if(!Settings.removeFromDOM) + { + //Marius change - hide rather than remove from DOM, as this is super expensive in IE + var progress = document.getElementById('nprogress'); + progress.style.visibility = "hidden"; + } + else + { + removeClass(document.documentElement, 'nprogress-busy'); + removeClass(document.querySelector(Settings.parent), 'nprogress-custom-parent'); + var progress = document.getElementById('nprogress'); + progress && removeElement(progress); + } }; /** diff --git a/test/test.js b/test/test.js index a381b09..9e3ff72 100644 --- a/test/test.js +++ b/test/test.js @@ -41,7 +41,16 @@ assert.equal($("#nprogress").length, 1); setTimeout(function() { + + if(NProgress.settings.removeFromDOM) + { assert.equal($("#nprogress").length, 0); + } + else + { + $("#nprogress").visibility = "hidden"; + } + done(); }, 70); }); @@ -109,8 +118,17 @@ NProgress.remove(); var parent = $(NProgress.settings.parent); - assert.isFalse(parent.hasClass('nprogress-custom-parent')); - assert.equal(parent.find('#nprogress').length, 0); + + if(NProgress.settings.removeFromDOM) + { + assert.isFalse(parent.hasClass('nprogress-custom-parent')); + assert.equal(parent.find('#nprogress').length, 0); + } + else + { + $("#nprogress").visibility = "hidden"; + } + }); });