kylefang/docsify
1
0
Fork 0
mirror of https://github.com/zhigang1992/docsify.git synced 2026-04-24 05:06:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add progress bar and auto2top (#27)

Browse Source 
* Add progress bar

* Add abort ajax

* Remove console

* Add cache folder

* Add auto2top
This commit is contained in:
cinwell.li
2016-12-16 22:37:21 +08:00
committed by GitHub
parent ec53f1e307
commit 2610e25040
11 changed files with 100 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.travis.yml
View File

@@ -1,3 +1,6 @@
sudo: false
cache:
directories:
- $HOME/.yarn-cache
language: node_js
node_js: stable

2
404.dev.html
View File

@@ -8,5 +8,5 @@
<body class="">
<div id="app"></div>
</body>
<script src="/lib/docsify.js" data-repo="qingwei-li/docsify" data-sidebar-toggle data-router></script>
<script src="/lib/docsify.js" data-repo="qingwei-li/docsify" data-auto2top data-sidebar-toggle data-router></script>
</html>

5
CHANGELOG.md
View File

@@ -1,3 +1,8 @@
## 1.1.0
## Features
- Add progress bar
- Add `auto2top` option for hash router
## 1.0.3
### Bug fixes
- Fix cache

10
docs/README.md
View File

@@ -220,3 +220,13 @@ Hash router. You can replace `404.html` with `index.html`.
```html
<script src="/lib/docsify.js" data-router></script>
```
### auto2top
Scroll to the top on changing hash.
```html
<script src="/lib/docsify.js" data-auto2top></script>
```

10
docs/zh-cn.md
View File

@@ -221,3 +221,13 @@ Sidebar 开关按钮
```html
<script src="/lib/docsify.js" data-router></script>
```
### auto2top
切换路由时自动跳转到页面顶部
```html
<script src="/lib/docsify.js" data-auto2top></script>
```

6
src/event.js
View File

@@ -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
}

29
src/index.js
View File

@@ -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) {

26
src/render.js
View File

@@ -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
}

12
src/themes/basic/_layout.css
View File

@@ -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%;
}

1
src/tpl.js
View File

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

12
src/util.js
View File

@@ -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()
}
}