https://www.c2es.org/wp-content/themes/c2es/resources/js/footnotes.js

1window.addEventListener('load', () => {
2  const footnoteNotes = document.querySelectorAll('.modern-footnotes-footnote__note');
3  if (footnoteNotes.length === 0) return;
4
5  const footnotesSection = document.createElement('section');
6  footnotesSection.className = 'color-block color-block--bg-white color-block--footnotes';
7
8  const heading = document.createElement('h2');
9  heading.textContent = 'Endnotes';
10  heading.classList.add('color-block__title');
11  const header = document.createElement('div');
12  header.className = 'color-block__header';
13  header.appendChild(heading);
14  footnotesSection.appendChild(header);
15
16  const ol = document.createElement('ol');
17
18  footnoteNotes.forEach(fn => {
19    // Get footnote number from data-mfn attribute
20    const num = fn.getAttribute('data-mfn');
21
22    // Find corresponding inline footnote <sup> by matching data-mfn attribute
23    const inlineSup = document.querySelector(`.modern-footnotes-footnote[data-mfn="${num}"]`);
24
25    // Prepare backlink href and id
26    let supId = inlineSup ? inlineSup.id : null;
27    if (!supId && inlineSup) {
28      supId = `mfn-ref-${num}`;
29      inlineSup.id = supId; // assign if missing
30    }
31
32    const li = document.createElement('li');
33
34    if (supId) {
35      // Create backlink to inline footnote
36      const backLink = document.createElement('a');
37      backLink.href = `#${supId}`;
38      backLink.textContent = `${num}`;
39      backLink.style.marginRight = '0.5em';
40      backLink.setAttribute('aria-label', `Back to footnote ${num}`);
41      li.appendChild(backLink);
42    } else {
43      // Just the number if no backlink possible
44      li.textContent = `${num}. `;
45    }
46
47    // Append the footnote content (HTML)
48    const contentSpan = document.createElement('span');
49    contentSpan.innerHTML = fn.innerHTML.trim();
50    li.appendChild(contentSpan);
51
52    ol.appendChild(li);
53  });
54
55  footnotesSection.appendChild(ol);
56
57  const colorBlocks = document.querySelectorAll('.color-block');
58  if (colorBlocks.length === 0) {
59    document.body.appendChild(footnotesSection);
60  } else {
61    const lastBlock = colorBlocks[colorBlocks.length - 1];
62    lastBlock.parentNode.insertBefore(footnotesSection, lastBlock.nextSibling);
63  }
64});
65
66const footnoteExpandable = document.querySelector('.modern-footnotes-footnote__note--expandable');
67
68const observer = new MutationObserver(() => {
69  const isVisible = window.getComputedStyle(footnoteExpandable).display === 'block';
70
71  if (isVisible && !footnoteExpandable.classList.contains('animating')) {
72    // Apply starting height
73    footnoteExpandable.classList.add('animating');
74    footnoteExpandable.style.height = '0px';
75
76    requestAnimationFrame(() => {
77      // Trigger height transition
78      footnoteExpandable.style.transition = 'height 0.3s ease';
79      footnoteExpandable.style.height = footnoteExpandable.scrollHeight + 'px';
80
81      footnoteExpandable.addEventListener('transitionend', () => {
82        footnoteExpandable.style.height = '';
83        footnoteExpandable.classList.remove('animating');
84      }, { once: true });
85    });
86  }
87});
88
89if (footnoteExpandable) {
90  observer.observe(footnoteExpandable, {
91    attributes: true,
92    attributeFilter: ['style', 'class'],
93  });
94}