From fe657c9fb5a8c1e8776941abd1914e779b6305a1 Mon Sep 17 00:00:00 2001
From: Jon Jaques <jon@jonjaques.com>
Date: Wed, 4 Sep 2013 00:36:15 -0500
Subject: [PATCH] Add support for specifying parent container

---
 nprogress.css     | 14 ++++++++++++--
 nprogress.js      |  6 +++++-
 support/style.css | 12 ++++++++----
 test/test.js      | 21 +++++++++++++++++++++
 4 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/nprogress.css b/nprogress.css
index 6a98088..08ffc60 100644
--- a/nprogress.css
+++ b/nprogress.css
@@ -6,7 +6,7 @@
 #nprogress .bar {
   background: #29d;
 
-  position: fixed;
+  position: absolute;
   z-index: 100;
   top: 0;
   left: 0;
@@ -33,7 +33,7 @@
 /* Remove these to get rid of the spinner */
 #nprogress .spinner {
   display: block;
-  position: fixed;
+  position: absolute;
   z-index: 100;
   top: 15px;
   right: 15px;
@@ -53,6 +53,16 @@
           animation: nprogress-spinner 400ms linear infinite;
 }
 
+.nprogress-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+body.nprogress-parent #nprogress .bar,
+body.nprogress-parent #nprogress .spinner {
+  position: fixed;
+}
+
 @-webkit-keyframes nprogress-spinner {
   0%   { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360deg); }
diff --git a/nprogress.js b/nprogress.js
index 86e57ff..863f372 100644
--- a/nprogress.js
+++ b/nprogress.js
@@ -27,6 +27,7 @@
     trickleRate: 0.02,
     trickleSpeed: 800,
     showSpinner: true,
+    parent: 'body',
     template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
   };
 
@@ -185,7 +186,9 @@
     if (!Settings.showSpinner)
       $el.find('[role="spinner"]').remove();
 
-    $el.appendTo(document.body);
+    $(Settings.parent)
+      .addClass('nprogress-parent')
+      .append($el);
 
     return $el;
   };
@@ -195,6 +198,7 @@
    */
 
   NProgress.remove = function() {
+    $(Settings.parent).removeClass('nprogress-parent');
     $('html').removeClass('nprogress-busy');
     $('#nprogress').remove();
   };
diff --git a/support/style.css b/support/style.css
index 3c15363..1a78acf 100644
--- a/support/style.css
+++ b/support/style.css
@@ -3,6 +3,11 @@ i, b {
   font-weight: 400;
 }
 
+body, html {
+  padding: 0;
+  margin: 0;
+}
+
 body {
   background: white;
 }
@@ -130,11 +135,10 @@ button {
 }
 
 .page-header {
-  margin: 1.5em auto;
   text-align: center;
   max-width: 400px;
-  padding: 0 20px;
-  margin: 3em auto;
+  padding: 3em 20px;
+  margin: 0 auto;
 }
 
 .page-header h1 {
@@ -173,7 +177,7 @@ p.brief.big {
   .page-header h1 {
     font-size: 3em; }
   .page-header {
-    margin: 4.5em auto 3.5em auto;
+    padding: 4.5em 20px 3.5em 20px;
   }
 }
 
diff --git a/test/test.js b/test/test.js
index cd8f9dd..521d989 100644
--- a/test/test.js
+++ b/test/test.js
@@ -71,6 +71,14 @@
         NProgress.start();
         assert.equal(NProgress.status, NProgress.settings.minimum);
       });
+
+      it('must be attached to specified parent', function() {
+        var test = $('<div>', {id: 'test'}).appendTo('body');
+        NProgress.configure({parent: test});
+        NProgress.start();
+        assert.isTrue($("#nprogress").parent().is(test));
+        assert.isTrue($(NProgress.settings.parent).hasClass("nprogress-parent"));
+      });
     });
 
     // ----
@@ -91,6 +99,19 @@
 
     // ----
 
+    describe('.remove()', function() {
+      it('should be removed from the parent', function() {
+        NProgress.set(1);
+        NProgress.remove();
+
+        var parent = $(NProgress.settings.parent);
+        assert.isFalse(parent.hasClass('nprogress-parent'));
+        assert.equal(parent.find('#nprogress').length, 0);
+      });
+    })
+
+    // ----
+
     describe('.inc()', function() {
       it('should render', function() {
         NProgress.inc();