├── LICENSE
├── README.md
├── dist
    └── progress.js
└── package.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Herbert
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # docsify-progress
 2 | 
 3 | <p align="center">
 4 |   <img src="https://docsify.js.org/_media/icon.svg" />
 5 |   <br />
 6 |   <code>docsify-progress</code>
 7 | </p>
 8 | 
 9 | [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/docsify-progress/badge)](https://www.jsdelivr.com/package/npm/docsify-progress)
10 | 
11 | docsify之阅读进度条插件 Progress bar plugin for docsify
12 | 
13 | ## Usage
14 | 
15 | 添加依赖 Add script
16 | 
17 | ```html
18 | <script src="https://cdn.jsdelivr.net/npm/docsify-progress@latest/dist/progress.min.js"></script>
19 | ```
20 | 
21 | 添加配置 Add settings
22 | 
23 | ```js
24 | window.$docsify = {
25 |     progress: {
26 |         position: "top",
27 |         color: "var(--theme-color,#42b983)",
28 |         height: "3px",
29 |     }
30 | }
31 | ```
32 | 
33 | | 属性名Attribute | 类型Type | 解释Description | 可选值Value |
34 | | --------------- | -------- | --------------- | ----------- |
35 | | position | string | 设置进度条展示的位置 Set where the progress bar displayed | 'top' (默认值Default) / 'bottom' |
36 | | color | string | 设置进度条颜色 Set color for the plugin | 'var(--theme-color,#42b983)' |
37 | | height | string | 设置进度条高度 Set height for the plugin | '3px' |
38 | 


--------------------------------------------------------------------------------
/dist/progress.js:
--------------------------------------------------------------------------------
 1 | function plugin(hook, vm) {
 2 |     let marginTop
 3 |     hook.mounted(function () {
 4 |         const content = document.getElementsByClassName("content")[0]
 5 |         marginTop = parseFloat(
 6 |             window.getComputedStyle(content).paddingTop.replace("px", "")
 7 |         )
 8 | 
 9 |         let insertDOM = `
10 |         <div style="position: fixed; width: 100%; z-index: 999; height: ${
11 |             window.$docsify["progress"].height
12 |         };
13 |         ${
14 |             window.$docsify["progress"].position === "top"
15 |                 ? "top: 0;"
16 |                 : "bottom: 0;"
17 |         }">
18 |             <div id="progress-display" style="background-color: ${
19 |                 window.$docsify["progress"].color
20 |             }; width: 0; border-radius: 2px; height: ${
21 |             window.$docsify["progress"].height
22 |         }; transition: width 0.3s;"></div>
23 |         </div>
24 |         `
25 |         const mainDOM = document.getElementsByTagName("body")[0]
26 |         mainDOM.innerHTML = mainDOM.innerHTML + insertDOM
27 | 
28 |         function switcher() {
29 |             const body = document.getElementsByTagName("body")[0]
30 |             if (!body.classList.contains("close")) {
31 |                 body.classList.add("close")
32 |             } else {
33 |                 body.classList.remove("close")
34 |             }
35 |         }
36 | 
37 |         const btn = document.querySelector("div.sidebar-toggle-button")
38 |         btn.addEventListener("click", function (e) {
39 |             e.stopPropagation()
40 |             switcher()
41 |         })
42 |     })
43 |     hook.ready(function () {
44 |         window.addEventListener("scroll", function (e) {
45 |             let totalHeight =
46 |                 marginTop +
47 |                 parseFloat(
48 |                     window
49 |                         .getComputedStyle(document.getElementById("main"))
50 |                         .height.replace("px", "")
51 |                 )
52 |             let scrollTop =
53 |                 document.body.scrollTop + document.documentElement.scrollTop
54 |             let remain = totalHeight - document.body.offsetHeight
55 |             document.getElementById("progress-display").style.width =
56 |                 Math.ceil((scrollTop / remain) * 100) + "%"
57 |         })
58 |     })
59 | }
60 | 
61 | // Docsify plugin options
62 | window.$docsify["progress"] = Object.assign(
63 |     {
64 |         position: "top",
65 |         color: "var(--theme-color,#42b983)",
66 |         height: "3px",
67 |     },
68 |     window.$docsify["progress"]
69 | )
70 | window.$docsify.plugins = [].concat(plugin, window.$docsify.plugins)
71 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "docsify-progress",
 3 |   "version": "1.0.3",
 4 |   "description": "Progress bar plugin for docsify",
 5 |   "main": "./dist/progress.js",
 6 |   "author": "HerbertHe <Herbert.He0229@gmail.com>",
 7 |   "license": "MIT",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git+https://github.com/HerbertHe/docsify-progress.git"
11 |   },
12 |   "keywords": [
13 |     "progress",
14 |     "docsify",
15 |     "plugin"
16 |   ],
17 |   "bugs": {
18 |     "url": "https://github.com/HerbertHe/docsify-progress/issues"
19 |   },
20 |   "homepage": "https://github.com/HerbertHe/docsify-progress"
21 | }
22 | 


--------------------------------------------------------------------------------