Merge pull request #187 from viosey/refactor/progressbar

feat(progressbar): revert NProgress

_config.template.yml

@@ -32,7 +32,8 @@ uiux:
     hyperlink_color: "#00838F"
     button_color: "#757575"
     android_chrome_color: "#0097A7"
-    buffer: "800"
+    nprogress_color: "#29d"
+    nprogress_buffer: "800"
 
 # JS Effect Switches
 js_effect:
@@ -76,19 +77,6 @@ img:
 # Custom Fonts
 fonts: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif
 
-# Pace Settings
-# Pace is automatic page load progress bar
-# You can find demos on http://github.hubspot.com/pace/docs/welcome
-# Warning: Line color mustn't delete or not define!
-#     style available values:
-#       barber-shop, big-counter, bounce, center-atom, center-circle, center-radar, center-simple,
-#       corner-indicator, fill-left, fill-left-nocolor, flat-top, loading-bar, macosx
-# Or you can use your own style,just set the style value to "custom",
-# and put your own css style to source/css/pace/custom.css
-# document can be find on:
-pace:
-     style:
-     color: "#29d"
 
 # ---------------------------------------------------------------
 # Menu Settings

layout/_partial/config_css.ejs

@@ -102,7 +102,7 @@
 <% if(theme.js_effect.fade === true) { %>
     <style>
       .fade {
-        transition: all <%= theme.uiux.buffer %>ms linear;
+        transition: all <%= theme.uiux.nprogress_buffer %>ms linear;
         -webkit-transform: translate3d(0,0,0);
         -moz-transform: translate3d(0,0,0);
         -ms-transform: translate3d(0,0,0);
@@ -116,81 +116,3 @@
       }
     </style>
 <% } %>
-
-<!--Pace color -->
-<% if(theme.pace.style === 'big-counter') { %>
-<% } else if(theme.pace.style === 'barber-shop') { %>
-    <style>
-      .pace .pace-progress {
-        background-color: <%= theme.pace.color %>;
-      }
-    </style>
-<% } else if(theme.pace.style === 'bounce') { %>
-    <style>
-      .pace .pace-activity {
-        background: <%= theme.pace.color %>;
-      }
-    </style>
-<% } else if(theme.pace.style === 'corner-indicator') { %>
-    <style>
-      .pace .pace-activity {
-        background: <%= theme.pace.color %>;
-      }
-    </style>
-<% } else if(theme.pace.style === 'center-simple') { %>
-    <style>
-      .pace .pace-progress {
-        background: <%= theme.pace.color %>;
-      }
-      .pace {
-        border: 1px solid <%= theme.pace.color %>;
-      }
-    </style>
-<% } else if(theme.pace.style === 'loading-bar') { %>
-    <style>
-      .pace .pace-progress {
-        background: <%= theme.pace.color %>;
-        color: <%= theme.pace.color %>;
-      }
-      .pace .pace-activity {
-        box-shadow: inset 0 0 0 2px <%= theme.pace.color %>, inset 0 0 0 7px #FFF;
-      }
-    </style>
-<% } else if(theme.pace.style === 'loading-bar') { %>
-    <style>
-      .pace .pace-progress {
-        background: <%= theme.pace.color %>;
-      }
-    </style>
-<% } else if(theme.pace.style === 'center-atom') { %>
-    <style>
-      .pace .pace-progress:before {
-        background: <%= theme.pace.color %>;
-      }
-      .pace .pace-activity {
-        border: 5px solid <%= theme.pace.color %>;
-      }
-      .pace .pace-activity:after {
-        border: 5px solid <%= theme.pace.color %>;
-      }
-      .pace .pace-activity:before {
-        border: 5px solid <%= theme.pace.color %>;
-      }
-    </style>
-<% } else if(theme.pace.style === 'center-radar') { %>
-    <style>
-      .pace .pace-activity {
-        border-color: <%= theme.pace.color %> transparent transparent;
-      }
-      .pace .pace-activity:before {
-        border-color: <%= theme.pace.color %> transparent transparent;
-      }
-    </style>
-<% } else if(theme.pace.style === 'custom') { %>
-<% } else { %>
-    <style>
-      .pace .pace-progress {
-        background-color: <%= theme.pace.color %>;
-      }
-    </style>
-<% } %>

layout/_partial/head.ejs

@@ -83,7 +83,6 @@
     <%- css('css/material.min') %>
     <%- css('css/style.min') %>
     <%- partial('_partial/config_css') %>
-    <%- css('css/pace/' + (theme.pace.style || 'minimal')) %>
 
     <%- js('js/jquery.min') %>
     <%- js('js/queue') %>

layout/_partial/import_js.ejs

@@ -1,8 +1,7 @@
 <!-- Import File -->
 <%- js('js/lazyload.min') %>
-<%- js('js/pace.min') %>
 <%- js('js/js.min') %>
-<%- partial('_partial/pace') %>
+<%- partial('_widget/nprogress') %>
 
 <% if( theme.js_effect.smoothscroll === true ) { %>
     <%- js('js/smoothscroll') %>

layout/_widget/nprogress.ejs

@@ -0,0 +1,22 @@
+<%- js('js/nprogress') %>
+
+<script type="text/javascript">
+    NProgress.configure({
+        showSpinner: true
+    });
+    NProgress.start();
+    $('#nprogress .bar').css({
+        'background': '<%= theme.uiux.nprogress_color %>'
+    });
+    $('#nprogress .peg').css({
+        'box-shadow': '0 0 10px <%= theme.uiux.nprogress_color %>, 0 0 15px <%= theme.uiux.nprogress_color %>'
+    });
+    $('#nprogress .spinner-icon').css({
+        'border-top-color': '<%= theme.uiux.nprogress_color %>',
+        'border-left-color': '<%= theme.uiux.nprogress_color %>'
+    });
+    setTimeout(function() {
+        NProgress.done();
+        $('.fade').removeClass('out');
+    }, <%= theme.uiux.nprogress_buffer %>);
+</script>