diff --git a/vendor/assets/javascripts/nprogress.js b/vendor/assets/javascripts/nprogress.js index 1a05eaf..f0bd096 100644 --- 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: '
' }; @@ -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 index 81baff1..93c4b04 100644 --- 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(); }); });