{"id":13447587,"url":"https://github.com/SHERlocked93/progress-catalog","last_synced_at":"2025-03-22T01:31:07.467Z","repository":{"id":57331046,"uuid":"144090949","full_name":"SHERlocked93/progress-catalog","owner":"SHERlocked93","description":"Generate a progress catalog by html tag (h1, h2, h3, h4, h5, h6) 😜","archived":false,"fork":false,"pushed_at":"2023-04-29T01:38:28.000Z","size":2438,"stargazers_count":107,"open_issues_count":6,"forks_count":22,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-18T12:19:13.640Z","etag":null,"topics":["catalog"],"latest_commit_sha":null,"homepage":"http://progress-catalog.doc.sherlocked93.club/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SHERlocked93.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-08-09T02:24:46.000Z","updated_at":"2024-04-12T09:39:05.000Z","dependencies_parsed_at":"2024-01-05T06:47:28.750Z","dependency_job_id":null,"html_url":"https://github.com/SHERlocked93/progress-catalog","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"5a6191a88169575f7956829b18da40246929c7c4"},"previous_names":["sherlocked93/progresscatalog"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SHERlocked93%2Fprogress-catalog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SHERlocked93%2Fprogress-catalog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SHERlocked93%2Fprogress-catalog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SHERlocked93%2Fprogress-catalog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SHERlocked93","download_url":"https://codeload.github.com/SHERlocked93/progress-catalog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244893417,"owners_count":20527585,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["catalog"],"created_at":"2024-07-31T05:01:21.770Z","updated_at":"2025-03-22T01:31:07.033Z","avatar_url":"https://github.com/SHERlocked93.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# [progress-catalog](http://progress-catalog.doc.sherlocked93.club/)\n![npm](https://img.shields.io/npm/v/progress-catalog.svg)\n![license](https://img.shields.io/github/license/jserwang/rc-bmap.svg)\n\n\n这个插件根据选定的目录内容中的 `h1, h2, h3, h4, h5, h6` 标签来自动生成目录插入到选定的目录容器中，并且提供一个漂亮的样式效果；\n\n- 监听内容区滚动\n- 点击跳转功能\n\n**兼容性：** IE10+ (由于使用了 `node.classList`)\n\n**依赖性：** 不依赖任何库\n\n**大小：** 体积小，stat体积4.22kb，经过gzip之后只有1.76kb\n\n欢迎提issue，提pr~\n\n## Preview\n炫酷模式：\n\n![](https://i.loli.net/2018/09/28/5bad890a0cdd7.gif)\n\n普通模式：\n\n![](https://i.loli.net/2018/09/28/5bad890db3d81.gif)\n\n可以通过 [线上DEMO](https://sherlocked93.github.io/vue-style-codebase/) 来预览一下炫酷模式的效果\n\n## 实现思路\n\n滚动的监听通过 [getBoundingClientRect](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect) 获取元素大小以及相对视口的位置，判断我们的监听对象 `h1~h6` 标签是否在视口中，如果在则添加 `linkActiveClass`  类。\n\n点击目录项的定位跳转在hash模式的单页面应用中会与传统的锚点定位冲突，会导航到错误的路由路径，这里采用把要跳转的id放到 [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) 中，跳转的时候取出来使用 [scrollIntoView](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView) 来进行平滑滚动到目标位置。\n\n左边的边栏线则是使用 [svg](http://www.ruanyifeng.com/blog/2018/08/svg.html) 的path来画出来的，根据层级相应做一些调整，辅以css的 `transition` 的效果就可以呈现出不错的移动效果。\n\n## 本地开发\n\n``` bash\n# npm安装包依赖\nnpm install\n\n# 使用babel编译\nnpm run build\n```\n\n\n## Api\n如果要使用默认的样式，请手动引入\n\n```js\nimport 'progress-catalog/src/progress-catalog.css'\n```\n\n使用方法：\n```js\n// 引入\nimport Catalog from 'ProgressCatalog'\n\n// 使用 \nnew Catalog({\n\tcontentEl: 'loading-animation',\n\tcatalogEl: `catalog-content-wrapper`,\n\tselector: ['h2', 'h3']\n})\n```\n\n构造函数还有一些其他参数：\n\n#### contentEl [String]\n需要检索生成目录的内容区的id选择器，不需要加#\n\n#### catalogEl [String]\n将生成的目录append进的目录容器的id选择器，不需要加#\n\n#### scrollWrapper [可选, String]\n监听scroll事件的内容区容器的id选择器，不需要加#，如果不填则默认是 `contentEl` 的父元素\n\n#### linkClass [可选, String]\n所有目录项都有的类，默认值：`cl-link`\n\n#### selector [可选, Array]\n选择目录的标题标签，默认值：`['h1', 'h2', 'h3', 'h4', 'h5', 'h6']`\n\n如果只希望生成目标内容区的 h2, h3 标签的目录，那么可以设置 `selector: ['h2', 'h3']`\n\n#### activeHook [可选, Function]\n当激活新的目录项标签的时候的回调函数\n\n#### topMargin [可选, Number]\n第一个目录标签在被认为可见之前需要向下移动的距离，默认值：`0`\n\n#### bottomMargin [可选, Number]\n同上，向下移动的距离，默认值：`0`\n\n#### cool [可选, Boolean]\n炫酷模式开关，默认值：`true`\n\n## 协议\n\n[MIT 许可证](https://opensource.org/licenses/MIT)\n\n---\n\nPS： 在下的 [掘金专栏](https://juejin.im/user/5962fe1d6fb9a06bac5b9899/posts)、[SegmentFault专栏](https://segmentfault.com/blog/sherlocked93)，也欢迎大家关注我的公众号【前端下午茶】，一起加油~\n\n![](https://i.loli.net/2019/05/31/5cf08a479cd5d75372.jpg)\n\n\n另外可以加入「前端下午茶交流群」微信群，长按识别下面二维码即可加我好友，备注**加群**，我拉你入群～\n\n![](https://i.loli.net/2019/07/13/5d2986f77e9bc11533.jpg)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSHERlocked93%2Fprogress-catalog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSHERlocked93%2Fprogress-catalog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSHERlocked93%2Fprogress-catalog/lists"}