Hugo footnotes small problem

HTML & CSS
1

I’m trying to use a bottom popup (Hugo) footnote, simplyfing the code from this website.
You can see the code at work here.
As you can see the problem is that every footnote is duplicated (at least, I see it duplicated).
Could you help me to understand where I’m wrong?
Thank you!

2

I dont see any duplication…

1 Like
3

ops… and so why I see it :shushing_face: ?
I add a screenshot

duplicati
duplicati1920×856 403 KB

1 Like
4

ah sorry. You didnt mention the need to click on it. I thought you meant the bit at the bottom.

Let’s see…

Investigation Result:

You’ve loaded norm-footnotes.js twice: once on line 295, and once on line 387. Remove one of the references.

1 Like
5

Ah, ok: this is the problem!
But so far I don’t understand how this can happen. I will check better (my php files).
Thank you very much.

EDIT

Found!
Thank you again! :+1: :+1: :+1:

1 Like
6

Just an other question (more complex, I guess): how could I get the links from footnotes to their anchor (in the text body) working?
So far I can see footnotes scrolling at the end of an article, but clicking on a link to the matching anchor, nothing happens.

EDIT

Solved: a trivial problem of html. Sorry!

1 Like
7

For the benefit of those that follow: An in-page link (or hash link) looks for an id corresponding to its hash. So the problem with the page was that none of the anchors had their ID’s set.

1 Like
8

yes, you are right!
Indeed I had changed the previous html, but not the whole requested.

9

I would have a last question, not about css, but javascript: how would be possible to close the pop-up by clicking anywhere (and not only, or not at all, over the “x” inside the pop-up)?
I tried adding window.addEventListener("click", handler("close")); after (or even replacing) window.addEventListener("scroll", handler("close"));
But unsuccessfully.
My whole js code is:

function getFootnoteContent(index) {
    const id = "fn:" + index;
    const fn = document.getElementById(id);
    return fn.innerHTML.trim();
};

function footnotePopup(showIndex, showCloseBtn) {
    const popupWrapper = document.querySelector("#popup-wrapper");
    
    // Set whether to display index and/or close button. Default is true for both
    if (showIndex === undefined) {
        showIndex = true;
    } 
    
    if (showCloseBtn === undefined) {
        showCloseBtn = false;
    }

    // Create main container that will hold footnote content
    const popupContent = popupWrapper.appendChild(document.createElement("div"));
    popupContent.id = "popup-content";

    let popupIndex = null;
    if (showIndex) {
        popupIndex = popupWrapper.insertBefore(document.createElement("div"), popupContent);
        popupIndex.id = "popup-index";
    }

    let popupCloseButton = null;
    if (showCloseBtn) {
        popupCloseButton = popupWrapper.appendChild(document.createElement("div"));
        popupCloseButton.innerHTML = "[x]";
        popupCloseButton.id = "popup-close";
    }

    // Remove redundant [return] links from footnote list (optional)
    const fnReturns = document.querySelectorAll("a.footnote-return");
    fnReturns.forEach(function(fnReturn) {
        const parent = fnReturn.parentNode;
        parent.removeChild(fnReturn);
    });

    const fnRefs = document.querySelectorAll("a[id^='fnref:']");
    fnRefs.forEach(function(fnRef) {
        fnRef.addEventListener("click", handler("refs", fnRef));
    });

    window.addEventListener("scroll", handler("close"));
    //window.addEventListener("click", handler("close"));

    if (showCloseBtn) {
        popupCloseButton.addEventListener("click", handler("close"));
    }

    function handler(type, node) {
        return function(event) {
            if (type === "close") {
                popupWrapper.style.display = "none";
            }

            if (type === "refs") {
                event.preventDefault();

                const index = node.id.substring(6);

                if (showIndex) {
                    popupIndex.innerHTML = index + ".";
                }

                popupContent.innerHTML = getFootnoteContent(index);
                popupWrapper.style.display = "flex";
            }
        };
    };
};

footnotePopup(false, true);

Thank you!

10

you’d need to modify the handler function to be able to bind to document while simultaneously not stepping on the toes of a call with refs.

If you want to explore that idea, probably best to split off a new thread.

1 Like
11

Done!
Here

.