jyapayne/docsify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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 sudo: false
cache:
directories:
- $HOME/.yarn-cache
language: node_js language: node_js
node_js: stable node_js: stable

2
404.dev.html
View file

@ -8,5 +8,5 @@
<body class=""> <body class="">
<div id="app"></div> <div id="app"></div>
</body> </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> </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 ## 1.0.3
### Bug fixes ### Bug fixes
- Fix cache - Fix cache

10
docs/README.md
View file

@ -220,3 +220,13 @@ Hash router. You can replace `404.html` with `index.html`.
```html ```html
<script src="/lib/docsify.js" data-router></script> <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 ```html
<script src="/lib/docsify.js" data-router></script> <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') body.classList.toggle('close')
}) })
} }
let cacheContentDOM
export function scroll2Top (dom) {
cacheContentDOM = cacheContentDOM || document.querySelector(dom)
cacheContentDOM.scrollTop = 0
}

13
src/index.js
View file

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

26
src/render.js
View file

@ -1,7 +1,7 @@
import marked from 'marked' import marked from 'marked'
import Prism from 'prismjs' import Prism from 'prismjs'
import * as tpl from './tpl' import * as tpl from './tpl'
import { activeLink, scrollActiveSidebar, bindToggle } from './event' import { activeLink, scrollActiveSidebar, bindToggle, scroll2Top } from './event'
import { genTree, getRoute } from './util' import { genTree, getRoute } from './util'
let OPTIONS = {} let OPTIONS = {}
@ -69,6 +69,8 @@ export function renderArticle (content) {
if (!renderNavbar.rendered) renderNavbar(null, OPTIONS) if (!renderNavbar.rendered) renderNavbar(null, OPTIONS)
renderSidebar.rendered = false renderSidebar.rendered = false
renderNavbar.rendered = false renderNavbar.rendered = false
if (OPTIONS.auto2top) scroll2Top('section.content')
} }
/** /**
@ -106,6 +108,28 @@ export function renderSidebar (content) {
toc = [] 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) { export function config (options) {
OPTIONS = options OPTIONS = options
} }

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

@ -8,6 +8,18 @@
-webkit-font-smoothing: antialiased; -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 { html, body {
height: 100%; height: 100%;
} }

1
src/tpl.js
View file

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

12
src/util.js
View file

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