tocjs

浏览器端的TOC生成控件，遍历标题生成。

搜索的标题： [h1, h2, h3, h4, h5, h6]

使用

html
<script src="https://cdn.jsdelivr.net/npm/@leisn/tocjs@0.1.1/dist/toc.min.js"></script>

<script>
    // containerId is where to place toc
    tocjs.make('containerId');     
</script>

示例

html
<!DOCTYPE html>
<html>
<body>
    <div id="toc-container"></div>
    <article class="toc-scope">
        <h1 id="top-head">top head</h1>
        <!-- ...other headings -->
    </article>

    <script src="https://cdn.jsdelivr.net/npm/@leisn/tocjs@0.1.1/dist/toc.min.js"></script>
    <script>
        // with full options
        tocjs.use({
            TocTag: "nav",
            TocId: "toc",
            TocClass: "toc",
            ulClass: "toc-list",
            liClass: "toc-item",
            aClass: "toc-link",
            // implements this to custom 
            HeadingGenerator:(info,path) => { 
                let id = info.Id;
                let title = info.Title;
                let element = info.Target;

                //your code
                
                return {Id: id, TitleInToc: title, TitleInHeading: undefinded};
            }
        }).make('toc-container', 'article.toc-scope');
    </script>
</body>
</html>

方法

make(containerId ?: string, cssSelector ?: string, callback ?: MakeCallBack): tocjs;

containerId: nullable, 元素Id，用于放置生成的Toc元素, 不想自动放置就传递undefined。 cssSelector: nullable, 指定搜索标题元素的css选择器，用于 querySelectorAll方法, default document. callback: nullable, 生成Toc元素之后的回调函数，参数 (tocElement, tocOptions), 可以做一些自定义的处理, 注意： 如果 containerId 传进来非空，生成的元素已经添加进子节点了。

use(options: TocOptions | PluginFunc, ...pluginParams: any[]): tocjs; options: not null

type of function:

在 make中调用，生成toc之后，回调函数之前。

toc: 生成的toc元素。 options: 当前使用的自定义选项。 params: 传进来的方法，使用的参数。
```
typescript
//PluginFunc:
function (toc: HTMLElement, options: TocOptions, ...params: any[]): void;
```

typeof object:

typescript
interface TocOptions {
    TocTag: string;  // default 'nav', not null, Tag of generated toc element.
    TocId?: string;  // nullable, Id of generated toc element.
    TocClass?: string; //nullable, Classes of generated toc element.

    ulClass?: string; // nullable, Classes of generated `ul` element.
    liClass?: string; // nullable, Classes of generated `li` element.
    aClass?: string; // nullable, Classes of generated `a` element.

    // nullable,Custom method  to generate heading id and title, that to use build toc link or modify heading content (use innerHTML).
    HeadingGenerator?(headingInfo: HeadingInfo, Path: number[]): GenerateResult | undefined;
}

HeadingGenerator?(headingInfo: HeadingInfo, Path: number[]): GenerateResult | undefined;:

默认情况下：

如果标题已经有id，使用这个id，如果没有标题内容，使用id作为标题内容，如果有标题，就不变。

如果有标题内容但是没有id，使用标题内容生成id。

如果没有标题内容也没有id，忽略并返回 undefined.

Path: 当前标题的路径，从1开始，第几个标题的第几个子标题，比如[1,1,1]表示第一个标题的第一个子标题再下一级的第一个标题。

HeadingInfo: 当前标题的一些信息。

typescript
interface HeadingInfo {
    // nullable, id in document element, default `Target.id`
    Id?: string; 
    // nullable, content of heading element default `Target.(innerText || innerHTML)`.
    Title?: string; 
    // not null, the heading element, e.g. `h2`.
    Target: HTMLElement; 
}

return: 生成的标题内容，返回 undefined 来忽略这个标题。

typescript
 interface GenerateResult {
    // not null, the final id value to toc link and heading element id.
    // default (element.id || element.innerText)
    Id: string; 
    // not null, the content in generated toc link.
    // default if Id!=undefined (element.innerText)
    TitleInToc: string; 
    // nullable, the changed content of heading element (use innerHTML to change).
    // default undefined
    TitleInHeading?: string;
}

useWatchScroll(currentClass: string = "current", activeClass?: string): tocjs;

v0.1.1 添加

使用一个插件监视滚动条变化，标记当前文档位置在toc中的对应元素是哪个。

currentClass : not null, 如果为null，插件不起作用，class名用于添加到当前对应的元素, default current. activeClass: nullable， class名用于标记当前toc元素和它的父级toc元素的状态， default undefined.

生成

Notice: I use yarn v2.

bash
$ git clone https://github.com/leisn/tocjs.git
$ cd tocjs
$ yarn install
$ yarn test
$ yarn build