search

vaetas / hugo-footnotes-popup

Pure JavaScript plugin to make your footnotes displayed in a panel. Works with footnotes generated from Markdown in Hugo.
https://www.vaetas.cz/posts/hugo-footnotes-popup/
MIT License
26 stars 3 forks source link

hide footnote clicking anyywhere #12

Open DoctorSubtilis opened 3 years ago

DoctorSubtilis commented 3 years ago

Thank you for your excellent work!
I tested it on my website (www.filosofico.org/gnoseologia/verita-tomismo.php), but due to some changes on the code (I have eliminated sup tag), the script works uncompletely: a) I can't see the pointer over the "x", b) the "x" is not at right side, if the text is small (like in the note 6 of the webpage linked above).
this is the code I've changed: 

const fnRefs = document.querySelectorAll("a[id^='fnref:']");

Therefore I'd like know if it could be possible 1) to fix the two above problems, and 2) hide the footnote clicking everywhere within it (the #popup-content), and not only over the "x". Thanks!

EDIT

I had found another, simpler way for footnotes: you can see it here www.filosofico.org/gnoseologia/verita-blondel1.php
This requires a very simple code, as you can see in the source code. But the problem is that if you don't click over the anchor the footnote remain, and the new footnote appears over the previous.

vaetas commented 3 years ago

x button alignment and pointer should be customized within your CSS files, not the JS. (If I understand your problem correctly.)

Currently, the footnote is closed either after scroll event or by pressing the x button. I don't have the time to properly add new method for closing right now.

I would consider a PR if it does not break anything.

DoctorSubtilis commented 3 years ago

Thanks!