Using PJAX + NProgress

iissnan · iissnan · commit 0bf1bbfd0155 · 2014-09-06T12:33:05.000+08:00
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -1,14 +1,6 @@
 (function () {
-    function getFileNameFromUri(uri) {
-        var pathName = uri.split("/");
-        if (pathName.length > 0) {
-            return pathName[pathName.length - 1];
-        }
-        return "";
-    }
-
     var currentFileName = getFileNameFromUri(window.location.pathname);
-    $(".sub-nav a").each(function() {
+    $(".sub-nav").find('a').each(function() {
         if (getFileNameFromUri(this.href) === currentFileName) {
             $(this)
                 .click(function(){
@@ -17,4 +9,21 @@
                 .parent().addClass("active");
         }
     });
+
+    function getFileNameFromUri(uri) {
+        var pathName = uri.split("/");
+        if (pathName.length > 0) {
+            return pathName[pathName.length - 1];
+        }
+        return "";
+    }
+
+    $(document)
+        .pjax('a', '#pjax-container', {fragment: '#pjax-container'})
+        .on('pjax:start', function () {
+            NProgress.start();
+        })
+        .on('pjax:end', function () {
+            NProgress.done();
+        });
 }());
diff --git a/template/about.jade b/template/about.jade
@@ -111,3 +111,4 @@ block prepend scripts
     script(src="assets/vendor/nprogress/nprogress.js")
     script(src="assets/vendor/bootstrap/dist/js/bootstrap.min.js")
     script(src="assets/vendor/github-buttons/dist/github-buttons.js")
+    script(src="assets/js/main.js")
diff --git a/template/index.jade b/template/index.jade
@@ -30,3 +30,4 @@ block prepend scripts
     script(src="assets/vendor/jquery-pjax/jquery.pjax.js")
     script(src="assets/vendor/nprogress/nprogress.js")
     script(src="assets/vendor/bootstrap/dist/js/bootstrap.min.js")
+    script(src="assets/js/main.js")
diff --git a/template/layout.jade b/template/layout.jade
@@ -10,25 +10,26 @@ html
     body
         a.sr-only(href="#main") SKIP TO CONTENT
 
-        div#header.navbar.navbar-fixed-top.navbar-inverse
-            div.container
-                div.navbar-header
-                    block brand
-
-                    button.navbar-toggle(type="button", data-toggle="collapse", data-target=".navigation")
-                        span.sr-only Toggle Navigation
-                        span.icon-bar
-                        span.icon-bar
-                        span.icon-bar
-                div.navbar-collapse.collapse.navigation
-                    != menu
-
-
-        div.container#main
-            div.row.wrap
-                block row
-            div.footer
-                != footer
+        div#pjax-container
+            div#header.navbar.navbar-fixed-top.navbar-inverse
+                div.container
+                    div.navbar-header
+                        block brand
+
+                        button.navbar-toggle(type="button", data-toggle="collapse", data-target=".navigation")
+                            span.sr-only Toggle Navigation
+                            span.icon-bar
+                            span.icon-bar
+                            span.icon-bar
+                    div.navbar-collapse.collapse.navigation
+                        != menu
+
+
+            div.container#main
+                div.row.wrap
+                    block row
+                div.footer
+                    != footer
 
         block scripts
 
