Patch distill.pub JS library to correctly place footnotes tooltip in …

…table

fix #411

DESCRIPTION

@@ -1,7 +1,7 @@
 Type: Package
 Package: distill
 Title: 'R Markdown' Format for Scientific and Technical Writing
-Version: 1.3.7
+Version: 1.3.8
 Authors@R: c(
     person("JJ", "Allaire", , "[email protected]", role = c("aut", "cre"),
            comment = c(ORCID = "0000-0003-0174-9868")),

NEWS.md

@@ -1,5 +1,6 @@
 # distill (development version)
 
+-   Footnotes inserted in tables have now their tooltip correctly place (thanks, \\\@RMRubert, #411).
 -   Fix an issue with Leaflet Markers not showing when using non default layout (thanks, \\\@AndersFenger, #106).
 -   `code_folding = FALSE` set on a chunk is now correctly taken into account and does not enforce `echo = TRUE`. As a reminder, setting `code_folding: true` in YAML header will enforce `echo = TRUE` on chunk, unless `code_folding` is unset on a per-chunk basis (thanks, \\\@werkstattcodes, #297).
 -   `create_website()` now works when no `dir` is provided and prompted to user.

inst/rmarkdown/templates/distill_article/resources/distill.html

@@ -1161,6 +1161,31 @@
       });
     });
 
+    // fix footnotes in tables (#411)
+    // replacing broken distill.pub feature
+    $('table d-footnote').each(function() {
+      // we replace internal showAtNode methode which is triggered when hovering a footnote
+      this.hoverBox.showAtNode = function(node) {
+        // ported from https://github.com/distillpub/template/pull/105/files
+        calcOffset = function(elem) {
+            let x = elem.offsetLeft;
+            let y = elem.offsetTop;
+            // Traverse upwards until an `absolute` element is found or `elem`
+            // becomes null.
+            while (elem = elem.offsetParent && elem.style.position != 'absolute') {
+                x += elem.offsetLeft;
+                y += elem.offsetTop;
+            }
+
+            return { left: x, top: y };
+        }
+        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop
+        const bbox = node.getBoundingClientRect();
+        const offset = calcOffset(node);
+        this.show([offset.left + bbox.width, offset.top + bbox.height]);
+      }
+    })
+
     // clear polling timer
     clearInterval(tid);
 

tests/manual/footnotes-in-tables.Rmd

@@ -0,0 +1,22 @@
+---
+title: "Footnotes inside tables"
+date: 04-05-2022
+output: distill::distill_article
+---
+
+Example of using footnotes inside tables. The tooltip should be correctly placed below the hovered text. Like footnotes in paragraph[^1]
+
+[^1]: like this
+
+|      Genre       | Songs |              Form Song              |
+|:----------------:|:-----:|:-----------------------------------:|
+| alternative rock |  393  |          Muse - Resistance          |
+|   ambient[^2]    |  19   |       Mauro Picotto - Adiemus       |
+|      blues       |  11   |       Leonard Cohen - Suzanne       |
+|   classic rock   |  710  | Dire Straits - Sultans of Swing[^3] |
+
+[^2]: Test 2
+
+[^3]: Some other content
+
+> From issue <https://github.com/rstudio/distill/issues/411>