HTML: inline-svg & d3 plugins

merges manubot/rootstock#375 supersedes manubot/rootstock#373 By default, these plugins are disabled. Enable in `build/pandoc/defaults/html.yaml`. Co-authored-by: Matthew Turk <[email protected]>
greenelab · Oct 16, 2020 · 17492f1 · 17492f1
1 parent 37a1149
commit 17492f1
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 8 deletions.
diff --git a/build/pandoc/defaults/html.yaml b/build/pandoc/defaults/html.yaml
@@ -2,8 +2,11 @@
 # Load on top of common defaults.
 to: html5
 output-file: output/manuscript.html
+# include-before-body:
+# - build/plugins/d3.html
 include-after-body:
 - build/themes/default.html
+# - build/plugins/inline-svg.html
 - build/plugins/anchors.html
 - build/plugins/accordion.html
 - build/plugins/tooltips.html

diff --git a/build/plugins/d3.html b/build/plugins/d3.html
@@ -0,0 +1,16 @@
+<!-- d3 plugin -->
+
+<script
+    src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"
+    integrity="sha512-C2RveGuPIWqkaLAluvoxyiaN1XYNe5ss11urhZWZYBUA9Ydgj+hfGKPcxCzTwut1/fmjEZR7Ac35f2aycT8Ogw=="
+    crossorigin="anonymous"
+>
+    // /////////////////////////
+    // DESCRIPTION
+    // /////////////////////////
+
+    // This third-party plugin 'D3' allows you to create complex, dynamic,
+    // interactive, data-driven visualizations in SVG.
+
+    // https://d3js.org/
+</script>
diff --git a/build/plugins/inline-svg.html b/build/plugins/inline-svg.html
@@ -0,0 +1,62 @@
+<!-- inline svg plugin -->
+
+<script>
+  (function() {
+      // /////////////////////////
+      // DESCRIPTION
+      // /////////////////////////
+
+      // This Manubot plugin fetches the text source code of SVGs in <img> tags,
+      // and inserts it into the document in-place. This provides many
+      // advantages, such as being able to style SVGs globally from the CSS
+      // themes, and being able to make SVGs interactive with JavaScript and D3.
+      // If you have a script that expects SVGs to be inlined, wait for an
+      // "SVGLoaded" event before running it.
+
+      // Note: This requires the page to be served from a server to work
+      // See: https://stackoverflow.com/a/11063963/2180570
+      // Tip: Use the manubot commands to open the page in a local webserver
+      // See: https://github.com/manubot/rootstock#local-execution
+
+      // /////////////////////////
+      // SCRIPT
+      // /////////////////////////
+
+      // start script
+      async function start() {
+          // get all <img> tags that have "src" attributes that end with ".svg"
+          const imgs = document.querySelectorAll('img[src$=".svg"]');
+          const inlineSvgs = Array.from(imgs).map(inlineSvg);
+          await Promise.all(inlineSvgs);
+
+          // dispatch "inline finished" event
+          document.dispatchEvent(new Event('SVGLoaded'));
+      }
+
+      // take an svg <img> tag, fetch its source code, and replace it 
+      async function inlineSvg(img) {
+          try {
+              // fetch svg source code
+              const response = await fetch(img.src);
+              if (!response.ok) throw new Error('Couldn\'t get SVG source');
+              const source = await response.text();
+              if (!source.trim()) throw new Error('No SVG source');
+              // parse specifically as svg, create new (hidden) dom node
+              const svg = new DOMParser()
+                  .parseFromString(source, 'image/svg+xml')
+                  .querySelector('svg');
+              if (!svg) throw new Error('Couldn\'t parse SVG');
+              // transfer original img attributes into new svg
+              for (const { name, value } of img.attributes)
+                  svg.setAttribute(name, value);
+              // replace original image with new svg
+              img.outerHTML = svg.outerHTML;
+          } catch (error) {
+              console.log(error);
+          }
+      }
+
+      // start script when document is finished loading
+      window.addEventListener('load', start);
+  })();
+</script>
diff --git a/build/plugins/math.html b/build/plugins/math.html
@@ -1,17 +1,21 @@
-<!-- math plugin configuration -->
+<!-- mathjax plugin configuration -->
 
 <script type="text/x-mathjax-config">
     MathJax.Hub.Config({
         "CommonHTML": { linebreaks: { automatic: true } },
         "HTML-CSS": { linebreaks: { automatic: true } },
         "SVG": { linebreaks: { automatic: true } },
         "fast-preview": { disabled: true }
-    });
+  });
 </script>
 
-<!-- math plugin -->
+<!-- mathjax plugin -->
 
-<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML'>
+<script
+    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-MML-AM_CHTML.js"
+    integrity="sha512-sRJwTwSmIAJfESgwGDn84X0s72u/n6qBjPShCGXi307x3ZFynu/u2A8652KZhmvjP0U0zeOFCxoMtj9imy9nOQ=="
+    crossorigin="anonymous"
+>
     // /////////////////////////
     // DESCRIPTION
     // /////////////////////////

diff --git a/build/themes/default.html b/build/themes/default.html
@@ -216,15 +216,17 @@
     }
 
     /* figure image element */
-    figure img {
+    figure > img,
+    figure > svg {
         max-width: 100%;
         display: block;
         margin-left: auto;
         margin-right: auto;
     }
 
     /* figure auto-number */
-    img + figcaption > span:first-of-type {
+    img + figcaption > span:first-of-type,
+    svg + figcaption > span:first-of-type {
         font-weight: bold;
         margin-right: 5px;
     }
@@ -804,7 +806,8 @@
         }
 
         /* tooltip copy of <img> */
-        #tooltip_content > figure > img {
+        #tooltip_content > figure > img,
+        #tooltip_content > figure > svg {
             max-height: 260px;
         }
 
@@ -1055,7 +1058,7 @@
 
     @media only screen {
         /* regular <img> in document when hovered */
-        .lightbox_document_img:hover {
+        img.lightbox_document_img:hover {
             cursor: pointer;
         }