Streaming live at 10am (PST)

Modify BigFoot.js, so it recognizes RTF footnote markup


#1

Hey everyone,
looks like I could use some help :grin:

I'm trying to get bigfoot.js to recognize the footnote markup used by Webflow's RTF fields. But even after taking a basic Jquery course I don't even know where to start. (Probably, taking a javascript course would have been more useful but what I want seems to demand a more advanced skillset anyway.)

Okay, so Bigfoot.js is installed and running on my site. The problem is the script is looking for footnotes that look like this:

<sup data-footnote-backlink-ref="ffn3" data-footnote-ref="#fn3"> <a id="ffn3" href="#fn3" class="footnote">3</a></sup>`

but the RTF-compiler changes the markup to this:

<a href="#fn7" data-footnote-backlink-ref="" data-footnote-ref="#fn7">7</a>

As a consequence bigfoot.js is incapable of recognizing the footnotes in my blog posts.

You can see this in action here if you scroll down and look at the sidebar. You can see the tiny little bubbles that indicate a footnote. Click them, it's fun :smiley:
http://foolzevolution.webflow.io/articles

Obviously, it works because I embedded the text as code.

However, if you take a look at a page on my collection template, where (so far) I can't embed the text as code, it looks like this:
http://foolzevolution.webflow.io/posts/how-to-find-your-purpose-by-using-your-fears-as-a-compass#fn1

I know, 'meh' sums it up quite nicely.

(it might actually seem like it worked on a superficial look, because for some weird reason the Bigfoot script got confused and attached the sidebar bubbles to the first footnotes in the blog text. Once you scroll down you'll see what I mean. )

So, I figured there are basically two ways to go from here (three actually, if you'd consider not using footnotes at all, which I won't ):

  1. make the RTF 'behave', i.e. change how it treats the HTML markup. This doesn't seem a viable option to my admittedly not-so-code-savvy self; I' am, however, open to suggestions.

  2. Change what the Bigfoot.js identifies as appropriate markup to act on. That seems more doable, at least for someone who knows javascript. I have the script here:

https://www.dropbox.com/s/36b8oivmi008qfe/bigfoot.js?dl=0

But when I look at it I don't have a clue. My best guess, - after reading the usage guide on http://www.bigfootjs.com about thousand times,- is to change the 'anchorPattern' in the options part of the script:

        anchorPattern: /(fn|footnote|note)[:\-_\d]/gi,

The question is: What do I have to change here so it recognizes footnotes that look like this:

  <a href="#fn7" data-footnote-backlink-ref="" data-footnote-ref="#fn7">7</a>

Does anyone have an idea? I'd love to hear it!


#2

Hey everyone, still looking for input here.

My site is pretty much done now (Yesss!) and this is literally the only thing that I couldn't figure out for myself.

I contacted Chris Sauvé, the author of the script. So far, the only piece of info I received from him was that the script should recognize the footnote markup as it shows up in the RTF field just as good as the normal HTML markup. He said, 'the data attributes appear to be the correct data attributes that bigfoot adds.'

So maybe the problem is really something different. Maybe the text field elements 'hide' the markup from the script?

What's going on here? What am I missing?


#3

Bump bump

where are the javascript ninjas? :blush:


#4

All right, help me think this through:

Let's assume the footnote markup as it shows in the rich text elements does indeed have all the necessary attributes for the script to recognize a footnote. Theoretically.

what could prevent the script from doing its work in the rich text elements?
It must be a property of the rich text element.

This opens three concrete questions:

  1. What is the property of the rich text element that prevents the script from doing its work?
  2. If I knew that property, would it be possible to change how the rich-text element behaves via code injection?
  3. And if the answer is yes, would that be feasible?

#5