Add progress bar and auto2top (#27)

* Add progress bar

* Add abort ajax

* Remove console

* Add cache folder

* Add auto2top

src/event.js

@@ -90,3 +90,9 @@ export function bindToggle (dom) {
     body.classList.toggle('close')
   })
 }
+
+let cacheContentDOM
+export function scroll2Top (dom) {
+  cacheContentDOM = cacheContentDOM || document.querySelector(dom)
+  cacheContentDOM.scrollTop = 0
+}

src/index.js

@@ -10,7 +10,8 @@ const OPTIONS = {
   sidebarToggle: false,
   loadSidebar: null,
   loadNavbar: null,
-  router: false
+  router: false,
+  auto2top: false
 }
 const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()
 
@@ -29,6 +30,7 @@ if (script) {
 render.config(OPTIONS)
 
 let cacheRoute = null
+let cacheXhr = null
 
 const mainRender = function (cb) {
   const route = getRoute()
@@ -42,17 +44,22 @@ const mainRender = function (cb) {
     basePath = basePath.match(/(\S*\/)[^\/]+$/)[1]
   }
 
+  cacheXhr && cacheXhr.abort && cacheXhr.abort()
   // Render markdown file
-  load((!route || /\/$/.test(route)) ? `${route}README.md` : `${route}.md`)
-    .then(result => {
-      render.renderArticle(result)
-      if (OPTIONS.loadSidebar) {
-        if (wait === false) cb()
-        wait = false
-      } else {
-        cb()
-      }
-    }, _ => render.renderArticle(null))
+  cacheXhr = load(
+    (!route || /\/$/.test(route)) ? `${route}README.md` : `${route}.md`,
+    'GET',
+    render.renderLoading)
+
+  cacheXhr.then(result => {
+    render.renderArticle(result)
+    if (OPTIONS.loadSidebar) {
+      if (wait === false) cb()
+      wait = false
+    } else {
+      cb()
+    }
+  }, _ => render.renderArticle(null))
 
   // Render sidebar
   if (OPTIONS.loadSidebar) {

src/render.js

@@ -1,7 +1,7 @@
 import marked from 'marked'
 import Prism from 'prismjs'
 import * as tpl from './tpl'
-import { activeLink, scrollActiveSidebar, bindToggle } from './event'
+import { activeLink, scrollActiveSidebar, bindToggle, scroll2Top } from './event'
 import { genTree, getRoute } from './util'
 
 let OPTIONS = {}
@@ -69,6 +69,8 @@ export function renderArticle (content) {
   if (!renderNavbar.rendered) renderNavbar(null, OPTIONS)
   renderSidebar.rendered = false
   renderNavbar.rendered = false
+
+  if (OPTIONS.auto2top) scroll2Top('section.content')
 }
 
 /**
@@ -106,6 +108,28 @@ export function renderSidebar (content) {
   toc = []
 }
 
+/**
+ * render loading bar
+ * @return {[type]} [description]
+ */
+export function renderLoading ({ loaded, total }) {
+  const num = Math.floor(loaded / total * 100)
+
+  if (!CACHE['loading']) {
+    const div = document.createElement('div')
+
+    div.classList.add('progress')
+    document.body.appendChild(div)
+    CACHE['loading'] = div
+  }
+  CACHE['loading'].style.width = num >= 95 ? '0%' : num + '%'
+}
+
+/**
+ * Load Config
+ * @param  {Object} options
+ */
 export function config (options) {
   OPTIONS = options
 }
+

src/themes/basic/_layout.css

@@ -8,6 +8,18 @@
   -webkit-font-smoothing: antialiased;
 }
 
+.progress {
+  background-color: $color-primary;
+  height: 2px;
+  left: 0px;
+  position: fixed;
+  right: 0px;
+  top: 0px;
+  transition: width 0.2s, opacity 0.4s;
+  width: 0%;
+  z-index: 999999;
+}
+
 html, body {
   height: 100%;
 }

src/tpl.js

@@ -57,3 +57,4 @@ export function tree (toc, tpl = '') {
 
   return tpl
 }
+

src/util.js

@@ -1,10 +1,11 @@
 /**
  * Simple ajax
  * @param  {String} url
- * @param  {String} [method=get]
+ * @param  {String} [method=GET]
+ * @param {Function} [loading] handle loading
  * @return {Promise}
  */
-export function load (url, method = 'get') {
+export function load (url, method = 'GET', loading) {
   const xhr = new XMLHttpRequest()
 
   xhr.open(method, url)
@@ -12,11 +13,16 @@ export function load (url, method = 'get') {
 
   return {
     then: function (success, error = function () {}) {
+      if (loading) {
+        xhr.addEventListener('progress', loading)
+        xhr.addEventListener('loaded', loading)
+      }
       xhr.addEventListener('error', error)
       xhr.addEventListener('load', ({ target }) => {
         target.status >= 400 ? error(target) : success(target.response)
       })
-    }
+    },
+    abort: () => xhr.readyState !== 4 && xhr.abort()
   }
 }