25:["$","title",null,{"children":"Assignment Table of Contents | Adam Krawitz | Observable"}] 4b:T588,## Parameters The **`assignmentToc`** method is called like this: ~~~js toc({headers: 'h2,h3', toggle: true, open: false, title: 'Table of Contents', hideStartingFrom: null}) ~~~ which returns: ~~~js Generator ~~~ which itself returns DOM for the Table of Contents that gets updated on document changes. * **`headers`** is a string with a list of header tags to include in the ToC. It defaults to `'h2,h3'`. * **`toggle`** is a boolean indicating whether the ToC can be toggled open and closed. It defaults to `true`. * **`open`** is a boolean indicating whether or not the ToC is initially toggled open. It defaults to `false`, i.e. closed. * **`title`** is either a string with the text to use as the name for the ToC, or it can be `null` to indicate there should be no title. It defaults to `'Table of Contents'`. * **`hideStartingFrom`** is either a string with the text of a header from the document which, along with all subsequent headers, will be left out of the ToC, or it can be `null` to indicate that all matching headers should be included in the ToC. It defaults to `null`. * The return value is a `Generator` that yields promises that resolve to the DOM for the ToC. The `Generator` wraps a `MutationObserver` so that it will yield an updated version of the ToC when the document changes. This works perfectly as the sole contents of an Observable cell turning it into a dynamically updated ToC. 4c:Tfa2,assignmentToc = function({headers = 'h2,h3', toggle = true, open = false, title = 'Table of Contents', hideStartingFrom = null} = {}) { const tags = headers + ',mark.question,mark.challenge'; return Generators.observe((notify) => { let previousTags = []; let renderedEmptyToC = false; function observed() { const currentTags = Array.from(document.querySelectorAll(tags)); // Check if there's anything to render if (!currentTags.length) { if (!renderedEmptyToC) { notify(html`Unable to generate ToC: no specified tags found`); renderedEmptyToC = true; } return; } // Check if anything changed from the previous render, and if not, bail if ( currentTags.length === previousTags.length && !currentTags.some((tag, index) => previousTags[index] !== tag) ) { return; } renderedEmptyToC = false; // The start indentation specifies the top-most header tag that will // be unindented in the ToC, and is effectively the 2 in h2 let startIndentation = tags .split(',') .map((tag) => { return parseInt(tag.replace(/h/g, '')); }) .sort()[0]; // The current indentation tracks what level of indentation we're at, // so we can add

and tags as needed to get the ToC to // indend/unindent properly let currentIndentation; previousTags = currentTags; const entries = ['

'); currentIndentation++; } while (currentIndentation > nodeIndentation) { entries.push('

${DOM.text(tag.textContent)}
${DOM.text(tag.textContent)}

${title}

` : `

${title ? `${title}` : ``}` } ${entries} ${(toggle && title) ? `

Cool Thing