feat(js): Replace NProgress with Pace. Closes #42

oswaldoacauan · May 27, 2014 · f0a4adf · f0a4adf
1 parent 52bdb5c
commit f0a4adf
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 16 deletions.
diff --git a/bower.json b/bower.json
@@ -20,8 +20,8 @@
   "devDependencies": {
     "fastclick": "~0.6.10",
     "font-awesome": "~4.1.0",
-    "jquery-pjax": "~1.7.3",
-    "nprogress": "~0.1.2",
-    "prism": "gh-pages"
+    "prism": "gh-pages",
+    "pace": "~0.5.1",
+    "jquery-pjax": "master"
   }
 }
diff --git a/src/assets/_scss/partials/_main.scss b/src/assets/_scss/partials/_main.scss
@@ -16,9 +16,13 @@ body {
   backface-visibility: hidden;
   opacity: 1;
 
-  .nprogress-busy & {
+  .pace-running & {
     transition-delay: .1s;
-    opacity: 0;
+    //opacity: 0;
+  }
+
+  .pace-done & {
+    //opacity: 1;
   }
 
   .drawer-transition & {

diff --git a/src/assets/_scss/style.scss b/src/assets/_scss/style.scss
@@ -47,7 +47,7 @@
 // VENDOR
 //----------------------------------*/
 
-@import "vendor/_nprogress.scss";
+@import "vendor/_pace.scss";
 @import "vendor/_prism.scss";
 
 // External

diff --git a/src/assets/_scss/vendor/_pace.scss b/src/assets/_scss/vendor/_pace.scss
@@ -0,0 +1,3 @@
+.pace .pace-progress {
+  background: $primary-color;
+}
diff --git a/src/assets/js/scripts.js b/src/assets/js/scripts.js
@@ -1,4 +1,4 @@
-/* global FastClick: false, DISQUS: false, DISQUSWIDGETS: true, disqus_identifier:false, ga:false, Drawer: false, ImageLoader: false, NProgress: false, Prism: false */
+/* global FastClick: false, DISQUS: false, DISQUSWIDGETS: true, disqus_identifier:false, ga:false, Drawer: false, ImageLoader: false, Prism: false */
 (function ($, window, document, undefined) {
 
   'use strict';
@@ -100,7 +100,6 @@
     // =================
     if ($.support.pjax) {
       $document.on('pjax:start', function() {
-        NProgress.start();
         $surface.scrollTop(0);
       });
 
@@ -113,8 +112,6 @@
         $('[data-load-image]', $content).each(function() {
           ImageLoader.load($(this));
         });
-
-        NProgress.done();
       });
 
       var _pjaxOptions = {

diff --git a/src/default.hbs b/src/default.hbs
@@ -33,24 +33,37 @@
 
     <!-- build:css({src,.tmp}) /assets/css/main.min.css -->
     <link href="/assets/_components/font-awesome/css/font-awesome.css">
-    <link href="/assets/_components/nprogress/nprogress.css">
     <link href="/assets/_components/prism/themes/prism.css">
     <link href="/assets/_components/prism/plugins/autolinker/prism-autolinker.css">
+    <link href="/assets/_components/pace/themes/pace-theme-minimal.css">
     <link href="/assets/css/style.css">
     <!-- endbuild -->
 
-    <!-- build:js /assets/js/head-scripts.min.js -->
-    <script src="/assets/_components/modernizr/modernizr.js"></script>
-    <!-- endbuild -->
-
     <script type="text/javascript">
       {{> custom/config}}
 
+      // Pace Options
+      // ==============
+      window.paceOptions = {
+        catchupTime: 100,
+        minTime: 100,
+        elements: false,
+        restartOnRequestAfter: 500,
+        startOnPageLoad: false
+      }
+
+      // Ghostium Globals
+      // ==============
       window.GHOSTIUM = {};
       GHOSTIUM.haveGA = typeof ga_ua !== 'undefined' && ga_ua !== 'UA-XXXXX-X';
       GHOSTIUM.haveDisqus = typeof disqus_shortname !== 'undefined' && disqus_shortname !== 'example';
     </script>
 
+    <!-- build:js /assets/js/head-scripts.min.js -->
+    <script src="/assets/_components/modernizr/modernizr.js"></script>
+    <script src="/assets/_components/pace/pace.js"></script>
+    <!-- endbuild -->
+
     {{ghost_head}}
   </head>
   <body class="{{body_class}}">
@@ -72,7 +85,6 @@
 
     <!-- build:js /assets/js/foot-scripts.min.js -->
     <script src="/assets/_components/fastclick/lib/fastclick.js"></script>
-    <script src="/assets/_components/nprogress/nprogress.js"></script>
 
     <!-- PrismJS core, aditional languages and plugins -->
     <script src="/assets/_components/prism/prism.js"></script>