lemonmade/bigfoot — pull request #19 by bdesham (2014-07-09 16:30:50+00:00)
Title: Add the footnote to the DOM before firing the activationCallback

I am trying to get Bigfoot to play nicely with [MathJax], which typesets mathematical expressions. They don’t work together out of the box because MathJax (quite reasonably) doesn’t look for math markup in the `data-` attributes that Bigfoot uses to store footnotes’ contents. I found [a workaround] that works okay: wait until MathJax is finished with its processing before running Bigfoot. That way, the footnote content has already been typeset when Bigfoot moves it into the `data-` attributes.

[MathJax]: http://www.mathjax.org
[a workaround]: http://esham.io/2014/07/mathjax-and-bigfoot

This makes page rendering seem slow, though, and I’d prefer to let Bigfoot and MathJax run when they usually do: as soon as they load or on `document.ready` or whatever. This would mean that popovers would have to be typeset on demand. I want to be able to specify an `activationCallback` like this:

```
function bigfootActivateCallback($popover) {
// $link is the element on which all of the data- attributes are set
var $link = $popover.parents('.footnote-container').find('a.footnote-button');

if (! $link.data('mathjax-processed')) {
var wrapper_node = $popover.find('.footnote-content-wrapper')[0];

// Tell MathJax to typeset the content of the footnote
MathJax.Hub.Queue(['Typeset', MathJax.Hub, wrapper_node]);

// Once MathJax has finished, cache the rendered content for later use
MathJax.Hub.Queue(function () {
$link.attr('data-footnote-content', wrapper_node.innerHTML);
$link.data('mathjax-processed', true);
});
}
}
```

What’s happening here is that popovers are typeset when they’re opened. To avoid doing this processing more than once, the `data-footnote-content` attribute is replaced with the newly-typeset version and the `mathjax-processed` data attribute is set to indicate that this has taken place. When the same popover is opened a second time, no typesetting needs to take place.

I have tried this simpler version of the callback:

```
function bigfootActivateCallback($popover) {
// Tell MathJax to typeset the content of the footnote
MathJax.Hub.Queue(['Typeset', MathJax.Hub, $popover[0]]);
}
```

This works great: MathJax typesets each footnote on demand, and it’s even fast enough that the user only ever sees the typeset version, without a flash of untypeset content.

The problem is trying to cache this rendered version for later. When the `activateCallback` is run, the `$popover` jQuery object is just floating in the ether, and so it’s not possible to navigate the DOM to find the `a` element with the `data-footnote-content` attribute that we want to change.

This problem can be fixed by exchanging the following two lines in `bigfoot.js`:

```
try { settings.activateCallback($content); } catch(err) {}
$content.insertAfter($buttons);
```

With this change, the activation callback above works correctly: math is typeset the first time a footnote is opened and the typeset version is cached in case that footnote is opened again.