diff --git a/.travis.yml b/.travis.yml index 87576c5..fb0b83e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,6 @@ sudo: false +cache: + directories: + - $HOME/.yarn-cache language: node_js node_js: stable diff --git a/404.dev.html b/404.dev.html index b8c6e05..dba5d41 100644 --- a/404.dev.html +++ b/404.dev.html @@ -8,5 +8,5 @@
- + diff --git a/CHANGELOG.md b/CHANGELOG.md index 440325a..5131f25 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 1.1.0 +## Features +- Add progress bar +- Add `auto2top` option for hash router + ## 1.0.3 ### Bug fixes - Fix cache diff --git a/docs/README.md b/docs/README.md index 7aea75c..44ebf25 100644 --- a/docs/README.md +++ b/docs/README.md @@ -220,3 +220,13 @@ Hash router. You can replace `404.html` with `index.html`. ```html ``` + +### auto2top + +Scroll to the top on changing hash. + + +```html + +``` + diff --git a/docs/zh-cn.md b/docs/zh-cn.md index 28e6fda..2ac3106 100644 --- a/docs/zh-cn.md +++ b/docs/zh-cn.md @@ -221,3 +221,13 @@ Sidebar 开关按钮 ```html ``` + +### auto2top + +切换路由时自动跳转到页面顶部 + + +```html + +``` + diff --git a/src/event.js b/src/event.js index fda0205..48922fb 100644 --- a/src/event.js +++ b/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 +} diff --git a/src/index.js b/src/index.js index f7063e4..9d35660 100644 --- a/src/index.js +++ b/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) { diff --git a/src/render.js b/src/render.js index 3688db3..e94cd03 100644 --- a/src/render.js +++ b/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 } + diff --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css index 67f6db9..ddcead4 100644 --- a/src/themes/basic/_layout.css +++ b/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%; } diff --git a/src/tpl.js b/src/tpl.js index 5c74a8b..d8912d1 100644 --- a/src/tpl.js +++ b/src/tpl.js @@ -57,3 +57,4 @@ export function tree (toc, tpl = '') { return tpl } + diff --git a/src/util.js b/src/util.js index 26208e6..4db5623 100644 --- a/src/util.js +++ b/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() } }