2c:null 2d:["$","title",null,{"children":"Linked markdown-style footnotes with tooltips | Peter Hofmann | Observable"}] 32:T8d3,mdfn`${footnotes_intro}## How it works
Import as follows: \`\`\`js import {mdfn, footlist, footnoteCSS} with { footnotes as footnotes } from '@formsandlines/linked-markdown-style-footnotes-with-tooltips' \`\`\` To set a different language, add “\`\`LANG as setLang\`\`” and a new cell, like this for German: “\`\`LANG = 'de'\`\`”.[^2] A special *tagged template literal* called \`\`mdfn\`\` replaces the \`\`md\`\` literal of Observable and adds some preprocessing for “[^*x*]”-strings (where *x* is any footnote reference index) before calling the \`\`md\`\` function, so everything else stays the same: \`\`\`js mdfn\`\Markdown text with your footnote references[%^1].[%^2][%^abc]\` \`\`\` If you need to write [^*x*] without it being converted to a footnote, you can add an escape-character: [\%^*x*] To enter the footnotes, call the \`\`footlist\`\` function in a \`\`viewof\`\`-cell with an array of footnote-objects as its argument. Each of these objects contain the reference index and the actual text or markdown content of your footnotes:[^3] \`\`\`js viewof footnotes = footlist([ {ref: '1', text: \`Footnote text with *Markdown* and HTML.\`}, {ref: '2', text: \`Use
for manual line-breaks, don't touch that return key!.\`}, {ref: 'abc', text: \`Reference index can also consist of letters.\`}, ]) \`\`\` As a second argument you can specify an object with some options: | Option | What it does | | ---------------- | ------------------------------------------ | | \`\`heading\`\` | Enter a custom heading for the list. | | \`\`seperator\`\` | Toggle the \`\`
\`\`-line above the list. | | \`\`title\`\` | Toggle heading visibility. |
If you need more than one footnote list, you can call multiple \`\`footlist\`\` objects and set the third argument to the actual name of each calling cell. You then have to provide the template literal with the respective cell variable of the list where your footnotes appear: \`\`\`js viewof myFootnoteList = footlist([ {ref: '1', text: \`Additional footnote list.\`}, ], {}, 'myFootnoteList') mdfn\`\$\{myFootnoteList\}Markdown text with your footnote references[%^1].\` \`\`\` `33:T4d2,footlist = (footnotes, {heading=LANG.header, separator=true, title=true}={}, cellname='footnotes') => { /* Builds footnote list as HTML from a data object and also returns an object (use with "viewof") - Footnote data object schema: [ {ref: , text: }, … ] - Specify the cellname so that footnote references can be linked properly to the list */ const genFootnoteHash = ref => parseInt(ref) ? '#fn'+ref : '#'+ref; const list = footnotes.map(fn => md`

${fn.text}

`); const element = html`${separator ? '

' : ''}

${title ? `

${heading}

` : ''}

${list}

`; element.value = { cellname: cellname, list: footnotes }; element.querySelectorAll('a.backref').forEach(link => link.addEventListener('click', e => { e.preventDefault(); // prevents default-behaviour of element const id = e.target.getAttribute('href').split('#')[1]; const linkElem = document.getElementById(id); linkElem.scrollIntoView(); })); return element; }34:T46e,function* mdfn(strings, ...keys) { /* Tagged template literal to easily set footnote references in markdown (replaces "md`…`") */ const footnotesObj = (keys[0] && isFootnoteObject(keys[0]) ) ? keys[0] : (isFootnoteObject(footnotes) ? footnotes : undefined); try { if (footnotesObj === undefined || footnotesObj === null) throw 'Invalid footnotes object!'; const stringsOutput = strings.map(str => { // [^X] will be replaced with the footnote reference link and preview let newStr = str.replace(/\[\^([0-9a-z-]+?)\]/g, (match, p1) => footlink(p1, footnotesObj) ); newStr = newStr.replace(/(\[)(\%\^)([0-9a-z-]+?\])/g, `$1^$3`); // remove escape characters return newStr; }); const keysOutput = keys.map((key_,i) => i === 0 && isFootnoteObject(key_) ? '' : key_); // make sure that the output is in the correct order and apply md template literal const elem = md(stringsOutput, ...keysOutput); yield elem; // adjust previews/tooltips to remain visible and prevent clipping return yield* previewCorrection(elem); } catch (e) { throw new Error(e); } }35:Tc2a,function* previewCorrection(pElem) { /* Adjusts position and size of footnote preview/tooltip or cell height to make sure previews/tooltips are visible to the viewer and remain within cell boundaries to prevent clipping. */ const getDimensions = elem => ({elem: elem, dims: elem.getBoundingClientRect()}); let cell = getDimensions(pElem.parentNode); let spacerElem = undefined; // if the cell is too small in height, add a spacer as its last child to // enlarge it whenever the user hovers over a footnote link if (cell.dims.height < 120) { // (<- number needs to be adjusted if too small) spacerElem = document.createElement('div'); spacerElem.classList.add('footnoteSpacer'); cell.elem.appendChild(spacerElem); // temporarily set a large spacer height to correctly adjust preview position spacerElem.style['height'] = `${200}px`; yield pElem; cell = getDimensions(cell.elem); // update cell dimensions // add event handlers for footnote links to dynamically adjust cell height based // on the height difference of their preview boxes const linkElems = pElem.querySelectorAll('.footlink-container'); for (let linkElem of linkElems) { linkElem.addEventListener('mouseenter', e => { e.preventDefault(); if (spacerElem.classList.contains('out')) spacerElem.classList.remove('out'); // calculate y difference to adjust spacer height const preview = getDimensions(e.target.querySelector('.footlink-preview')); const p = getDimensions(e.target.parentNode); const yDiff = (preview.dims.y + preview.dims.height) - (p.dims.y + p.dims.height); if (yDiff > 0) spacerElem.style['height'] = `${yDiff}px`; }); linkElem.addEventListener('mouseleave', e => { e.preventDefault(); // add class for different transition property on mouseleave spacerElem.classList.add('out'); spacerElem.style['height'] = '0'; }); } } const previewElems = pElem.querySelectorAll('.footlink-preview'); for (let previewElem of previewElems) { let preview = getDimensions(previewElem); // if preview is only a single line, constrain its width to content if (preview.dims.height < 34) { preview.elem.style['min-width'] = '0'; preview.elem.style['max-width'] = 'none'; preview.elem.style['white-space'] = 'nowrap'; preview = getDimensions(preview.elem); } // make sure that preview remains inside the bounds of the cell const xDiff = cell.dims.x - preview.dims.x; const yDiff = (preview.dims.y + preview.dims.height) - (cell.dims.y + cell.dims.height); const widthDiff = (preview.dims.x + preview.dims.width) - (cell.dims.x + width); if (xDiff > 0) preview.elem.style['margin-left'] = xDiff+'px'; if (yDiff > 0) preview.elem.style['margin-bottom'] = (yDiff+26)+'px'; if (widthDiff > 0) preview.elem.style['margin-left'] = '-'+widthDiff+'px'; } // make spacer invisible by default if (spacerElem !== undefined) spacerElem.style['height'] = '0'; yield pElem; }36:T5e2,footnoteCSS = html``37:[] 30:{"id":"4a01c6bf448dded8","slug":"linked-markdown-style-footnotes-with-tooltips","title":"Linked markdown-style footnotes with tooltips","thumbnail":"e5bc40bdbb183edbe1a31f6deae3b611605d530a79bfb43e80fdde7d2de1f9ec","access_level":"public","create_time":"$D2020-08-07T09:16:31.545Z","update_time":"$D2020-11-01T08:58:01.688Z","view_time":null,"first_public_time":"$D2020-08-10T16:49:22.206Z","fork":true,"stars":8,"starred":false,"owner":{"type":"team","id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":"starter_2024"},"version":1125,"publish_version":1125,"role":null,"authored":false,"authors":[{"type":"individual","id":"b20948974f4dc365","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":null}],"members":[{"type":"individual","id":"b20948974f4dc365","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":null,"role":"editor"}],"comments":[{"id":"126acc9c693243a3","reply_to_id":null,"content":"I think this doesn't export as intended. I don't fully understand how it all works, but when I tried to import from this notebook as in the explanation, the footnotes did not render correctly. However, when I eliminated the import of footnoteCSS and instead copy-pasted the source code, it then rendered correctly. Just an FYI, thanks for developing this!","create_time":"$D2023-09-25T19:10:16.614Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"29f8a483928726bc","login":"axiom7","name":"Axiom","avatar_url":"https://avatars-next.observableusercontent.com/ad1f41069aec7011f5912c322e8999450aaf31252cd1d9a43f1ed7551f2c4ea1","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"929942c346668d9a","slug":"components","title":"Components","owner":{"id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann"}},"type":"notebook","body":{"title":"Linked markdown-style footnotes with tooltips","cells":[{"id":0,"value":"md`# Linked markdown-style footnotes with tooltips`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1097,"value":"mdfn`${footnotes_intro}This plugin allows you to quickly and easily write markdown-style footnotes in Observable notebooks and have them linked properly without having to keep track of all the wiring. It also displays a tooltip for each footnote reference, so viewers don't have to jump back and forth to read footnotes.\n\nI was dissatisfied with other footnote approaches for Observable and I wanted to create a convenient and reader-friendly way to add footnotes to my own notebooks. But I am happy if other people also find this useful.[^1]\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":992,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1027,"value":"viewof footnotes_intro = footlist([\n {ref: '1', text: `If you happen to find any errors or other issues, feel free to leave a comment, so I can fix them.`},\n {ref: '2', text: `If you need other languages, you can contact me or fork this notebook.`},\n {ref: '3', text: `Make sure you have no line-breaks in there, since they will break your DOM structure!`},\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1109,"value":"md`---\n\n## Source Code\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"footlink = function (ref,footnoteObj) {\n /* Builds footnote link from reference index and footlist object */\n if (footnoteObj === undefined || footnoteObj === null) return `[^${ref}]`;\n \n const list = footnoteObj.list;\n const fn = list.filter(footnote => footnote.ref === ref)[0];\n if (fn === undefined) return null;\n \n const element = `^${fn.ref}${fn.text}`;\n \n return element;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":781,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":639,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":974,"value":"isFootnoteObject = obj => {\n if (obj === undefined || obj === null) return false;\n if (typeof(obj) !== 'object') return false;\n if (!obj.list || Object.keys(obj.list[0])[0] !== 'ref' || Object.keys(obj.list[0])[1] !== 'text') return false;\n return true;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1106,"value":"md`---\n\n## Defaults\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":800,"value":"viewof footnotes = footlist([])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"loc_EN = ({header: 'Footnotes', gotoRef: 'Go to footnote reference'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"loc_DE = ({header: 'Fußnoten', gotoRef: 'Gehe zu Fußnotenreferenz'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1101,"value":"// add more translations here if needed","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"LANG = {\n switch(setLang) {\n case 'de':\n return loc_DE;\n case 'en':\n return loc_EN;\n // new translation objects need to be wired here\n default:\n return loc_EN;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"setLang = ''","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 31:"$30:body"