脚注をポップアップするようにしました

脚注を使うタイプなのに、脚注が見づらい。
これを雑に解決しました。

このブログはHugoで生成しているのですが、どうにも細かいところに手が届かないというか。
結構脚注を便利に使いながら文章を書くタイプだなと最近自覚したのですが、このテンプレートだと脚注をクリックしたときに結構ページが移動して見づらい。

でも、テンプレートはできるだけ触りたくない。

という事で、雑にJavaScriptで解決しました。

要はfootnoteへのanchorを検索して、そのhrefの先にあるpの内容を取得。
textをanchorのtitleに入れ¹つつ、data-htmlにHTMLも保持。
クリック時にはshowFootnoteでdata-htmlに設定されてるものをポップアップで表示する。
みたいなスクリプトです。

具体的には、headの最後に、こんなスクリプト入れてます。
IEでも一応動くように古のコーディングになってます。

    var showFootnote = function (event) {
        event.preventDefault();
        var offsettop = this.offsetTop + 20;

        var x = document.getElementById("footnote-popup");
        x.setAttribute("style", "position:absolute;left:0;right:0;top:" + offsettop + "px;z-index:100;border-radius:4px;background:white;border:1px solid #5d686f;padding-top:-1.5em;");
        x.innerHTML = this.getAttribute("data-html");

        return false;
    }
    var readyCallback = function () {
        var p = document.querySelector("article.post > .post-content");
        if (!p) return;
        var div = document.createElement("div");
        div.setAttribute("class", "main-content-wrap");
        div.setAttribute("id", "footnote-popup");
        div.innerHTML = "";
        div.setAttribute("style", "display:none;");

        var x = p.appendChild(div);
        x.addEventListener("click", function () {
            x.setAttribute("style", "display:none;");
        })

        var l = document.querySelectorAll("a.footnote-ref");
        if (l.length) {
            for (var i = 0; i < l.length; i++) {
                var elem = l[i];
                var target = (elem.getAttribute("href") + "");
                if (!target.match(/^#/)) continue;
                var id = target.substring(1);
                var targetelem = document.getElementById(id);
                if (!targetelem) continue;
                var text = targetelem.innerText;
                elem.title = text;
                var p = targetelem.querySelector("p");
                elem.setAttribute("data-html", p.innerHTML);
                elem.addEventListener("click", showFootnote);
            }
        }
    };

    if (
        document.readyState === "complete" ||
        (document.readyState !== "loading" && !document.documentElement.doScroll)
    ) {
        readyCallback();
    } else {
        document.addEventListener("DOMContentLoaded", readyCallback);
    }

同じように脚注をクリック時になんとかするのを、Hugoでのビルド時になんとかしようとしている記事を見ましたが、多分それより楽だと思います。

何かヒントになればどうぞ。