{"id":2734,"date":"2023-03-02T05:57:36","date_gmt":"2023-03-02T04:57:36","guid":{"rendered":"https:\/\/digitalia.culturanuova.net\/blog\/?p=2734"},"modified":"2023-03-02T05:57:36","modified_gmt":"2023-03-02T04:57:36","slug":"pop-up-footnotes-at-the-window-bottom","status":"publish","type":"post","link":"https:\/\/digitalia.culturanuova.net\/blog\/?p=2734","title":{"rendered":"Pop-up footnotes (at the window bottom)"},"content":{"rendered":"\n

A good starting point is the Hugo footnotes <\/a><\/p>\n\n\n\n

But I have done some improvements (according to my needs), as the following:<\/p>\n\n\n\n

    \n
  1. link (at the end of a html page) the file footnotes.js, with this content:<\/li>\n<\/ol>\n\n\n\n
    function getFootnoteContent(index) {\n  const id = \"fn:\" + index;\n  const fn = document.getElementById(id);\n  return fn.innerHTML.trim();\n}\n\nfunction footnotePopup(showIndex, showCloseBtn) {\n  const popupWrapper = document.querySelector(\"#popup-wrapper\");\n\n  \/\/ Set whether to display index and\/or close button. Default is true for both\n  if (showIndex === undefined) {\n    showIndex = true;\n  }\n\n  if (showCloseBtn === undefined) {\n    showCloseBtn = false;\n  }\n\n  \/\/ Create main container that will hold footnote content\n  const popupContent = popupWrapper.appendChild(document.createElement(\"div\"));\n  popupContent.id = \"popup-content\";\n\n  let popupIndex = null;\n  if (showIndex) {\n    popupIndex = popupWrapper.insertBefore(\n      document.createElement(\"div\"),\n      popupContent\n    );\n    popupIndex.id = \"popup-index\";\n  }\n\n  let popupCloseButton = null;\n  if (showCloseBtn) {\n    popupCloseButton = popupWrapper.appendChild(document.createElement(\"div\"));\n    popupCloseButton.innerHTML = \"[x]\";\n    popupCloseButton.id = \"popup-close\";\n  }\n\n  \/\/ Remove redundant [return] links from footnote list (optional)\n  const fnReturns = document.querySelectorAll(\"a.footnote-return\");\n  fnReturns.forEach(function (fnReturn) {\n    const parent = fnReturn.parentNode;\n    parent.removeChild(fnReturn);\n  });\n\n  const fnRefs = document.querySelectorAll(\"a[id^='fnref:']\");\n  fnRefs.forEach(function (fnRef) {\n    fnRef.addEventListener(\"click\", handler(\"refs\", fnRef));\n  });\n\n  \/\/window.addEventListener(\"scroll\", handler(\"close\"));\n  \n  document.addEventListener(\n    \"click\",\n    function (event) {\n      if (\n        event.target.matches(\"a[id^='fnref']\") ||\n        event.target.matches(\"#popup-content\")\n      ) {\n        return;\n      }\n      popupWrapper.style.display = \"none\";\n    },\n    false\n  );\n\n  if (showCloseBtn) {\n    popupCloseButton.addEventListener(\"click\", handler(\"close\"));\n  }\n\n  function handler(type, node) {\n    console.log(\"test\");\n    return function (event) {\n      if (type === \"close\") {\n        popupWrapper.style.display = \"none\";\n      }\n\n      if (type === \"refs\") {\n        event.preventDefault();\n\n        const index = node.id.substring(6);\n\n        if (showIndex) {\n          popupIndex.innerHTML = index + \".\";\n        }\n\n        popupContent.innerHTML = getFootnoteContent(index);\n        popupWrapper.style.display = \"flex\";\n      }\n    };\n  }\n}\n\nfootnotePopup(false, true);\n <\/code><\/pre>\n\n\n\n
    2) Put, before that link, the div where the note will be shown<\/p>\n\n\n\n
    <div class=\\\"bottom-panel\\\" id=\\\"bottom-panel\\\">\n <div class=\\\"popup-wrapper\\\" id=\\\"popup-wrapper\\\"><\/div>\n<\/div> <\/code><\/pre>\n\n\n\n
    3) Modify the anchor tag (within your main text), with something like <\/p>\n\n\n\n
    <a href=\"#n1\" id=\"fnref:1\">[1]<\/a> <\/code><\/pre>\n\n\n\n
    4) and the footnote should be like the following:<\/p>\n\n\n\n
    <p id=\"fn:1\"><a href=\"#fnref:1\">[1]<\/a> your footnote here.<\/p> <\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    A good starting point is the Hugo footnotes But I have done some improvements (according to my needs), as the following: 2) Put, before that link, the div where the note will be shown 3) Modify the anchor tag (within your main text), with something like 4) and the footnote should be like the following:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[742,747,565,566],"tags":[799],"class_list":["post-2734","post","type-post","status-publish","format-standard","hentry","category-css-webmaster","category-javascript","category-office","category-webmaster","tag-footnote"],"_links":{"self":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2734"}],"version-history":[{"count":1,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2734\/revisions"}],"predecessor-version":[{"id":2735,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2734\/revisions\/2735"}],"wp:attachment":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}