Endnotes to footnotes

Work with pagedjs v. min: 0.2.0

This script has no dependencies.

If you’re using pandoc to produce documents, you may find it helpful to convert endnotes into footnotes. Fortunately, this script can help you do just that!

You’ll need to specify the elements to look for by assigning the query to endNoteCalloutsQuery. Here’s an example of how to do that:

const endNoteCalloutsQuery = ".footnote-ref";

This script will then locate all the footnote links and recreate the corresponding spans, placing them in the correct location within the content.

Once the footnotes have been converted, you can use the following CSS to style them:

.pagedjs-end-to-footnote {
  float: footnote;
}

/* define the position of the footnote on the page (only bottom is possible for now) */

@page {
  @footnote {
    float: bottom;
  }
}

::footnote-call {
  color: red;
  font-weight: 400;
  line-height: 0;
}

::footnote-marker {
  color: red;
  font-weight: 400;
  line-height: 0;
}

To use the script, simply add it to your header after pagedjs has been called:

<script src="https://pagedjs.org/plugins/pagedjs-endnotesToFootnotes.js"></script>

And that’s it! With this script, converting endnotes to footnotes is a breeze.

The code

// script for pagedjs
//
// get the object you wanna create a note from
//
//

const endNoteCalloutsQuery = ".footnote-ref";

// the hook
class endToFootNotes extends Paged.Handler {
  constructor(chunker, polisher, caller) {
    super(chunker, polisher, caller);
  }

  beforeParsed(content) {
    console.log("parsef");
    let callouts = content.querySelectorAll(endNoteCalloutsQuery);
    callouts.forEach((callout) => {
      console.log(callout.hash)
      // console.log(callout.href)
      // console.log(`#${callout.href.callout.href.hash}`)
      let note = content.querySelector(callout.hash);
      console.log(note)
      if(!note) {return console.warn(`there is no note with the id of ${callout.hash}`)}
      let noteContent = `<span class="pagedjs-end-to-footnote">${note.innerHTML}</span>`;
      callout.insertAdjacentHTML("afterend", noteContent);
      callout.remove();
      note.remove();
    });
  }
}
Paged.registerHandlers(endToFootNotes);