{"id":22177373,"url":"https://github.com/leisn/tocjs","last_synced_at":"2025-03-24T18:24:34.828Z","repository":{"id":57126660,"uuid":"408546958","full_name":"leisn/tocjs","owner":"leisn","description":"Tocjs is a browser side toc generator, by query headings.","archived":false,"fork":false,"pushed_at":"2021-09-22T01:38:40.000Z","size":803,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T04:33:21.132Z","etag":null,"topics":["browser","frontend","tableofcontents","toc","toc-generator"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/leisn.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-20T17:55:57.000Z","updated_at":"2021-09-23T09:51:52.000Z","dependencies_parsed_at":"2022-08-24T07:40:19.819Z","dependency_job_id":null,"html_url":"https://github.com/leisn/tocjs","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leisn%2Ftocjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leisn%2Ftocjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leisn%2Ftocjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leisn%2Ftocjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leisn","download_url":"https://codeload.github.com/leisn/tocjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245326356,"owners_count":20597020,"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":["browser","frontend","tableofcontents","toc","toc-generator"],"created_at":"2024-12-02T08:27:44.528Z","updated_at":"2025-03-24T18:24:34.799Z","avatar_url":"https://github.com/leisn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## tocjs ![GitHub](https://img.shields.io/github/license/leisn/tocjs) ![npm (scoped)](https://img.shields.io/npm/v/@leisn/tocjs)\n\nTocjs is a browser side toc generator, by query headings.\n\n\u003e Headings: [h1, h2, h3, h4, h5, h6]\n\n### Usage\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@leisn/tocjs@0.1.0/dist/toc.min.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n    // containerId is where to place toc\n    tocjs.make('containerId');     \n\u003c/script\u003e\n```\n\n### Sample\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"toc-container\"\u003e\u003c/div\u003e\n    \u003carticle class=\"toc-scope\"\u003e\n        \u003ch1 id=\"top-head\"\u003etop head\u003c/h1\u003e\n        \u003c!-- ...other headings --\u003e\n    \u003c/article\u003e\n\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/@leisn/tocjs@0.1.1/dist/toc.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        // with full options\n        tocjs.use({\n            TocTag: \"nav\",\n            TocId: \"toc\",\n            TocClass: \"toc\",\n            ulClass: \"toc-list\",\n            liClass: \"toc-item\",\n            aClass: \"toc-link\",\n            // implements this to custom \n            HeadingGenerator:(info,path) =\u003e { \n                let id = info.Id;\n                let title = info.Title;\n                let element = info.Target;\n\n                //your code\n                \n                return {Id: id, TitleInToc: title, TitleInHeading: undefinded};\n            }\n        }).make('toc-container', 'article.toc-scope');\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Functions\n\n* __make(containerId ?: string, cssSelector ?: string, callback ?: MakeCallBack): tocjs;__\n\n    _containerId_: nullable, the element id to place toc element, pass `undefined` if don't want to auto place.\n    _cssSelector_: nullable, special scope to search headings, use `querySelectorAll`, default `document`.\n    _callback_: nullable, callback after toc generated, params `(tocElement, tocOptions)`, you can do someting with toc element, __notice__ if _containerId_ was given the toc element already added in container.\n    \n* __use(options: TocOptions | PluginFunc, ...pluginParams: any[]): tocjs;__\n    _options_: `not null`\n    \n    * _type of function_:\n      \u003e Invoke in `make`, after generate toc ,before callback.\n      \n      _toc_: the generated toc element.\n      _options_: the options used to generation.\n      _params_: the arguments pass to function when invoke.\n    \n      ```typescript\n      //PluginFunc:\n      function (toc: HTMLElement, options: TocOptions, ...params: any[]): void;\n      ```\n      \n    * _typeof object_: \n    \n      ```typescript\n      interface TocOptions {\n          TocTag: string;  // default 'nav', not null, Tag of generated toc element.\n          TocId?: string;  // nullable, Id of generated toc element.\n          TocClass?: string; //nullable, Classes of generated toc element.\n      \n          ulClass?: string; // nullable, Classes of generated `ul` element.\n          liClass?: string; // nullable, Classes of generated `li` element.\n          aClass?: string; // nullable, Classes of generated `a` element.\n      \n          // nullable,Custom method  to generate heading id and title, that to use build toc link or modify heading content (use innerHTML).\n          HeadingGenerator?(headingInfo: HeadingInfo, Path: number[]): GenerateResult | undefined;\n      }\n      ```\n    \n    _`HeadingGenerator?(headingInfo: HeadingInfo, Path: number[]): GenerateResult | undefined;`_:\n    \n    \u003e by default: \n    \u003e\n    \u003e 1. If heading have id, always palace in toc, if no title use id as title, and not change title in heading.\n    \u003e 2. If heading have no id but title , generate id with the title.\n    \u003e 3. If heading have no id and no title , ignore it return undefined.\n    \n    * _Path_: The path of current heading, form top to current, start at 1.\n    * _HeadingInfo_: The heading information of current heading.\n    \n      ```typescript\n      interface HeadingInfo {\n          // nullable, id in document element, default `Target.id`\n          Id?: string; \n          // nullable, content of heading element default `Target.(innerText || innerHTML)`.\n          Title?: string; \n          // not null, the heading element, e.g. `h2`.\n          Target: HTMLElement; \n      }\n      ```\n    * _return_: The result of generated, `undefined` to ignore current heading.\n      \n      ```typescript\n       interface GenerateResult {\n          // not null, the final id value to toc link and heading element id.\n          // default (element.id || element.innerText)\n          Id: string; \n          // not null, the content in generated toc link.\n          // default if Id!=undefined (element.innerText)\n          TitleInToc: string; \n          // nullable, the changed content of heading element (use innerHTML to change).\n          // default undefined\n          TitleInHeading?: string;\n      }\n      ```\n    \n* __useWatchScroll(currentClass: string = \"current\", activeClass?: string): tocjs;__\n  \n  \u003e **v0.1.1 added**\n  \u003e\n  \u003e Use a watch scroll plugin to mark current toc item positon of document.\n  \u003e _currentClass_ : `not null`, if null not happen. Class name for mark toc item is current, default `current`.\n  \u003e _activeClass_: nullable, Class name for mark current item and it's parent item, default `undefined`.\n\n\n\n### build\n\n\u003e Notice: I use [yarn v2](https://yarnpkg.com/getting-started/install).\n\n```bash\n$ git clone https://github.com/leisn/tocjs.git\n$ cd tocjs\n$ yarn install\n$ yarn test\n$ yarn build\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleisn%2Ftocjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleisn%2Ftocjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleisn%2Ftocjs/lists"}