Merge pull request #1 from djbender/master

updates to latest nprogress.js
caarlos0-graveyard · Aug 21, 2013 · aaa908a · aaa908a
2 parents 3d5a101 + 9b9099a
commit aaa908a
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 7 deletions.
diff --git a/vendor/assets/javascripts/nprogress.js b/vendor/assets/javascripts/nprogress.js
@@ -17,10 +17,12 @@
   var Settings = NProgress.settings = {
     minimum: 0.08,
     easing: 'ease',
+    positionUsing: '',
     speed: 200,
     trickle: true,
     trickleRate: 0.02,
     trickleSpeed: 800,
+    showSpinner: true,
     template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner"><div class="spinner-icon"></div></div>'
   };
 
@@ -63,10 +65,11 @@
     $progress[0].offsetWidth; /* Repaint */
 
     $progress.queue(function(next) {
-      $bar.css({
-        transition: 'all '+speed+'ms '+ease,
-        transform: 'translate3d('+toBarPerc(n)+'%,0,0)'
-      });
+      // Set positionUsing if it hasn't already been set
+      if (Settings.positionUsing == '') Settings.positionUsing = NProgress.getPositioningCSS();
+
+      // Add transition
+      $bar.css(barPositionCSS(n, speed, ease));
 
       if (n === 1) {
         // Fade out
@@ -175,13 +178,15 @@
       transform: 'translate3d('+perc+'%,0,0)'
     });
 
+    if(!Settings.showSpinner) $el.find('.spinner').hide();
+
     $el.appendTo(document.body);
 
     return $el;
   };
 
   /**
-   * (Internal) Removes the element. Opposite of render().
+   * Removes the element. Opposite of render().
    */
 
   NProgress.remove = function() {
@@ -197,6 +202,31 @@
     return ($("#nprogress").length > 0);
   };
 
+  /**
+   * Determine which positioning CSS rule to use.
+   */
+  NProgress.getPositioningCSS = function() {
+    // Sniff on document.body.style
+    var bodyStyle = document.body.style;
+
+    // Sniff prefixes
+    var vendorPrefix = ('WebkitTransform' in bodyStyle) ? 'Webkit' :
+                       ('MozTransform' in bodyStyle) ? 'Moz' :
+                       ('msTransform' in bodyStyle) ? 'ms' :
+                       ('OTransform' in bodyStyle) ? 'O' : '';
+
+    if (vendorPrefix + 'Perspective' in bodyStyle) {
+      // Modern browsers with 3D support, e.g. Webkit, IE10
+      return 'translate3d';
+    } else if (vendorPrefix + 'Transform' in bodyStyle) {
+      // Browsers without 3D support, e.g. IE9
+      return 'translate';
+    } else {
+      // Browsers without translate() support, e.g. IE7-8
+      return 'margin';
+    }
+  }
+
   /**
    * Helpers
    */
@@ -216,5 +246,28 @@
     return (-1 + n) * 100;
   }
 
+
+  /**
+   * (Internal) returns the correct CSS for changing the bar's
+   * position given an n percentage, and speed and ease from Settings
+   */
+
+  function barPositionCSS(n, speed, ease) {
+    var barCSS;
+
+    if (Settings.positionUsing == 'translate3d') {
+      barCSS = { transform: 'translate3d('+toBarPerc(n)+'%,0,0)' };
+    } else if (Settings.positionUsing == 'translate') {
+      barCSS = { transform: 'translate('+toBarPerc(n)+'%,0)' };
+    } else {
+      barCSS = { 'margin-left': toBarPerc(n)+'%' };
+    }
+
+    barCSS.transition = 'all '+speed+'ms '+ease;
+
+    return barCSS;
+  }
+
   return NProgress;
 });
+
diff --git a/vendor/assets/javascripts/nprogress_turbolinks.js b/vendor/assets/javascripts/nprogress_turbolinks.js
@@ -1,4 +1,5 @@
 $(function() {
-  $(document).on('page:fetch', function() { NProgress.start(); });
-  $(document).on('page:load',  function() { NProgress.done(); });
+  $(document).on('page:fetch',   function() { NProgress.start();  });
+  $(document).on('page:change',  function() { NProgress.done();   });
+  $(document).on('page:restore', function() { NProgress.remove(); });
 });