feat: wrapper as function

.eleventy.js

@@ -4,8 +4,8 @@ const parseOptions = require('./src/ParseOptions')
 module.exports = (eleventyConfig, globalOpts) => {
   globalOpts = globalOpts || {}
   eleventyConfig.namespace(globalOpts, () => {
-    eleventyConfig.addFilter('toc', (content, localOpts) => {
-      return buildTOC(content, parseOptions(localOpts, globalOpts))
+    eleventyConfig.addFilter('toc', function (content, localOpts) {
+      return buildTOC(content, parseOptions.call(this, localOpts, globalOpts))
     })
   })
 }

README.md

@@ -114,14 +114,20 @@ Pass a stringified JSON object (must be `JSON.parse()`-able) as an option for in
 
 ## Options
 
-| Name | Default Value | Type | Purpose |
-| --- | --- | --- | --- |
-| tags | `['h2', 'h3', 'h4']` | array of strings | which heading tags are used to generate the table of contents |
-| wrapper | `'nav'` | string | tag of element wrapping toc lists; `''` removes wrapper element |
-| wrapperClass | `'toc'` | string | `class` on element wrapping toc lists |
-| wrapperLabel | `undefined` | string | `aria-label` on element wrapping toc lists |
-| ul | `false` | boolean | lists are `ul` if true, `ol` if `false` |
-| flat | `false` | boolean | use flat list if `true`; use nested lists if false |
+| Name         | Default Value        | Type             | Purpose                                                         |
+| ------------ | -------------------- | ---------------- | --------------------------------------------------------------- |
+| tags         | `['h2', 'h3', 'h4']` | string[]         | which heading tags are used to generate the table of contents   |
+| wrapper      | `'nav'`              | string\|function | tag of element wrapping toc lists; `''` removes wrapper element |
+| wrapperClass | `'toc'`              | string           | `class` on element wrapping toc lists                           |
+| wrapperLabel | `undefined`          | string           | `aria-label` on element wrapping toc lists                      |
+| ul           | `false`              | boolean          | lists are `ul` if true, `ol` if `false`                         |
+| flat         | `false`              | boolean          | use flat list if `true`; use nested lists if false              |
+
+## Wrapper as a Function
+You may pass a function which takes `content` (a string of HTML content) and
+`label` (typically a string like `aria-label="page toc"`) and returns an HTML
+string of the completed table of content's HTML. The function's `this` binding
+will be the same as `addFilter`'s'
 
 ## Roadmap
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleventy-plugin-toc",
-  "version": "1.1.5",
+  "version": "1.2.5",
   "description": "Eleventy filter to generate a Table of Contents in a template",
   "main": ".eleventy.js",
   "scripts": {

src/BuildTOC.js

@@ -13,7 +13,7 @@ const defaults = {
   flat: false,
 }
 
-const BuildTOC = (text, opts) => {
+function BuildTOC(text, opts) {
   const {tags, wrapper, wrapperClass, wrapperLabel, ul, flat} = ParseOptions(
     opts,
     defaults
@@ -29,11 +29,12 @@ const BuildTOC = (text, opts) => {
 
   const label = wrapperLabel ? `aria-label="${wrapperLabel}"` : ''
 
-  return wrapper
-    ? `<${wrapper} class="${wrapperClass}" ${label}>
-        ${BuildList(headings, ul, flat)}
-      </${wrapper}>`
-    : BuildList(headings, ul, flat)
+  const content = BuildList(headings, ul, flat);
+  return (
+      typeof wrapper === 'function' ? wrapper.call(this, text, opts)
+    : wrapper ? `<${wrapper} class="${wrapperClass}" ${label}>${content}</${wrapper}>`
+    : content
+  );
 }
 
 module.exports = BuildTOC