Invoking RefTagger as a standalone JS function

[dtjohnso]

See https://community.logos.com/forums/p/136670/898612.aspx for problem and one proposed solution.

[dtjohnso]

Updating this with the text of the posts on the forum:

---

Duncan Johnson | Posted: Sat Feb 25, 2017 7:22 PM

I'm seeking to integrate a JS footnote plugin (http://bigfootjs.com/) into my Wordpress child theme (https://github.com/dtjohnso/Twenty-Thirteen-Child) that also uses RefTagger.

An example page that uses my child theme is here (notice how the vast majority of the footnotes include Scripture references linked with Reftagger):

My only difficulty is in integrating Reftagger with Bigfootjs. I can get Bigfootjs to run on my page properly (see the "bigfoot" branch in my Github repo), and it does pull in the footnote text. However, since RefTagger has already parsed the page, it does not add links to the footnote popups that Bigfootjs creates. Here's a screenshot.

In my WP child theme, I have attempted to directly invoke the Reftagger code by wrapping it in a function which I would then theoretically invoke in a callback when the footnote popups are activated (at onClick and onHover, essentially).

Here's my function:

function myReftagger(d, t) {
    var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
    g.src = "https://api.reftagger.com/v2/RefTagger.js";
    s.parentNode.insertBefore(g, s);
};

In my call to bigfootjs, I'm trying to invoke it with a line something like this:

myReftagger(document,"aside")

I'm using "aside" as the second parameter because that's the HTML element that bigfootjs creates for the popover. However, it doesn't work, and I'm thinking that my main problem is that I really don't understand how the RefTagger function works.

Any pointers? (If you need more context, my relevant code is in the 'wrapper.js' file in the repo, just be sure to look at the bigfoot branch and not main).

[dtjohnso]

Additional forum post:

Matthew Miner | Replied: Thu Apr 20, 2017 2:42 PM

Was wondering this myself, so I thought I'd make an account to help since I've figured it out from here. You need to just set it up normally, storing it in a variable, and then call the tag() method from that variable.

So for you, you'd want something like:

var refTagger = {
    settings: {
        bibleVersion: "KJV",            
        socialSharing: ["twitter","facebook","google"],
        tagChapters: true
    }
};
(function(d, t) {
    var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
    g.src = "//api.reftagger.com/v2/RefTagger.js";
    s.parentNode.insertBefore(g, s);
}(document, "script"));

And then to invoke it on your aside, you'd do:

refTagger.tag(document.getElementsByTagName("aside")[0]);